/* =========================================================
   TEXTY — ARCHIVE
   ========================================================= */

.texts-archive {
    padding-top: 46px;
    padding-bottom: 38px;
}

.texts-archive__intro {
    margin-bottom: 0;
}

.texts-archive__description {
    display: none;
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.texts-archive__toolbar {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 32px;

    padding-block: 16px;

    border-bottom: 1px solid var(--color-border);
}

.texts-archive__filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    gap: 18px 34px;
}

.texts-archive__count {
    display: none;
}


/* =========================================================
   FILTERS
   ========================================================= */

.texts-filter {
    position: relative;

    display: inline-flex;
    align-items: center;
}

.texts-filter__select {
    appearance: none;
    -webkit-appearance: none;

    padding: 0 18px 0 0;

    border: 0;
    background: transparent;

    color: var(--color-text);

    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;

    text-transform: uppercase;

    cursor: pointer;
}

.texts-filter::after {
    content: "↓";

    position: absolute;
    right: 0;

    font-size: 0.78rem;
    line-height: 1;

    pointer-events: none;

    transition: transform var(--transition-fast);
}

.texts-filter:hover::after,
.texts-filter:focus-within::after {
    transform: translateY(2px);
}

.texts-filter__select:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 5px;
}


/* ---------- Active filter ---------- */

.texts-filter.is-active .texts-filter__select {
    color: var(--color-red);
}


/* ---------- Filter submit ---------- */

.texts-filter__submit {
    position: relative;

    padding: 0;

    border: 0;
    background: transparent;

    color: var(--color-text);

    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;

    text-transform: uppercase;

    cursor: pointer;
}

.texts-filter__submit::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -4px;

    width: 100%;
    height: 1px;

    background: currentColor;

    transform: scaleX(0);
    transform-origin: left;

    transition: transform var(--transition-fast);
}

.texts-filter__submit:hover::after,
.texts-filter__submit:focus-visible::after {
    transform: scaleX(1);
}


/* ---------- Filter reset ---------- */

.texts-filter__reset {
    color: var(--color-muted);

    font-size: 0.76rem;
    font-weight: 500;

    text-decoration: none;
}

.texts-filter__reset:hover,
.texts-filter__reset:focus-visible {
    color: var(--color-text);

    text-decoration: underline;
    text-underline-offset: 4px;
}


/* =========================================================
   ARCHIVE LIST
   ========================================================= */

.texts-archive__list {
     display: grid;
    margin-top: 44px;
}


/*
 * Standardní mezera mezi jednotlivými články vzniká
 * paddingem každé položky.
 */
.text-archive-item {
    display: grid;

    grid-template-columns:
        minmax(0, 3fr)
        minmax(0, 2fr);

    gap: clamp(32px, 4.5vw, 72px);

    align-items: center;

    padding-block: 56px;

    border-bottom: 1px solid var(--color-border);
}


/*
 * První článek je blíž k toolbaru.
 * Tím nevzniká zbytečná velká bílá plocha.
 */
.text-archive-item:first-child {
    padding-top: 20px;
}


/* =========================================================
   REVERSE LAYOUT
   ========================================================= */

.text-archive-item--reverse {
    grid-template-columns:
        minmax(0, 2fr)
        minmax(0, 3fr);
}

.text-archive-item--reverse
.text-archive-item__image {
    grid-column: 2;
    grid-row: 1;
}

.text-archive-item--reverse
.text-archive-item__content {
    grid-column: 1;
    grid-row: 1;
}


/* =========================================================
   IMAGE
   ========================================================= */

.text-archive-item__image {
    display: block;
    overflow: hidden;
}

.text-archive-item__image img {
    width: 100%;

    aspect-ratio: 16 / 9;
    object-fit: cover;

}

/* =========================================================
   CONTENT
   ========================================================= */

.text-archive-item__content {
    width: min(100%, 46ch);
}


/*
 * Standard:
 * obrázek vlevo → text zarovnaný vlevo
 * směrem k obrázku.
 */
.text-archive-item:not(.text-archive-item--reverse)
.text-archive-item__content {
    justify-self: start;
    text-align: left;
}


/*
 * Reverse:
 * obrázek vpravo → text zarovnaný doprava
 * směrem k obrázku.
 */
