/**
 * Layout guard — žádné přetékání viewportu, konzistentní dýchání textu v boxech
 */

:root {
    --page-gutter: clamp(14px, 4vw, 36px);
    --page-gutter-left: max(var(--page-gutter), env(safe-area-inset-left, 0px));
    --page-gutter-right: max(var(--page-gutter), env(safe-area-inset-right, 0px));
    --inset-comfort: clamp(1rem, 2.8vw, 1.45rem);
    --inset-comfort-lg: clamp(1.15rem, 3.2vw, 1.75rem);
}

html {
    max-width: 100%;
}

body {
    max-width: 100%;
}

img,
video,
svg,
canvas,
iframe {
    max-width: 100%;
}

/* —— Vnitřní stránky (bez listing mřížky) —— */
.page-main:not(.js-listing-root) {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-inline: var(--page-gutter-left) var(--page-gutter-right);
    overflow-x: clip;
}

.page-main:not(.js-listing-root) .page-content-narrow,
.page-main:not(.js-listing-root) .page-placeholder {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    padding-inline: 0;
    box-sizing: border-box;
}

.page-main.js-listing-root {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: clip;
}

.page-stories-archive.page-main.js-listing-root {
    overflow: visible;
}

body.page-stories-archive {
    overflow-x: visible;
}

html:has(body.page-stories-archive) {
    overflow-x: visible;
}

.story-archive-lead,
.page-archive-lead {
    width: 100%;
    max-width: var(--content-shell-max);
    margin-inline: auto;
    padding-inline: var(--page-gutter-left) var(--page-gutter-right);
    box-sizing: border-box;
}

.page-stories-archive .story-archive-lead .page-list-intro-section,
.page-stories-archive .story-archive-lead .story-filters,
.page-stories-archive .page-archive-lead .page-list-intro-section,
.page-characters-archive .page-archive-lead .page-list-intro-section {
    padding-inline: 0;
}

.page-heading {
    max-width: 100%;
    padding-inline: var(--page-gutter-left) var(--page-gutter-right);
    box-sizing: border-box;
    overflow-wrap: anywhere;
}

.page-list-intro-section {
    padding-inline: var(--page-gutter-left) var(--page-gutter-right);
    box-sizing: border-box;
    max-width: 100%;
}

.page-list-intro {
    max-width: 100%;
    margin-inline: 0;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-wrap: break-word;
}

.page-main.js-listing-root .page-list-intro-section {
    width: 100%;
    max-width: var(--content-shell-max);
    margin-inline: auto;
}

.page-main.js-listing-root .page-heading {
    width: 100%;
    max-width: var(--content-shell-max);
    margin-inline: auto;
}

.page-main.js-listing-root .page-list-intro {
    max-width: 100%;
}

.page-list-intro::after {
    width: 100%;
    max-width: 100%;
}

.page-prose,
.page-muted-lead,
.page-placeholder,
.empty-state {
    overflow-wrap: anywhere;
    word-wrap: break-word;
}

.page-placeholder {
    padding: var(--inset-comfort-lg);
    margin-inline: auto;
    width: min(100%, 28rem);
    box-sizing: border-box;
}

.page-actions-center {
    padding-inline: var(--page-gutter-left) var(--page-gutter-right);
    box-sizing: border-box;
}

.page-list-summary__chips--signpost {
    max-width: 100%;
    box-sizing: border-box;
}

/* —— Filtry —— */
.story-filters {
    width: 100%;
    max-width: var(--content-shell-max);
    box-sizing: border-box;
    padding-inline: var(--page-gutter-left) var(--page-gutter-right);
}

.story-filters__bar,
.story-filters__footer {
    max-width: 100%;
    box-sizing: border-box;
}

.story-filters__chips--scroll {
    margin: 0;
    padding-inline: 0;
    max-width: 100%;
    mask-image: none;
    -webkit-mask-image: none;
    scrollbar-gutter: stable;
}

.story-filters__chip {
    max-width: none;
    white-space: nowrap;
    text-align: center;
    hyphens: none;
}

/* —— Mřížky —— */
.char-grid-wrap,
.art-grid-wrapper {
    width: 100%;
    max-width: var(--content-shell-max);
    margin-inline: auto;
    padding-inline: var(--page-gutter-left) var(--page-gutter-right);
    padding-bottom: clamp(2rem, 5vw, 3.5rem);
    box-sizing: border-box;
}

