/* tfh-ds.css — TFH Website Refresh design system (2026 Figma)
 * -----------------------------------------------------------
 * Purpose  : Tokens + components for pages built from the new Figma
 *            library (TFH Design System, file RfyZAbhT8TcJ6qsOjRBpAC).
 * Scope    : Everything here lives under a `.ds` wrapper (or uses a
 *            `ds-` class name), so loading this file cannot change any
 *            other page. Load it only on pages that use the new design:
 *              <link slot="head" href="/css/tfh-ds.css" rel="stylesheet">
 *              <div class="ds"> …page body… </div>
 * Pages    : /next-steps, /discover, /essentials, /serve-team, /baptism
 * Tokens   : Named after the Figma variables (e.g. --vertical-padding-xl,
 *            --corner-radius-l, --text-secondary) so code and Figma match.
 * Root font-size is 10px (tfh.css), so 1rem = 10px in every clamp() below.
 * Fluid clamp() values use slope-intercept, 375px → 1440px viewport.
 * =========================================================== */


/* ===========================================================
   1 — TOKENS
   =========================================================== */
.ds {
    /* Base colors */
    --base-black:    #000000;
    --base-white:    #ffffff;
    --base-white-50: rgba(255, 255, 255, 0.5);
    --grey-01: #f1f1f1;
    --grey-02: #e2e3e6;
    --grey-03: #c3c8cc;
    --grey-04: #a9aeb2;
    --grey-05: #707378;
    --brand-green: #5d6f54;   /* Brand/Green */
    --blue:        #2d5bff;

    /* Roles — pages or sub-brands can swap --accent to re-color every
       green element (step numbers, green CTA, focus ring) in one place. */
    --accent:          var(--brand-green);
    --surface-page:    var(--grey-01);
    --surface-card:    var(--base-white);
    --surface-muted:   var(--grey-02);
    --surface-accent:  var(--accent);
    --surface-inverse: var(--base-black);
    --text-primary:    var(--base-black);
    --text-secondary:  var(--grey-05);
    --text-inverse:    var(--base-white);
    --text-link:       var(--blue);
    --line-hairline:   var(--grey-03);
    --line-on-dark:    rgba(255, 255, 255, 0.25);
    --border-width-hairline: 1px;

    /* Photo scrims (Figma color styles Scrim/Card Photo, --soft, --strong) */
    --scrim-card-photo:         linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 45%, rgba(0,0,0,0.75) 100%);
    --scrim-card-photo--soft:   linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
    --scrim-card-photo--strong: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 47%, rgba(0,0,0,0.88) 100%);

    /* Corner radius */
    --corner-radius-xs: 4px;
    --corner-radius-m:  12px;
    --corner-radius-l:  20px;
    --corner-radius-rounded: 99999px;

    /* Fixed spacing (small UI gaps — same at every width) */
    --space-4:  4px;
    --space-12: 12px;
    --button-padding-s: 8px;
    --button-padding-m: 16px;
    --button-padding-l: 20px;
    --vertical-padding-xs: 16px;
    --vertical-padding-s:  24px;
    --vertical-padding-m:  40px;
    --horizontal-padding-xxs: 20px;
    --horizontal-padding-xs:  32px;
    --horizontal-padding-s:   40px;
    --layout-card-gap: 20px;
    --layout-heading-gap: 48px;

    /* Fluid spacing — desktop value at 1440px+, smaller on phones */
    --horizontal-padding-xl:   clamp(1.6rem, 7.887vw - 1.358rem, 10rem); /* 16 → 100 */
    --horizontal-padding-l:    clamp(4rem, 3.756vw + 2.592rem, 8rem);    /* 40 → 80 */
    --vertical-padding-xl:     clamp(4.8rem, 3.005vw + 3.673rem, 8rem);  /* 48 → 80 */
    --vertical-padding-l:      clamp(4rem, 1.878vw + 3.296rem, 6rem);    /* 40 → 60 */
    --layout-card-media-inset: clamp(2.4rem, 4.319vw + 0.78rem, 7rem);   /* 24 → 70 */

    /* Content width: 1400px inside a 1600px frame */
    --layout-content-max: 1400px;

    /* Typography — Neue Haas Grotesk Text Pro for everything */
    --ds-font: "neue-haas-grotesk-text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --ds-font-accent: "PerfectlyNinetiesItalic", Georgia, serif;   /* Heading/H1 Accent */
    --ds-weight-roman:  400;   /* 55 Roman */
    --ds-weight-medium: 500;   /* 65 Medium */
    --ds-size-h1:   clamp(4rem, 3.38vw + 2.732rem, 7.6rem);       /* 40 → 76 */
    --ds-size-h3:   clamp(3.2rem, 1.502vw + 2.637rem, 4.8rem);    /* 32 → 48 */
    --ds-size-h4:   clamp(2.8rem, 1.127vw + 2.377rem, 4rem);      /* 28 → 40 */
    --ds-size-text-lg: clamp(2rem, 0.376vw + 1.859rem, 2.4rem);   /* 20 → 24 */
    --ds-size-text:    clamp(1.8rem, 0.376vw + 1.659rem, 2.2rem); /* 18 → 22 */
    --ds-size-text-sm: 20px;
    --ds-size-text-xs: 18px;
    --ds-size-button:  clamp(2rem, 0.376vw + 1.859rem, 2.4rem);   /* 20 → 24 */

    background: var(--surface-page);
    color: var(--text-primary);
    font-family: var(--ds-font);
    /* The site navbar is position: fixed, so push the page body below it */
    padding-top: var(--navbar-h, 50px);
    overflow-x: clip;   /* carousels run off the right edge; never scroll the page sideways */
}