.text-archive-item--reverse
.text-archive-item__content {
    justify-self: end;
    text-align: right;
}


/* =========================================================
   META
   ========================================================= */

.text-archive-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    font-size: 0.80rem;
    font-weight: 600;
    line-height: 1.2;

    text-transform: uppercase;
}

.text-archive-item:not(.text-archive-item--reverse)
.text-archive-item__meta {
    justify-content: flex-start;
}

.text-archive-item--reverse
.text-archive-item__meta {
    justify-content: flex-end;
}

.text-archive-item__meta > * + * {
    padding-left: 12px;

    border-left: 1px solid var(--color-blue);
}


/* =========================================================
   TITLE
   ========================================================= */

.text-archive-item__title {
    margin: 0 0 16px;

    font-size: clamp(2rem, 3vw, 3.4rem);
    font-style: italic;
    line-height: 1;
}

.text-archive-item__title a {
    color: inherit;

    text-decoration: none;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 5px;
}

/* nadpis samotný */

.text-archive-item__title a:hover,
.text-archive-item__title a:focus-visible {
    text-decoration-line: underline;
}


/* obrázek aktivuje underline nadpisu */

.text-archive-item:has(.text-archive-item__image:hover)
.text-archive-item__title a,
.text-archive-item:has(.text-archive-item__image:focus-visible)
.text-archive-item__title a {
    text-decoration-line: underline;
}

/* =========================================================
   EXCERPT
   ========================================================= */

.text-archive-item__excerpt {
    max-width: 46ch;
    font-size: 1.05rem;

    line-height: 1.55;
}

.text-archive-item__excerpt > *:first-child {
    margin-top: 0;
}

.text-archive-item__excerpt > *:last-child {
    margin-bottom: 0;
}


/* =========================================================
   RESPONSIVE — TABLET / MOBILE
   ========================================================= */

@media (max-width: 800px) {

    .texts-archive {
        padding-top: 26px;
        padding-bottom: 10px;
    }

    .texts-archive__intro {
        margin-bottom: 0;
    }
    
    .texts-archive__list {
        margin-top: 24px;
    }

    .text-archive-item:first-child {
        padding-top: 12px;
    }

    /* ---------- Toolbar ---------- */

    .texts-archive__toolbar {
        flex-direction: column;
        align-items: center;

        gap: 18px;

        padding-block: 14px 20px;
    }

    .texts-archive__filters {
        width: 100%;

        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px 24px;
    }

    .texts-filter {
        width: 100%;
    }

    .texts-filter__select {
        width: 100%;
    }


    /* Filtrovat přes oba sloupce */

    .texts-filter__submit {
        grid-column: 1 / -1;
        justify-self: center;

        margin-top: 8px;
    }


    /* Reset pod tlačítkem */

    .texts-filter__reset {
        grid-column: 1 / -1;
        justify-self: center;

        margin-top: -6px;
    }


    /* ---------- Archive items ---------- */

    .text-archive-item,
    .text-archive-item--reverse {
        grid-template-columns: 1fr;

        gap: 24px;

        padding-block: 40px;
    }


    /*
     * Klíčová změna:
     * první obrázek je už jen 28 px pod linkou toolbaru.
     */
    .text-archive-item:first-child {
        padding-top: 28px;
    }

    .text-archive-item--reverse
    .text-archive-item__image,
    .text-archive-item--reverse
    .text-archive-item__content {
        grid-column: auto;
        grid-row: auto;
    }

    .text-archive-item__image {
        order: 0;
    }

    .text-archive-item__content,
    .text-archive-item--reverse
    .text-archive-item__content {
        order: 1;

        width: 100%;
        max-width: 46ch;

        justify-self: start;

        text-align: left;
    }

    .text-archive-item--reverse
    .text-archive-item__meta {
        justify-content: flex-start;
    }
}


/* =========================================================
   RESPONSIVE — SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .texts-archive {
        padding-top: 28px;
    }

    .texts-archive__filters {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .texts-filter__submit,
    .texts-filter__reset {
        grid-column: 1;
    }

    .text-archive-item:first-child {
        padding-top: 24px;
    }
}

/* =========================================================
   TEXTY — SINGLE
   ========================================================= */

