/*
 * Single post.
 * Loaded by slug (see Theme\enqueue_page_assets(), which calls this one single).
 *
 * Reference: prod /winterzauber-ballett-geschichten-tour-2025/.
 *
 * Section heights at 1920 · 1366 · 1024 · 767:
 *   head  318 · 312 · 238 · 188   (plus 36 for the breadcrumb row we add)
 *   body  652 · 628 · 576 · 548
 *
 * Both sections run the full width and carry the gutter; the article itself
 * is an 800px column down to 767, where it simply takes what is left.
 */

.article__inner {
    width:     100%;
    max-width: 800px;
    margin:    0 auto;
}

/* ── Head ──────────────────────────────────────────────────────────────── */
/* No photo here — prod fades the page background into the body panel below,
   so the two sections read as one surface. */
.article__head {
    position: relative;
    padding:  120px 20px 50px;
}

.article__head::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--color-bg-alt) 100%);
}

.article__head .article__inner {
    position:       relative;
    display:        flex;
    flex-direction: column;
    gap:            16px;
}

.article__kicker {
    font-family:    var(--font-body);
    font-weight:    400;
    font-size:      16px;
    line-height:    20px;
    text-transform: uppercase;
    color:          var(--color-primary);
}

.article__title {
    font-family: var(--font-heading);
    /* Lighter than the site's other headlines: prod leaves this one at the
       body weight it inherits rather than the 400 its headings use. */
    font-weight: 300;
    font-size:   48px;
    line-height: 56px;
    color:       var(--color-text);
}

/* The breadcrumbs are ours, not prod's — the rest of the site carries them
   and an article should not be the one page a visitor cannot climb out of. */
.article__head .breadcrumbs__list {
    justify-content: flex-start;
}

/* ── Body ──────────────────────────────────────────────────────────────── */
.article__body {
    padding:          20px 20px 80px;
    background-color: var(--color-bg-alt);
}

.article__body .article__inner {
    display:        flex;
    flex-direction: column;
    gap:            60px;
}

/* ── Meta ──────────────────────────────────────────────────────────────── */
.article__meta {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         12px;
}

.article__date,
.article__terms {
    font-family: var(--font-body);
    font-weight: 400;
    font-size:   14px;
    /* The row is 22 tall on prod: the meta widgets keep the 1.6 body leading
       even though the type inside them is set solid. */
    line-height: 22.4px;
    color:       var(--color-muted);
}

.article__terms a {
    color:      inherit;
    transition: color var(--transition);
}

.article__terms a:hover,
.article__terms a:focus-visible {
    color: var(--color-primary);
}

.article__dot {
    flex-shrink:   0;
    width:         4px;
    height:        4px;
    border-radius: 50%;
    background:    rgba(255, 255, 255, .5);
}

/* ── Cover ─────────────────────────────────────────────────────────────── */
/* One shape for every article: the library holds 3:2 and 16:9 photos, and a
   column that changes height from post to post reads as an accident. */
.article__cover {
    margin: 0;
}

.article__cover-image {
    display:      block;
    width:        100%;
    aspect-ratio: 16 / 9;
    object-fit:   cover;
}

/* ── Content ───────────────────────────────────────────────────────────── */
/* Prod's article body inherits most of this from the parent theme rather than
   designing it: headings come out gold at 1.4 leading, and the sizes and
   margins below are measured from it.
   Two things are not copied. Prod's h4–h6 and blockquote keep a default
   #3b3d42 that is all but invisible on this panel (and the quote a stray
   blue) — none of the three posts uses them, so they follow the site's own
   colours here instead of reproducing a bug. And a list on prod has markers
   with no indent to sit in; this one gets the indent. */
.article__content {
    font-family: var(--font-body);
    font-weight: 400;
    font-size:   16px;
    line-height: 20px;
    color:       rgba(255, 255, 255, .8);
}

.article__content > *:last-child {
    margin-bottom: 0;
}

.article__content p {
    margin-bottom: 20px;
}

.article__content a {
    color:                   var(--color-primary);
    text-decoration:         underline;
    text-underline-offset:   3px;
    transition:              color var(--transition);
}

.article__content a:hover,
.article__content a:focus-visible {
    color: var(--color-accent);
}

.article__content h2,
.article__content h3,
.article__content h4,
.article__content h5,
.article__content h6 {
    margin:      15px 0 12px;
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.4;
    color:       var(--color-primary);
}

.article__content h2 { font-size: 40px; }
.article__content h3 { font-size: 28px; }
.article__content h4 { font-size: 20px; line-height: 1.5; margin-bottom: 15px; }
.article__content h5 { font-size: 18px; line-height: 1.5; margin-bottom: 15px; }
.article__content h6 { font-size: 14px; line-height: 1.5; margin-bottom: 15px; }

.article__content ul,
.article__content ol {
    margin:     0 0 24px;
    padding:    0 0 0 24px;
    list-style: revert;
}

.article__content li {
    display: list-item;
}

.article__content li::marker {
    color: var(--color-primary);
}

.article__content blockquote {
    margin:      35px 0;
    padding:     0 0 0 40px;
    border-left: 1px solid var(--color-border);
    font-size:   28px;
    line-height: 1.45;
    color:       var(--color-text);
}

/* Gutenberg emits an image block as a <figure>, or as a <div> when it was
   placed before the block editor settled on figures — prod's posts contain
   both. Neither carries a bottom margin there: the paragraph above provides
   the only gap. */