/* ===========================================================
   2 — BASE + TYPOGRAPHY
   Classes go directly on elements so they beat the legacy
   h1–h4 / p rules in tfh.css, tfh-2022.css and tfh-ui.css.
   =========================================================== */
.ds *,
.ds *::before,
.ds *::after { box-sizing: border-box; }
.ds img { display: block; max-width: 100%; }

.ds :focus-visible {
    outline: 3px solid var(--text-link);
    outline-offset: 3px;
}

/* Content container — 1400px max, 100px side padding on desktop, 16px on phones */
.ds-shell {
    width: 100%;
    max-width: calc(var(--layout-content-max) + 2 * var(--horizontal-padding-xl));
    margin: 0 auto;
    padding-left: var(--horizontal-padding-xl);
    padding-right: var(--horizontal-padding-xl);
}

/* Text XS/Bold — eyebrows ("DISCOVER", "What to expect") */
.ds-eyebrow {
    font-family: var(--ds-font);
    font-size: var(--ds-size-text-xs);
    font-weight: var(--ds-weight-medium);
    line-height: 1.4;
    letter-spacing: -0.033em;
    color: var(--text-secondary);
    text-transform: none;
    margin: 0;
}
/* Heading/H1 */
.ds-h1 {
    font-family: var(--ds-font);
    font-size: var(--ds-size-h1);
    font-weight: var(--ds-weight-medium);
    line-height: 1.04;   /* Figma is 1.0; 1.04 keeps descenders (g, y, p) from clipping */
    letter-spacing: -0.026em;
    color: var(--text-primary);
    text-transform: none;
    margin: 0;
}
/* Heading/H1 Accent — wrap the accent word: <span class="ds-accent">your</span> */
.ds-accent {
    font-family: var(--ds-font-accent);
    font-weight: 400;
    font-style: normal;
    letter-spacing: -0.01em;
}
/* Heading/H3 */
.ds-h3 {
    font-family: var(--ds-font);
    font-size: var(--ds-size-h3);
    font-weight: var(--ds-weight-medium);
    line-height: 1.04;
    letter-spacing: -0.042em;
    color: var(--text-primary);
    text-transform: none;
    margin: 0;
}
/* Heading/H4 */
.ds-h4 {
    font-family: var(--ds-font);
    font-size: var(--ds-size-h4);
    font-weight: var(--ds-weight-medium);
    line-height: 1.04;
    letter-spacing: -0.05em;
    color: var(--text-primary);
    text-transform: none;
    margin: 0;
}
/* Text Large/Reg (24) */
.ds-text-lg {
    font-family: var(--ds-font);
    font-size: var(--ds-size-text-lg);
    font-weight: var(--ds-weight-roman);
    line-height: 1.2;
    letter-spacing: -0.042em;
    margin: 0;
}
/* Text/Reg (22) */
.ds-text {
    font-family: var(--ds-font);
    font-size: var(--ds-size-text);
    font-weight: var(--ds-weight-roman);
    line-height: 1.2;
    letter-spacing: -0.036em;
    margin: 0;
}
/* Text Small/Reg (20) */
.ds-text-sm {
    font-family: var(--ds-font);
    font-size: var(--ds-size-text-sm);
    font-weight: var(--ds-weight-roman);
    line-height: 1.2;
    letter-spacing: -0.04em;
    margin: 0;
}
/* Text XS/Reg (18) */
.ds-text-xs {
    font-family: var(--ds-font);
    font-size: var(--ds-size-text-xs);
    font-weight: var(--ds-weight-roman);
    line-height: 1.4;
    letter-spacing: -0.033em;
    margin: 0;
}
.ds-secondary { color: var(--text-secondary); }

