/* =========================================================
   3. SHARED INTERACTION
   ========================================================= */

.link-hover,
.featured-article__read,
.news-item__link,
.section-more-link,
.artspots-placeholder__link {
    position: relative;

    display: inline-flex;
    align-items: baseline;

    gap: 0.4em;

    color: inherit;
    text-decoration: none;
}


/* ---------- underline ---------- */

.link-hover::after,
.featured-article__read::after,
.news-item__link::after,
.section-more-link::after,
.artspots-placeholder__link::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -4px;

    width: 28px;
    height: 1px;

    background: currentColor;

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

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

.link-hover:hover::after,
.link-hover:focus-visible::after,
.featured-article__read:hover::after,
.featured-article__read:focus-visible::after,
.news-item__link:hover::after,
.news-item__link:focus-visible::after,
.section-more-link:hover::after,
.section-more-link:focus-visible::after,
.artspots-placeholder__link:hover::after,
.artspots-placeholder__link:focus-visible::after {
    transform: scaleX(1);
}


/* ---------- arrows ---------- */

.link-arrow,
.link-arrow--external {
    display: inline-block;

    flex: 0 0 auto;

    /*
     * Stabilnější box pro šipku.
     */
    min-width: 1em;

    line-height: 1;

    transform: translate3d(0, 0, 0);

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


/* internal */

a:hover .link-arrow,
a:focus-visible .link-arrow {
    transform: translate3d(5px, 0, 0);
}


/* external */

a:hover .link-arrow--external,
a:focus-visible .link-arrow--external,
.news-item__link--external:hover .link-arrow,
.news-item__link--external:focus-visible .link-arrow {
    transform: translate3d(3px, -3px, 0);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {

    .link-arrow,
    .link-arrow--external {
        transition: none;
    }

    a:hover .link-arrow,
    a:focus-visible .link-arrow,
    a:hover .link-arrow--external,
    a:focus-visible .link-arrow--external,
    .featured-article:hover
    .featured-article__read
    .link-arrow,
    .featured-article:focus-within
    .featured-article__read
    .link-arrow {
        transform: none;
    }

}

/* =========================================================
   ARCHIVE PAGINATION
   ========================================================= */

.archive-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 32px;

    margin-top:
        clamp(20px, 3.5vw, 32px);

    padding-top:
        clamp(20px, 2.5vw, 28px);
}


.archive-pagination a {
    color: inherit;
    text-decoration: none;

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

    text-transform: uppercase;
}


.archive-pagination__newer {
    margin-right: auto;
}


.archive-pagination__older {
    margin-left: auto;
}


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


@media (max-width: 700px) {

    .archive-pagination {
        gap: 20px;

        margin-top: 36px;
        padding-top: 20px;
    }

    .archive-pagination a {
        font-size: 0.8rem;
    }

}

/* base page */
/* =========================================================
   DEFAULT PAGE
   ========================================================= */

.page-detail {
    padding-block:
        clamp(48px, 6vw, 88px)
        clamp(80px, 9vw, 128px);
}


.page-detail__article {
    width: min(100%, 1080px);

    margin-inline: auto;

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


/* =========================================================
   HEADER
   ========================================================= */

.page-detail__header {
    margin-bottom:
        clamp(48px, 6vw, 80px);
}


.page-detail__title {
    max-width: 900px;

    margin: 0;

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

    font-size:
        clamp(3.5rem, 7vw, 7rem);

    font-weight: 700;
    line-height: 0.92;

    letter-spacing: -0.035em;
}


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

.page-detail__content {
    width: min(100%, 720px);

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


.page-detail__content > * {
    margin-top: 0;
}


.page-detail__content > * + * {
    margin-top: 1.4em;
}


.page-detail__content h2 {
    margin-top: 2.4em;

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

    font-size:
        clamp(1.7rem, 2.5vw, 2.4rem);

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


.page-detail__content h3 {
    margin-top: 2em;

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

    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.15;
}


.page-detail__content a {
    color: inherit;

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


.page-detail__content ul,
.page-detail__content ol {
    padding-left: 1.3em;
}


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

@media (max-width: 700px) {

    .page-detail {
        padding-block:
            36px
            72px;
    }


    .page-detail__title {
        font-size:
            clamp(2.8rem, 13vw, 4.8rem);
    }


    .page-detail__header {
        margin-bottom: 40px;
    }

}

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

.has-media-lightbox {
    overflow: hidden;
}

.media-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
}

.media-lightbox.is-open {
    display: block;
}

.media-lightbox [hidden] {
    display: none !important;
}


/* ---------- Backdrop ---------- */

.media-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
}


/* ---------- Dialog ---------- */

.media-lightbox__dialog {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(48px, 8vw)
        minmax(0, 1fr)
        minmax(48px, 8vw);

    grid-template-rows:
        minmax(0, 1fr)
        auto
        auto;

    align-items: center;

    width: 100%;
    height: 100%;

    padding:
        clamp(24px, 4vw, 64px)
        clamp(16px, 3vw, 48px);
}


/* ---------- Stage ---------- */

.media-lightbox__stage {
    grid-column: 2;
    grid-row: 1;

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

    min-width: 0;
    min-height: 0;

    overflow: hidden;
}


/* ---------- Image ---------- */

.media-lightbox__image {
    display: block;

    max-width: 100%;
    max-height: calc(100vh - 170px);

    width: auto;
    height: auto;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    transform-origin: center center;
    transition: transform 180ms ease;
}


/* ---------- Buttons ---------- */

.media-lightbox button {
    border: 0;
    background: transparent;

    color: var(--color-white);

    font: inherit;
    cursor: pointer;
}


/* ---------- Close ---------- */

.media-lightbox button.media-lightbox__close {
    position: absolute;

    top: 20px;
    right: 24px;

    z-index: 2;

    width: 48px;
    height: 48px;

    padding: 0;
    border: 0;
    background: transparent;

    font-size: 0;
}

.media-lightbox__close::before,
.media-lightbox__close::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    width: 22px;
    height: 2px;

    background: var(--color-white);

    transform-origin: center;
}

.media-lightbox__close::before {
    transform:
        translate(-50%, -50%)
        rotate(45deg);
}

.media-lightbox__close::after {
    transform:
        translate(-50%, -50%)
        rotate(-45deg);
}


/* ---------- Previous / Next ---------- */

.media-lightbox__previous,
.media-lightbox__next {
    grid-row: 2;

    width: 48px;
    height: 48px;

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

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

.media-lightbox__previous {
    grid-column: 1;
    justify-self: start;

}

.media-lightbox__next {
    grid-column: 3;
    justify-self: end;

    
}


/* ---------- Counter ---------- */

.media-lightbox__counter {
    grid-column: 2;
    grid-row: 2;

    justify-self: center;

    color: var(--color-white);

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

    letter-spacing: 0.04em;
}

.media-lightbox__previous,
.media-lightbox__next,
.media-lightbox__counter {
    margin-top: 12px;
}

/* ---------- Zoom ---------- */

.media-lightbox__zoom {
    grid-column: 2;
    grid-row: 3;

    justify-self: center;

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

    gap: 10px;

    margin-top: 8px;

    color: var(--color-white);

    font-size: 0.74rem;
    font-weight: 700;
}

.media-lightbox__zoom[hidden] {
    display: none !important;
}

.media-lightbox__zoom button {
    min-width: 36px;
    height: 36px;

    padding: 0;

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


/* ---------- Zoom / Pan ---------- */

.media-lightbox__image.is-zoomed {
    cursor: grab;
    touch-action: none;
}

.media-lightbox__image.is-dragging {
    cursor: grabbing;
    transition: none;
}


/* ---------- Focus ---------- */

.media-lightbox button:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 5px;
}

/* =========================================================
   ART.SPOTS — PAGE
   ========================================================= */

.artspots-page {
    padding-block:
        clamp(42px, 5vw, 72px)
        clamp(72px, 8vw, 120px);
}


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

.artspots-page__intro {
    width: min(100%, 1260px);

    margin-inline: auto;

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


.artspots-page__title {
    width: min(100%, 760px);

    margin: 0;

    font-size:
        clamp(3rem, 6vw, 6.5rem);

    line-height: 0.95;

    letter-spacing: -0.035em;
}


.artspots-page__lead {
    width: min(100%, 560px);

    margin:
        clamp(24px, 2.5vw, 36px)
        0
        0;

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


/* =========================================================
   MAP
   ========================================================= */

.artspots-page__map {
    width: min(100%, 820px);

    margin:
        clamp(36px, 4vw, 56px)
        auto
        0;
}


.artspots-page__map-link {
    display: block;

    color: inherit;
    text-decoration: none;
}


.artspots-page__map img {
    display: block;

    width: 100%;
    height: auto;
}

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

@media (max-width: 700px) {

    .artspots-page {
        padding-block:
            28px
            72px;
    }


    .artspots-page__intro {
        padding-inline: 20px;
    }


    .artspots-page__title {
        font-size:
            clamp(2.7rem, 12vw, 4.6rem);
    }


    .artspots-page__lead {
        margin-top: 20px;

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


    .artspots-page__map {
        width: 100%;

        margin-top: 44px;

        padding-inline: 20px;
    }

}


/* =========================================================
   404
   ========================================================= */

.error-404 {
    display: flex;
    align-items: center;

    min-height: 70vh;

    padding-block:
        clamp(64px, 8vw, 120px);
}


.error-404__content {
    width: min(100%, 900px);
}


.error-404__code {
    margin: 0 0 12px;

    color: var(--color-red);

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

    letter-spacing: 0.03em;
}


.error-404__title {
    margin: 0;

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

    font-style: italic;
    line-height: 0.9;
}


.error-404__text {
    width: min(100%, 48ch);

    margin:
        clamp(28px, 4vw, 48px)
        0
        24px;

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


.error-404__link {
    color: inherit;

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

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