/* ============================================================
   BOXALMATCH — legacy subpage theme (responsive)
   Drop-in replacement for the old css/responsive.css.
   Same breakpoints and selector contract as the original —
   visual polish only, no structural/behavioral changes.
   ============================================================ */

@media only screen and (max-width: 1300px) {
    .container {
        max-width: 980px;
        padding: 20px;
        box-sizing: border-box;
    }

    #home > .slide {
        max-height: unset;
        height: unset;
        position: relative;
    }
}

@media only screen and (max-width: 1000px) {
    .container {
        max-width: 760px;
        padding: 20px;
        box-sizing: border-box;
    }

    #home > .slide > img { width: 100%; }

    #home > .slide > .slide-caption {
        width: 50%;
        top: 30px;
    }

    header > nav > ul > li.brand { max-width: 15%; }

    h1 { font-size: 2em !important; }
    h2 { font-size: 1.8em !important; }
    h3 { font-size: 1.6em !important; }
    h4 { font-size: 1.45em !important; }
    h5 { font-size: 1.3em !important; }
    h6 { font-size: 1.2em !important; }

    #character-profile > .character > .character-bio { padding: 20px; }
}

/* ============================================================
   MOBILE NAVIGATION — same bar and menu as the home page.
   ------------------------------------------------------------
   The home page switches to its burger at 820px, so this block
   does too (the rest of the layout still turns over at 760px).
   The bar stays a 48px sticky strip: logo left, IT/EN pill and
   burger right. Opening it drops a glass panel from under the
   bar with left-aligned, hairline-separated links — not the
   full-screen overlay the legacy theme slid up from the bottom.
   ============================================================ */