/* Link Text — blue inline link */
.ds a.ds-link,
.ds .ds-link {
    color: var(--text-link);
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}
.ds a.ds-link:hover,
.ds .ds-link:hover {
    color: var(--text-link);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}


/* ===========================================================
   3 — BUTTON (.ds-btn)  — Figma: Button (Size=Large)
     .ds-btn                 Secondary: 2px outline
     .ds-btn--primary        Primary: filled
     .ds-btn--white          Color=White, for dark / photo backgrounds
   =========================================================== */
.ds .ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--vertical-padding-xs);
    min-height: 60px;
    padding: var(--button-padding-m) var(--button-padding-l);
    border: 2px solid var(--base-black);
    border-radius: var(--corner-radius-m);
    background: transparent;
    color: var(--base-black);
    font-family: var(--ds-font);
    font-size: var(--ds-size-button);
    font-weight: var(--ds-weight-roman);
    line-height: 28px;
    letter-spacing: -0.042em;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ds .ds-btn:hover { background: var(--base-black); color: var(--base-white); text-decoration: none; }
.ds .ds-btn .ds-icon { flex-shrink: 0; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.ds .ds-btn:hover .ds-icon--arrow { transform: translateX(4px); }

.ds .ds-btn--primary { background: var(--base-black); color: var(--base-white); }
.ds .ds-btn--primary:hover { background: transparent; color: var(--base-black); }

.ds .ds-btn--white { border-color: var(--base-white); color: var(--base-white); }
.ds .ds-btn--white:hover { background: var(--base-white); color: var(--base-black); }
.ds .ds-btn--white.ds-btn--primary { background: var(--base-white); color: var(--base-black); }
.ds .ds-btn--white.ds-btn--primary:hover { background: transparent; color: var(--base-white); }

/* Button row */
.ds-btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--button-padding-s);
}

/* Campus-picker trigger wrapper: the button, plus a small "Change campus"
   note the picker script fills in once a campus is remembered. */
.ds-picker-trigger {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--button-padding-s);
}
.ds-picker-trigger__note[hidden] { display: none; }
.ds-picker-trigger__note {
    font-family: var(--ds-font);
    font-size: var(--ds-size-text-xs);
    line-height: 1.4;
    letter-spacing: -0.033em;
    color: var(--text-secondary);
    margin: 0;
}
.ds-on-dark .ds-picker-trigger__note { color: rgba(255, 255, 255, 0.8); }
.ds-on-dark .ds-picker-trigger__note .ds-link { color: var(--base-white); text-decoration: underline; }


/* ===========================================================
   4 — MINISTRY HERO (.ds-hero)
     .ds-hero--info-card   text left, photo right with an info card
     .ds-hero--image       full-width photo, text lower-left, info card lower-right
   =========================================================== */
.ds-hero { padding-top: var(--vertical-padding-xl); padding-bottom: var(--vertical-padding-xl); }
.ds-hero__inner {
    display: flex;
    align-items: center;
    gap: var(--horizontal-padding-s);
}
.ds-hero__content {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--horizontal-padding-xs);
}
.ds-hero__title {
    display: flex;
    flex-direction: column;
    gap: var(--button-padding-s);
}
.ds-hero__body { max-width: 560px; color: var(--text-secondary); }

.ds-hero__media {
    position: relative;
    flex: 0 0 auto;
    width: min(624px, 45%);
    aspect-ratio: 624 / 780;
}
.ds-hero__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--corner-radius-l);
}

/* Info Card — white card that overlaps the photo */
.ds-info-card {
    display: flex;
    flex-direction: column;
    gap: var(--button-padding-s);
    padding: var(--horizontal-padding-xs);
    background: var(--surface-card);
    border-radius: var(--corner-radius-l);
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.18);
}
.ds-info-card__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--vertical-padding-xs);
    row-gap: var(--space-4);
}
.ds-info-card__row .ds-h4 { white-space: nowrap; }
.ds-hero__media .ds-info-card {
    position: absolute;
    left: calc(-1 * var(--horizontal-padding-xs));
    bottom: var(--horizontal-padding-xs);
    max-width: calc(100% + var(--horizontal-padding-xs));
}

/* Image layout (Next Steps) */
.ds-hero--image { padding-top: var(--vertical-padding-s); }
.ds-hero__image-frame {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: var(--vertical-padding-m);
    min-height: 800px;
    padding: var(--vertical-padding-l);
    border-radius: var(--corner-radius-l);
    overflow: hidden;
    isolation: isolate;
}
.ds-hero__image-frame > .ds-hero__photo {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.ds-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--scrim-card-photo--strong);
}
.ds-hero--image .ds-h1 { color: var(--text-inverse); }
.ds-hero--image .ds-hero__body { color: var(--base-white); }
.ds-hero--image .ds-info-card { flex-shrink: 0; }

