/* The webfonts, served from our own origin rather than Google's. Must come
   first: @import is only allowed before other rules. */
@import url("fonts-XYfEcqm.css");

/* =============================================================================
   AADI — global stylesheet
   -----------------------------------------------------------------------------
   Organised as:
     1. Design tokens      — the single source of truth (colours, type, space)
     2. Reset & base       — element defaults
     3. Layout             — the app shell / device frame
     4. Components          — masthead, hero, pillar cards, journey, icons
     5. Context adaptations — desktop, PWA (standalone) and native shells
   Everything is driven by custom properties so the look can be retuned in one
   place, and components are named with a BEM-ish convention for reuse.
   ========================================================================== */

/* 1. ─────────────────────────────────────────── Design tokens ───────────── */
:root {
    /* Palette — a dark, warm-gold theme ("als alles duister is"). */
    --c-bg:            #0a0e17;
    --c-bg-elevated:   #10151f;
    --c-surface:       #13171f;
    --c-surface-hover: #171c26;
    --c-border:        rgba(255, 255, 255, 0.08);
    --c-border-gold:   rgba(211, 175, 106, 0.28);

    --c-gold:          #d3af6a;
    --c-gold-strong:   #e7cd93;
    --c-gold-soft:     rgba(211, 175, 106, 0.12);

    --c-text:          #e9e6df;
    --c-heading:       #f6f2ea;
    --c-muted:         #9a9ea8;
    --c-muted-dim:     #6f737d;

    /* Typography */
    --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Spacing scale (4px base) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    /* Radii */
    --radius-sm: 12px;
    --radius:    16px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* Elevation */
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset,
                   0 8px 24px -16px rgba(0, 0, 0, 0.8);

    /* Layout */
    --gutter: 1.25rem;          /* horizontal page padding */
    --frame-max: 460px;         /* device width when framed on desktop */
    --content-max: 34rem;
}

/* 2. ─────────────────────────────────────────── Reset & base ────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    /* The root background also tints the Android system navigation bar in the
       installed PWA — without it the bar falls back to the white UA canvas. */
    background-color: var(--c-bg);
    color-scheme: dark;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--c-text);
    background-color: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, p { margin: 0; }

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

img, svg { display: block; max-width: 100%; }

/* Focus visibility for keyboard users. */
:focus-visible {
    outline: 2px solid var(--c-gold);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Shared icon sizing. */
.icon { width: 100%; height: 100%; }

/* 3. ─────────────────────────────────────────── Layout / shell ──────────── */
.app {
    min-height: 100dvh;
    background-color: var(--c-bg);
}

.app__frame {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background-color: var(--c-bg);
}

/* 4. ─────────────────────────────────────────── Components ──────────────── */

/* 4a. Masthead ------------------------------------------------------------- */
.masthead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: calc(var(--space-5) + env(safe-area-inset-top)) var(--gutter) var(--space-4);
}

/* The one account link the app screens carry: a way into the admin, for admins.
   Kept quiet — it is not what the screen is about. Signing out lives in the
   admin, not here. */
.masthead__account {
    display: flex;
    gap: var(--space-4);
    padding-top: 6px;
}

.masthead__account a {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-muted);
}

.masthead__account a:hover { color: var(--c-gold); }

.brand { display: flex; flex-direction: column; gap: 2px; }

.brand__name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: 0.14em;
    color: var(--c-gold);
}

.brand__tagline {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-gold);
    opacity: 0.85;
}

/* 4b. Hero ----------------------------------------------------------------- */
.hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(300px, 46vh, 440px);
    overflow: hidden;
}

/* The banner photo, full-bleed: `cover` fills the hero at any aspect ratio, so
   the figure keeps its place while the hero's flanks are what get cropped. The
   vertical anchor is `top`, so when a short, wide window does force a vertical
   crop it comes off the bottom and never off his head. */
.hero__media {
    position: absolute;
    inset: 0;
    background-color: var(--c-bg);
    background-image: url("../images/hero-banner-Yzc5f7N.webp");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

/* Fades: dark on the left so the overlay text stays legible, and into the page
   background at the top and bottom so the photo melts into the UI. Kept light
   enough that the portrait itself isn't dimmed. */
.hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(10, 14, 23, 0.84) 0%, rgba(10, 14, 23, 0.45) 26%, rgba(10, 14, 23, 0) 62%),
        linear-gradient(180deg, rgba(10, 14, 23, 0.45) 0%, rgba(10, 14, 23, 0) 20%, rgba(10, 14, 23, 0) 46%, var(--c-bg) 97%);
}

