/* ============================================================
   Play Page — Sticky Layout Zones
   Structural rules only; visual styles live in the theme files.
   ============================================================ */

/* ── Shared base ── */
.play-layout { display: flex; flex-direction: column; }
.play-layout > .banner { flex: 0 0 auto; margin-bottom: 0; padding: 0.5rem 1rem; }
.play-body { display: flex; flex: 1; min-height: 0; }

/* ── Sidebar layouts: image fixed column, content scrolls ── */
body.layout-image_left,
body.layout-image_right { height: 100dvh; overflow: hidden; margin: 0; }

body.layout-image_left .play-layout,
body.layout-image_right .play-layout { height: 100dvh; overflow: hidden; }

body.layout-image_left .play-body,
body.layout-image_right .play-body { flex: 1; min-height: 0; overflow: hidden; }

body.layout-image_left .play-sticky,
body.layout-image_right .play-sticky {
    width: 40vw;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    box-sizing: border-box;
}

body.layout-image_left .play-sticky header,
body.layout-image_right .play-sticky header {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

body.layout-image_left .play-sticky header img,
body.layout-image_right .play-sticky header img {
    flex: 1;
    min-height: 0;
    width: 100%;
    object-fit: cover;
    display: block;
}

body.layout-image_left .play-scroll,
body.layout-image_right .play-scroll {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 1.5rem 2.5rem;
    box-sizing: border-box;
}

/* Image right reverses flex order */
body.layout-image_right .play-body { flex-direction: row-reverse; }

/* ── Image Top: sticky banner + sticky image, page scrolls ────── */
body.layout-image_top .play-layout { max-width: 1400px; margin: 0 auto; }
body.layout-image_top .play-body { flex-direction: column; }
/* Banner (title + author) pins at the very top; the image pins directly below it.
   --banner-h is measured in play.php so the image's offset matches the banner height. */
body.layout-image_top .banner {
    position: sticky;
    top: 0;
    z-index: 101;
    background: var(--bg);
}
body.layout-image_top .play-sticky {
    position: sticky;
    top: var(--banner-h, 0px);
    width: 100%;
    z-index: 100;
}
body.layout-image_top .play-sticky header img {
    width: 100%;
    max-height: 55vh;
    object-fit: cover;
    object-position: center 25%; /* between top (0%) and center (50%) */
    display: block;
    border-radius: 0;
}
/* No horizontal padding here so the content box reaches the same left/right edges
   as the full-bleed image above it; the inner padding lives on .content instead. */
body.layout-image_top .play-scroll { padding: 1rem 0; box-sizing: border-box; }
body.layout-image_top .play-scroll > footer { padding: 0 2rem; box-sizing: border-box; }

/* Image Top — the text block spans the full image width; its text reads left-aligned,
   with inner padding so the words aren't glued to the edge. Loaded after the theme
   CSS, so this wins over the theme's text-align:center / max-width. */
.layout-image_top .content { text-align: left; max-width: none; margin: 0; padding: 0 2rem; box-sizing: border-box; }
.layout-image_top .content p { margin: 0; }
.layout-image_top .content h1 { margin: 0; }
.layout-image_top .choices { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 0; }
.layout-image_top .choice a { width: auto; min-width: 180px; max-width: 320px; }
.layout-image_top .choices .hint { flex-basis: 100%; display: flex; justify-content: center; margin-top: 0.5rem; }
.layout-image_top .choices > a { flex-basis: 100%; text-align: center; margin-top: 0.25rem; }

/* ── Mobile: always stack banner → image → content ─────── */
@media (max-width: 768px) {
    body.layout-image_left,
    body.layout-image_right { height: auto; overflow: auto; }

    body.layout-image_left .play-layout,
    body.layout-image_right .play-layout { height: auto; overflow: visible; }

    body.layout-image_left .play-body,
    body.layout-image_right .play-body { flex-direction: column; height: auto; overflow: visible; }

    body.layout-image_left .play-sticky,
    body.layout-image_right .play-sticky {
        position: sticky;
        top: 0;
        width: 100%;
        height: auto;
        z-index: 100;
        overflow: visible;
        padding: 0;
    }
    body.layout-image_left .play-sticky header,
    body.layout-image_right .play-sticky header { flex: 0 0 auto; height: auto; overflow: visible; display: block; }

    body.layout-image_left .play-sticky header img,
    body.layout-image_right .play-sticky header img {
        width: 100%;
        height: auto;
        max-height: 45vw;
        object-fit: cover;
    }
    body.layout-image_left .play-scroll,
    body.layout-image_right .play-scroll { flex: none; height: auto; overflow-y: visible; padding: 1rem; }
}