/*
 * Magazine: the article page, post cards and pager (docs/ROADMAP-MAGAZINE.md).
 *
 * Hand-written, unlike the verbatim section sheets beside it: these two surfaces deliberately leave
 * the source's look. Colour and font come only from the theme's --esp-* tokens, so the palette chosen
 * in the theme settings reaches the magazine too; every other shade is mixed from those tokens.
 * Everything is scoped under .esp-mag, which is also what lets these rules beat the source's global
 * resets in base.css (li{display:inline-block}, p{margin:0}, a:focus{outline:0}) by one class instead
 * of !important.
 */

/* ------------------------------------------------------------------------------------ tokens ---- */

.esp-mag {
    --mag-bg: var(--esp-bg, #1a1a1a);
    --mag-text: var(--esp-text, #fff);
    --mag-copy: color-mix(in srgb, var(--mag-text) 86%, var(--mag-bg));
    --mag-muted: color-mix(in srgb, var(--mag-text) 62%, var(--mag-bg));
    --mag-surface: color-mix(in srgb, var(--mag-text) 4%, var(--mag-bg));
    --mag-surface-2: color-mix(in srgb, var(--mag-text) 8%, var(--mag-bg));
    --mag-line: color-mix(in srgb, var(--mag-text) 13%, var(--mag-bg));
    --mag-green: var(--esp-accent-start, #009441);
    --mag-gold: var(--esp-accent-end, #d6ab04);
    --mag-link: var(--esp-link, #fff5d1);
    --mag-link-hover: var(--esp-link-hover, #00ae4d);
    /* The site's button frames run green to gold; here green sits on the reading (right) edge. */
    --mag-charge: linear-gradient(to left, var(--mag-green), var(--mag-gold));
    --mag-radius-lg: 18px;
    --mag-radius: 12px;
    color: var(--mag-text);
}

/* -------------------------------------------------------------------------------- primitives ---- */

.esp-mag a:focus-visible,
.esp-mag button:focus-visible {
    outline: 2px solid var(--mag-gold);
    outline-offset: 3px;
    border-radius: 6px;
}

/* A category or tag. */
.esp-mag .esp-chip {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    min-height: 28px;
    padding: 0 .85em;
    border: 1px solid color-mix(in srgb, var(--mag-green) 55%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--mag-green) 12%, transparent);
    color: var(--mag-link);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
    transition: border-color .2s ease, color .2s ease;
}

.esp-mag a.esp-chip:hover {
    border-color: var(--mag-gold);
    color: var(--mag-gold);
}

/* Date, reading time and other facts about a post: icons carry the meaning, so no separators. */
.esp-mag .esp-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    margin: 0;
    padding: 0;
    color: var(--mag-muted);
    font-size: 14px;
    line-height: 1.6;
}

.esp-mag .esp-meta > li {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-size: inherit;
}

.esp-mag .esp-meta i {
    color: var(--mag-gold);
    font-size: .95em;
}

/* ----------------------------------------------------------------------------------- article ---- */

/* The article spans the full container, edge to edge with the header above it: the owner asked for no
   narrow reading column (2026-11-06), so heading, body and footer carry no max-width either. */
.esp-mag .esp-article {
    margin: 8px 0 64px;
    view-timeline: --esp-article block;
}

/* The page's one moving part: a thin charge bar along the top edge that fills from the reading edge as
   the article is read. Scroll-driven, so it answers the reader's own scrolling; hidden where unsupported. */
.esp-mag .esp-article-charge {
    display: none;
}

@supports (animation-timeline: view()) {
    .esp-mag .esp-article-charge {
        display: block;
        position: fixed;
        inset-block-start: 0;
        inset-inline: 0;
        z-index: 1040;
        height: 3px;
        background: var(--mag-charge);
        transform: scaleX(0);
        transform-origin: right;
        animation: esp-article-charge linear both;
        animation-timeline: --esp-article;
        animation-range: contain 0% contain 100%;
    }

    @keyframes esp-article-charge {
        to { transform: scaleX(1); }
    }
}

/* Path: home › magazine › this article. */
.esp-mag .esp-crumbs ol {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 24px;
    padding: 0;
    color: var(--mag-muted);
    font-size: 13px;
    line-height: 1.8;
}

.esp-mag .esp-crumbs li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: none;
    font-size: inherit;
}

.esp-mag .esp-crumbs li + li::before {
    content: "\f053";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 9px;
    opacity: .7;
}

/* The article's own title can be long; it gives way first. */
.esp-mag .esp-crumbs li[aria-current] {
    flex: 1 1 auto;
    min-width: 0;
}

.esp-mag .esp-crumbs li[aria-current] span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.esp-mag .esp-crumbs a {
    color: var(--mag-muted);
}

.esp-mag .esp-crumbs a:hover {
    color: var(--mag-link);
}

.esp-mag .esp-article-cover {
    margin: 0 0 40px;
    overflow: hidden;
    border: 1px solid var(--mag-line);
    border-radius: var(--mag-radius-lg);
    background: var(--mag-surface);
}

.esp-mag .esp-article-cover img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    /* At full container width 16:9 would be ~740px tall and push the title below the fold. */
    max-height: 560px;
    object-fit: cover;
}

.esp-mag .esp-article-head {
    position: relative;
    margin-bottom: 36px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--mag-line);
}

/* The start of the divider is charged: the brand gradient on the first stretch of the line. */
.esp-mag .esp-article-head::after {
    content: "";
    position: absolute;
    inset-block-end: -1px;
    inset-inline-start: 0;
    width: 96px;
    height: 2px;
    border-radius: 2px;
    background: var(--mag-charge);
}

.esp-mag .esp-article-title {
    margin: 18px 0 0;
    color: var(--mag-text);
    font-size: clamp(26px, 20px + 1.5vw, 40px);
    font-weight: 700;
    line-height: 1.5;
    text-transform: none;
    text-wrap: balance;
}

/* ------------------------------------------------------------------------------------- prose ---- */

.esp-mag .esp-prose {
    color: var(--mag-copy);
    font-size: clamp(16px, 15px + .3vw, 18px);
    line-height: 2.05;
    text-align: start;
    text-wrap: pretty;
    overflow-wrap: break-word;
}

.esp-mag .esp-prose p {
    margin: 0 0 1.4em;
}

.esp-mag .esp-prose > :last-child {
    margin-bottom: 0;
}

.esp-mag .esp-prose :is(h2, h3, h4) {
    position: relative;
    margin: 2.1em 0 .75em;
    color: var(--mag-text);
    font-weight: 700;
    line-height: 1.6;
    text-transform: none;
    text-wrap: balance;
}

.esp-mag .esp-prose h2 {
    padding-inline-start: 18px;
    font-size: 1.45em;
}

.esp-mag .esp-prose h2::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: .3em;
    width: 4px;
    border-radius: 4px;
    background: linear-gradient(var(--mag-green), var(--mag-gold));
}