.hero__overlay {
    position: relative;
    z-index: 1;
    padding: var(--space-6) var(--gutter) var(--space-6);
}

.hero__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.2rem, 8vw, 2.9rem);
    line-height: 1.05;
    color: var(--c-heading);
    max-width: 10ch;
}

.hero__creed {
    margin-top: var(--space-3);
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 4.5vw, 1.4rem);
    font-weight: 400;
    line-height: 1.35;
    color: rgba(233, 230, 223, 0.82);
}

/* 4c. Pillar cards --------------------------------------------------------- */
.pillars {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5) var(--gutter) 0;
}

.pillar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.pillar:hover { background-color: var(--c-surface-hover); border-color: var(--c-border-gold); }
.pillar:active { transform: scale(0.99); }

/* Non-interactive pillar (no action): drop the trailing column and affordances. */
.pillar--static { grid-template-columns: auto minmax(0, 1fr); cursor: default; }
.pillar--static:hover { background-color: var(--c-surface); border-color: var(--c-border); }
.pillar--static:active { transform: none; }

.pillar__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 10px;
    color: var(--c-gold);
    background-color: var(--c-gold-soft);
    border: 1px solid var(--c-border-gold);
    border-radius: var(--radius-sm);
}

.pillar__content { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.pillar__eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-gold);
}

.pillar__title {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--c-heading);
}

.pillar__text {
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--c-muted);
}

.pillar__action { display: grid; place-items: center; flex-shrink: 0; }

.pillar__action--chevron {
    width: 20px;
    height: 20px;
    color: var(--c-muted-dim);
}

.pillar__action--play {
    width: 40px;
    height: 40px;
    padding: 11px 10px 11px 12px;
    color: var(--c-gold);
    border: 1px solid var(--c-border-gold);
    border-radius: var(--radius-pill);
}
.pillar:hover .pillar__action--play { background-color: var(--c-gold-soft); }

/* 4d. Journey / progress --------------------------------------------------- */
.journey {
    margin: var(--space-5) var(--gutter);
    margin-top: var(--space-5);
    padding: var(--space-5);
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.journey__title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--c-heading);
}

.journey__subtitle {
    margin-top: var(--space-1);
    font-size: 0.88rem;
    color: var(--c-muted);
}

.progress {
    margin-top: var(--space-4);
    height: 6px;
    border-radius: var(--radius-pill);
    background-color: rgba(255, 255, 255, 0.09);
    overflow: hidden;
}

.progress__bar {
    display: block;
    height: 100%;
    width: var(--progress, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--c-gold), var(--c-gold-strong));
}

/* Separate the journey card from the pillars. A fixed top margin (rather than
   `margin-top: auto`) keeps a clear gap even when the page scrolls — on a phone
   the content overflows the viewport, so `auto` would collapse to 0. */
.home { display: flex; flex-direction: column; flex: 1; }
.home > .journey { margin-top: var(--space-6); }

/* 4e. Sub-page header (back link + centred title) ------------------------- */
.subhead {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    padding: calc(var(--space-4) + env(safe-area-inset-top)) var(--gutter) var(--space-4);
}

.subhead__back {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 8px;
    color: var(--c-gold);
    border: 1px solid var(--c-border-gold);
    border-radius: var(--radius-pill);
}
.subhead__back:hover { background-color: var(--c-gold-soft); }

.subhead__titles {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1.1;
}

.subhead__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-gold);
}

.subhead__subtitle {
    margin-top: 2px;
    font-size: 0.9rem;
    color: var(--c-gold);
    opacity: 0.75;
}

/* 4f. Sub-page content --------------------------------------------------- */
.subpage {
    flex: 1;
    padding: var(--space-3) var(--gutter) calc(var(--space-6) + env(safe-area-inset-bottom));
}

.empty {
    margin-top: var(--space-6);
    text-align: center;
    color: var(--c-muted);
}

/* Video list (Het Schone) */
.video-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.video__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #000;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}

.video__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--space-3);
}

.video__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-heading);
}

.video__artist {
    font-size: 0.85rem;
    color: var(--c-muted);
}

/* Reflection (Het Goede) */
.reflection__head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) 0 var(--space-5);
}

.reflection__photo {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: var(--radius-pill);
    border: 1px solid var(--c-border-gold);
}

.reflection__title {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--c-heading);
}

.reflection__author {
    margin-top: 4px;
    font-size: 0.88rem;
    color: var(--c-gold);
}

.reflection__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.reflection__body p {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--c-text);
}

