/* =========================================================
   MAGAZINE — ARCHIVE
   ========================================================= */

.magazine-archive {
    padding-block: 16px 46px;
}

.magazine-archive-item:first-child {
    padding-top: 36px;
}
.magazine-archive__list {
    width: 100%;
}


/* =========================================================
   ITEM
   ========================================================= */

.magazine-archive-item {
    display: grid;

    grid-template-columns:
        minmax(220px, 320px)
        minmax(320px, 440px);

    column-gap: clamp(64px, 7vw, 120px);

    /*
     * Centruje skutečné dva sloupce,
     * ne jejich větší wrapper.
     */
    justify-content: center;

    align-items: center;

    width: 100%;

    padding-block: clamp(56px, 6vw, 90px);

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


/* =========================================================
   COVER
   ========================================================= */

.magazine-archive-item__cover {
    display: block;

    width: 100%;
    max-width: 320px;

    justify-self: end;
}

.magazine-archive-item__cover img {
    display: block;

    width: 100%;
    height: auto;
}


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

.magazine-archive-item__content {
    width: min(100%, 42ch);

    justify-self: start;
}


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

.magazine-archive-item__title {
    margin: 0 0 22px;

    font-size: clamp(3rem, 5vw, 5.8rem);
    line-height: 0.93;
    letter-spacing: -0.025em;
}

.magazine-archive-item__title a {
    color: inherit;
    text-decoration: none;
}


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

.magazine-archive-item__excerpt {
    max-width: 42ch;

    margin-bottom: 28px;

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

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

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


/* =========================================================
   LINK
   ========================================================= */

.magazine-archive-item__link {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* =========================================================
   HOOVER
   ========================================================= */

.magazine-archive-item:has(
    .magazine-archive-item__cover:hover,
    .magazine-archive-item__title a:hover
)
.magazine-archive-item__link::after {
    transform: scaleX(1);
}

.magazine-archive-item:has(
    .magazine-archive-item__cover:hover,
    .magazine-archive-item__title a:hover
)
.magazine-archive-item__link .link-arrow {
    transform: translate3d(5px, 0, 0);
}
/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .magazine-archive {
        padding-block: 36px 56px;
    }

    .magazine-archive-item {
        grid-template-columns:
            minmax(130px, 42%)
            minmax(0, 1fr);

        column-gap: clamp(22px, 6vw, 40px);

        /*
         * Pořád vedle sebe.
         */
        align-items: center;

        padding-block: 52px;
    }

    .magazine-archive-item__cover {
        width: 100%;
        justify-self: end;
    }

    .magazine-archive-item__content {
        width: 100%;
    }

    .magazine-archive-item__title {
        margin-bottom: 14px;

        font-size: clamp(1.8rem, 8vw, 3rem);
    }

    .magazine-archive-item__excerpt {
        margin-bottom: 18px;

        font-size: 1rem;
        line-height: 1.5;
    }

    .magazine-archive-item__link {
        font-size: 0.80rem;
    }

}

@media (max-width: 420px) {

    .magazine-archive-item {
        grid-template-columns:
            minmax(120px, 42%)
            minmax(0, 1fr);

        column-gap: 20px;
    }

    .magazine-archive-item__title {
        font-size: clamp(1.65rem, 8vw, 2.2rem);
    }

    .magazine-archive-item__excerpt {
        font-size: 0.88rem;
        line-height: 1.45;
    }

}

@media (max-width: 380px) {

    .magazine-archive-item {
        grid-template-columns: 1fr;

        row-gap: 24px;
    }

    .magazine-archive-item__cover {
        width: min(72%, 260px);

        justify-self: start;
    }

    .magazine-archive-item__content {
        width: 100%;
    }
}

/* =========================================================
   MAGAZINE — SINGLE
   ========================================================= */

.magazine-detail {
    padding-block: 16px 48px;
}


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

.magazine-detail__hero {
    display: grid;

    grid-template-columns:
        minmax(380px, 620px)
        minmax(220px, 360px);

    grid-template-rows:
        auto
        auto;

    column-gap: clamp(90px, 10vw, 170px);
    row-gap: 8px;

    align-items: start;

    width: min(100%, 1260px);

    margin-inline: auto;

    /*
     * Trochu odsadí celou kompozici od levé hrany,
     * ale pořád zůstává dobře vycentrovaná.
     */
    padding-inline: clamp(20px, 3vw, 54px);

    padding-top: clamp(28px, 3vw, 46px);
}


/* =========================================================
   INTRO
   ========================================================= */

.magazine-detail__intro {
    grid-column: 1;
    grid-row: 1;

    width: 100%;
}


/* ---------- Title ---------- */

.magazine-detail__title {
    margin: 0;

    color: var(--magazine-color);

    font-size: clamp(4.2rem, 7vw, 7.4rem);
    line-height: 0.88;
    letter-spacing: -0.045em;
}


/* =========================================================
   PURCHASE
   ========================================================= */

.magazine-detail__purchase {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;

    gap: 12px 24px;

    margin-top: clamp(24px, 2.5vw, 36px);
    margin-bottom: 0;
}


.magazine-detail__price {
    font-family: var(--font-display);

    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}


.magazine-detail__stock {
    padding-left: 18px;

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

    color: var(--magazine-color);

    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;

    text-transform: uppercase;
}


.magazine-detail__order {
    font-size: 0.85rem;
    font-weight: 700;

    text-transform: uppercase;
}


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

.magazine-detail__metadata {
    grid-column: 1;
    grid-row: 2;
    width: min(100%, 570px);

    margin: 0;

    border-top: 2px solid var(--color-border);
}


.magazine-detail__metadata-row {
    display: grid;

    grid-template-columns:
        minmax(150px, 0.9fr)
        minmax(0, 1.1fr);

    gap: 28px;

    padding-block: 10px;

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


.magazine-detail__metadata dt,
.magazine-detail__metadata dd {
    margin: 0;
}


.magazine-detail__metadata dt {
    color: var(--color-muted);

    font-size: 0.70rem;
    font-weight: 700;
    line-height: 1.25;

    letter-spacing: 0.03em;

    text-transform: uppercase;
}


.magazine-detail__metadata dd {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.35;
}


/* =========================================================
   COVER
   ========================================================= */

.magazine-detail__cover {
    grid-column: 2;
    grid-row: 1 / span 2;

    width: min(100%, 285px);

    margin: 0;

    justify-self: center;
    align-self: start;
}


.magazine-detail__cover img {
    display: block;

    width: 100%;
    height: auto;
}
/* =========================================================
   ABOUT
   ========================================================= */

.magazine-detail__about {
    width: min(100%, 1260px);

    margin-inline: auto;

    padding:
        0
        clamp(20px, 3vw, 54px);

    position: relative;
    z-index: 1;
}

.magazine-detail__section-header {
    margin-bottom: 18px;
}

.magazine-detail__section-header h2 {
    margin: 0;

    color: var(--magazine-color);

    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
}


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

.magazine-detail__content {
    width: min(56%, 720px);

    margin-left: clamp(50px, 7vw, 120px);
    margin-right: auto;

    font-size: 1.05rem;
    line-height: 1.68;
}

.magazine-detail__content > *:first-child {
    margin-top: 0;
}


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


/* =========================================================
   MAGAZINE DETAIL — NAVIGATION
   ========================================================= */

.magazine-detail__navigation {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 40px;

    margin-top: clamp(48px, 5vw, 72px);
    padding-top: 22px;

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


.magazine-detail__navigation a {
    color: inherit;

    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;

    text-decoration: none;
    text-transform: uppercase;
}


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

/* =========================================================
   MAGAZINE SINGLE — TABLET
   ========================================================= */

@media (max-width: 900px) {

    .magazine-detail__hero {
        display: flex;
        flex-direction: column;

        width: 100%;

        gap: 0;

        padding:
            24px
            clamp(20px, 4vw, 40px)
            40px;
    }


    /* ---------- INTRO ---------- */

    .magazine-detail__intro {
        order: 1;

        width: 100%;
    }


    /* ---------- COVER ---------- */

    .magazine-detail__cover {
        order: 2;

        display: block;

        width: min(70%, 360px);

        margin:
            40px
            auto
            42px;

        align-self: center;
        justify-self: auto;
    }


    .magazine-detail__cover img {
        display: block;

        width: 100%;
        max-width: 100%;
        height: auto;
    }


    /* ---------- METADATA ---------- */

    .magazine-detail__metadata {
        order: 3;

        width: 100%;
    }


    /* ---------- ABOUT ---------- */

    .magazine-detail__about {
        width: 100%;

        margin: 0;

        padding-inline:
            clamp(20px, 4vw, 40px);
    }


    .magazine-detail__content {
        width: 100%;
        max-width: none;

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

}

/* =========================================================
   MAGAZINE SINGLE — MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .magazine-detail {
        padding-block: 18px 18px;
    }


    /* ---------- HERO ---------- */

    .magazine-detail__hero {
        padding:
            18px
            20px
            36px;
    }

    .magazine-detail__cover {
        width: min(72%, 320px);

        margin:
            36px
            auto
            38px;
    }


    /*
     * Na desktopu drží intro + metadata
     * společně v levém sloupci.
     *
     * Na mobilu wrapper "rozpustíme",
     * abychom mohli vložit obálku
     * mezi intro a metadata.
     */

    .magazine-detail__info {
        display: contents;
    }


    /* ---------- INTRO ---------- */

    .magazine-detail__intro {
        order: 1;

        width: 100%;
    }

    .magazine-detail__title {
        font-size: clamp(3rem, 14vw, 5rem);
    }

    .magazine-detail__purchase {
        margin-top: 24px;
    }


    /* ---------- METADATA ---------- */

    .magazine-detail__metadata {
        order: 3;

        width: 100%;

        margin: 0;

        padding-top: 14px;
    }

    .magazine-detail__metadata-row {
        grid-template-columns:
            minmax(110px, 0.85fr)
            minmax(0, 1.15fr);

        gap: 18px;

        padding-block: 10px;
    }


    /* ---------- ABOUT ---------- */


    .magazine-detail__section-header {
        margin-bottom: 24px;
    }

    .magazine-detail__about {
        padding-inline: 20px;
    }

    .magazine-detail__content {
        font-size: 1rem;
        line-height: 1.6;
    }

}


/* =========================================================
   MAGAZINE — PREVIEW
   ========================================================= */

.magazine-detail__preview {
    width: min(100%, 1260px);

    margin:
        clamp(64px, 7vw, 100px)
        auto
        0;

    padding-inline: clamp(20px, 3vw, 54px);
}


/* =========================================================
   PREVIEW GALLERY
   ========================================================= */

.magazine-detail__preview-gallery {
    margin-top: 32px;
}

.magazine-detail__preview-gallery .wp-block-gallery {
    display: grid;

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

    gap: clamp(16px, 2vw, 28px);

    width: 100%;
}


/* ---------- jednotlivé dvojstrany ---------- */

.magazine-detail__preview-gallery .wp-block-image {
    width: 100% !important;

    margin: 0 !important;
}

.magazine-detail__preview-gallery .wp-block-image a {
    display: block;
}

.magazine-detail__preview-gallery .wp-block-image img {
    display: block;

    width: 100%;
    height: auto;
}


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

@media (max-width: 700px) {

    .magazine-detail__preview {
        margin-top: 48px;

        padding-inline: 20px;
    }

    .magazine-detail__preview-gallery {
        margin-top: 24px;
    }

    .magazine-detail__preview-gallery .wp-block-gallery {
        grid-template-columns: 1fr;

        gap: 16px;
    }
    

}

/* =========================================================
   MAGAZINE — CONTENTS
   ========================================================= */

.magazine-detail__contents {
    width: min(100%, 1260px);

    margin:
        clamp(64px, 7vw, 96px)
        auto
        0;

    padding-inline:
        clamp(20px, 3vw, 54px);
}


/* =========================================================
   CONTENTS LIST
   ========================================================= */

.magazine-detail__contents-list {
    width: min(100%, 900px);

    counter-reset: magazine-content;
}


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

.magazine-detail__contents-list
.wp-block-heading {
    margin:
        28px
        0
        10px;

    color: inherit;

    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.03em;

    text-transform: uppercase;
}


.magazine-detail__contents-list
.wp-block-heading:first-child {
    margin-top: 8px;
}


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

.magazine-detail__contents-list
.wp-block-list {
    margin: 0;
    padding: 0;

    list-style: none;

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


/*
 * První seznam nepotřebuje linku nahoře.
 */
.magazine-detail__contents-list
.wp-block-list:first-of-type {
    border-top: 0;
}


/* =========================================================
   ITEM
   ========================================================= */

.magazine-detail__contents-list
.wp-block-list > li {
    position: relative;

    margin: 0;

    padding:
        18px
        110px
        18px
        80px;

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

    font-size:
        clamp(1.05rem, 1.45vw, 1.3rem);

    line-height: 1.35;

    counter-increment:
        magazine-content;
}


/* =========================================================
   NUMBER
   ========================================================= */

.magazine-detail__contents-list
.wp-block-list > li::before {
    content:
        counter(
            magazine-content,
            decimal-leading-zero
        );

    position: absolute;

    left: 0;
    top: 22px;

    color: var(--color-muted);

    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0.04em;
}


/* =========================================================
   ONLINE
   ========================================================= */

.magazine-detail__contents-list
.wp-block-list > li:has(a)::after {
    content: "ONLINE";

    position: absolute;

    top: 21px;
    right: 0;

    color: var(--magazine-color);

    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0.04em;

    text-transform: uppercase;

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


/* =========================================================
   LINKS
   ========================================================= */

.magazine-detail__contents-list a {
    color: inherit;

    text-decoration: none;

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


/*
 * Název podtrhneme při hoveru nad názvem.
 */
.magazine-detail__contents-list a:hover,
.magazine-detail__contents-list a:focus-visible {
    text-decoration-line: underline;
}


/* =========================================================
   META LINE
   Gutenberg: Shift + Enter mezi názvem a metařádkem
   ========================================================= */

.magazine-detail__contents-list
.wp-block-list > li br {
    display: block;

    content: "";

    margin-top: 6px;
}


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

.magazine-content-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 8px;

    margin-top: 6px;

    color: var(--color-muted);

    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.3;
}


.magazine-content-meta__place {
    padding-left: 10px;

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


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

@media (max-width: 700px) {

    .magazine-detail__contents {
        margin-top: 52px;

        padding-inline: 20px;
    }


    .magazine-detail__contents-list {
        width: 100%;
    }


    .magazine-detail__contents-list
    .wp-block-heading {
        margin-top: 30px;
        margin-bottom: 10px;

        font-size: 0.85rem;
    }


    .magazine-detail__contents-list
    .wp-block-heading:first-child {
        margin-top: 8px;
    }


    .magazine-detail__contents-list
    .wp-block-list > li {
        padding:
            16px
            0
            16px
            42px;

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


    .magazine-detail__contents-list
    .wp-block-list > li::before {
        top: 20px;
    }


    /*
     * ONLINE na mobilu pod obsah položky.
     */
    .magazine-detail__contents-list
    .wp-block-list > li:has(a)::after {
        position: static;

        display: block;

        width: max-content;

        margin-top: 8px;

        font-size: 0.80rem;
    }

    .magazine-content-meta {
        gap: 6px;

        margin-top: 5px;

        font-size: 0.90rem;
    }

    .magazine-content-meta__place {
        padding-left: 8px;
    }

}