.esp-mag .esp-prose h3 { font-size: 1.22em; }
.esp-mag .esp-prose h4 { font-size: 1.08em; color: var(--mag-gold); }

.esp-mag .esp-prose a {
    color: var(--mag-link);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--mag-gold) 65%, transparent);
    text-decoration-thickness: 1px;
    text-underline-offset: .4em;
}

.esp-mag .esp-prose a:hover {
    color: var(--mag-link-hover);
    text-decoration-color: currentColor;
}

.esp-mag .esp-prose :is(strong, b) {
    color: var(--mag-text);
    font-weight: 700;
}

.esp-mag .esp-prose :is(ul, ol) {
    margin: 0 0 1.4em;
    padding-inline-start: 1.5em;
}

.esp-mag .esp-prose ul { list-style: disc; }
.esp-mag .esp-prose ol { list-style: persian; }

.esp-mag .esp-prose li {
    display: list-item;
    margin-bottom: .45em;
    font-size: inherit;
    list-style: inherit;
}

.esp-mag .esp-prose li::marker {
    color: var(--mag-green);
}

.esp-mag .esp-prose blockquote {
    margin: 2em 0;
    padding: 18px 24px;
    border-inline-start: 3px solid var(--mag-gold);
    border-start-end-radius: var(--mag-radius);
    border-end-end-radius: var(--mag-radius);
    background: var(--mag-surface);
    color: var(--mag-text);
    font-size: 1.04em;
}

.esp-mag .esp-prose blockquote > :last-child {
    margin-bottom: 0;
}

.esp-mag .esp-prose img,
.esp-mag .esp-prose video,
.esp-mag .esp-prose iframe {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 2em auto;
    border-radius: var(--mag-radius);
}

