/* ============================================================================
   CAPITAL ONE BUILDER — core.css
   ----------------------------------------------------------------------------
   Loaded on EVERY page. Keep it small: design tokens, reset, typography,
   layout primitives and utilities only.

   Anything that belongs to one page goes in  assets/css/pages/{page}.css
   Anything that belongs to one component goes in assets/css/components/{name}.css

   Source of truth for the values below: BRAND.md / Brand Guideline Edition 01.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */
:root {
    /* --- Brand colours (Brand Guideline 01.4) --- */
    --c-gold:  #B27D43;   /* Capital Gold  — premium value, growth */
    --c-black: #222223;   /* Capital Black — strength, sophistication */
    --c-white: #FFFFFF;   /* Capital White — clarity, balance */

    /* Gold scale — tints and shades of Capital Gold (secondary palette) */
    --gold-50:  #FAF5EF;
    --gold-100: #F1E4D3;
    --gold-200: #E3C9A9;
    --gold-300: #D4AE80;
    --gold-400: #C39561;
    --gold-500: #B27D43;   /* = --c-gold */
    --gold-600: #966837;
    --gold-700: #79532C;
    --gold-800: #5B3F21;
    --gold-900: #3E2A16;

    /* Neutral scale — tints of Capital Black */
    --ink-0:   #FFFFFF;
    --ink-50:  #F7F7F7;
    --ink-100: #EDEDED;
    --ink-200: #D9D9DA;
    --ink-300: #B8B8B9;
    --ink-400: #8C8C8E;
    --ink-500: #66666A;
    --ink-600: #4A4A4D;
    --ink-700: #343436;
    --ink-800: #2A2A2B;
    --ink-900: #222223;   /* = --c-black */
    --ink-950: #161617;

    /* --- Semantic roles --- */
    --bg:            var(--ink-0);
    --bg-alt:        var(--ink-50);
    --bg-dark:       var(--ink-900);
    --bg-dark-alt:   var(--ink-950);
    --text:          var(--ink-900);
    --text-muted:    var(--ink-500);
    --text-invert:   var(--c-white);
    --text-invert-muted: var(--ink-300);
    --accent:        var(--c-gold);
    --accent-hover:  var(--gold-600);
    --border:        var(--ink-200);
    --border-dark:   rgba(255, 255, 255, .14);

    /* --- Typography (Brand Guideline 01.5) --- */
    --font-display: 'Syne', 'Trebuchet MS', system-ui, sans-serif;         /* headings + logo */
    --font-body:    'Red Hat Text', 'Segoe UI', system-ui, sans-serif;     /* body copy */

    /* Fluid type scale — clamp(min, preferred, max) */
    --fs-xs:   0.75rem;                                  /* 12px  labels */
    --fs-sm:   0.875rem;                                 /* 14px  meta */
    --fs-base: 1rem;                                     /* 16px  body */
    --fs-md:   clamp(1.0625rem, 0.35vw + 0.98rem, 1.125rem);
    --fs-lg:   clamp(1.25rem,  0.6vw  + 1.11rem, 1.5rem);
    --fs-xl:   clamp(1.5rem,   1.1vw  + 1.24rem, 2rem);
    --fs-2xl:  clamp(1.875rem, 2vw    + 1.4rem,  2.75rem);
    --fs-3xl:  clamp(2.25rem,  3.4vw  + 1.4rem,  3.75rem);
    --fs-4xl:  clamp(2.75rem,  5vw    + 1.3rem,  5rem);   /* hero */

    --lh-tight: 1.08;
    --lh-snug:  1.25;
    --lh-base:  1.65;

    --ls-tight:  -0.02em;
    --ls-normal:  0;
    --ls-wide:    0.08em;
    --ls-widest:  0.18em;   /* eyebrow / label tracking */

    /* --- Spacing scale (4px base) --- */
    --s-1:  0.25rem;
    --s-2:  0.5rem;
    --s-3:  0.75rem;
    --s-4:  1rem;
    --s-5:  1.5rem;
    --s-6:  2rem;
    --s-7:  2.5rem;
    --s-8:  3rem;
    --s-9:  4rem;
    --s-10: 5rem;
    --s-11: 6.5rem;
    --s-12: 8rem;

    /* Vertical rhythm for full-width sections */
    --section-y: clamp(3.5rem, 7vw, 7.5rem);

    /* --- Layout ---
       The 40px minimum gutter echoes the logo clear-space rule in the
       brand guideline (min 40px margin on all sides). */
    --container:      1280px;
    --container-wide: 1560px;
    --container-text: 720px;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);

    /* --- Surface treatment ---
       Low radii read as premium/architectural rather than playful. */
    --radius-sm: 2px;
    --radius:    4px;
    --radius-lg: 8px;

    --shadow-sm: 0 1px 2px rgba(34, 34, 35, .06);
    --shadow:    0 4px 16px rgba(34, 34, 35, .08);
    --shadow-lg: 0 18px 48px rgba(34, 34, 35, .14);

    /* --- Motion --- */
    --ease:      cubic-bezier(.4, 0, .2, 1);
    --ease-out:  cubic-bezier(.16, 1, .3, 1);
    --dur-fast:  .18s;
    --dur:       .3s;
    --dur-slow:  .6s;

    --header-h: 84px;
    --z-header: 100;
    --z-drawer: 200;
    --z-float:  150;
}

@media (max-width: 767px) {
    :root { --header-h: 68px; }
}

/* ---------------------------------------------------------------- 2. Fonts */
/* Self-hosted variable fonts — one file per family, no render-blocking
   third-party request. font-display:swap keeps text visible while loading. */
