/* ==========================================================================
   BLOCK: TILES - hub topic grid (Regulation / Sustainability landings).
   Grid-stacked image + scrim + label; grayscale resolving on hover.
   ========================================================================== */

@scope (.block-tiles) {
    :scope {
        padding-block: clamp(44px, 9cqw, 130px);
        container-type: inline-size;
        container-name: tiles;
    }
    .tiles-intro {
        max-inline-size: 66ch;
        margin-block-end: clamp(28px, 4cqw, 64px);
        display: grid;
        gap: clamp(12px, 1.6cqw, 20px);
    }
    .tiles-intro h2 { font-weight: 100; font-size: clamp(2rem, 4cqw, 3.2rem); line-height: 1.05; }
    .tiles-intro h2 strong { font-weight: 900; color: var(--accent-ink); }
    .tiles-intro p { font-weight: 300; font-size: 1.05rem; color: var(--text-secondary); line-height: 1.85; }

    /* BENTO - mirrors the live worldooh.org hub layouts exactly, but sized
       by the CONTAINER, not the viewport.
       Mechanics: a 6-track grid with dense flow. A plain tile spans 2
       tracks (3 per row), .t-tall spans 2 rows, .t-wide spans 3 tracks
       (2 per row). The live arrangements then emerge from source order:
       dense flow backfills the pocket under the top-middle tile. */
    .tile-grid {
        display: grid;
        gap: clamp(16px, 2cqw, 26px);
        grid-template-columns: 1fr;              /* narrow: single column */
        grid-auto-rows: clamp(180px, 42cqw, 240px);
        grid-auto-flow: dense;
    }
    .tile {
        display: grid;
        grid-template: 1fr / 1fr;   /* definite cell: children stack inside
                                       the track, so block-size: 100% on the
                                       image resolves and labels pin to the
                                       true bottom edge (no more clipping) */
        border: 1px solid var(--panel-border);
    }

    /* Two per row once a pair fits */
    @container tiles (width >= 620px) {
        .tile-grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(170px, 20cqw, 240px); }
        .tile { grid-column: span 3; }
        .tile.t-tall { grid-row: span 2; }
        .tile.t-wide { grid-column: span 6; }
    }

    /* Full bento at three per row */
    @container tiles (width >= 920px) {
        .tile-grid { grid-auto-rows: clamp(150px, 12cqw, 215px); }
        .tile { grid-column: span 2; }
        .tile.t-wide { grid-column: span 3; }
        /* pins the second tall tile to the right-hand column
           (sustainability: Insights & Research) */
        .tile.t-right { grid-column: 5 / span 2; }
    }

    /* Corner icon slot (live sustainability dash) */
    .tile-icon {
        z-index: 2;
        place-self: end;
        padding: clamp(14px, 1.8cqw, 24px);
        opacity: 0.85;
    }
    .tile-icon img {
        inline-size: clamp(28px, 3.2cqw, 46px);
        block-size: auto;
        min-block-size: 0;
        object-fit: contain;
        filter: none;
        display: block;
    }
    .tile > * { grid-area: 1 / 1; }          /* grid-stacked, no absolute */
    .tile > img {
        inline-size: 100%;
        block-size: 100%;
        min-block-size: 0;
        object-fit: cover;
        filter: grayscale(25%);
        transition: filter 0.5s var(--ease-lux), scale 0.7s var(--ease-lux);
    }
    .tile:hover > img { filter: grayscale(0%); scale: 1.03; }
    .tile { overflow: hidden; }
    .tile-scrim {
        background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.15) 55%);
        z-index: 1;
    }
    .tile-label {
        z-index: 2;
        align-self: end;
        padding: clamp(22px, 2.4cqw, 32px);
        color: #fff;
        font-weight: 900;
        font-size: clamp(0.95rem, 1.1cqw, 1.1rem);
        text-transform: uppercase;
        letter-spacing: 0.14em;
        line-height: 1.35;
        transition: color 0.25s;
    }
    .tile:hover .tile-label { color: var(--accent-lime); }

    /* Value cards row (Early Warning / Global Reach / Evidence-led) */
    .value-row {
        display: grid;
        gap: clamp(16px, 2cqw, 26px);
        margin-block: clamp(28px, 4cqw, 64px);
    }
    @container tiles (width >= 760px) { .value-row { grid-template-columns: repeat(3, 1fr); } }
    .value-row article {
        background: var(--panel-hover);
        background: light-dark(#f7f7f7, #101010);
        border-inline-start: 3px solid var(--accent-lime);
        padding: clamp(22px, 3cqw, 40px);
        display: grid;
        gap: 12px;
        align-content: start;
    }
    .value-row h3 {
        color: var(--panel-text);
        font-size: clamp(0.98rem, 1.1cqw, 1.1rem);
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }
    .value-row p { font-weight: 400; font-size: clamp(1rem, 1.1cqw, 1.08rem); color: var(--text-secondary); line-height: 1.75; }

    /* Section CTA band */
    .tiles-cta {
        display: grid;
        background: var(--bg-contrast);
        color: var(--text-inverse);
        margin-block-start: clamp(28px, 4cqw, 64px);
    }
    .tiles-cta > * { grid-area: 1 / 1; }
    .tiles-cta .cta-bg {
        background-position: center;
        background-size: cover;
        filter: grayscale(25%);
        opacity: 0.3;
    }
    .tiles-cta .cta-body {
        z-index: 1;
        padding: clamp(32px, 6cqw, 96px);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
    }
    .tiles-cta p { font-weight: 300; font-size: clamp(1.05rem, 1.4cqw, 1.3rem); max-inline-size: 46ch; line-height: 1.75; }
}