.article__content .wp-block-image {
    margin: 0;
}

.article__content .wp-block-image img {
    width: 100%;
}

/* A block the editor sized by hand keeps that width; `is-resized` carries it
   as an inline style, which the rule above would otherwise override. */
.article__content .is-resized img {
    width: auto;
}

/* The editor's own float margins, rather than the reset's generic ones, so a
   wrapped image sits where the editor previewed it. The clearfix keeps a
   float from escaping the article into the footer below. */
.article__content .alignleft {
    float:  left;
    margin: 8px 16px 8px 0;
}

.article__content .alignright {
    float:  right;
    margin: 8px 0 8px 16px;
}

.article__content .aligncenter {
    display: table;
    margin:  0 auto;
}

.article__content::after {
    content: '';
    display: table;
    clear:   both;
}

.article__content figcaption {
    margin-top:  8px;
    font-size:   14px;
    line-height: 1.4;
    color:       var(--color-muted);
}

.article__content .has-text-align-center { text-align: center; }
.article__content .has-text-align-right   { text-align: right;  }
.article__content .has-text-align-left    { text-align: left;   }

.article__content strong,
.article__content b { font-weight: 700; }

.article__content em,
.article__content i { font-style: italic; }

.article__content hr {
    margin:       40px 0;
    border-color: var(--color-border);
}

/* Only ever seen on a post split with <!--nextpage-->. */
.article__pages {
    display:     flex;
    flex-wrap:   wrap;
    gap:         8px;
    margin-top:  20px;
    font-size:   14px;
    line-height: 1.4;
    color:       var(--color-muted);
}

/* ── Neighbours ────────────────────────────────────────────────────────── */
/* The way from one article to the next without going back through the index.
   Both sides keep their column even when only one link exists, so the last
   post's "previous" does not slide into the middle of the row. */
.article__nav {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    /* Top, not stretched: one title runs to two lines and the other to one,
       and centring each in a shared row would leave the two labels on
       different lines. */
    align-items:           start;
    gap:                   24px;
    padding-top:           32px;
    border-top:            1px solid rgba(192, 156, 77, .2);
}

.article__nav-item {
    display:     flex;
    align-items: center;
    gap:         16px;
    min-width:   0;
}

.article__nav-item--next {
    justify-content: flex-end;
    text-align:      right;
}

.article__nav-body {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    min-width:      0;
}

.article__nav-label {
    font-family: var(--font-body);
    font-weight: 400;
    font-size:   14px;
    line-height: 1.4;
    color:       var(--color-muted);
}

.article__nav-title {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size:   20px;
    line-height: 1.2;
    color:       var(--color-text);
    /* Two lines, as on the card — the headlines here are long and a third
       line would push the two sides out of step. */
    display:            -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:           hidden;
    transition:         color var(--transition);
}

/* The site's arrow: the same ring the carousels use, pointing the other way
   on the left. */
.article__nav-arrow {
    flex-shrink:      0;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            32px;
    height:           32px;
    border:           1px solid rgba(192, 156, 77, .2);
    border-radius:    50%;
    background-color: var(--color-bg-alt);
    color:            var(--color-primary);
    transition:       border-color var(--transition), color var(--transition);
}

.article__nav-item--prev .article__nav-arrow {
    transform: scaleX(-1);
}

.article__nav-arrow .icon {
    width:  100%;
    height: 100%;
}

.article__nav-item:hover .article__nav-title,
.article__nav-item:focus-visible .article__nav-title {
    color: var(--color-primary);
}

.article__nav-item:hover .article__nav-arrow,
.article__nav-item:focus-visible .article__nav-arrow {
    border-color: var(--color-primary);
    color:        var(--color-text);
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.article__footer {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             24px;
}

.article__deco {
    flex-shrink: 0;
    color:       var(--color-accent);
}

/* ── Laptop ────────────────────────────────────────────────────────────── */
@media (max-width: 1366px) {

    .article__head {
        padding: 100px 20px 80px;
    }

    .article__title {
        font-size:   42px;
        line-height: 48px;
    }

    .article__body .article__inner {
        gap: 48px;
    }
}

/* ── Tablet ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

    .article__head {
        padding: 80px 20px;
    }

    .article__title {
        font-size:   36px;
        line-height: 42px;
    }

    .article__body {
        padding: 20px 20px 60px;
    }

    .article__body .article__inner {
        gap: 32px;
    }

    /* Prod's meta type grows here and shrinks again on a phone — a quirk of
       its global typography, kept because the row is 1:1 either way. */
    .article__date,
    .article__terms {
        font-size: 16px;
    }
}

/* ── Phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    .article__head {
        padding: 60px 16px;
    }

    .article__title {
        font-size:   28px;
        line-height: 32px;
    }

    .article__body {
        padding: 20px 16px 40px;
    }

    .article__body .article__inner {
        gap: 28px;
    }

    .article__date,
    .article__terms {
        font-size: 14px;
    }

    .article__content h2 { font-size: 26px; }
    .article__content h3 { font-size: 22px; }

    /* Side by side there is room for two headlines; stacked there is not, so
       the two links become rows that start at the same edge. */
    .article__nav {
        grid-template-columns: 1fr;
        gap:                   20px;
        padding-top:           24px;
    }

    .article__nav-item--next {
        flex-direction:  row-reverse;
        justify-content: flex-end;
        text-align:      left;
    }

    /* Nothing holds a column that no longer exists. */
    .article__nav-item--empty {
        display: none;
    }
}