@media (max-width: 960px) {
    .ds-hero__inner { flex-direction: column; align-items: stretch; gap: var(--vertical-padding-m); }
    .ds-hero__media { width: 100%; aspect-ratio: 4 / 3; }
    .ds-hero__media .ds-info-card { left: var(--vertical-padding-xs); bottom: var(--vertical-padding-xs); max-width: calc(100% - 2 * var(--vertical-padding-xs)); }
    .ds-hero__image-frame { flex-direction: column; align-items: flex-start; min-height: 640px; }
    /* Stacked, the heading sits higher up the photo than on desktop, so the
       --strong scrim starts darkening sooner here to keep the white text readable.
       (Not a Figma style — Figma only has the desktop frame.) */
    .ds-hero__scrim { background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.88) 100%); }
}
@media (max-width: 640px) {
    .ds-hero__media { aspect-ratio: 4 / 5; }
    .ds-info-card { padding: var(--horizontal-padding-xxs) var(--vertical-padding-s); }
    .ds-hero__image-frame { padding: var(--vertical-padding-s); min-height: 600px; }
    .ds-hero__image-frame .ds-info-card { align-self: stretch; }
}


/* ===========================================================
   5 — STEPS SECTION (.ds-steps) — intro + numbered list (up to 5)
   =========================================================== */
.ds-steps { padding-top: var(--vertical-padding-xl); padding-bottom: var(--vertical-padding-xl); }
.ds-steps__inner {
    display: grid;
    grid-template-columns: minmax(0, 540px) minmax(0, 1fr);
    gap: var(--horizontal-padding-l);
    align-items: start;
}
.ds-steps__intro { display: flex; flex-direction: column; gap: var(--vertical-padding-xs); }
.ds-steps__intro .ds-text-xs { color: var(--text-secondary); }
.ds-steps__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: var(--border-width-hairline) solid var(--line-hairline);
}
.ds-steps__item {
    display: flex;
    align-items: flex-start;
    gap: var(--horizontal-padding-s);
    padding: var(--vertical-padding-m) 0;
    border-bottom: var(--border-width-hairline) solid var(--line-hairline);
}
.ds-steps__num { flex: 0 0 72px; color: var(--accent); }
.ds-steps__content { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--vertical-padding-xs); }
.ds-steps__content .ds-text-xs { color: var(--text-secondary); }
@media (max-width: 960px) {
    .ds-steps__inner { grid-template-columns: 1fr; gap: var(--vertical-padding-m); }
}
@media (max-width: 640px) {
    .ds-steps__item { gap: var(--vertical-padding-xs); }
    .ds-steps__num { flex-basis: 48px; }
}


/* ===========================================================
   6 — CTA SECTION (.ds-cta) — Color: --green (Brand/Green) or --black
   =========================================================== */
.ds-cta { padding-top: var(--vertical-padding-m); padding-bottom: var(--vertical-padding-m); }
.ds-cta__card {
    display: flex;
    align-items: center;
    gap: var(--vertical-padding-m);
    padding: var(--horizontal-padding-xl);
    border-radius: var(--corner-radius-l);
    color: var(--text-inverse);
}
.ds-cta--green .ds-cta__card { background: var(--surface-accent); }
.ds-cta--black .ds-cta__card { background: var(--surface-inverse); }
.ds-cta__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--vertical-padding-xs); }
.ds-cta__text .ds-h1 { color: inherit; }
.ds-cta__actions {
    flex: 0 0 360px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--vertical-padding-xs);
}
@media (max-width: 960px) {
    .ds-cta__card { flex-direction: column; align-items: flex-start; padding: var(--vertical-padding-xl) var(--horizontal-padding-s); }
    .ds-cta__actions { flex-basis: auto; justify-content: flex-start; }
}
@media (max-width: 640px) {
    .ds-cta__card { padding: var(--horizontal-padding-s) var(--vertical-padding-s); }
}


/* ===========================================================
   7 — TEXT SECTION (.ds-text-section) — one centered line + inline link
   =========================================================== */
.ds-text-section { padding-top: var(--vertical-padding-l); padding-bottom: var(--vertical-padding-l); }
.ds-text-section__line {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: var(--button-padding-s);
    text-align: center;
}
.ds-text-section--left .ds-text-section__line { justify-content: flex-start; text-align: left; }


/* ===========================================================
   8 — CAROUSEL (.ds-carousel) + PHOTO CARD (.ds-photo-card)
   Swiper v11 (loaded globally in Layout.astro) does the sliding;
   the init script lives in components/ds/Carousel.astro.
     .ds-carousel--small    400 × 480 cards
     .ds-carousel--medium   520 × 640 cards
   =========================================================== */