.article-detail {
    --article-page-edge:
        clamp(24px, 3vw, 52px);

    --article-text-edge:
        clamp(56px, 8vw, 140px);


    /* hlavní textová mřížka */

    --content-edge:
        var(--article-text-edge);

    --left-width:
        clamp(
            440px,
            calc(58% - var(--content-edge)),
            720px
        );

    --right-width:
        clamp(
            300px,
            calc(42% - var(--content-edge)),
            520px
        );

    --center-text-width:
        min(54%, 680px);

    --center-image-width:
        min(58%, 760px);

    --quote-right-width:
        min(
            calc(48% - var(--content-edge)),
            720px
        );

    padding: 0;
}


/* =========================================================
   HERO / TITLE PAGE
   ========================================================= */

.article-detail__hero {
    position: relative;

    display: flex;
    align-items: flex-end;

    width:
        calc(
            100%
            - (2 * var(--article-page-edge))
        );

    min-height:
        calc(
            100svh
            - 64px
        );

    margin-inline:
        var(--article-page-edge);

    overflow: hidden;

    background: #111;
}


/* =========================================================
   HERO IMAGE
   ========================================================= */

.article-detail__hero-image {
    position: absolute;
    inset: 0;

    z-index: 0;

    width: 100%;
    height: 100%;

    margin: 0;
}


.article-detail__hero-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        grayscale(1)
        contrast(0.86)
        brightness(0.78);

    transform: scale(1.01);
}


/* =========================================================
   HERO SHADE
   ========================================================= */

.article-detail__hero-shade {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.48) 0%,
            rgba(0, 0, 0, 0.27) 50%,
            rgba(0, 0, 0, 0.18) 100%
        );

    pointer-events: none;
}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.article-detail__hero-content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    width: 100%;
    min-height: inherit;

    padding:
        clamp(40px, 5vw, 80px)
        clamp(24px, 4vw, 64px)
        clamp(72px, 8vw, 120px);
}


/* =========================================================
   TITLE
   ========================================================= */

.article-detail__title {
    width: min(88%, 1380px);

    margin: 0;

    color: #f5f0e8;

    font-size:
        clamp(4rem, 8.2vw, 9rem);

    font-style: italic;

    line-height: 0.87;
    letter-spacing: -0.035em;

    text-wrap: balance;
}


/* =========================================================
   CREDITS
   ========================================================= */

.article-detail__credits {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    column-gap: 0;
    row-gap: 8px;

    width: auto;

    margin-top:
        clamp(26px, 3vw, 42px);

    margin-bottom: 0;

    color: #f5f0e8;

    font-size: 1.1rem;
    line-height: 1.3;

    text-align: left;
}


.article-detail__credit {
    display: inline-flex;
    align-items: center;

    gap: 0.3em;

    padding-right: 12px;
}


.article-detail__credit
+ .article-detail__credit {
    padding-left: 12px;

    border-left:
        1px solid
        rgba(245, 240, 232, 0.75);
}


.article-detail__credit:last-child {
    padding-right: 0;
}


/* =========================================================
   SCROLL CUE
   ========================================================= */