.esp-mag .esp-prose figure {
    margin: 2em 0;
}

.esp-mag .esp-prose figure img {
    margin: 0 auto;
}

.esp-mag .esp-prose figcaption {
    margin-top: .8em;
    color: var(--mag-muted);
    font-size: 14px;
    text-align: center;
}

/* Wide tables scroll inside the column instead of widening the page. */
.esp-mag .esp-prose table {
    display: block;
    max-width: 100%;
    margin: 2em 0;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: .92em;
    line-height: 1.8;
}

.esp-mag .esp-prose :is(th, td) {
    padding: .6em .9em;
    border: 1px solid var(--mag-line);
    text-align: start;
}

.esp-mag .esp-prose th {
    background: var(--mag-surface-2);
    color: var(--mag-text);
    font-weight: 600;
}

.esp-mag .esp-prose hr {
    height: 1px;
    margin: 2.5em 0;
    border: 0;
    background: var(--mag-line);
    opacity: 1;
}

.esp-mag .esp-prose code {
    padding: .1em .4em;
    border-radius: 6px;
    background: var(--mag-surface-2);
    font-size: .9em;
}

/* ------------------------------------------------------------------------------ article foot ---- */

.esp-mag .esp-article-foot {
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--mag-line);
}

.esp-mag .esp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 28px;
    padding: 0;
}

.esp-mag .esp-tags li {
    display: block;
}

.esp-mag .esp-tags i {
    font-size: .8em;
    opacity: .75;
}

.esp-mag .esp-neighbours {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.esp-mag .esp-neighbour {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 44px;
    padding: 16px 20px;
    border: 1px solid var(--mag-line);
    border-radius: var(--mag-radius);
    background: var(--mag-surface);
    color: var(--mag-text);
    transition: border-color .2s ease, background-color .2s ease;
}

.esp-mag .esp-neighbour:hover {
    border-color: color-mix(in srgb, var(--mag-gold) 70%, transparent);
    background: var(--mag-surface-2);
    color: var(--mag-text);
}

/* «Next» keeps its column and mirrors its alignment, so the pair reads outward from the middle. */
.esp-mag .esp-neighbour--next {
    grid-column: 2;
    text-align: end;
}

.esp-mag .esp-neighbour-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--mag-muted);
    font-size: 13px;
}

.esp-mag .esp-neighbour--next .esp-neighbour-label {
    justify-content: flex-end;
}

.esp-mag .esp-neighbour-label i {
    color: var(--mag-gold);
    font-size: .9em;
}

.esp-mag .esp-neighbour-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.8;
}

@media (max-width: 575.98px) {
    .esp-mag .esp-article-cover {
        margin-bottom: 28px;
        border-radius: var(--mag-radius);
    }

    .esp-mag .esp-neighbours {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Stacked, both cards read from the same edge. */
    .esp-mag .esp-neighbour--next {
        grid-column: auto;
        text-align: start;
    }

    .esp-mag .esp-neighbour--next .esp-neighbour-label {
        justify-content: flex-start;
    }
}

/* ------------------------------------------------------------------------------ list heading ---- */

.esp-mag-list {
    margin: 8px 0 64px;
}

.esp-mag .esp-mag-head {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 24px;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--mag-line);
}

/* Same charged start of the divider as the article heading. */
.esp-mag .esp-mag-head::after {
    content: "";
    position: absolute;
    inset-block-end: -1px;
    inset-inline-start: 0;
    width: 96px;
    height: 2px;
    border-radius: 2px;
    background: var(--mag-charge);
}

.esp-mag .esp-mag-title {
    margin: 0;
    color: var(--mag-text);
    font-size: clamp(24px, 20px + 1vw, 32px);
    font-weight: 700;
    line-height: 1.5;
    text-transform: none;
}

.esp-mag .esp-mag-count {
    color: var(--mag-muted);
    font-size: 14px;
}

.esp-mag .esp-mag-description {
    max-width: 42rem;
    margin: -12px 0 32px;
    color: var(--mag-copy);
    line-height: 1.9;
}

.esp-mag .esp-mag-empty {
    padding: 56px 24px;
    border: 1px dashed var(--mag-line);
    border-radius: var(--mag-radius-lg);
    color: var(--mag-muted);
    text-align: center;
}

/* -------------------------------------------------------------------------------------- cards ---- */

.esp-mag .esp-card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