.ds-carousel { padding-top: var(--vertical-padding-m); padding-bottom: var(--vertical-padding-m); }
.ds-carousel__container { display: flex; flex-direction: column; gap: var(--space-12); }
.ds-carousel__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--vertical-padding-s);
    padding: var(--button-padding-s) 0;
}
.ds-carousel__heading { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--vertical-padding-xs); }
.ds-carousel__desc { max-width: 760px; color: var(--text-secondary); }
.ds-carousel__arrows { display: flex; gap: var(--vertical-padding-s); flex-shrink: 0; }

/* Arrow Button — 48px round. Default black, Hover blue, Disabled grey */
.ds .ds-arrow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: var(--button-padding-m);
    border: 0;
    border-radius: var(--corner-radius-rounded);
    background: var(--base-black);
    color: var(--base-white);
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.ds .ds-arrow-btn:hover { background: var(--text-link); }
.ds .ds-arrow-btn--prev .ds-icon { transform: rotate(180deg); }
.ds .ds-arrow-btn.swiper-button-disabled,
.ds .ds-arrow-btn:disabled {
    background: var(--grey-02);
    color: var(--grey-04);
    cursor: default;
}
.ds .ds-arrow-btn.swiper-button-lock { display: none; }

/* Track — the slides run off the right edge of the page on purpose */
.ds-carousel .swiper { overflow: visible; width: 100%; margin: 0; }
.ds-carousel .swiper-wrapper { list-style: none; margin: 0; padding: 0; }
.ds-carousel .swiper-slide { width: auto; height: auto; }

/* Indicator — 8px dots, the active one is a long bar */
.ds-carousel__indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--vertical-padding-xs);
    padding: var(--button-padding-m) 0;
    min-height: 40px;
}
.ds-carousel__indicator.swiper-pagination-lock { display: none; }
.ds .ds-carousel__indicator .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0;
    border-radius: var(--corner-radius-rounded);
    background: var(--grey-05);
    opacity: 1;
    transition: width 0.25s ease, background-color 0.25s ease;
    position: relative;
    cursor: pointer;
}
/* Dots are clickable — widen the hit area to 24px without changing the look */
.ds .ds-carousel__indicator .swiper-pagination-bullet::after {
    content: '';
    position: absolute;
    inset: -8px -4px;
}
.ds .ds-carousel__indicator .swiper-pagination-bullet:focus-visible {
    outline: 2px solid var(--base-black);
    outline-offset: 3px;
}
.ds .ds-carousel__indicator .swiper-pagination-bullet-active {
    width: 48px;
    background: var(--base-black);
}

/* Photo Card (Content Card, Style=Photo, Heading Position=Bottom) */
.ds-photo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding: var(--vertical-padding-m) var(--horizontal-padding-s);
    border-radius: var(--corner-radius-l);
    overflow: hidden;
    isolation: isolate;
    color: var(--base-white);
    background: var(--grey-05);
}
.ds-carousel--small .ds-photo-card  { width: min(400px, 78vw); min-height: 480px; }
.ds-carousel--medium .ds-photo-card { width: min(520px, 86vw); min-height: 640px; }
.ds-photo-card__photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ds-photo-card__scrim { position: absolute; inset: 0; z-index: -1; background: var(--scrim-card-photo); }
.ds-photo-card--strong .ds-photo-card__scrim { background: var(--scrim-card-photo--strong); }
.ds-photo-card--soft .ds-photo-card__scrim { background: var(--scrim-card-photo--soft); }
.ds-photo-card__bottom { display: flex; flex-direction: column; align-items: flex-start; gap: var(--vertical-padding-s); }
.ds-photo-card__title { display: flex; flex-direction: column; gap: var(--button-padding-s); }
.ds-photo-card .ds-eyebrow { color: var(--base-white-50); }
.ds-photo-card .ds-h3 { color: var(--base-white); max-width: 640px; }
.ds-photo-card .ds-text-lg { max-width: 595px; }
@media (max-width: 640px) {
    .ds-carousel__header { flex-direction: column; align-items: flex-start; }
    .ds-carousel--small .ds-photo-card  { min-height: 400px; }
    .ds-carousel--medium .ds-photo-card { min-height: 520px; padding: var(--vertical-padding-s); }
}


/* ===========================================================
   9 — ACCORDION FEATURE CARD (.ds-accordion-card)
   Numbered accordion steps left, photo right. One row open at a time;
   the photo swaps to match the open row (script in the component).
   =========================================================== */
