/* ==========================================================================
   MAILOZA — VISUAL ENRICHMENT STYLESHEET
   Phase: W16 — Visual texture, depth & layout-variety (Wave 1, Agent B)

   Consumes the design tokens defined in style.css (the SINGLE SOURCE OF TRUTH)
   and never redefines colours — every value references var(--…). It adds:
     - a technical dot/line background texture for section rhythm,
     - soft navy/teal glow accents for depth (decorative, aria-hidden),
     - section background bands (tint / dark / gradient) so pages alternate,
     - a richer elevation scale + an illustration-frame utility,
     - the feature-spotlight layout-variety component (text + illustration row).

   Loaded AFTER components.css in app/includes/head.php (with ?v= cache-bust).
   ========================================================================== */


/* ==========================================================================
   0. LOCAL VISUAL TOKENS  (composed from base tokens — no colour literals)
   --------------------------------------------------------------------------
   color-mix lets us derive faint tints/strokes from the design palette so the
   texture stays token-driven and re-themes with the system underneath.
   ========================================================================== */
:root {
    /* Texture stroke/dot colour (faint navy) */
    --visual-grid-ink: color-mix(in srgb, var(--blue-600) 14%, transparent);
    --visual-grid-size: 24px;

    /* Glow accents */
    --visual-glow-teal: color-mix(in srgb, var(--teal-500) 26%, transparent);
    --visual-glow-navy: color-mix(in srgb, var(--blue-600) 22%, transparent);

    /* Section band fills */
    --visual-tint-bg:    color-mix(in srgb, var(--teal-100) 45%, var(--white));
    --visual-tint-border: color-mix(in srgb, var(--teal-600) 16%, transparent);
    --visual-gradient-from: color-mix(in srgb, var(--blue-50) 70%, var(--white));
    --visual-gradient-to:   color-mix(in srgb, var(--teal-50) 75%, var(--white));

    /* Richer, warmer-depth elevation (additive — does not replace base scale) */
    --elevation-card:  0 1px 2px rgba(13, 20, 32, 0.05), 0 8px 24px rgba(15, 42, 82, 0.07);
    --elevation-float: 0 2px 4px rgba(13, 20, 32, 0.06), 0 18px 44px rgba(15, 42, 82, 0.12);
}


/* ==========================================================================
   1. TECHNICAL BACKGROUND TEXTURE  (.bg-grid, .bg-grid--lines)
   --------------------------------------------------------------------------
   A faint dot-grid (default) or line-grid usable as a section background.
   Low opacity, purely decorative, sits behind content. Pair with a section
   band or surface colour underneath.
   ========================================================================== */
.bg-grid {
    background-image: radial-gradient(var(--visual-grid-ink) 1.4px, transparent 1.4px);
    background-size: var(--visual-grid-size) var(--visual-grid-size);
    background-position: center top;
}

.bg-grid--lines {
    background-image:
        linear-gradient(to right, var(--visual-grid-ink) 1px, transparent 1px),
        linear-gradient(to bottom, var(--visual-grid-ink) 1px, transparent 1px);
    background-size: var(--visual-grid-size) var(--visual-grid-size);
    background-position: center top;
}