.char-grid,
.art-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.art-grid__column,
.char-grid .obr-card,
.gallery-card {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Karty — vnitřní odsazení textu */
.char-grid .card-content-wrapper,
.gallery-card .card-content-wrapper {
    box-sizing: border-box;
    max-width: 100%;
}

.char-grid .card-title,
.char-grid .card-occupation,
.char-grid .card-description,
.char-grid .nature-tag,
.gallery-card .card-title,
.gallery-card .card-subtitle,
.gallery-card .card-description {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-wrap: break-word;
}

/* —— Auth —— */
.page-main .auth-form {
    width: min(100%, 24rem);
    max-width: 100%;
    margin-inline: auto;
    padding: var(--inset-comfort-lg);
    box-sizing: border-box;
}

.page-main .auth-form input,
.page-main .auth-form button,
.page-main .auth-form .auth-form__google {
    max-width: 100%;
    box-sizing: border-box;
}

/* —— Header —— */
.site-utility-bar__inner,
.site-topbar .nav-container,
.site-breadcrumb__list,
.site-nav-mega__inner {
    width: min(100%, 1400px);
    max-width: 100%;
    margin-inline: auto;
    padding-inline: var(--page-gutter-left) var(--page-gutter-right);
    box-sizing: border-box;
}

.site-topbar-dropdown {
    overflow-x: clip;
    max-width: 100%;
}

.site-nav-mega__grid,
.site-search-strip__inner {
    max-width: 100%;
    box-sizing: border-box;
}

/* —— Domovská stránka —— */
.obrlobus-section__inner,
.obrlobus-intro__inner {
    width: min(100%, 1420px);
    max-width: 100%;
    padding-inline: var(--page-gutter-left) var(--page-gutter-right);
    box-sizing: border-box;
}

.obrlobus-intro__text,
.obrlobus-section__lead {
    overflow-wrap: anywhere;
    word-wrap: break-word;
}

/* —— Rozcestník —— */
.banner-container {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

.banner-content h2 {
    padding-inline: var(--inset-comfort-lg);
    box-sizing: border-box;
    overflow-wrap: anywhere;
}

/* —— Čtečka —— */
.reader-container,
.story-body,
.story-header {
    max-width: 100%;
    box-sizing: border-box;
}

.story-body p {
    overflow-wrap: anywhere;
    word-wrap: break-word;
}

/* —— Patička —— */
footer {
    padding-inline: max(1.25rem, env(safe-area-inset-left, 0px)) max(1.25rem, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
}

footer p {
    overflow-wrap: anywhere;
}

/* —— Mobil —— */
@media (max-width: 768px) {
    :root {
        --page-gutter: clamp(14px, 4.2vw, 22px);
    }

    .page-stories-archive .page-heading,
    .page-characters-archive .page-heading {
        padding-inline: var(--page-gutter-left) var(--page-gutter-right);
        text-align: left;
    }

    .page-gallery-archive .art-grid-wrapper > .page-heading {
        padding-inline: 0;
        text-align: center;
    }

    .page-gallery-archive .art-grid-wrapper > .page-heading::after {
        margin-left: auto;
        margin-right: auto;
    }

    .page-characters-archive .page-list-intro-section {
        padding-inline: var(--page-gutter-left) var(--page-gutter-right);
    }

    .page-stories-archive .page-list-intro-section,
    .page-stories-archive .story-archive-lead .page-list-intro-section,
    .page-stories-archive .page-archive-lead .page-list-intro-section,
    .page-characters-archive .page-archive-lead .page-list-intro-section {
        padding-inline: 0;
    }

    .page-characters-archive .char-grid-wrap,
.page-gallery-archive .art-grid-wrapper {
        padding-inline: var(--page-gutter-left) var(--page-gutter-right);
    }

    .page-characters-archive .char-grid:not(.char-catalog__track) .obr-card {
        overflow: hidden;
        max-width: 100%;
    }

    .page-characters-archive .char-grid:not(.char-catalog__track) .card-content-wrapper {
        padding: var(--inset-comfort);
    }

    .page-characters-archive .char-grid:not(.char-catalog__track) .card-image {
        max-width: 36%;
    }

    /* Reveal animace nesmí posouvat karty mimo obrazovku (kromě archivu příběhů) */
    .listing-reveal-ready:not(.page-stories-archive) .js-listing-card.reveal-from-left,
    .listing-reveal-ready:not(.page-stories-archive) .js-listing-card.reveal-from-right {
        --reveal-x: 0px;
    }

    .listing-reveal-ready:not(.page-stories-archive) .js-listing-card {
        --reveal-y: 20px;
    }

    .story-filters {
        padding-inline: var(--page-gutter-left) var(--page-gutter-right);
    }

    .story-reading-controls,
    .story-chapter-bottom-nav {
        max-width: 100%;
        box-sizing: border-box;
    }
}

@media (prefers-reduced-motion: reduce) {
    .banner .banner-content {
        transform: none !important;
    }
}