.ds-accordion-card { padding-top: var(--vertical-padding-xl); padding-bottom: var(--vertical-padding-xl); }
.ds-accordion-card__container { display: flex; flex-direction: column; gap: var(--layout-heading-gap); }
.ds-accordion-card__intro { display: flex; flex-direction: column; gap: var(--vertical-padding-s); }
.ds-accordion-card__intro .ds-text-xs { color: var(--text-secondary); }
.ds-accordion-card__card {
    display: flex;
    align-items: center;
    gap: var(--vertical-padding-l);
    padding: var(--layout-card-media-inset) var(--layout-card-media-inset) var(--layout-card-media-inset) var(--horizontal-padding-xl);
    background: var(--surface-card);
    border-radius: var(--corner-radius-l);
}
.ds-accordion-card__steps { flex: 0 1 520px; min-width: 0; }
.ds-accordion-card__item {
    display: flex;
    align-items: flex-start;
    gap: var(--vertical-padding-xs);
    padding: var(--vertical-padding-m) 0;
    border-bottom: var(--border-width-hairline) solid var(--line-hairline);
}
.ds-accordion-card__num { color: var(--accent); white-space: nowrap; }
.ds-accordion-card__body { flex: 1 1 0; min-width: 0; }
.ds-accordion-card__heading { margin: 0; }
.ds .ds-accordion-card__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--horizontal-padding-xs);
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: var(--base-black);
    text-align: left;
    cursor: pointer;
}
.ds-accordion-card__chevron { flex-shrink: 0; transition: transform 0.3s ease; }
.ds-accordion-card__toggle[aria-expanded="true"] .ds-accordion-card__chevron { transform: rotate(180deg); }

/* Panel — animates open with grid-template-rows (0fr → 1fr) */
.ds-accordion-card__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}
.ds-accordion-card__panel.is-open { grid-template-rows: 1fr; }
.ds-accordion-card__panel-inner { overflow: hidden; min-height: 0; }
.ds-accordion-card__panel-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vertical-padding-m);
    padding-top: var(--vertical-padding-m);
}
.ds-accordion-card__panel-content .ds-text-lg { color: var(--grey-05); }

.ds-accordion-card__media {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 620px;
    border-radius: var(--corner-radius-m);
    overflow: hidden;
}
.ds-accordion-card__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.ds-accordion-card__photo.is-active { opacity: 1; }
@media (max-width: 960px) {
    .ds-accordion-card__card { flex-direction: column; align-items: stretch; padding: var(--layout-card-media-inset); }
    .ds-accordion-card__steps { flex-basis: auto; }
    .ds-accordion-card__media { order: -1; flex: 0 0 auto; height: auto; aspect-ratio: 4 / 3; }
}


/* ===========================================================
   10 — LINK LIST (.ds-link-list) — low-emphasis four-column list
   =========================================================== */
.ds-link-list { padding-top: var(--vertical-padding-m); padding-bottom: var(--vertical-padding-xl); }
.ds-link-list__container { display: flex; flex-direction: column; gap: var(--vertical-padding-s); }
.ds-link-list__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--vertical-padding-xs) var(--layout-card-gap);
}
.ds .ds-link-list__items a {
    color: var(--base-black);
    text-decoration: none;
}
.ds .ds-link-list__items a:hover { color: var(--text-link); text-decoration: underline; text-underline-offset: 0.15em; }
@media (max-width: 960px) { .ds-link-list__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ds-link-list__items { grid-template-columns: 1fr; } }


/* ===========================================================
   11 — CAMPUS PICKER (.ds-picker)
   Native <dialog> opened with showModal(): the rest of the page goes
   inert (focus trap) and Esc closes it. Desktop = centered dialog,
   mobile = bottom sheet with a handle.
   =========================================================== */
.ds-picker {
    width: min(520px, calc(100vw - 2 * var(--vertical-padding-xs)));
    max-height: calc(100vh - 2 * var(--vertical-padding-xs));
    max-height: calc(100dvh - 2 * var(--vertical-padding-xs));
    margin: auto;
    padding: var(--horizontal-padding-xs) var(--vertical-padding-s) var(--vertical-padding-s);
    border: 0;
    border-radius: var(--corner-radius-l);
    background: var(--surface-card);
    color: var(--text-primary);
    font-family: var(--ds-font);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.ds-picker[open] { display: flex; flex-direction: column; gap: var(--horizontal-padding-xxs); }
.ds-picker::backdrop {
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.ds-picker__handle { display: none; }
.ds-picker__header {
    display: flex;
    align-items: flex-start;
    gap: var(--vertical-padding-xs);
    padding: 0 var(--button-padding-s);
}
.ds-picker__title { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--button-padding-s); }
.ds-picker__title .ds-text-xs { color: var(--text-secondary); }
.ds-picker__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--corner-radius-rounded);
    background: var(--surface-muted);
    color: var(--base-black);
    cursor: pointer;
}
.ds-picker__close:hover { background: var(--grey-03); }
.ds-picker__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