/* Fade the texture toward the edges so it reads as a calm wash, not a sheet. */
.bg-grid--fade {
    -webkit-mask-image: radial-gradient(ellipse at center, #000 45%, transparent 100%);
            mask-image: radial-gradient(ellipse at center, #000 45%, transparent 100%);
}


/* ==========================================================================
   2. GLOW / BLOB ACCENTS  (.accent-glow — decorative, always aria-hidden)
   --------------------------------------------------------------------------
   Soft radial accents for hero / section depth. Absolutely positioned inside a
   `position: relative` parent; sized via --size, tinted teal (default) or navy.
   ========================================================================== */
.accent-glow {
    position: absolute;
    z-index: 0;
    width: var(--size, 420px);
    height: var(--size, 420px);
    border-radius: var(--radius-pill);
    background: radial-gradient(circle at center, var(--visual-glow-teal) 0%, transparent 70%);
    pointer-events: none;
    filter: blur(8px);
}

.accent-glow--navy {
    background: radial-gradient(circle at center, var(--visual-glow-navy) 0%, transparent 70%);
}

/* Common placements (override with inline style or your own rule as needed). */
.accent-glow--tr { top: -10%; right: -8%; }
.accent-glow--bl { bottom: -12%; left: -10%; }

/* Keep page content above the glow without extra markup. */
.has-glow { position: relative; }
.has-glow > :not(.accent-glow) { position: relative; z-index: 1; }


/* ==========================================================================
   3. SECTION BACKGROUND BANDS  (.section--tint / --dark / --gradient)
   --------------------------------------------------------------------------
   Alternating backgrounds so pages aren't an unbroken white sheet. Apply to a
   <section> (or the section-band wrapper). The --dark band flips text colour
   for its descendants so existing components read correctly on navy.
   ========================================================================== */
.section--tint {
    background-color: var(--visual-tint-bg);
    border-block: 1px solid var(--visual-tint-border);
}

.section--gradient {
    background-image: linear-gradient(160deg, var(--visual-gradient-from), var(--visual-gradient-to));
}

.section--dark {
    background-color: var(--bg-inverse);
    color: var(--text-on-inverse);
}

/* On dark bands, retune the common text/eyebrow tokens so child components
   (section headers, cards' captions, links) stay legible without bespoke CSS. */
.section--dark .section-header__title,
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
    color: var(--text-on-inverse);
}

.section--dark .section-header__intro,
.section--dark p {
    color: var(--blue-100);
}

.section--dark .eyebrow,
.section--dark .section-header__eyebrow {
    color: var(--teal-400);
}

.section--dark a:not(.btn) {
    color: var(--teal-400);
}

.section--dark a:not(.btn):hover {
    color: var(--teal-100);
}


/* ==========================================================================
   4. ELEVATION UTILITIES  (additive — richer than the base border-first scale)
   ========================================================================== */
.elevate-card  { box-shadow: var(--elevation-card); }
.elevate-float { box-shadow: var(--elevation-float); }


/* ==========================================================================
   5. ILLUSTRATION FRAME  (.illus / .illus--bordered)
   --------------------------------------------------------------------------
   Places an SVG illustration cleanly: constrains width, centres, optional
   surface card with subtle radius + shadow. The contained <svg> already uses
   width:100%; height:auto so it scales responsively.
   ========================================================================== */
.illus {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
}

.illus > svg,
.illus img {
    display: block;
    width: 100%;
    height: auto;
}

.illus--bordered {
    padding: var(--space-5);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-card);
}

/* A softly tinted frame variant for plain (white) page sections. */
.illus--tint {
    padding: var(--space-5);
    background-image: linear-gradient(160deg, var(--visual-gradient-from), var(--visual-gradient-to));
    border-radius: var(--radius-lg);
}


/* ==========================================================================
   6. FEATURE SPOTLIGHT  (components/spotlight/feature-spotlight.php)
   --------------------------------------------------------------------------
   A text + illustration row that breaks the hero→cards→cards monotony. Stacks
   on mobile; on wide viewports the media alternates sides via --reverse.
   ========================================================================== */
.spotlight {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-grid-loose);
    align-items: center;
}

.spotlight__body {
    min-width: 0;
    /* Vertically centre the text block within its (taller) grid track so it
       reads as paired with the illustration, not top-anchored. */
    align-self: center;
}

.spotlight__eyebrow {
    margin: 0 0 var(--space-2);
}

.spotlight__title {
    margin: 0 0 var(--space-4);
    font-size: var(--fluid-h2);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
}

.spotlight__text {
    margin: 0 0 var(--space-5);
    max-width: var(--measure);
    color: var(--text-body);
    line-height: var(--leading-relaxed);
}

.spotlight__points {
    margin: 0 0 var(--space-6);
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-3);
}

.spotlight__point {
    position: relative;
    padding-left: var(--space-7);
    color: var(--text-body);
    line-height: var(--leading-normal);
}

/* Teal check marker (CSS-drawn — no extra asset). */
.spotlight__point::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-pill);
    background-color: var(--teal-50);
    border: 1.5px solid var(--teal-600);
}

.spotlight__point::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 7px;
    width: 8px;
    height: 5px;
    border-left: 2px solid var(--teal-700);
    border-bottom: 2px solid var(--teal-700);
    transform: rotate(-45deg);
}