.article-detail__scroll {
    position: absolute;

    z-index: 3;

    left: 50%;
    bottom:
        clamp(20px, 2vw, 32px);

    transform:
        translateX(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    color: #f5f0e8;

    font-size: 1.45rem;
    line-height: 1;

    text-decoration: none;

    transition:
        transform
        var(--transition-fast)
        ease;
}


.article-detail__scroll:hover,
.article-detail__scroll:focus-visible {
    transform:
        translate(-50%, 5px);
}


/* =========================================================
   OPENING / PEREX
   ========================================================= */

.article-detail__opening {
    display: block;

    width: 100%;

    padding-top:
        clamp(56px, 6vw, 88px);

    padding-inline: 0;
    padding-bottom: 0;

    scroll-margin-top: 36px;
}


/* ---------- DEFAULT / LEFT ---------- */

.article-detail__opening-content {
    width: var(--left-width);

    margin-left: var(--content-edge);
    margin-right: auto;

    font-size:
        clamp(1.08rem, 1vw + 0.38rem, 1.20rem);

    font-weight: 600;
    line-height: 1.68;
}


/* ---------- LEFT ---------- */

.article-detail__opening-content:has(> p.has-text-align-left) {
    width: var(--left-width);

    margin-left: var(--content-edge);
    margin-right: auto;
}


/* ---------- CENTER ---------- */

.article-detail__opening-content:has(> p.has-text-align-center) {
    width: var(--center-image-width);

    margin-left: auto;
    margin-right: auto;
}


/* ---------- RIGHT ---------- */

.article-detail__opening-content:has(> p.has-text-align-right) {
    width: var(--right-width);

    margin-left: auto;
    margin-right: var(--content-edge);
}


/* ---------- TEXT ALIGNMENT ---------- */

.article-detail__opening-content p,
.article-detail__opening-content p.has-text-align-left,
.article-detail__opening-content p.has-text-align-center,
.article-detail__opening-content p.has-text-align-right {
    margin: 0;

    text-align: left;
}

/* =========================================================
   MAIN CONTENT
   ========================================================= */

.article-detail__content {

    /* ---------- Vertical rhythm ---------- */

    --space-text:
        1.5em;

    --space-before-image:
        clamp(40px, 4vw, 56px);

    --space-after-image:
        clamp(28px, 3vw, 40px);

    --space-before-media:
        clamp(40px, 4vw, 56px);

    --space-after-media:
        clamp(40px, 4vw, 56px);

    --space-section:
        clamp(88px, 8vw, 120px);


    display: flow-root;

    width: 100%;

    /*
     * Perex už není samostatná "kapitola".
     * Je to zvýrazněný první odstavec článku.
     */
    margin-top:
        clamp(36px, 4vw, 56px);

    font-size:
        clamp(1.08rem, 1vw + 0.38rem, 1.20rem);
}


/* =========================================================
   DEFAULT TEXT
   ========================================================= */

.article-detail__content > p,
.article-detail__content > h2,
.article-detail__content > h3,
.article-detail__content > ul,
.article-detail__content > ol {
    width: var(--left-width);

    margin-left: var(--content-edge);
    margin-right: auto;
}


/* =========================================================
   CONTENT POSITIONS
   ========================================================= */

/* ---------- LEFT ---------- */

.article-detail__content
> :is(p, h2, h3, ul, ol).has-text-align-left {
    width: var(--left-width);

    margin-left: var(--content-edge);
    margin-right: auto;

    text-align: left;
}


/* ---------- CENTER ---------- */

.article-detail__content
> :is(p, h2, h3, ul, ol).has-text-align-center {
    width: var(--center-image-width);

    margin-left: auto;
    margin-right: auto;

    text-align: left;
}


/* ---------- RIGHT ---------- */

.article-detail__content
> :is(p, h2, h3, ul, ol).has-text-align-right {
    width: var(--right-width);

    margin-left: auto;
    margin-right: var(--content-edge);

    text-align: left;
}


/* =========================================================
   PARAGRAPH RHYTHM
   ========================================================= */

.article-detail__content > p {
    margin-top: 0;
    margin-bottom: var(--space-text);

    line-height: 1.68;
}


.article-detail__content
> p:has(+ .wp-block-image) {
    margin-bottom:
        var(--space-before-image);
}


.article-detail__content
.wp-block-image + p {
    margin-top:
        var(--space-after-image);
}


.article-detail__content
> p:has(+ .wp-block-media-text) {
    margin-bottom:
        var(--space-before-media);
}


.article-detail__content
.wp-block-media-text + p {
    margin-top:
        var(--space-after-media);
}


/* =========================================================
   HEADINGS
   ========================================================= */

.article-detail__content > h2 {
    margin-top: 2.1em;
    margin-bottom: 0.7em;

    font-size:
        clamp(2rem, 3vw, 3.2rem);

    line-height: 1;
}


.article-detail__content > h3 {
    margin-top: 1.5em;
    margin-bottom: 0.6em;

    font-size:
        clamp(1.5rem, 2.3vw, 2.2rem);

    line-height: 1.05;
}


/* =========================================================
   STANDALONE IMAGES
   ========================================================= */

.article-detail__content
.wp-block-image {
    float: none !important;
    clear: both;

    max-width: none;

    margin-top: 0;
    margin-bottom: 0;
}


/* ---------- LEFT ---------- */

.article-detail__content
.wp-block-image.is-style-image-left {
    width: var(--left-width);

    margin-left: var(--content-edge);
    margin-right: auto;
}


/* ---------- CENTER ---------- */

.article-detail__content
.wp-block-image.is-style-image-center {
    width: var(--center-image-width);

    margin-left: auto;
    margin-right: auto;
}


/* ---------- RIGHT ---------- */

.article-detail__content
.wp-block-image.is-style-image-right {
    width: var(--right-width);

    margin-left: auto;
    margin-right: var(--content-edge);
}


/* ---------- DEFAULT = CENTER ---------- */

.article-detail__content
.wp-block-image:not(.is-style-image-left):
not(.is-style-image-right):
not(.is-style-image-center) {
    width: var(--center-image-width);

    margin-left: auto;
    margin-right: auto;
}


.article-detail__content
.wp-block-image img {
    display: block;

    width: 100%;
    height: auto;
}


.article-detail__content
.wp-block-image figcaption {
    margin-top: 10px;

    color: var(--color-muted);

    font-size: 0.75rem;
    line-height: 1.4;
}


/* =========================================================
   IMAGE RHYTHM
   ========================================================= */

.article-detail__content
.wp-block-image:not(p + .wp-block-image) {
    margin-top:
        var(--space-before-image);
}


.article-detail__content
.wp-block-image:not(:has(+ p)) {
    margin-bottom:
        var(--space-before-image);
}


/* =========================================================
   MEDIA + TEXT
   ========================================================= */

.article-detail__content
.wp-block-media-text {
    display: grid;

    grid-template-columns:
        minmax(0, 3fr)
        minmax(0, 2fr) !important;

    gap:
        clamp(32px, 4vw, 64px);

    align-items: center;

    /*
     * Stejný vnější gutter jako hero.
     */
    width:
        calc(
            100%
            - (2 * var(--article-page-edge))
        );

    margin-left:
        var(--article-page-edge);

    margin-right:
        var(--article-page-edge);

    margin-top:
        var(--space-before-media);

    margin-bottom:
        var(--space-after-media);
}


/* ---------- REVERSE RATIO ---------- */

.article-detail__content
.wp-block-media-text.is-style-reverse-ratio {
    grid-template-columns:
        minmax(0, 2fr)
        minmax(0, 3fr) !important;
}


/* =========================================================
   MEDIA
   ========================================================= */

.article-detail__content
.wp-block-media-text__media {
    width: 100%;

    margin: 0;
}


.article-detail__content
.wp-block-media-text__media img {
    display: block;

    width: 100%;
    height: auto;
}


/* =========================================================
   MEDIA CONTENT
   ========================================================= */

.article-detail__content
.wp-block-media-text__content {
    width: 100%;
    max-width: none;

    padding-top: 0;
}


.article-detail__content
.wp-block-media-text__content > p {
    width: 100%;
    max-width: none;

    margin-left: 0;
    margin-right: 0;
}


/* ---------- IMAGE LEFT / TEXT RIGHT ---------- */

.article-detail__content
.wp-block-media-text:not(.has-media-on-the-right)
.wp-block-media-text__content {
    padding-left:
        clamp(8px, 1vw, 20px);

    padding-right:
        clamp(8px, 1vw, 20px);
}


/* ---------- TEXT LEFT / IMAGE RIGHT ---------- */

.article-detail__content
.wp-block-media-text.has-media-on-the-right
.wp-block-media-text__content {
    padding-left:
        clamp(8px, 1vw, 20px);

    padding-right:
        clamp(8px, 1vw, 20px);
}


/* ---------- TEXT RHYTHM ---------- */

.article-detail__content
.wp-block-media-text__content p {
    margin-top: 0;
    margin-bottom: 1.4em;

    line-height: 1.62;
}


.article-detail__content
.wp-block-media-text__content
> *:last-child {
    margin-bottom: 0;
}


/* =========================================================
   QUOTE
   ========================================================= */

.article-detail__content
> blockquote {
    margin-top:
        var(--space-section);

    margin-bottom:
        var(--space-section);

    padding: 0;
    border: 0;

    font-family:
        var(--font-display);

    font-size:
        clamp(1.6rem, 2.5vw, 3rem);

    font-style: italic;
    font-weight: 700;

    line-height: 1.08;
}


/* ---------- LEFT / DEFAULT ---------- */

.article-detail__content
> blockquote,
.article-detail__content
> blockquote:has(> p.has-text-align-left) {
    width: var(--left-width);

    margin-left:
        var(--content-edge);

    margin-right: auto;
}


/* ---------- CENTER ---------- */

.article-detail__content
> blockquote:has(> p.has-text-align-center) {
    width:
        var(--center-text-width);

    margin-left: auto;
    margin-right: auto;
}


/* ---------- RIGHT ---------- */

.article-detail__content
> blockquote:has(> p.has-text-align-right) {
    width:
        var(--quote-right-width);

    margin-left: auto;

    margin-right:
        var(--content-edge);
}


.article-detail__content
> blockquote p {
    margin: 0;

    text-align: left;
}

/* =========================================================
   INTERVIEW
   ========================================================= */

.article-detail__content
p.is-style-interview-question {
    margin-bottom: 8px;

    font-weight: 700;
}


/*
 * Odpověď bezprostředně po otázce.
 * Ruší běžnou velkou mezeru mezi odstavci.
 */
.article-detail__content
p.is-style-interview-question + p {
    margin-top: 0;
}


/*
 * Další otázka:
 * tady naopak zachováme větší předěl
 * mezi jednotlivými Q+A bloky.
 */
.article-detail__content
p + p.is-style-interview-question {
    margin-top: 36px;
}

/* =========================================================
   META AT END
   ========================================================= */

.article-detail__metadata {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    column-gap: 0;
    row-gap: 10px;

    width: var(--left-width);

    margin:
        clamp(4px, 0.8vw, 12px)
        auto
        0
        var(--content-edge);

    padding-top: 16px;

    border-top:
        1px solid
        var(--color-border);

    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;

    letter-spacing: 0.02em;
    text-transform: uppercase;
}


.article-detail__metadata > * {
    display: inline-flex;
    align-items: center;

    padding-right: 12px;
}


.article-detail__metadata > * + * {
    padding-left: 12px;

    border-left:
        1px solid
        var(--color-blue);
}


.article-detail__metadata > *:last-child {
    padding-right: 0;
}


.article-detail__metadata a {
    color: inherit;

    text-decoration: none;
}


.article-detail__metadata a:hover,
.article-detail__metadata a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 4px;
}