/* Campus Row — photo, name, address, chevron. Hover/focus = Surface/Muted */
.ds-picker__row {
    display: flex;
    align-items: center;
    gap: var(--vertical-padding-xs);
    padding: var(--button-padding-s);
    border-radius: var(--corner-radius-m);
    color: var(--text-primary);
    text-decoration: none;
}
/* :focus too — the legacy `a:focus` rule in tfh.css would turn rows blue + underlined */
a.ds-picker__row:hover,
a.ds-picker__row:focus,
a.ds-picker__row:focus-visible { background: var(--surface-muted); color: var(--text-primary); text-decoration: none; }
.ds-picker__row:focus-visible { outline-offset: 0; }
.ds-picker__row[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.ds-picker__photo {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: var(--corner-radius-m);
    object-fit: cover;
    background: var(--surface-muted);
}
.ds-picker__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--button-padding-s); }
.ds-picker__name {
    font-size: var(--ds-size-text);
    font-weight: var(--ds-weight-medium);
    line-height: 1.2;
    letter-spacing: -0.036em;
}
.ds-picker__place { color: var(--text-secondary); }
.ds-picker__row .ds-icon--chevron { flex-shrink: 0; }

.ds-picker__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vertical-padding-xs);
    padding: var(--vertical-padding-xs) var(--button-padding-s) 0;
    border-top: var(--border-width-hairline) solid var(--line-hairline);
}
.ds-picker__find-short { display: none; }

/* Form Checkbox — 22px black box with a white check */
.ds-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--space-12);
    min-height: 44px;   /* tap target */
    margin: 0;
    font-size: var(--ds-size-text-sm);
    font-weight: var(--ds-weight-roman);
    line-height: 1.2;
    letter-spacing: -0.04em;
    color: var(--text-primary);
    cursor: pointer;
}
.ds-checkbox__input {
    position: absolute;
    opacity: 0;
    width: 22px;
    height: 22px;
    margin: 0;
}
.ds-checkbox__box {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--base-black);
    border-radius: var(--corner-radius-xs);
    background: var(--surface-card);
    color: var(--base-white);
}
.ds-checkbox__box .ds-icon { visibility: hidden; }
.ds-checkbox__input:checked + .ds-checkbox__box { background: var(--base-black); }
.ds-checkbox__input:checked + .ds-checkbox__box .ds-icon { visibility: visible; }
.ds-checkbox__input:focus-visible + .ds-checkbox__box { outline: 3px solid var(--text-link); outline-offset: 2px; }

@media (max-width: 640px) {
    .ds-picker {
        width: 100%;
        max-width: 100%;
        margin: auto 0 0;
        padding: var(--button-padding-s) var(--vertical-padding-xs) var(--horizontal-padding-xs);
        border-radius: var(--corner-radius-l) var(--corner-radius-l) 0 0;
    }
    .ds-picker[open] { gap: var(--vertical-padding-xs); }
    .ds-picker__handle {
        display: block;
        align-self: center;
        flex-shrink: 0;
        width: 40px;
        height: 5px;
        border-radius: var(--corner-radius-rounded);
        background: var(--grey-03);
    }
    .ds-picker__find-long { display: none; }
    .ds-picker__find-short { display: inline; }
}

/* Open animation — fade on desktop, slide up on mobile */
@media (prefers-reduced-motion: no-preference) {
    .ds-picker[open] { animation: ds-picker-in 0.2s ease-out; }
    .ds-picker[open]::backdrop { animation: ds-fade-in 0.2s ease-out; }
    @media (max-width: 640px) {
        .ds-picker[open] { animation: ds-sheet-in 0.25s ease-out; }
    }
}
@keyframes ds-picker-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes ds-sheet-in  { from { transform: translateY(100%); } to { transform: none; } }
@keyframes ds-fade-in   { from { opacity: 0; } to { opacity: 1; } }


/* ===========================================================
   12 — FEATURE BLOCK (.ds-feature) — Figma: Feature Block
   Brand-green card: eyebrow + heading + text on top, white outline
   button at the bottom; photo fills the right side of the card.
   Optional: .ds-feature__details (label/value list), .ds-feature__note
   =========================================================== */
