/* Spadey's Gallery — header-only page; <main> slot is left to grow with the
   user's gallery content below. Tokens & scaling rules mirror the homepage so
   the two pages feel like one site. */

:root {
    --ink: #3e2723;
    --ink-soft: #5d4037;
    --yellow: #fad054;
    --yellow-deep: #e5b840;
    --sky-top: #2b7da4;
    --sky-mid: #4a9ec4;
    --sky-bottom: #8ec5e8;
    --floral-tile: url("../assets/Flowerbackgroundhalfopacity.png");
    --header-border: 3px solid var(--ink-soft);
    --font-display: "Finger Paint", "Comic Sans MS", cursive;

    /* Same 1080p-preserving upscale as the homepage: pinned to 1 below
       1920×1080, scales linearly above so all paddings/sizes grow together. */
    --upscale: max(1, min(calc(100vw / 1920px), calc(100vh / 1080px)));

    --floral-bg-size: clamp(240px, 44vw, calc(1020px * var(--upscale)));
    --content-max-width: calc(1440px * var(--upscale));
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* Page is scrollable here (gallery content lives below the header). */
    height: auto;
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: var(--font-display);
    color: var(--ink);
    background: var(--yellow);
    /* Repeating floral over the rest of the page so when the user adds
       content below, it sits on the same warm pattern as the header strips. */
    background-image: var(--floral-tile);
    background-repeat: repeat;
    background-size: var(--floral-bg-size) auto;
    min-height: 100vh;
}

/* ——— Top bar (home / title / nav buttons) ——— */

.gallery-header {
    position: relative;
    width: 100%;
}

.gallery-topbar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--yellow);
    background-image: var(--floral-tile);
    background-repeat: repeat;
    background-size: var(--floral-bg-size) auto;
    border-bottom: var(--header-border);
    padding: clamp(0.55rem, 1.4vw, calc(1.05rem * var(--upscale)))
        clamp(0.85rem, 2.2vw, calc(1.65rem * var(--upscale)));
}

/* Home is anchored absolutely to the left edge so the title can sit dead
   center regardless of the icon's width. Icon size tracks the title font. */
.home-link {
    position: absolute;
    left: clamp(0.85rem, 2.2vw, calc(1.65rem * var(--upscale)));
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    text-decoration: none;
    border-radius: 6px;
    padding: 0.25em;
    font-size: clamp(1.85rem, 5.5vw, calc(2.85rem * var(--upscale)));
    line-height: 1;
    transition: transform 0.12s ease;
}

.home-link:hover {
    /* Combined translate keeps the vertical-center anchor while nudging up */
    transform: translateY(calc(-50% - 1px));
}

.home-link:focus-visible {
    outline: 3px solid var(--sky-top);
    outline-offset: 2px;
}

.home-icon {
    width: 1.1em;
    height: 1.1em;
    display: block;
}

.gallery-title {
    margin: 0;
    text-align: center;
    font-size: clamp(1.85rem, 5.5vw, calc(2.85rem * var(--upscale)));
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.1;
    color: var(--ink);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    /* Avoid pushing the right-side nav offscreen on tight widths */
    min-width: 0;
}

/* ——— Scene strip (compressed sky + hills banner) ——— */

.gallery-scene {
    position: relative;
    width: 100%;
    /* Banner tall enough to show real sky + cloud + hill silhouette. Scales
       with viewport and lifts on bigger monitors via --upscale. */
    height: clamp(180px, 22vw, calc(360px * var(--upscale)));
    overflow: hidden;
    border-bottom: var(--header-border);
    isolation: isolate;
}

.gallery-scene .sky {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
        180deg,
        var(--sky-top) 0%,
        var(--sky-mid) 55%,
        var(--sky-bottom) 100%
    );
}

.gallery-scene .sky::after {
    /* Same halftone tone as the homepage so the two scenes feel related */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.5;
    background-image: radial-gradient(
        circle at 1px 1px,
        rgba(12, 72, 98, 0.58) 0.65px,
        transparent 1.1px
    );
    background-size: 5px 5px;
    mix-blend-mode: multiply;
}

.gallery-scene .clouds {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 2;
    pointer-events: none;
    /* Slightly softened so they don't dominate the short band */
    opacity: 0.85;
}

