/* =============================================================
   Art Photography — Gallery Page
   Scoped to body.ap-gallery-page-template
   v2.3.55
   ============================================================= */

html { scroll-behavior: smooth; }

/* ---- Reset theme interference -------------------------------- */
.ap-gallery-page-template #content,
.ap-gallery-page-template .entry-content,
.ap-gallery-page-template #main,
.ap-gallery-page-template .main,
.ap-gallery-page-template .post,
.ap-gallery-page-template article {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}
.ap-gallery-page-template .page-title,
.ap-gallery-page-template h1.entry-title,
.ap-gallery-page-template .entry-title {
    display: none !important;
}

/* ---- Gallery wrapper ----------------------------------------- */
/* v2.3.72: `theme` mode now resolves through Enfold's CSS variable
   `--enfold-font-family-theme-body` BEFORE falling back to `inherit`.
   Why: Enfold sets `body.helvetica { font-family: 'helvetica', Arial,
   sans-serif }` but never declares an @font-face for the lowercase
   `'helvetica'` family on most pages, so plain `inherit` resolved
   to Arial (the silent fallback) and the gallery looked nothing like
   the rest of the site. Enfold's :root block exposes the canonical
   body font stack via the `--enfold-font-family-theme-body` custom
   property (e.g. `"HelveticaNeue","Helvetica Neue",Helvetica,Arial,
   sans-serif`); using it directly skips the broken lowercase webfont
   reference and matches what Enfold's own Special Heading elements
   render with. Non-Enfold themes leave the variable undefined, so
   the rule cleanly degrades to `inherit` — the v2.3.71 behaviour.
   Two modes:
     • `theme`  → Enfold body-font variable when present, else `inherit`.
     • `system` → System-font stack (modern OS-native look).
   Wrapper class is set by the template (`ap-font-theme` or
   `ap-font-system`); CSS variable fallback to `inherit` keeps things
   safe if neither modifier class is present. */
.ap-gallery-wrapper {
    font-family: var(--ap-gallery-font, inherit);
    color: #1a1a1a;
    background: #fff;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
.ap-gallery-wrapper.ap-font-theme  { --ap-gallery-font: var(--enfold-font-family-theme-body, inherit); }
.ap-gallery-wrapper.ap-font-system { --ap-gallery-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

/* ---- Full-width breakout helper ------------------------------ */
.ap-full-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* ---- Inner container ----------------------------------------- */
.ap-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 52px;
}

/* =============================================================
   HERO — 50/50 split: dark text column left / image column right
   Matches original Enfold two-column structure exactly.
   ============================================================= */
.ap-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* v2.3.70: hero height is now admin-configurable. The template injects
       `--ap-hero-min-h` as an inline style on this element from the
       `hero_min_height` setting (integer vh, default 52). The fallback
       below (52vh) is the static default in case the inline style is ever
       missing. Tablet/mobile breakpoints further down override with explicit
       `grid-template-rows: 40vh / 36vh auto`, so this variable only affects
       the desktop two-column layout. */
    min-height: var(--ap-hero-min-h, 52vh);
    background: #111;
}

/* Left column — pure black background to match the deep-black image on the right.
   v2.3.71: vertical padding bumped 60 → 72 px so the centred content gets a
   bit more breathing room top and bottom inside the now-shorter desktop hero.
   v2.3.73: `align-items: center` → `align-items: safe center`. On smaller
   desktop viewports (e.g. 1024–1280 px) the rendered eyebrow + 4-line
   uppercase headline + CTA can be taller than the available content area
   inside the 72 px padding when the image column's 400 px min-height drives
   the grid row. Plain `align-items: center` then pushes the centred content
   ABOVE the top padding (and below the bottom one) symmetrically — visually
   the eyebrow ends up jammed against the very top edge of the black hero
   and the CTA gets cropped off the bottom (reproduced on the live Enfold
   site). The `safe` keyword tells the browser to fall back to flex-start
   (top) whenever centring would cause overflow, so the 72 px top padding
   is ALWAYS honoured: when content fits it stays vertically centred, when
   it doesn't it anchors to the top with the full padding above the eyebrow.
   Wide-desktop behaviour (where content fits comfortably) is unchanged.
   Browser support for the `safe` keyword: Chrome 84+, Firefox 63+, Safari
   16+. The first `align-items: center` line is a deliberate cascade
   fallback for browsers that don't recognise the `safe` keyword (Safari 15
   and older): if `align-items: safe center` is unparseable the browser
   discards just that declaration and the previous `center` value wins —
   without this fallback those browsers would drop the property entirely
   and fall back to the flex initial value `stretch`, which would visibly
   break the wide-desktop layout. Modern browsers parse both lines and the
   later `safe center` wins per normal cascade rules. */