@media (min-width: 576px) {
    .esp-mag .esp-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .esp-mag .esp-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.esp-mag .esp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--mag-line);
    border-radius: var(--mag-radius-lg);
    background: var(--mag-surface);
    transition: border-color .2s ease;
}

/* Pointing at a card charges its frame: the site's own green-to-gold button border. */
.esp-mag .esp-card:hover {
    border-color: transparent;
    background: linear-gradient(var(--mag-surface), var(--mag-surface)) padding-box, var(--mag-charge) border-box;
}

.esp-mag .esp-card-media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--mag-surface-2);
}

.esp-mag .esp-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A post without a picture: the site's battery mark on a faint green glow, not a grey «150 x 150». */
.esp-mag .esp-card-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background:
        url(../icons/accumulator.svg) center / 64px auto no-repeat,
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--mag-green) 16%, transparent), transparent 62%),
        var(--mag-surface-2);
}

.esp-mag .esp-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 12px;
    padding: 20px 22px 22px;
}

.esp-mag .esp-card .esp-meta {
    font-size: 13px;
}

/* The category link sits above the stretched title link. */
.esp-mag .esp-card .esp-chip {
    position: relative;
    z-index: 2;
}

.esp-mag .esp-card-title {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--mag-text);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.75;
    text-transform: none;
}

.esp-mag .esp-card-title a {
    color: inherit;
}

.esp-mag .esp-card-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--mag-radius-lg);
}

/* Focus is drawn on the stretched area, so the whole card shows it, not just the title's line box. */
.esp-mag .esp-card-title a:focus-visible {
    outline: 0;
}

.esp-mag .esp-card-title a:focus-visible::after {
    outline: 2px solid var(--mag-gold);
    outline-offset: -3px;
}

.esp-mag .esp-card-excerpt {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: var(--mag-copy);
    font-size: 14.5px;
    line-height: 1.95;
}

.esp-mag .esp-card-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
    color: var(--mag-link);
    font-size: 14px;
    font-weight: 600;
    transition: color .2s ease;
}

.esp-mag .esp-card:hover .esp-card-more {
    color: var(--mag-gold);
}

/* -------------------------------------------------------------------------------------- pager ---- */

.esp-mag .esp-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 48px;
}

.esp-mag .esp-pager-pages {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.esp-mag .esp-pager-pages li {
    display: block;
    font-size: inherit;
}

.esp-mag .esp-pager-page,
.esp-mag .esp-pager-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 44px;
    height: 44px;
    border: 1px solid var(--mag-line);
    border-radius: var(--mag-radius);
    background: var(--mag-surface);
    color: var(--mag-copy);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    transition: border-color .2s ease, color .2s ease;
}

.esp-mag .esp-pager-step {
    padding: 0 16px;
}

.esp-mag .esp-pager-step i {
    font-size: 11px;
}

.esp-mag a.esp-pager-page:hover,
.esp-mag a.esp-pager-step:hover {
    border-color: color-mix(in srgb, var(--mag-gold) 70%, transparent);
    color: var(--mag-text);
}

/* The current page wears the charged frame. */
.esp-mag .esp-pager-page[aria-current="page"],
.esp-mag .esp-pager-page[aria-current="page"]:hover {
    border-color: transparent;
    background: linear-gradient(var(--mag-surface-2), var(--mag-surface-2)) padding-box, var(--mag-charge) border-box;
    color: var(--mag-gold);
    font-weight: 700;
}

.esp-mag .esp-pager-step[aria-disabled="true"] {
    opacity: .4;
}

.esp-mag .esp-pager-gap {
    min-width: 24px;
    color: var(--mag-muted);
    text-align: center;
}

/* Numbers only where they fit; a phone gets «صفحهٔ x از y» between the two steps. */
.esp-mag .esp-pager-status {
    display: none;
    color: var(--mag-muted);
    font-size: 14px;
}

@media (max-width: 575.98px) {
    .esp-mag .esp-pager {
        justify-content: space-between;
    }

    .esp-mag .esp-pager-pages {
        display: none;
    }

    .esp-mag .esp-pager-status {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .esp-mag .esp-chip,
    .esp-mag .esp-neighbour,
    .esp-mag .esp-card,
    .esp-mag .esp-card-more,
    .esp-mag .esp-pager-page,
    .esp-mag .esp-pager-step {
        transition: none;
    }
}