@font-face {
    font-family: 'Syne';
    src: url('../fonts/syne-variable.woff2') format('woff2-variations');
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Red Hat Text';
    src: url('../fonts/red-hat-text-variable.woff2') format('woff2-variations');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

/* ---------------------------------------------------------------- 3. Reset */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--s-4));
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 400;
    line-height: var(--lh-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul, ol { list-style: none; padding: 0; }

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

table { border-collapse: collapse; width: 100%; }

address { font-style: normal; }

:where(:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ---------------------------------------------------------- 4. Typography */
h1, h2, h3, h4, h5, h6, .display {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--text);
}

h1, .h1 { font-size: var(--fs-3xl); }
h2, .h2 { font-size: var(--fs-2xl); }
h3, .h3 { font-size: var(--fs-xl);  line-height: var(--lh-snug); }
h4, .h4 { font-size: var(--fs-lg);  line-height: var(--lh-snug); }
h5, .h5 { font-size: var(--fs-md);  line-height: var(--lh-snug); }
h6, .h6 { font-size: var(--fs-base);line-height: var(--lh-snug); }

.display--hero {
    font-size: var(--fs-4xl);
    font-weight: 800;
}

/* Eyebrow: the small gold tracked label above section headings. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--accent);
}
.eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background: currentColor;
}

.lead {
    font-size: var(--fs-md);
    color: var(--text-muted);
}

.text-muted  { color: var(--text-muted); }
.text-accent { color: var(--accent); }

/* ---------------------------------------------------------- 5. Layout */
.container {
    width: 100%;
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container--wide   { max-width: calc(var(--container-wide) + var(--gutter) * 2); }
.container--narrow { max-width: calc(var(--container-text) + var(--gutter) * 2); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .6); }

/* Dark section: inverts the semantic colour roles for everything inside it,
   so components need no dark-specific styles of their own. */
.section--dark {
    --bg:         var(--ink-900);
    --bg-alt:     var(--ink-950);
    --text:       var(--c-white);
    --text-muted: var(--ink-300);
    --border:     var(--border-dark);
    background: var(--bg);
    color: var(--text);
}
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5, .section--dark h6 { color: var(--c-white); }

.section--alt { background: var(--bg-alt); }

/*
 * minmax(0, 1fr) rather than 1fr on purpose.
 *
 * A bare `1fr` track is really `minmax(auto, 1fr)`: its minimum is the
 * content's min-content width. When the row is tight, each column shrinks to
 * a different width depending on its longest word, so cards in the same grid
 * end up different widths and the text wraps two words to a line.
 *
 * minmax(0, 1fr) lets a track shrink below its content, which is what makes
 * the columns genuinely equal.
 */
/*
 * grid-auto-rows: 1fr makes every ROW the same height as well, not just the
 * items within one row. Without it a grid of four cards in three columns
 * leaves the single card on the second row a different height from the three
 * above it, because each row sizes to its own content.
 */
.grid {
    display: grid;
    grid-auto-rows: 1fr;
    gap: var(--s-6);
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1023px) {
    .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
    .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.stack   { display: flex; flex-direction: column; gap: var(--s-4); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }

/* Icons inherit the surrounding text colour — see views/components/icon.php */
.icon { flex: none; display: inline-block; vertical-align: middle; }

/* ---------------------------------------------------------- 6. Brand marks */
/* Gold hairline divider used between sections and under headings. */
.rule {
    width: 56px;
    height: 2px;
    background: var(--accent);
    border: 0;
}

/* The brand pattern (logo icon repeated) as a subtle background texture.
   Never place directly behind body copy — see BRAND.md.

   The image is NOT hard-coded here. A stylesheet cannot look a file up by
   name, so the layout resolves assets/img/brand/pattern.* in PHP and sets
   --brand-pattern in the <head>. That means the pattern can be supplied as
   .svg, .png or .webp and simply replaced, like every other brand asset.
   With no pattern file present the variable is absent and nothing is drawn. */
.pattern-bg {
    position: relative;
    isolation: isolate;
}
.pattern-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--brand-pattern, none);
    background-repeat: repeat;
    /* Width of one tile. The artwork is roughly 1:2, so this value halved is
       roughly how tall each row is — keep it small enough that several rows
       fit a section, otherwise the motif reads as one stripe rather than a
       texture. Override per-section with --brand-pattern-size. */
    background-size: var(--brand-pattern-size, 118px);
    opacity: var(--brand-pattern-opacity, .05);
    pointer-events: none;
    z-index: -1;
}

/* ---------------------------------------------------------- 7. Utilities */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: var(--s-4);
    z-index: 999;
    padding: var(--s-3) var(--s-5);
    background: var(--c-black);
    color: var(--c-white);
    border-radius: var(--radius);
}
.skip-link:focus { top: var(--s-4); }

.text-center { text-align: center; }
.mx-auto     { margin-inline: auto; }
.full-bleed  { width: 100vw; margin-inline: calc(50% - 50vw); }

/* Fixed aspect-ratio image frames — prevents layout shift while photos load. */
.ratio { position: relative; overflow: hidden; background: var(--ink-100); }
.ratio > img { width: 100%; height: 100%; object-fit: cover; }
.ratio--16x9 { aspect-ratio: 16 / 9; }
.ratio--4x3  { aspect-ratio: 4 / 3; }
.ratio--3x2  { aspect-ratio: 3 / 2; }
.ratio--1x1  { aspect-ratio: 1 / 1; }
.ratio--3x4  { aspect-ratio: 3 / 4; }

/* Scroll-reveal — core.js adds .is-visible when the element enters the viewport. */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; }
}

/* Locks background scrolling while the mobile drawer or a lightbox is open. */
body.is-locked { overflow: hidden; }