/* =====================================================================
   BASE.CSS  — the shared skeleton
   ---------------------------------------------------------------------
   Structure and behaviour that all portfolios share: reset, layout,
   the gallery grid mechanics, and the lightbox. It carries NO colours or
   fonts of its own beyond neutral defaults — each theme file
   (wildlife.css / sports.css / astro.css) supplies the personality by
   overriding the CSS custom properties declared here.
   ===================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg, #fff);
    color: var(--fg, #111);
    font-family: var(--font-body, system-ui, sans-serif);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* ---- Theme-shared variable defaults (overridden per theme) --------- */
:root {
    --gap: clamp(0.75rem, 2vw, 1.5rem);
    --page-pad: clamp(1.25rem, 5vw, 5rem);
    --motion: 320ms;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* =====================================================================
   Site chrome (header / footer) — themed via variables
   ===================================================================== */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(1rem, 3vw, 1.75rem) var(--page-pad);
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--chrome-bg);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--rule);
}

.site-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-ui, inherit);
    letter-spacing: var(--track-ui, 0);
    text-transform: var(--case-ui, none);
    font-size: 0.85rem;
    opacity: 0.85;
    transition: opacity var(--motion) var(--ease);
}
.site-back:hover { opacity: 1; }

.site-switch {
    display: inline-flex;
    align-items: baseline;
    gap: 1rem;
    font-family: var(--font-ui, inherit);
    text-transform: var(--case-ui, none);
    letter-spacing: var(--track-ui, 0);
    font-size: 0.85rem;
}
.site-switch-current { font-weight: 700; }
.site-switch-other {
    opacity: 0.55;
    border-bottom: 1px solid transparent;
    transition: opacity var(--motion) var(--ease), border-color var(--motion) var(--ease);
}
.site-switch-other:hover { opacity: 1; border-bottom-color: currentColor; }

/* Narrow phones: with three portfolios in the switch, the header runs out
   of room — collapse the back link to its arrow (it keeps its aria-label)
   and tighten the nav so nothing clips at the screen edge. */
@media (max-width: 480px) {
    .site-back-text { display: none; }
    .site-back-mark { font-size: 1.1rem; }
    .site-switch { gap: 0.7rem; font-size: 0.8rem; }
}

.site-footer {
    padding: 3rem var(--page-pad);
    font-family: var(--font-ui, inherit);
    font-size: 0.8rem;
    opacity: 0.6;
    letter-spacing: var(--track-ui, 0);
}

/* =====================================================================
   Portfolio intro block
   ===================================================================== */
.portfolio { padding: 0 var(--page-pad) 4rem; }

.portfolio-intro {
    max-width: 42rem;
    margin: clamp(2.5rem, 8vw, 6rem) 0 clamp(2rem, 6vw, 4rem);
}
.portfolio-kicker {
    font-family: var(--font-ui, inherit);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 0.72rem;
    margin: 0 0 1.25rem;
    color: var(--accent);
}
.portfolio-title {
    margin: 0 0 1.25rem;
    font-family: var(--font-display, serif);
}
.portfolio-lede {
    font-family: var(--font-body, serif);
    max-width: 34rem;
    color: var(--fg-soft, inherit);
}

/* =====================================================================
   Gallery grid  (shared mechanics; themes tune columns, gaps, motion)
   ===================================================================== */
.gallery {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* Columns size themselves: fit as many ~320px tiles as the screen allows.
       auto-FILL (not auto-fit) keeps the empty tracks, so a single photo stays
       tile-sized instead of stretching huge across the whole row and going
       blurry. This one line handles phones, tablets, and laptops. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: var(--gap);
    align-items: start;
}
.gallery-item { position: relative; }

.gallery-trigger {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: var(--tile-bg, #ddd);
    border-radius: var(--radius, 0);
    line-height: 0;                 /* removes the baseline gap under the image */
}
.gallery-trigger img {
    width: 100%;
    height: auto;                   /* keep each photo's own aspect ratio — no crop */
    display: block;
    transition: transform var(--tile-motion, 500ms) var(--ease),
                filter var(--tile-motion, 500ms) var(--ease);
}
.gallery-trigger:hover img,
.gallery-trigger:focus-visible img { transform: scale(var(--tile-zoom, 1.04)); }

.gallery-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 1.5rem 1rem 0.9rem;
    font-family: var(--font-ui, inherit);
    font-size: 0.8rem;
    text-align: var(--caption-align, left);
    color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0));
    opacity: var(--caption-rest, 0);
    transform: translateY(var(--caption-shift, 0.4rem));
    transition: opacity var(--motion) var(--ease), transform var(--motion) var(--ease);
    pointer-events: none;
}
.gallery-trigger:hover .gallery-caption,
.gallery-trigger:focus-visible .gallery-caption {
    opacity: 1;
    transform: translateY(0);
}

.gallery-empty {
    font-family: var(--font-body, serif);
    opacity: 0.7;
    padding: 3rem 0;
}

/* =====================================================================
   Lightbox  (shared; themes may tune backdrop + control colour)
   ===================================================================== */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 2vw, 2rem);
    padding: clamp(1rem, 4vw, 3rem);
    background: var(--lightbox-bg, rgba(10,10,10,0.94));
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--motion) var(--ease), visibility var(--motion);
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox-figure {
    margin: 0;
    max-width: min(1200px, 92vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
}
.lightbox-img {
    max-width: 100%;
    max-height: 78vh;
    width: auto;
    object-fit: contain;
    border-radius: var(--radius, 0);
    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
    background: #222;
}
.lightbox-caption {
    font-family: var(--font-ui, inherit);
    font-size: 0.85rem;
    color: rgba(255,255,255,0.85);
    text-align: center;
    max-width: 40rem;
    letter-spacing: var(--track-ui, 0);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    color: #fff;
    opacity: 0.7;
    transition: opacity var(--motion) var(--ease), transform var(--motion) var(--ease);
    flex: 0 0 auto;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { opacity: 1; }

.lightbox-close {
    position: absolute;
    top: clamp(0.75rem, 3vw, 1.75rem);
    right: clamp(1rem, 3vw, 2rem);
    font-size: 2.5rem;
    line-height: 1;
}
.lightbox-prev,
.lightbox-next { font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1; }
.lightbox-prev:hover { transform: translateX(-4px); }
.lightbox-next:hover { transform: translateX(4px); }

/* Lock background scroll when the lightbox is open. */
body.lightbox-open { overflow: hidden; }

/* =====================================================================
   Responsive gallery columns
   ===================================================================== */
@media (max-width: 560px) {
    .lightbox-prev, .lightbox-next { position: absolute; bottom: 1.25rem; }
    .lightbox-prev { left: 1.25rem; }
    .lightbox-next { right: 1.25rem; }
}

/* Utility: visually hidden but available to screen readers. */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}