/* 4g. Auth — login / registration ----------------------------------------- */
/* The pages you can reach without an account: one centred card, no app chrome. */
.auth {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
    padding: calc(var(--space-6) + env(safe-area-inset-top)) var(--gutter)
             calc(var(--space-6) + env(safe-area-inset-bottom));
}

.auth__card {
    width: 100%;
    max-width: 26rem;
    padding: var(--space-6) var(--space-5);
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.auth__brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--space-5);
}

.auth__title {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 500;
    line-height: 1.1;
    color: var(--c-heading);
}

.auth__intro {
    margin-top: var(--space-3);
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--c-text);
}

.auth__intro--muted { color: var(--c-muted); font-size: 0.85rem; }
.auth__intro strong { color: var(--c-gold); font-weight: 600; }

.auth__notice {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    font-size: 0.88rem;
    line-height: 1.5;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
}

.auth__notice--error {
    color: #f3c9c0;
    background-color: rgba(176, 62, 44, 0.16);
    border-color: rgba(176, 62, 44, 0.4);
}

.auth__notice--success {
    color: var(--c-gold-strong);
    background-color: var(--c-gold-soft);
    border-color: var(--c-border-gold);
}

.auth__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.auth__aside {
    font-size: 0.88rem;
    color: var(--c-muted);
    text-align: center;
}

.auth__aside a { color: var(--c-gold); }
.auth__aside a:hover { color: var(--c-gold-strong); }

/* Inside a form (the "wachtwoord vergeten?" line under the login button). */
.auth__aside--inline { margin-top: calc(-1 * var(--space-2)); font-size: 0.82rem; }

/* Form rows — shared by the auth forms and Symfony's form_row() output. */
.field, .auth__form > div {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.field__label, .auth__form label {
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-muted);
}

.field__input, .auth__form input {
    width: 100%;
    padding: 0.7rem 0.85rem;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--c-text);
    background-color: var(--c-bg-elevated);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
}

.field__input:focus, .auth__form input:focus {
    outline: none;
    border-color: var(--c-border-gold);
    box-shadow: 0 0 0 3px var(--c-gold-soft);
}

/* Validation messages rendered by form_row(). */
.auth__form ul {
    list-style: none;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #f3c9c0;
}

.btn {
    display: inline-flex;
    justify-content: center;
    padding: 0.8rem 1.4rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
}

.btn--primary {
    color: #0a0e17;
    background-color: var(--c-gold);
}

.btn--primary:hover { background-color: var(--c-gold-strong); }

/* 5. ─────────────────────────────────────────── Context adaptations ─────── */

/* 5a. Narrow desktop browser window (not an installed PWA, below the desktop
   layout): present the phone design centred in a device frame so it doesn't
   stretch full-bleed. */
@media (min-width: 560px) and (max-width: 899.98px) and (display-mode: browser) {
    .app {
        display: grid;
        place-items: center;
        padding: var(--space-6);
        background: radial-gradient(90% 60% at 50% -5%, #121a2b 0%, var(--c-bg) 70%);
    }

    .app__frame {
        width: 100%;
        max-width: var(--frame-max);
        height: min(88dvh, 900px);
        border: 1px solid var(--c-border);
        border-radius: 30px;
        /* Fixed-height device frame: taller pages scroll inside it. */
        overflow-y: auto;
        overflow-x: hidden;
        box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85);
    }

    .masthead { padding-top: var(--space-5); }
    .journey { padding-bottom: var(--space-5); }
}

/* 5b. Desktop browser — a bespoke wide layout: a full-width header/hero with
   the copy scaled up, the three pillars side by side (taller, roomier), and a
   full-width progress bar below. Gated on `display-mode: browser`, so an
   installed PWA (even on a large screen) keeps the phone design. */