.ap-hero-text-col {
    background: #000;
    display: flex;
    align-items: center;            /* fallback for Safari 15 and older */
    align-items: safe center;       /* modern browsers: prevent overflow above top padding */
    justify-content: center;
    padding: 72px 56px;
}

.ap-hero-content {
    width: 100%;
    /* v2.3.66: widened 460 → 520 px so the longest Enfold phrase
       ("THAT CELEBRATES TRUTH,") wraps the same way it does on the
       reference site — the 460 cap was forcing an extra break. */
    max-width: 520px;
    text-align: center;
    color: #fff;
}

/* Eyebrow — refined sentence-case label above the heading.
   v2.3.65: locked to 18 px on desktop to match the original Enfold Special
   Heading subheading size; mobile breakpoint scales it down. */
.ap-hero-eyebrow {
    display: block;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-transform: none;
    color: #ffffff;
    /* v2.3.71: gap to the headline tightened 22 → 10 px so the eyebrow
       reads as a label directly attached to the heading instead of
       floating above it (matches the Enfold reference more closely now
       that the hero is shorter and the text column is taller). */
    margin: 0 0 10px;
    line-height: 1.2;
}

/* Headline — large, bold, uppercase, dense stacked block.
   v2.3.66: `white-space: pre-line` is the single source of truth for hard
   breaks (textarea `\n` → real line break). The template no longer wraps the
   value in `nl2br()`, so the previous double-break risk (`<br/>` + `\n`
   together) is gone. Inside each phrase the line wraps naturally at the
   text-column width — match Enfold's reference by widening `.ap-hero-content`
   to 520 px and relying on word-boundary wrapping. */
.ap-hero-headline {
    font-size: clamp(36px, 4vw, 55px);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 32px;
    padding: 0;
    white-space: pre-line;
    overflow-wrap: break-word;
    border: 0;
}