.gallery-scene .hills {
    /* Wrapper just provides a positioning context flush against the scene's
       bottom edge — children handle their own anchoring. */
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.gallery-scene .hill {
    /* Each new banner-hill PNG (1200×958) carries its silhouette in the top
       ~35% of the canvas with transparent space below. To make every
       silhouette "sit on" the bottom of the banner we offset the image down
       by the height of that empty bottom 65%. With width:100% the image is
       80vw tall (PNG aspect 1200/958 ≈ 1.252), so 65% of that is 52vw. */
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(calc(-1120px * var(--upscale)), -52vw, -52px);
    width: 100%;
    height: auto;
    display: block;
    backface-visibility: hidden;
}

.gallery-scene .hill-back {
    z-index: 1;
    filter: brightness(1.04) saturate(1.03);
}

.gallery-scene .hill-mid {
    z-index: 2;
    filter: brightness(1.02);
}

.gallery-scene .hill-front {
    z-index: 3;
}

/* ——— Floating nav inside the scene ——— */

.gallery-nav {
    /* Centered horizontally and vertically inside the banner, sitting in the
       sky/cloud area above the hill peaks. */
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

.gallery-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    /* Wider gap between the two pills */
    gap: clamp(1.4rem, 3.2vw, calc(4.5rem * var(--upscale)));
}

.gallery-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--ink);
    font-weight: 700;
    font-size: clamp(
        1.3rem,
        0.85rem + 1.3vw + 0.45vh,
        calc(2.4rem * var(--upscale))
    );
    line-height: 1;
    /* Generous horizontal padding so the pills read as long buttons */
    padding: clamp(0.7rem, 0.45rem + 0.85vw, calc(1.2rem * var(--upscale)))
        clamp(2.2rem, 1.2rem + 3.2vw, calc(4.5rem * var(--upscale)));
    background-color: var(--yellow);
    background-image: var(--floral-tile);
    background-repeat: repeat;
    background-size: clamp(220px, 42vw, calc(760px * var(--upscale))) auto;
    border: 2px solid #c17a2d;
    border-radius: 5px;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.22);
    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease;
}

.gallery-nav a:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.22);
}

.gallery-nav a:active {
    transform: translateY(0);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

.gallery-nav a:focus-visible {
    outline: 3px solid var(--yellow);
    outline-offset: 2px;
}

/* ——— Tagline strip ——— */

.gallery-tagline {
    margin: 0;
    text-align: center;
    color: var(--ink);
    font-weight: 700;
    font-size: clamp(1.05rem, 0.78rem + 0.95vw + 0.35vh, calc(1.85rem * var(--upscale)));
    line-height: 1.25;
    background-color: var(--yellow);
    background-image: var(--floral-tile);
    background-repeat: repeat;
    background-size: var(--floral-bg-size) auto;
    border-bottom: var(--header-border);
    padding: clamp(0.7rem, 1.4vw, calc(1.4rem * var(--upscale)))
        clamp(1rem, 3vw, calc(2.5rem * var(--upscale)));
}

/* ——— Main content: image slot grid ———
   Two side-by-side sub-grids (.gallery-left + .gallery-right) so the left
   column tiles (a-i) can have their own row heights independent of the
   right column tiles (j-m). This removes the floral gaps that used to
   appear under f, g and the row-7 extension for m.

   Left layout (6-col internal grid):
     row 1  | a a a   b b b
     row 2  | c c c c c c
     row 3  | d d d   e e e
     row 4  | f f f f f f
     row 5  | g g     h h h h
     row 6  | i i     h h h h

   Right layout (single column, stacked):
     j  →  k  →  l  →  m
*/

.gallery-main {
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: clamp(1rem, 2vw, calc(2rem * var(--upscale)))
        clamp(1rem, 3vw, calc(2.5rem * var(--upscale)));

    display: grid;
    /* 60/40 split between the left and right sub-grids — same column
       proportions the original 10-col single grid had. */
    grid-template-columns: 6fr 4fr;
    align-items: start;
    gap: clamp(0.5rem, 1vw, calc(1rem * var(--upscale)));
}

.gallery-left {
    /* Tiles a-i in a 6-col internal grid, plus a full-width placeholder
       row at the bottom (`more`) that announces upcoming content and
       balances the left column's total height with the taller right side.
       Row heights:
         28vw (rows 1, 3) — 3-col tiles a, b, d, e come out square.
         31vw (row 2)     — c (matches earlier setting, slight crop ok).
         45vw (row 4)     — f visible height, ~6% horizontal crop.
         32vw (row 5)     — gives h 51vw across rows 5+6 + gap.
         18vw (row 6)     — 2-col tile i comes out square.
         28vw (row 7)     — "more coming soon" placeholder. */
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows:
        clamp(160px, 28vw, calc(400px * var(--upscale)))
        clamp(170px, 31vw, calc(450px * var(--upscale)))
        clamp(160px, 28vw, calc(400px * var(--upscale)))
        clamp(250px, 45vw, calc(650px * var(--upscale)))
        clamp(180px, 32vw, calc(465px * var(--upscale)))
        clamp(100px, 18vw, calc(260px * var(--upscale)))
        clamp(160px, 28vw, calc(400px * var(--upscale)));
    grid-template-areas:
        "a a a b b b"
        "c c c c c c"
        "d d d e e e"
        "f f f f f f"
        "g g h h h h"
        "i i h h h h"
        "more more more more more more";
    gap: clamp(0.5rem, 1vw, calc(1rem * var(--upscale)));
}

.gallery-right {
    /* Tiles j-m stacked in a single column. Row heights independent of
       the left side — j stays at its current height (60vw), k stays at
       28vw, l stays at 60vw, and m gains a touch more height (65vw). */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows:
        clamp(330px, 60vw, calc(870px * var(--upscale)))   /* j */
        clamp(160px, 28vw, calc(400px * var(--upscale)))   /* k */
        clamp(340px, 60vw, calc(870px * var(--upscale)))   /* l */
        clamp(370px, 65vw, calc(940px * var(--upscale)));  /* m */
    grid-template-areas:
        "j"
        "k"
        "l"
        "m";
    gap: clamp(0.5rem, 1vw, calc(1rem * var(--upscale)));
}

.gallery-tile {
    /* Placeholder styling — drop an <img> (or background-image) inside later.
       The cream fill + brown border keep the slots visible against the
       yellow floral page background. */
    background-color: rgba(255, 250, 235, 0.85);
    border: 2px solid var(--ink-soft);
    border-radius: 5px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
    /* Reset <figure>'s default browser margin so it lays out exactly like
       the placeholder <div> tiles. */
    margin: 0;
    position: relative;
}

/* Wrappers added by the template (<a>, <picture>) need to expand to fill
   the tile so the inner <img> can use object-fit: cover correctly. */
.gallery-tile-link,
.gallery-tile picture {
    display: block;
    width: 100%;
    height: 100%;
}

.gallery-tile-link:focus-visible {
    outline: 3px solid var(--sky-top);
    outline-offset: -3px;
}

/* Descendant selector covers both flat <img> children and images nested
   inside <a>/<picture>. */
.gallery-tile img,
.gallery-tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Optional visible caption strip overlaid at the bottom of a tile. */
.gallery-tile-caption {
    position: absolute;
    inset: auto 0 0 0;
    margin: 0;
    padding: 0.4em 0.8em;
    background: rgba(255, 250, 235, 0.92);
    color: var(--ink);
    font-size: clamp(0.85rem, 0.95vw, calc(1.05rem * var(--upscale)));
    border-top: 1px solid var(--ink-soft);
    pointer-events: none;
}

.gallery-tile--a { grid-area: a; }
.gallery-tile--b { grid-area: b; }
.gallery-tile--c { grid-area: c; }
.gallery-tile--d { grid-area: d; }
.gallery-tile--e { grid-area: e; }
.gallery-tile--f { grid-area: f; }
.gallery-tile--g { grid-area: g; }
.gallery-tile--h { grid-area: h; }
.gallery-tile--i { grid-area: i; }
.gallery-tile--j { grid-area: j; }
.gallery-tile--k { grid-area: k; }
.gallery-tile--l { grid-area: l; }
.gallery-tile--m { grid-area: m; }

/* "More coming soon" placeholder — fills the bottom of the left column so
   the two sub-grids end at the same vertical position. Kept visually
   distinct from real tiles via a dashed border + softer background. */
.gallery-tile--more {
    grid-area: more;
    background-color: rgba(255, 250, 235, 0.6);
    border: 2px dashed var(--ink-soft);
    box-shadow: none;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1rem;
}

.gallery-tile-more-text {
    margin: 0;
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3vw, calc(2.4rem * var(--upscale)));
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.01em;
}

