/* ═════════════════════════════════════════════════════════════════
   Stage tiles — repeatable full-width sections below the hero
   ═════════════════════════════════════════════════════════════════ */

:root {
    /* ── Content panel inset ───────────────────── */
    --panel-inset-top:    7%;
    --panel-inset-right:  9.5%;
    --panel-inset-bottom: 9.5%;
    --panel-inset-left:   9.5%;
}

.stage-tile {
    position: relative;
    z-index: 0;                      /* behind the hero */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-top: calc(-1 * var(--stage-overlap));
    aspect-ratio: 3840 / 2150;
    overflow: hidden;
}

/* Each subsequent tile tucks behind the previous one */
.stage-tile ~ .stage-tile      { z-index: -1; }
.stage-tile ~ .stage-tile ~ .stage-tile { z-index: -2; }
.stage-tile ~ .stage-tile ~ .stage-tile ~ .stage-tile { z-index: -3; }
.stage-tile ~ .stage-tile ~ .stage-tile ~ .stage-tile ~ .stage-tile { z-index: -4; }

.stage-tile > img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Animation overlay for showcase tiles — sits above the
   background image, below the tile frame.               */
.stage-tile .stage-anim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;                      /* above image, below frame */
    pointer-events: none;
    display: block;
}



/* ── Tile frame overlay ────────────────────────────────
   Decorative frame PNG layered on top of each tile.    */
.stage-tile .tile-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;                      /* above .content-panel */
    pointer-events: none;
    display: block;
}

/* ── Content panel ─────────────────────────────────────
   Text overlay between the stage image and the tile
   frame.  Shared base styles — specific layouts
   (overview, showcase, etc.) live in their own files.  */
.stage-tile .content-panel {
    position: absolute;
    top:    var(--panel-inset-top);
    right:  var(--panel-inset-right);
    bottom: var(--panel-inset-bottom);
    left:   var(--panel-inset-left);
    z-index: 1;                      /* above image, below tile-frame */
    display: flex;
    flex-direction: column;
    padding: 2rem;
    box-sizing: border-box;
    background: var(--nav-bg);
    color: var(--purple-dark);
    font-family: var(--font-nav);
    pointer-events: none;            /* clicks pass through to the image */
}

/* Section headings above the stage content.  Styled here for the
   above-breakpoint regime; responsive.css gives them the box
   treatment below 1000px. */
.stage-tile .content-panel h2 {
    font-size: clamp(18px, 1.8vw, 30px);
    font-weight: 800;
    text-align: center;
}

/* Simple panels (no custom layout): centred text with spacing */
.stage-tile .content-panel > p {
    font-size: clamp(13px, 1.2vw, 20px);
    line-height: 1.6;
    margin: 0 0 1rem;
    max-width: 40rem;
    text-align: justify;
    pointer-events: auto;
}

.stage-tile .content-panel > p:last-child {
    margin-bottom: 0;
}