.ds-feature { padding-top: var(--vertical-padding-m); padding-bottom: var(--vertical-padding-m); }
.ds-feature__card {
    display: flex;
    align-items: stretch;
    min-height: 736px;
    border-radius: var(--corner-radius-l);
    overflow: hidden;
    background: var(--surface-accent);
    color: var(--text-inverse);
}
.ds-feature__content {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--vertical-padding-xs);
    padding: var(--vertical-padding-m) var(--horizontal-padding-s);
}
.ds-feature__top { display: flex; flex-direction: column; gap: var(--vertical-padding-xs); }
.ds-feature .ds-eyebrow { color: var(--base-white-50); }
.ds-feature .ds-h1 { color: var(--text-inverse); }
.ds-feature__top .ds-text-sm { color: var(--text-inverse); }
.ds-feature__bottom { display: flex; flex-direction: column; align-items: flex-start; gap: var(--vertical-padding-s); }
.ds-feature__details { display: flex; flex-wrap: wrap; gap: var(--vertical-padding-s) var(--horizontal-padding-s); margin: 0; }
.ds-feature__detail { display: flex; flex-direction: column; gap: var(--space-4); }
.ds-feature__detail dd { margin: 0; color: var(--text-inverse); }
.ds-feature__media {
    position: relative;
    flex: 0 0 auto;
    width: 46.65%;   /* 653 of the 1400px card in Figma */
}
.ds-feature__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ds-feature__note {
    position: absolute;
    left: var(--horizontal-padding-xs);
    right: var(--horizontal-padding-xs);
    bottom: var(--horizontal-padding-xs);
    color: var(--base-white);
}
@media (max-width: 960px) {
    .ds-feature__card { flex-direction: column; min-height: 0; }
    /* Stacked: photo on top at its own 16:9 shape, text below */
    .ds-feature__media { order: -1; width: 100%; aspect-ratio: 16 / 9; }
    .ds-feature__content { gap: var(--vertical-padding-m); }
}
@media (max-width: 640px) {
    .ds-feature__content { padding: var(--vertical-padding-s); }
}


/* ===========================================================
   13 — FAQ SECTION (.ds-faq) — Figma: FAQ Section + FAQ Accordion
   Header column left, question list right. Each row opens on its
   own (several can be open); script in components/ds/FaqSection.astro.
   =========================================================== */
.ds-faq { padding-top: var(--vertical-padding-xl); padding-bottom: var(--vertical-padding-xl); }
.ds-faq__inner {
    display: flex;
    align-items: flex-start;
    gap: var(--horizontal-padding-l);
}
.ds-faq__header {
    flex: 0 0 480px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--vertical-padding-xs);
}
.ds-faq__title { display: flex; flex-direction: column; gap: var(--button-padding-s); }
.ds-faq__note { color: var(--text-secondary); }
.ds-faq__list { flex: 1 1 0; min-width: 0; }
.ds-faq__item {
    padding: var(--horizontal-padding-s) 0;
    border-bottom: var(--border-width-hairline) solid var(--line-hairline);
}
.ds-faq__question { margin: 0; }
.ds .ds-faq__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--horizontal-padding-xs);
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: var(--base-black);
    text-align: left;
    cursor: pointer;
}
.ds-faq__toggle .ds-h3 { flex: 1 1 0; min-width: 0; }
.ds-faq__toggle[aria-expanded="true"] .ds-accordion-card__chevron { transform: rotate(180deg); }

/* Answer — animates open with grid-template-rows (0fr → 1fr) */
.ds-faq__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}
.ds-faq__panel.is-open { grid-template-rows: 1fr; }
.ds-faq__panel-inner { overflow: hidden; min-height: 0; }
.ds-faq__answer {
    display: flex;
    flex-direction: column;
    gap: var(--vertical-padding-xs);
    max-width: 760px;
    padding-top: var(--vertical-padding-m);
    color: var(--text-secondary);
}
/* Answers are free HTML (paragraphs, sub-headings, lists, links) */
.ds-faq__answer > * { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; }
.ds-faq__answer h4 { font-weight: var(--ds-weight-medium); color: var(--text-primary); text-transform: none; }
.ds-faq__answer h4 + p { margin-top: calc(-1 * var(--button-padding-s)); }
.ds-faq__answer ol,
.ds-faq__answer ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--button-padding-s); }
.ds-faq__answer a { color: var(--text-link); text-decoration: none; }
.ds-faq__answer a:hover { color: var(--text-link); text-decoration: underline; text-underline-offset: 0.15em; }
@media (max-width: 960px) {
    .ds-faq__inner { flex-direction: column; gap: var(--vertical-padding-m); }
    .ds-faq__header { flex-basis: auto; }
}
@media (max-width: 640px) {
    .ds-faq__item { padding: var(--vertical-padding-s) 0; }
    .ds-faq__toggle .ds-accordion-card__chevron { width: 28px; }
    .ds-faq__answer { padding-top: var(--vertical-padding-s); }
}


/* ===========================================================
   14 — REDUCED MOTION
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
    .ds *,
    .ds *::before,
    .ds *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Visually hidden but read by screen readers */
.ds-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}