@media (min-width: 900px) and (display-mode: browser) {
    .app {
        min-height: 100dvh;
        background: radial-gradient(130% 70% at 50% -10%, #101728 0%, var(--c-bg) 62%);
    }

    .app__frame {
        max-width: 1180px;
        margin: 0 auto;
        min-height: 100dvh;
        padding: 0 var(--space-6) var(--space-7);
    }

    /* Brand header across the top */
    .masthead { padding: var(--space-6) 0 var(--space-4); }
    .brand__name { font-size: 2.4rem; }

    /* Full-width hero banner, copy scaled up */
    .home { display: block; }
    .hero {
        min-height: clamp(340px, 44vh, 480px);
        border-radius: var(--radius-lg);
    }

    /* The copy straddles the portrait, following the delivered banner: heading on
       the left, the creed on the right, both vertically centred. Each block is
       positioned absolutely and pinned by its *inner* edge — the heading's column
       ends at 28%, the creed starts at 77% — so the breathing room either side of
       his face stays even and any slack lands in the outer margins. `cover` puts
       his silhouette between roughly 28% and 77% of the hero, depending on the
       window height. */
    .hero__overlay {
        position: absolute;
        inset: 0;
        padding: 0;
        max-width: none;
    }
    .hero__title,
    .hero__creed {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .hero__title {
        left: var(--space-6);
        right: 72%;
        max-width: none;
        font-size: clamp(3rem, 4.6vw, 4rem);
    }
    /* `right` stays auto so the block shrink-wraps its lines: the gap to his face
       is fixed, the slack goes to the outer margin. */
    .hero__creed {
        left: 77%;
        max-width: 20%;
        margin-top: 0;
        text-align: right;
        font-style: italic;
        font-size: clamp(1.45rem, 2.4vw, 2rem);
        color: var(--c-gold);
    }
    /* Copy on both flanks now, so the veil darkens both and leaves the middle —
       his face — alone. */
    .hero__media::after {
        background:
            linear-gradient(90deg,
                rgba(10, 14, 23, 0.88) 0%, rgba(10, 14, 23, 0.58) 16%, rgba(10, 14, 23, 0) 34%,
                rgba(10, 14, 23, 0) 66%, rgba(10, 14, 23, 0.58) 84%, rgba(10, 14, 23, 0.88) 100%),
            linear-gradient(180deg, rgba(10, 14, 23, 0.45) 0%, rgba(10, 14, 23, 0) 22%, rgba(10, 14, 23, 0) 50%, var(--c-bg) 99%);
    }

    /* Three pillars side by side */
    .pillars {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-4);
        padding: var(--space-6) 0 0;
    }
    .pillar {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
        min-height: 250px;
        padding: var(--space-5);
    }
    .pillar--static { display: flex; }
    .pillar__icon { width: 54px; height: 54px; padding: 13px; }
    .pillar__content { gap: 6px; }
    .pillar__title { font-size: 1.15rem; }
    .pillar__text { font-size: 0.95rem; }
    .pillar__action { margin-top: auto; align-self: flex-end; }

    /* Full-width progress bar below the pillars */
    .home > .journey { margin: var(--space-6) 0 0; padding-bottom: var(--space-5); }

    /* Sub-pages: keep content readable, videos two across */
    .subhead,
    .subpage { max-width: 960px; margin-inline: auto; width: 100%; }
    .subhead { padding-top: var(--space-6); }
    .subpage { padding-top: var(--space-5); }
    .video-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
    .reflection { max-width: 720px; margin-inline: auto; }
}

/* 5c. PWA — launched standalone. Give the OS status bar breathing room and
   lean into the full-bleed, app-like feel. */
@media (display-mode: standalone) {
    .masthead { padding-top: calc(var(--space-6) + env(safe-area-inset-top)); }
}

/* 5d. Native shell (Symfony UX Native / Hotwire Native) hides the web chrome. */
.is-native .masthead { padding-top: var(--space-4); }

/* 6. ─────────────────────────────────────────── Reduced motion ──────────── */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* 7. ─────────────────────────────────────── PWA swipe transitions (PoC) ──── */
/* In the installed PWA, let the browser own vertical scrolling while our swipe
   controller reads horizontal gestures. */
@media (display-mode: standalone) {
    body { touch-action: pan-y; }

    /* Directional slide for Turbo visits, driven by data-swipe-dir (set by the
       swipe controller). Without it, view transitions use the default fade. */
    html[data-swipe-dir="forward"]::view-transition-old(root) { animation: aadi-slide-out-left 0.28s ease both; }
    html[data-swipe-dir="forward"]::view-transition-new(root) { animation: aadi-slide-in-right 0.28s ease both; }
    html[data-swipe-dir="back"]::view-transition-old(root) { animation: aadi-slide-out-right 0.28s ease both; }
    html[data-swipe-dir="back"]::view-transition-new(root) { animation: aadi-slide-in-left 0.28s ease both; }
}

@keyframes aadi-slide-out-left { to { transform: translateX(-100%); } }
@keyframes aadi-slide-in-right { from { transform: translateX(100%); } }
@keyframes aadi-slide-out-right { to { transform: translateX(100%); } }
@keyframes aadi-slide-in-left { from { transform: translateX(-100%); } }