/* =========================================================
   PREVIOUS / NEXT
   ========================================================= */

.article-detail__navigation {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 48px;

    width:
        calc(
            100%
            - (2 * var(--article-page-edge))
        );

    margin:
        48px
        var(--article-page-edge)
        0;

    padding-top: 36px;
    padding-bottom:
        clamp(64px, 6vw, 96px);
}


.article-detail__previous {
    text-align: left;
}


.article-detail__next {
    text-align: right;
}


.article-detail__navigation-label {
    display: block;

    margin-bottom: 8px;

    font-size: 0.72rem;
    font-weight: 700;

    text-transform: uppercase;
}


.article-detail__navigation a {
    color: inherit;

    text-decoration: none;

    font-family:
        var(--font-display);

    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.15;
}


.article-detail__navigation a:hover,
.article-detail__navigation a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 4px;
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 980px) {

    /*
     * Společná konstrukční mřížka.
     *
     * Musí být na .article-detail,
     * protože ji používají:
     * - content
     * - metadata
     * - navigation
     */
    .article-detail {
        --article-page-edge:
            clamp(20px, 3.5vw, 32px);

        --content-edge:
            var(--article-page-edge);

        --left-width:
            min(
                calc(
                    100%
                    - (2 * var(--content-edge))
                ),
                760px
            );

        --right-width:
            var(--left-width);

        --center-text-width:
            var(--left-width);

        --center-image-width:
            var(--left-width);

        --quote-right-width:
            var(--left-width);
    }


    /* =====================================================
       HERO
       ===================================================== */

    .article-detail__hero-content {
        padding:
            36px
            28px
            84px;
    }


    .article-detail__title {
        width: 94%;

        font-size:
            clamp(3.8rem, 10vw, 7rem);
    }


    .article-detail__hero-image img {
        filter:
            grayscale(1)
            contrast(0.88)
            brightness(0.76);
    }


    /* =====================================================
       OPENING
       ===================================================== */

    .article-detail__opening {
        padding-top:
            clamp(52px, 7vw, 72px);

        padding-left: 0;
        padding-right: 0;
    }

    .article-detail__opening-content {
        width: var(--left-width);

        margin-left: var(--content-edge);
        margin-right: auto;
    }
    

    /* =====================================================
       MEDIA + TEXT — STACK
       ===================================================== */

    .article-detail__content
    .wp-block-media-text,

    .article-detail__content
    .wp-block-media-text.is-style-reverse-ratio {
        grid-template-columns:
            minmax(0, 1fr) !important;

        gap: 28px;
    }


    /* ---------- Reset Gutenberg positions ---------- */

    .article-detail__content
    .wp-block-media-text__media,

    .article-detail__content
    .wp-block-media-text__content,

    .article-detail__content
    .wp-block-media-text.has-media-on-the-right
    .wp-block-media-text__media,

    .article-detail__content
    .wp-block-media-text.has-media-on-the-right
    .wp-block-media-text__content {
        grid-column: 1 !important;
        grid-row: auto !important;

        min-width: 0;
        width: 100%;
    }


    /* ---------- Remove desktop paddings ---------- */

    .article-detail__content
    .wp-block-media-text__content,

    .article-detail__content
    .wp-block-media-text:not(.has-media-on-the-right)
    .wp-block-media-text__content,

    .article-detail__content
    .wp-block-media-text.has-media-on-the-right
    .wp-block-media-text__content {
        padding: 0;
    }


    /* ---------- Always image → text ---------- */

    .article-detail__content
    .wp-block-media-text__media {
        order: 1;
    }


    .article-detail__content
    .wp-block-media-text__content {
        order: 2;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 700px) {

    /*
     * Mobilní společná mřížka.
     * Žádné content-edge: 0.
     */
    .article-detail {
        --article-page-edge: 20px;

        --content-edge:
            var(--article-page-edge);

        --left-width:
            calc(
                100%
                - (2 * var(--content-edge))
            );

        --right-width:
            var(--left-width);

        --center-text-width:
            var(--left-width);

        --center-image-width:
            var(--left-width);

        --quote-right-width:
            var(--left-width);
    }


    /* =====================================================
       HERO
       ===================================================== */

    .article-detail__hero {
        min-height:
            calc(
                100svh
                - var(--site-header-height, 72px)
            );
    }


    .article-detail__hero-content {
        justify-content: flex-end;

        padding:
            28px
            20px
            82px;
    }


    .article-detail__title {
        width: 100%;

        font-size:
            clamp(3rem, 14vw, 5rem);

        line-height: 0.9;
    }


    .article-detail__credits {
        width: 100%;

        justify-content: flex-start;

        margin-top: 24px;

        font-size: 0.9rem;

        text-align: left;
    }


    .article-detail__hero-image img {
        filter:
            grayscale(1)
            contrast(0.9)
            brightness(0.72);
    }


    .article-detail__scroll {
        bottom: 20px;

        font-size: 1.25rem;
    }


    /* =====================================================
       OPENING
       ===================================================== */

    .article-detail__opening {
        padding:
            44px
            0
            0;
    }

    .article-detail__opening-content {
        width: var(--left-width);

        margin-left: var(--content-edge);
        margin-right: var(--content-edge);
    }


    /* =====================================================
       MAIN CONTENT
       ===================================================== */

    .article-detail__content {
        --space-before-image:
            40px;

        --space-after-image:
            28px;

        --space-before-media:
            42px;

        --space-after-media:
            34px;

        --space-section:
            68px;

        margin-top: 32px;

        font-size: 1.15rem;
        line-height: 1.6;
    }


    /* =====================================================
       TEXT
       ===================================================== */

    .article-detail__content > p,
    .article-detail__content > h2,
    .article-detail__content > h3,
    .article-detail__content > ul,
    .article-detail__content > ol,

    .article-detail__content
    > p.has-text-align-left,

    .article-detail__content
    > p.has-text-align-center,

    .article-detail__content
    > p.has-text-align-right {
        width:
            var(--left-width);

        margin-left:
            var(--content-edge);

        margin-right:
            var(--content-edge);

        text-align: left;
    }


    /* =====================================================
       STANDALONE IMAGES
       ===================================================== */

    .article-detail__content
    .wp-block-image,

    .article-detail__content
    .wp-block-image.is-style-image-left,

    .article-detail__content
    .wp-block-image.is-style-image-center,

    .article-detail__content
    .wp-block-image.is-style-image-right,

    .article-detail__content
    .wp-block-image:not(.is-style-image-left):
    not(.is-style-image-right):
    not(.is-style-image-center) {
        width:
            var(--left-width);

        margin-left:
            var(--content-edge);

        margin-right:
            var(--content-edge);
    }


    /* =====================================================
       MEDIA + TEXT
       ===================================================== */

    .article-detail__content
    .wp-block-media-text,

    .article-detail__content
    .wp-block-media-text.is-style-reverse-ratio {
        width:
            var(--left-width);

        margin-left:
            var(--content-edge);

        margin-right:
            var(--content-edge);

        grid-template-columns:
            1fr !important;

        gap: 28px;
    }


    .article-detail__content
    .wp-block-media-text__content,

    .article-detail__content
    .wp-block-media-text:not(.has-media-on-the-right)
    .wp-block-media-text__content,

    .article-detail__content
    .wp-block-media-text.has-media-on-the-right
    .wp-block-media-text__content {
        padding: 0;
    }


    .article-detail__content
    .wp-block-media-text__media {
        width: 100%;
    }


    /* =====================================================
       QUOTE
       ===================================================== */

    .article-detail__content
    > blockquote,

    .article-detail__content
    > blockquote:has(> p.has-text-align-left),

    .article-detail__content
    > blockquote:has(> p.has-text-align-center),

    .article-detail__content
    > blockquote:has(> p.has-text-align-right) {
        width:
            var(--left-width);

        margin-left:
            var(--content-edge);

        margin-right:
            var(--content-edge);
    }


    .article-detail__content
    > blockquote p {
        text-align: left;
    }


    /* =====================================================
       METADATA
       ===================================================== */

    .article-detail__metadata {
        width:
            var(--left-width);

        margin-left:
            var(--content-edge);

        margin-right:
            var(--content-edge);

        row-gap: 10px;

        font-size: 0.78rem;
    }


    /* =====================================================
       NAVIGATION
       ===================================================== */

    .article-detail__navigation {
        width:
            calc(
                100%
                - (2 * var(--article-page-edge))
            );

        margin-left:
            var(--article-page-edge);

        margin-right:
            var(--article-page-edge);
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 620px) {

    .article-detail {
        --article-page-edge: 18px;

        --content-edge:
            var(--article-page-edge);

        --left-width:
            calc(
                100%
                - (2 * var(--content-edge))
            );

        --right-width:
            var(--left-width);

        --center-text-width:
            var(--left-width);

        --center-image-width:
            var(--left-width);

        --quote-right-width:
            var(--left-width);
    }


    .article-detail__hero {
        min-height:
            calc(
                100svh
                - 64px
            );
    }


    .article-detail__hero-content {
        padding:
            24px
            18px
            76px;
    }


    .article-detail__title {
        font-size:
            clamp(2.7rem, 13vw, 4.4rem);

        line-height: 0.91;
    }


    .article-detail__credits {
        margin-top: 20px;

        row-gap: 6px;

        font-size: 0.86rem;
    }


    .article-detail__credit {
        padding-right: 10px;
    }


    .article-detail__credit
    + .article-detail__credit {
        padding-left: 10px;
    }


    /* =====================================================
       OPENING
       ===================================================== */

    .article-detail__opening {
        padding-top: 38px;
        scroll-margin-top: 64px;
    }


    .article-detail__opening-content {
        font-size: 1.1rem;
        line-height: 1.6;
    }


    /* =====================================================
       CONTENT
       ===================================================== */

    .article-detail__content {
        --space-before-image:
            36px;

        --space-after-image:
            24px;

        --space-before-media:
            38px;

        --space-after-media:
            30px;

        --space-section:
            60px;

        margin-top: 28px;
    }


    /* =====================================================
       QUOTE
       ===================================================== */

    .article-detail__content
    > blockquote {
        font-size:
            clamp(1.4rem, 6vw, 2.2rem);
    }


    /* =====================================================
       NAVIGATION
       ===================================================== */

    .article-detail__navigation {
        grid-template-columns: 1fr;

        gap: 28px;
    }


    .article-detail__next {
        text-align: left;
    }

}