@media only screen and (max-width: 820px) {

    /* Full-bleed content column, as on the home page. */
    .container {
        width: 100%;
        max-width: none;
        padding: 20px;
        box-sizing: border-box;
    }

    /* The peek rails bleed --rail-bleed past the container on both sides.
       The desktop 6vw overshot the container's 20px phone gutter, so every
       page with a rail was a few pixels wider than the viewport and scrolled
       sideways. Bleeding exactly to the gutter lands the rail flush with the
       screen edge. */
    :root { --rail-bleed: 20px; }

    /* Opaque on mobile, exactly as on the home page: a
       backdrop-filter here would make the header a backdrop root,
       and the panel nested inside it would have nothing of the
       page left to blur. */
    #main-header {
        height: 48px;
        background-color: rgba(8, 8, 10, 0.97);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    #main-header > nav { height: auto; }

    .mobile-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        box-sizing: border-box;
        height: 48px;
        max-width: 1024px;
        margin: 0 auto;
        padding: 0 22px;
        background-color: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        /* above the panel, so the burger stays tappable when open */
        position: relative;
        z-index: 1002;
    }

    .mobile-nav img {
        width: auto;
        height: 28px;
        max-width: 45vw;
        margin: 0;
        filter: brightness(0) invert(1);
    }

    /* built by js: holds the IT/EN pill and the burger */
    .mobile-nav-right {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .mobile-nav-right .lang-toggle {
        margin: 0;
        list-style: none;
    }

    /* The markup gives us a single <p class="toggle-nav">❮</p>, so the
       three bars are the element's own background plus its two
       pseudo-elements; the chevron glyph itself is hidden. */
    .mobile-nav .toggle-nav {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        margin: 0;
        padding: 0;
        cursor: pointer;
        font-size: 0;
        line-height: 0;
        color: var(--ink, #ffffff);
        background-image: linear-gradient(currentColor, currentColor);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 16px 1px;
        transition: background-size 0.25s;
        z-index: 1;
    }

    .mobile-nav .toggle-nav::before,
    .mobile-nav .toggle-nav::after {
        content: "";
        position: absolute;
        left: 50%;
        top: calc(50% - 0.5px);
        width: 16px;
        height: 1px;
        margin-left: -8px;
        background-color: currentColor;
        transition: transform 0.3s;
    }

    .mobile-nav .toggle-nav::before { transform: translateY(-5px); }
    .mobile-nav .toggle-nav::after  { transform: translateY(5px); }

    .focus-nav .mobile-nav .toggle-nav { background-size: 0 1px; }
    .focus-nav .mobile-nav .toggle-nav::before { transform: rotate(45deg); }
    .focus-nav .mobile-nav .toggle-nav::after  { transform: rotate(-45deg); }

    /* the drop-down panel */
    header nav {
        position: fixed;
        top: 48px;
        bottom: auto;
        left: 0;
        right: 0;
        width: 100%;
        height: auto;
        display: none;
        background-color: rgba(10, 10, 12, 0.72);
        backdrop-filter: blur(30px) saturate(180%);
        -webkit-backdrop-filter: blur(30px) saturate(180%);
        border-bottom: 1px solid var(--glass-hair);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset,
                    0 24px 48px rgba(0, 0, 0, 0.6);
        z-index: 1000;
    }

    header.focus-nav nav { display: block; }

    header > nav > ul {
        box-sizing: border-box;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        text-align: left;
        height: auto;
        min-height: 0;
        max-width: 1024px;
        margin: 0 auto;
        padding: 6px 22px 18px;
    }

    header > nav > ul > li {
        display: block;
        width: 100%;
        margin: 0;
    }

    header > nav > ul > li > a {
        display: block;
        font-size: 17px;
        padding: 13px 0;
        opacity: 1;
        border-bottom: 1px solid var(--hair);
    }

    header > nav > ul > li:last-child > a { border-bottom: 0; }

    /* the wordmark already sits in the bar */
    header > nav > ul > li.brand { display: none; }

    /* fallback position for the pill if js has not moved it into the bar */
    header > nav > ul > li.lang-toggle {
        width: auto;
        margin: 10px 0 0;
    }
}

@media only screen and (max-width: 760px) {

    .slider .slide-caption {
        width: 100%;
        border: none;
        border-radius: 0;
        position: static;
        box-sizing: border-box;
        bottom: 50px;
        top: unset;
    }

    #webshop .shop .shop-item {
        width: 44%;
        margin-bottom: 50px;
    }

    #selected-shop-item .content {
        max-width: 100vw;
        max-height: 100vh;
        height: 100vh;
        margin: 0;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: none;
        justify-items: center;
        border-radius: 0;
    }

    #selected-shop-item .content figure { max-width: 100vw; margin: 0; }

    #selected-shop-item .content figure img {
        width: 45%;
        margin: 0 27.5%;
    }

    #character-profile {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 560px) {

    .slider {
        max-height: unset;
        height: 100vh;
        position: relative;
        display: grid;
        grid-template-rows: min-content auto;
        overflow: hidden;
        align-items: start;
    }

    .slider > figure {
        width: 250%;
        margin-left: -50%;
        margin-top: -30%;
        display: block;
    }

    .slider .slide-caption {
        width: 100%;
        border: none;
        position: static;
        box-sizing: border-box;
    }

    .container {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
    }

    /* A little wider on phones — 76% of a 374px column is a small card, and
       the peek at the edges still reads at 88%. Not scoped to .season: the
       script wraps every rail in .episodes-wrap, so .season > .episodes no
       longer matches anything. */
    .episodes > .episode { width: min(88%, 780px); }

    #webshop .shop .shop-item {
        width: 100%;
        margin-bottom: 50px;
    }

    #selected-shop-item .content {
        max-width: 100vw;
        max-height: 100vh;
        height: 100vh;
        margin: 0;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: none;
        justify-items: center;
    }

    #selected-shop-item .content figure { max-width: 100vw; margin: 0; }

    #selected-shop-item .content figure img {
        width: 45%;
        margin: 0 27.5%;
    }

    .order-form { grid-template-columns: none; }
}