/* Soft pill CTA button — slate background, rounded, generous padding */
.ap-hero-cta {
    display: inline-block;
    padding: 14px 32px;
    background: #2b2f33;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.2px;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}
.ap-hero-cta:hover {
    background: #3a3f44;
    color: #fff;
    text-decoration: none;
}

/* Right column — full-height hero image */
.ap-hero-image-col {
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
    min-height: 400px;
}

/* =============================================================
   SUB-NAV
   Note: no position:sticky — sticky + transform conflicts in most themes
   ============================================================= */
.ap-subnav {
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    text-align: center;
    padding: 16px 32px;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    background: #fff;
    z-index: 10;
}
.ap-subnav a {
    color: #888;
    text-decoration: none;
    padding: 2px 20px;
    display: inline-block;
    transition: color 0.2s ease;
}
.ap-subnav a:hover { color: #1a1a1a; text-decoration: none; }
.ap-subnav .ap-subnav-sep { color: #ccc; }

/* =============================================================
   INTRO TEXT
   ============================================================= */
.ap-section-intro {
    /* v2.3.70: tightened from `56px 0 36px` → `30px 0 30px` so the intro
       paragraph sits closer to the sub-nav above and the first scrolling
       strip below — combined with the new shorter hero this gets the
       sub-nav + intro + first strip all comfortably above the fold on a
       typical 1366×768 desktop. */
    padding: 30px 0 30px;
}
.ap-intro-text {
    font-size: clamp(17px, 1.55vw, 22px);
    line-height: 1.7;
    margin: 0;
    max-width: 100%;
}
.ap-intro-text .ap-bold   { font-weight: 700; color: #1a1a1a; }
.ap-intro-text .ap-colored { color: #636363; font-weight: 400; }

/* =============================================================
   TWO SCROLLING STRIPS
   ============================================================= */
.ap-strips-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: #111;
    overflow: hidden;
}

.ap-strip {
    height: var(--ap-strip-h, 200px);
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

/* Subtle fade edges — narrow so they don't read as black bars */
.ap-strip::before,
.ap-strip::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 36px;
    z-index: 2;
    pointer-events: none;
}
.ap-strip::before {
    left: 0;
    background: linear-gradient(to right, rgba(17,17,17,0.85) 0%, transparent 100%);
}
.ap-strip::after {
    right: 0;
    background: linear-gradient(to left, rgba(17,17,17,0.85) 0%, transparent 100%);
}

/* Track base */
.ap-m1-track {
    display: flex;
    gap: 3px;
    height: 100%;
    width: max-content;
    will-change: transform;
}
.ap-m1-track:hover { animation-play-state: paused; }

/* RTL animation */
.ap-track-rtl {
    animation: ap-scroll-rtl var(--ap-scroll-dur, 45s) linear infinite;
}
@keyframes ap-scroll-rtl {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* LTR animation */
.ap-track-ltr {
    animation: ap-scroll-ltr var(--ap-scroll-dur, 45s) linear infinite;
}
@keyframes ap-scroll-ltr {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

/* Items */
.ap-m1-item {
    flex: 0 0 auto;
    height: 100%;
    overflow: hidden;
    display: block;
}
.ap-m1-item img {
    height: 100%;
    width: auto;
    min-width: 160px;
    object-fit: cover;
    display: block;
    transition: opacity 0.4s ease;
}
.ap-m1-track:hover .ap-m1-item img        { opacity: 0.8; }
.ap-m1-track:hover .ap-m1-item:hover img  { opacity: 1; }

/* =============================================================
   ECHOES TEXT (below strips)
   ============================================================= */
.ap-section-echoes {
    padding: 44px 0 48px;
    border-top: 1px solid #e8e8e8;
}
.ap-echoes-text {
    font-size: clamp(17px, 1.55vw, 22px);
    line-height: 1.7;
    margin: 0;
    max-width: 100%;
}
.ap-echoes-text .ap-bold   { font-weight: 700; color: #1a1a1a; }
.ap-echoes-text .ap-colored { color: #636363; font-weight: 400; }
.ap-echoes-regular {
    margin: 10px 0 0;
    font-size: clamp(17px, 1.55vw, 22px);
    color: #636363;
    font-weight: 400;
    line-height: 1.7;
    max-width: 100%;
}

/* =============================================================
   TO ELEVATE SECTION
   ============================================================= */
.ap-section-elevate {
    padding: 64px 0 72px;
    scroll-margin-top: 60px;
    border-top: 1px solid #e8e8e8;
}

.ap-elevate-inner {
    display: grid;
    /* v2.3.67/68: image column widened from 50% → 62% (≈ +24%), text column
       shrinks to the remaining ≈ 38% (≈ −24%). Pairs with the defaults of
       24 photos and 6 desktop columns (4 rows × 6 = 24); tablet/mobile force
       3 columns (8 rows × 3 = 24) via the breakpoints below. Tablet/mobile
       collapse to a single stacked column so this desktop ratio is irrelevant
       there. */
    grid-template-columns: 62% 1fr;
    gap: 64px;
    align-items: start;
}

.ap-elevate-masonry { overflow: hidden; }

/* Uniform grid: every tile is the exact same size (1:1 aspect ratio).
   Column count is driven by --ap-m2-cols (set inline by the template
   from the admin "columns" setting); falls back to 2. */
.ap-masonry-2 {
    display: grid;
    grid-template-columns: repeat(var(--ap-m2-cols, 2), 1fr);
    gap: 4px;
    /* Reset multi-column layout so it never fights the grid */
    column-count: initial !important;
}
.ap-masonry-2 .ap-m2-item {
    display: block;
    overflow: hidden;
    background: transparent;
    aspect-ratio: 1 / 1;
}
.ap-masonry-2 .ap-m2-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease, opacity 0.3s ease;
}
.ap-masonry-2 .ap-m2-item:hover img {
    transform: scale(1.04);
    opacity: 0.88;
}

.ap-elevate-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 8px;
}
.ap-elevate-eyebrow {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #aaa;
    margin-bottom: 18px;
}

/* Large ALL CAPS heading — fills the right column, matching original prominence.
   v2.3.69: tightened cap from `clamp(22px, 2.8vw, 42px)` → `clamp(20px, 2.5vw, 32px)`
   so the heading sits in proportion with the new narrower 38% text column
   (the previous 42 px cap was overflowing visually next to the 6-up image grid). */
.ap-elevate-heading {
    font-size: clamp(20px, 2.5vw, 32px);
    font-weight: 800;
    line-height: 1.12;
    color: #1a1a1a;
    margin: 0;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

/* =============================================================
   CULTURAL TEXT
   ============================================================= */
.ap-section-cultural {
    padding: 56px 0 52px;
    border-top: 1px solid #e8e8e8;
}
.ap-cultural-text {
    font-size: clamp(17px, 1.55vw, 22px);
    line-height: 1.7;
    margin: 0;
    max-width: 100%;
}
.ap-cultural-text .ap-bold   { font-weight: 700; color: #1a1a1a; }
.ap-cultural-text .ap-colored { color: #636363; font-weight: 400; }
.ap-cultural-regular {
    margin: 10px 0 0;
    font-size: clamp(17px, 1.55vw, 22px);
    color: #636363;
    font-weight: 400;
    line-height: 1.7;
    max-width: 100%;
}

/* =============================================================
   COLLECTIONS
   ============================================================= */
.ap-section-collections {
    padding: 72px 0 96px;
    scroll-margin-top: 60px;
    border-top: 1px solid #e8e8e8;
    background: #fff;
}

/* Large bold heading — matching original Enfold prominence */
.ap-collections-heading {
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 800;
    text-align: center;
    margin: 0 0 16px;
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: #1a1a1a;
}

/* Subheadline — bold, centered, matching original */
.ap-collections-subheading {
    font-size: clamp(15px, 1.35vw, 18px);
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
    margin: 0 auto 48px;
    line-height: 1.55;
    max-width: 740px;
}

.ap-section-collections .art-photography-collections-list-container {
    margin-top: 0;
}

/* =============================================================
   v2.3.75 NOTE — v2.3.74's "shorter-laptop padding tighten" media query
   was REVERTED here. The original premise (grid row pinned at 400 px →
   content cropped at the bottom of the hero) was incorrect: the parent
   `.ap-hero` is a CSS Grid container with a single auto row, so the row
   actually auto-sizes to fit the LARGEST of (a) the image column's
   `min-height: 400px`, (b) the text column's intrinsic content + padding,
   and (c) the container's `min-height: var(--ap-hero-min-h, 52vh)`. When
   the uppercase headline wraps to 5–6 lines on narrower-desktop widths
   the text column's intrinsic block size already grows the row well past
   400 px so nothing gets cropped — v2.3.73's `align-items: safe center`
   alone is sufficient to keep the 72 px top padding above the eyebrow
   intact. v2.3.74's reduction to 40 px was therefore unnecessary and
   visibly halved the breathing room around the hero content on shorter
   laptop viewports (eyebrow and CTA both visibly closer to the hero's
   top/bottom edges). The desktop hero now consistently uses the v2.3.71
   72 px padding across every viewport height; tablet (≤960 px) and
   mobile (≤640 px) overrides further down are unchanged.
   ============================================================= */

/* =============================================================
   RESPONSIVE — TABLET (≤ 960px)
   ============================================================= */
@media (max-width: 960px) {

    .ap-container { padding: 0 32px; }

    /* Hero: stack image above text on tablet */
    .ap-hero {
        grid-template-columns: 1fr;
        grid-template-rows: 40vh auto;
    }
    .ap-hero-image-col { order: -1; min-height: 40vh; }
    .ap-hero-text-col  { padding: 44px 32px; }

    .ap-elevate-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    /* Force 3 columns on tablet — overrides the inline --ap-m2-cols
       set by the template (inline custom-property values cascade
       just like other declarations, so !important wins). */
    .ap-masonry-2 { --ap-m2-cols: 3 !important; }
    .ap-elevate-heading { font-size: clamp(16px, 2.4vw, 28px); }

    .ap-strip::before, .ap-strip::after { width: 40px; }
}

/* =============================================================
   RESPONSIVE — MOBILE (≤ 640px)
   ============================================================= */
@media (max-width: 640px) {

    .ap-container { padding: 0 20px; }

    /* Hero — single column stacked on mobile */
    .ap-hero { grid-template-columns: 1fr; grid-template-rows: 36vh auto; }
    .ap-hero-image-col { order: -1; min-height: 36vh; }
    .ap-hero-text-col  { padding: 40px 22px 48px; }
    /* v2.3.65: mobile scales in step with the new desktop sizes — eyebrow
       18 → 14, headline cap 55 → 32, line-height 0.9 carried through so
       the tight stacked block holds on phones. */
    .ap-hero-eyebrow   { font-size: 14px; margin: 0 0 16px; line-height: 1.2; }
    .ap-hero-headline  { font-size: clamp(26px, 7vw, 36px); margin: 0 0 24px; line-height: 0.9; }
    .ap-hero-cta       { padding: 12px 26px; font-size: 13px; }

    /* Sub-nav */
    .ap-subnav { font-size: 9px; padding: 13px 16px; letter-spacing: 1.5px; }
    .ap-subnav a { padding: 2px 10px; }

    /* Intro */
    .ap-section-intro { padding: 40px 0 28px; }

    /* Strips — keep CSS animation on mobile, just smaller images */
    .ap-strips-wrap { gap: 2px; }
    .ap-m1-item img { min-width: 100px; }
    .ap-strip::before, .ap-strip::after { width: 16px; }

    /* Echoes */
    .ap-section-echoes { padding: 36px 0 28px; }

    /* To Elevate */
    .ap-section-elevate { padding: 40px 0 44px; }
    /* Mobile: 3 uniform square tiles per row (matches tablet). */
    .ap-masonry-2 { --ap-m2-cols: 3 !important; }
    .ap-elevate-heading { font-size: clamp(20px, 5vw, 28px); }

    /* Cultural */
    .ap-section-cultural { padding: 36px 0 28px; }

    /* Collections */
    .ap-section-collections { padding: 48px 0 64px; }
    .ap-collections-heading { font-size: clamp(26px, 8vw, 38px); letter-spacing: -0.015em; }
}