.spotlight__media {
    min-width: 0;
    /* Centre the framed illustration within its own column (it never fills the
       full track at desktop) and centre it vertically against the text. */
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

/* Keep the framed illustration to a comfortable, balanced size so it sits
   centred in its column rather than stretching edge-to-edge. */
.spotlight__media .illus {
    width: 100%;
    max-width: 30rem;
}

/* On a dark band, retune spotlight text + check chrome for contrast. */
.section--dark .spotlight__title { color: var(--text-on-inverse); }
.section--dark .spotlight__text,
.section--dark .spotlight__point { color: var(--blue-100); }
.section--dark .spotlight__point::before {
    background-color: color-mix(in srgb, var(--teal-600) 22%, transparent);
    border-color: var(--teal-400);
}
.section--dark .spotlight__point::after {
    border-color: var(--teal-100);
}

/* Two-up on tablet/desktop; media alternates side. */
@media (min-width: 768px) {
    .spotlight {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-9);
    }

    /* Pin BOTH items to row 1 so the two columns sit SIDE BY SIDE. Without an
       explicit grid-row, sparse auto-flow places the reversed media (col 1)
       into row 2 once the text has taken row 1/col 2 — which stacked them. */
    .spotlight__body  { grid-column: 1; grid-row: 1; }
    .spotlight__media { grid-column: 2; grid-row: 1; }

    /* Reversed: swap the columns only — both stay in row 1. */
    .spotlight--reverse .spotlight__body  { grid-column: 2; }
    .spotlight--reverse .spotlight__media { grid-column: 1; }
}

@media (prefers-reduced-motion: no-preference) {
    .spotlight__media .illus { transition: transform var(--duration-slow) var(--ease-out); }
}


/* ==========================================================================
   7. SHARED 2-COLUMN HERO  (.hero-split — text column + media column)
   --------------------------------------------------------------------------
   A reusable, generalized version of the homepage's .home-hero-grid, so every
   page with a hero illustration gets the same clean 2-column layout: hero TEXT
   on the left, framed ILLUSTRATION on the right, vertically centred. Below the
   desktop breakpoint it collapses to one column (text first, then illustration).

   USAGE (inside a section's .container, within a depth band):
       <div class="hero-split">
           <div class="hero-split__copy">… hero-basic + any trust strip …</div>
           <div class="hero-split__media"><figure class="illus …">…</figure></div>
       </div>
   When there is NO illustration, render .hero-split--single (single column, no
   empty media track) or simply omit the wrapper entirely.

   The hero-basic component owns its own .container + .hero__inner; inside the
   split those wrappers must NOT re-apply page padding or the narrow measure —
   the grid column already governs width. We neutralise them here (mirroring the
   homepage's .home-hero-copy rules) so the text fills the left column. Tokens
   only; no colour literals.
   ========================================================================== */
.hero-split {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    align-items: center;
    /* Smaller top than bottom so the hero opens close under the header (the
       nested hero-basic padding is neutralised below, so this grid governs). */
    padding-block: var(--space-8) var(--space-9);
}

/* Neutralise the nested hero-basic wrappers so the text fills the left column
   rather than re-constraining to --container-narrow or re-padding. */
.hero-split__copy .hero { padding-block: 0; }
.hero-split__copy .hero > .container {
    max-width: none;
    padding-inline: 0;
}
.hero-split__copy .hero__inner { max-width: none; }

/* Media column: the framed illustration, centred and fluid. */
.hero-split__media {
    width: 100%;
    max-width: 34rem;
    margin-inline: auto;
}
.hero-split__media .illus { margin-inline: auto; }
.hero-split__media .illus img,
.hero-split__media .illus > svg {
    width: 100%;
    height: auto;
}

/* Single-column variant: a hero with no illustration keeps the same vertical
   rhythm but never reserves an empty media track. */
.hero-split--single { grid-template-columns: 1fr; }

/* Desktop: text + illustration side by side, vertically centred. */
@media (min-width: 992px) {
    .hero-split {
        grid-template-columns: 1.05fr 0.95fr;
        gap: var(--space-10);
        /* Comfortable top (~64px); larger bottom for rhythm. Was symmetric
           --space-12 (160px), the main cause of the ~250px header→hero gap. */
        padding-block: var(--space-9) var(--space-11);
    }

    .hero-split__media {
        max-width: 100%;
        margin-top: 0;
    }

    /* Single-column stays single even on desktop (no phantom right column). */
    .hero-split--single { grid-template-columns: 1fr; }
}