/* ——— Narrow screens ——— */

@media (max-width: 640px) {
    .gallery-title {
        /* Pull the title in so the home icon never crowds it */
        font-size: clamp(1.55rem, 6.5vw, 2.4rem);
        padding-inline: 2.5rem;
    }

    .gallery-nav ul {
        gap: 1.2rem;
    }

    .gallery-nav a {
        font-size: 1.15rem;
        padding: 0.65rem 1.9rem;
    }

    /* The mosaic flattens to a single stacked column on narrow screens so
       each image is shown at full width and its intrinsic aspect ratio
       (driven by the <img>'s width/height attributes) — no forced uniform
       shape. The two sub-grid wrappers (.gallery-left, .gallery-right)
       use display: contents so all tiles + the placeholder become direct
       grid items of .gallery-main. */
    .gallery-main {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-template-areas: none;
        align-items: stretch;
    }

    .gallery-left,
    .gallery-right {
        display: contents;
    }

    /* Drop the desktop grid-area placement and let each tile size to its
       image's natural height. */
    .gallery-tile {
        grid-area: auto;
        aspect-ratio: auto;
    }

    /* The picture/img wrappers are height: 100% on desktop to fill the
       fixed grid rows; on mobile we want them to flow naturally instead. */
    .gallery-tile picture,
    .gallery-tile img,
    .gallery-tile video {
        height: auto;
    }

    /* Placeholder stays at the very bottom on mobile (its DOM position is
       in the middle, between tiles i and j, because .gallery-left appears
       before .gallery-right in the source). */
    .gallery-tile--more {
        order: 99;
        min-height: 7rem;
    }
}

@media (max-width: 380px) {
    .gallery-nav ul {
        gap: 0.85rem;
    }

    .gallery-nav a {
        font-size: 1rem;
        padding: 0.55rem 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-link,
    .gallery-nav a {
        transition: none;
    }
    .home-link:hover,
    .gallery-nav a:hover {
        transform: none;
    }
}