/* sc-components — the shared design system for every sitectrl site.
 *
 * ONE source of truth. Seeded into every tenant's htdocs (like
 * sc-track.js) and linked in every page, so a component fix here reaches
 * every site on the next deploy. Consumed two ways:
 *   - pipelines emit the markup via site_components/markup.py
 *   - agents write the markup directly (taught by CATALOG.md)
 *
 * Responsive by construction: desktop is the base rule, mobile is the
 * @media(max-width:767px) override. Colours default to CSS variables a
 * tenant can override in its own stylesheet without forking this file:
 *   --sc-accent  (bars, active states)   --sc-ink (text)
 *   --sc-bg      (surface)               --sc-muted (secondary text)
 */

/* THEME BINDING — step 2 of docs/site-components-plan.md.
 *
 * These values used to be the AWC Korea palette, hard-coded, because
 * the library had exactly one caller. Seeded onto all 39 tenants it
 * would have painted a brewery navy: a component dropped into any
 * template site announced itself as foreign, which is the opposite of
 * what a shared library is for.
 *
 * The templates turn out to already agree on a token vocabulary —
 * measured across all eight `htdocs/style.css`:
 *
 *     --accent --bg --bg-alt --border   8 of 8
 *     --fg --fg-soft --radius --shadow  7 of 8
 *     --ink / --muted                   local-services' names for
 *                                       --fg / --fg-soft
 *
 * So there is nothing to invent. Each --sc-* reads the template's own
 * token, falls through the alternate name, and only then lands on the
 * literal it used to be. A template is a THEME; the library reads it.
 *
 * Every literal below is the value this file shipped with, so a page
 * with no template stylesheet renders exactly as it did before.
 */
:root {
  --sc-accent:  var(--accent, #33507a);
  --sc-ink:     var(--fg, var(--ink, #000));
  --sc-bg:      var(--bg, #fff);
  --sc-muted:   var(--fg-soft, var(--muted, #55566e));
  --sc-tile-bg: var(--bg-alt, #f2f3f5);
  --sc-radius:  var(--radius, var(--radius-sm, 14px));
  --sc-heading: var(--fg, var(--ink, #23254c));
  --sc-btn:     var(--accent, #33507a);

  /* NOT bound. --sc-bar is the header's companion strip and --sc-purple
   * a tier colour; both are lighter/darker partners to the accent with
   * no template token that means the same thing, and deriving one with
   * colour-mix() would change how AWC Korea renders today. They stay
   * literal until a second caller needs them. */
  --sc-bar: #557bb8;
}

/* ============================ HEADER ============================
 * image1 (mobile) + image8 (desktop). Desktop: horizontal links, big
 * logo at the right end. Mobile: a vertical menu showing 3 links with a
 * carat above and below (scroll ±3 or finger-scroll), logo ~2/3 on the
 * right. Active link underlined. No "Home" — the logo links home.
 */
.sc-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; background: var(--sc-bg); padding: .5rem 1.5rem;
}
.sc-header__bar { height: 15px; background: var(--sc-bar); }
.sc-header__nav { display: flex; align-items: center; min-width: 0; }
.sc-header__links {
  display: flex; flex-direction: row; align-items: center; gap: 2rem;
  list-style: none; margin: 0; padding: 0;
}
.sc-header__links a {
  color: var(--sc-ink); font-weight: 700; text-transform: uppercase;
  text-decoration: none; letter-spacing: .03em; white-space: nowrap;
  font-size: 1.05rem;
}
.sc-header__links a[aria-current="page"] { text-decoration: underline; }
.sc-header__carat { display: none; }              /* desktop: no carats */
.sc-header__brand { flex: 0 0 auto; display: flex; }
.sc-header__brand img {
  height: 88px; width: auto; max-width: 100%; display: block;
}

@media (max-width: 767px) {
  .sc-header { align-items: stretch; gap: 1rem; padding: .5rem 1rem; }
  /* Left third: a 3-row scroll menu framed by up/down carats. */
  .sc-header__nav {
    flex-direction: column; flex: 0 0 38%; justify-content: center;
    --sc-row: 2.6em;
  }
  .sc-header__carat {
    display: block; border: 0; background: none; color: var(--sc-accent);
    font-size: 15px; line-height: 1; cursor: pointer; padding: 2px 0;
    text-align: left;
  }
  .sc-header__links {
    flex-direction: column; gap: 0;
    max-height: calc(var(--sc-row) * 3); overflow-y: auto;
    scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sc-header__links::-webkit-scrollbar { display: none; }
  .sc-header__links li { scroll-snap-align: start; }
  .sc-header__links a {
    display: flex; align-items: center; height: var(--sc-row);
    font-size: 1.05rem;
  }
  /* Right two-thirds: the logo, as large as the row allows. */
  .sc-header__brand { flex: 0 0 60%; align-items: center;
                      justify-content: flex-end; }
  .sc-header__brand img { height: auto; max-height: 120px; }
}

/* ============================ GALLERY ==========================
 * image17/image16. A full-bleed hero reel that CROSS-FADES (not
 * slides), autoplays, and continues from wherever the visitor left it.
 * Hollow dots, the active one filled. NO dots and NO autoplay when
 * there is a single image. Bleeds by the page gutter (--sc-pad).
 */
.sc-gallery { margin: 0 calc(var(--sc-pad, 1.5rem) * -1) 1.25rem; }
.sc-gallery__frame {
  position: relative; width: 100%; height: min(56vw, 520px);
  overflow: hidden; background: #eef1f4;
}
.sc-gallery__slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; opacity: 0;
  transition: opacity .9s ease;
}
.sc-gallery__slide.is-active { opacity: 1; }
.sc-gallery__dots {
  display: flex; gap: 14px; justify-content: center; padding: 16px 0;
}
.sc-gallery__dot {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid #c9d3dd; background: transparent; padding: 0;
  cursor: pointer; transition: background .2s, border-color .2s;
}
.sc-gallery__dot.is-active {
  background: var(--sc-accent); border-color: var(--sc-accent);
}
@media (min-width: 768px) {
  .sc-gallery__frame { height: min(42vw, 560px); }
}

/* ============================ FOOTER ===========================
 * image7 (mobile) / image3 (desktop). A blue band, white text.
 * Desktop top half is 3 columns: contact (email + Instagram, as text)
 * on the left, logo centred, nav (JOIN/RENEW + EVENTS) on the right.
 * Mobile stacks it centred: contact as ICONS, then the two nav links,
 * then the logo. Legal block is centred under both, in smaller text.
 * DOM order is contact, brand, nav (the desktop row); mobile reorders.
 */
.sc-footer {
  background: var(--sc-foot-bg, var(--sc-bar));
  color: #fff; text-align: center; padding: 2.5rem 1.5rem 1.75rem;
}
.sc-footer__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; max-width: 900px; margin: 0 auto;
}
.sc-footer__contact, .sc-footer__nav {
  display: flex; flex-direction: column; gap: .5rem;
}
.sc-footer a { color: inherit; text-decoration: none; }
.sc-footer__contact a { font-weight: 700; }
.sc-footer__nav a { font-weight: 700; letter-spacing: .03em; }
.sc-footer__contact a svg { display: none; }        /* desktop: text */
.sc-footer__brand { display: flex; flex-direction: column;
                    align-items: center; gap: .4rem; }
.sc-footer__brand img { height: 74px; width: auto; }
.sc-footer__legal {
  margin-top: 1.5rem; font-size: .84rem; line-height: 1.7; opacity: .95;
}
.sc-footer__legal a { text-decoration: underline; }

@media (max-width: 767px) {
  .sc-footer__top { flex-direction: column; gap: 1rem; }
  .sc-footer__contact { order: 1; flex-direction: row; gap: 1.1rem;
                        justify-content: center; }
  .sc-footer__nav { order: 2; gap: 1rem; }
  .sc-footer__brand { order: 3; margin-top: .6rem; }
  .sc-footer__contact a span { display: none; }      /* mobile: icons */
  .sc-footer__contact a svg { display: block; width: 26px; height: 26px; }
}

/* ============================ INFO TILES ========================
 * image2/image19 (mobile) / image18 (desktop 2-col). Title (navy, bold,
 * NO background), then image, then text. One line between title→image
 * and image→text; generous space above the title. Stacked on mobile,
 * two columns on desktop.
 */
.sc-info-tiles { display: grid; grid-template-columns: 1fr;
                 gap: 1.5rem 3rem; margin: 1rem 0; }
.sc-info-tile__title {
  color: var(--sc-heading, #23254c); font-weight: 700;
  font-size: 1.5rem; margin: 3.2em 0 1em; line-height: 1.2;
}
.sc-info-tile:first-child .sc-info-tile__title { margin-top: 1.4em; }
.sc-info-tile__img {
  width: 100%; height: auto; display: block; margin: 0 0 1em;
  border-radius: 8px;
}
.sc-info-tile__text { color: var(--sc-body, var(--sc-muted));
                      line-height: 1.75; }
@media (min-width: 768px) {
  .sc-info-tiles { grid-template-columns: 1fr 1fr; }
  .sc-info-tile .sc-info-tile__title { margin-top: 1.6em; }
}

/* ============================ BUTTON (shared) ==================== */
.sc-btn {
  display: inline-block; background: var(--sc-btn, var(--sc-accent));
  color: #fff; text-transform: uppercase; font-weight: 700;
  letter-spacing: .03em; text-decoration: none; padding: .7rem 1.3rem;
  border-radius: 8px; border: 0; cursor: pointer; margin-top: 1rem;
}

/* ============================ INSTRUCTIONS ======================
 * image5 (mobile) / image4 (desktop 2-col). A title, then faint-gray
 * rounded tiles each holding text and an optional button. One line
 * between title and the first tile, one line between tiles. Two columns
 * on desktop.
 */
.sc-instructions__title {
  color: var(--sc-heading, #23254c); font-weight: 700;
  font-size: 1.4rem; margin: 1.2em 0 1em;
}
.sc-instructions__grid { display: grid; grid-template-columns: 1fr;
                         gap: 1.25rem; }
.sc-instruction-tile {
  background: var(--sc-tile-bg); border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--sc-radius); padding: 1.4rem 1.5rem 1.5rem;
}
.sc-instruction-tile__body { color: var(--sc-body, var(--sc-muted));
                             line-height: 1.7; }
@media (min-width: 768px) {
  .sc-instructions__grid { grid-template-columns: 1fr 1fr;
                           align-items: start; }
}

/* ============================ EVENT TILES =======================
 * image9 (mobile) / image12 (desktop side-by-side). A title, then a
 * rounded card: light-gray top holds the event image, white bottom
 * holds Date/Time/Location (blue labels), a description, and an RSVP
 * button. On desktop the gray media and white body sit side by side.
 * 3-4 lines between tiles.
 */
.sc-event { margin: 0 0 3.5rem; }
.sc-event__title { color: var(--sc-heading, #23254c); font-weight: 700;
                   font-size: 1.5rem; margin: 0 0 1rem; }
.sc-event__card { border: 1px solid rgba(0,0,0,.08);
                  border-radius: 16px; overflow: hidden; }
.sc-event__media { background: var(--sc-tile-bg); padding: 1.5rem;
                   display: flex; align-items: center;
                   justify-content: center; }
.sc-event__media img { max-width: 72%; height: auto; display: block; }
.sc-event__body { background: #fff; padding: 1.5rem 1.6rem 1.6rem;
                  color: var(--sc-body, var(--sc-muted)); }
.sc-event__meta { line-height: 1.9; }
.sc-event__meta b { color: var(--sc-accent); font-weight: 700; }
.sc-event__desc { line-height: 1.75; margin: 1rem 0; }
@media (min-width: 768px) {
  .sc-event__card { display: grid; grid-template-columns: 1fr 1fr; }
  .sc-event__media img { max-width: 88%; }
}

/* ============================ TIER BAR (shared) ================= */
.sc-tier-bar {
  color: #fff; font-weight: 700; font-size: 1.05rem;
  padding: .6rem var(--sc-pad, 1.5rem);
  margin: 1.2rem calc(var(--sc-pad, 1.5rem) * -1) .9rem;
}

/* ============================ LOGO SCROLLER =====================
 * image13/image6 (mobile) / image14 (desktop). A horizontally
 * scrollable row (or 4-row grid, for Donor) of white rounded logo
 * cards — logo CONTAINED, never zoomed (also fixes partner-tile zoom).
 * Dots appear (via JS) only when the row overflows. scrollbar hidden.
 */
.sc-scroller__track {
  display: flex; gap: 1rem; overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  padding-bottom: .25rem;
}
.sc-scroller__track::-webkit-scrollbar { display: none; }
.sc-scroller__track--rows {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto);
  grid-auto-columns: minmax(42%, 1fr); gap: .8rem 1rem;
}
.sc-logo-card {
  flex: 0 0 auto; scroll-snap-align: start;
  width: 46%; aspect-ratio: 3 / 2; background: #fff;
  border: 1px solid rgba(0,0,0,.10); border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  padding: 1.1rem;
}
.sc-scroller__track--rows .sc-logo-card { width: auto; aspect-ratio: 2 / 1;
                                          padding: .7rem; }
.sc-logo-card img { max-width: 100%; max-height: 100%; object-fit: contain;
                    display: block; }
.sc-scroller__dots { display: flex; gap: 10px; justify-content: center;
                     padding: 12px 0 0; }
.sc-scroller__dots:empty { display: none; }
.sc-scroller__dot { width: 9px; height: 9px; border-radius: 50%;
                    border: 0; background: #c9d3dd; padding: 0; cursor: pointer; }
.sc-scroller__dot.is-active { background: var(--sc-accent); }
@media (min-width: 768px) {
  .sc-logo-card { width: 220px; }
  .sc-scroller__track--rows { grid-auto-columns: minmax(200px, 1fr); }
}

/* ============================ SPONSOR TIERS =====================
 * image10/image11 (mobile) / image15 (desktop). A purple rounded
 * container with a white title + description, then a horizontal
 * scroller of white tier tiles (tier name + bullet benefits), with
 * light dots. One tile shows at a time on mobile; more on desktop.
 * Reuses the generic scroller (data-sc-scroller / -track / -dots).
 */
.sc-sponsor-tiers {
  background: var(--sc-purple, #3f2a7a); color: #fff;
  border-radius: 18px; padding: 1.5rem 1.5rem 1.25rem; margin: 1.5rem 0;
}
.sc-sponsor-tiers__title { font-weight: 700; font-size: 1.4rem;
                           margin: 0 0 .7rem; }
.sc-sponsor-tiers__desc { line-height: 1.7; margin: 0 0 1.25rem;
                          opacity: .96; }
.sc-tier-tile {
  flex: 0 0 88%; scroll-snap-align: start; background: #fff;
  color: var(--sc-body, #333); border-radius: 14px;
  padding: 1.5rem 1.6rem;
}
.sc-tier-tile__title { color: #666; font-weight: 700; text-transform: uppercase;
                       letter-spacing: .02em; margin: 0 0 1rem;
                       font-size: 1.1rem; }
.sc-tier-tile ul { margin: 0; padding-left: 1.2rem; line-height: 1.9; }
.sc-tier-tile li { margin-bottom: .5rem; }
.sc-scroller__dots--light .sc-scroller__dot { background: rgba(255,255,255,.4); }
.sc-scroller__dots--light .sc-scroller__dot.is-active { background: #fff; }
@media (min-width: 768px) {
  .sc-tier-tile { flex-basis: 44%; }
}


/* ============ HEADER VARIANT: sc-header--menu ====================
 *
 * A PLAIN HAMBURGER, for sites that are not the association this
 * component was drawn from.
 *
 * The default .sc-header is a measured reproduction of one customer's
 * real header: a three-row scrolling list framed by up/down carats.
 * That is correct for them and unrecognisable everywhere else — a
 * switch preview of a trade company shipped with eight long links in
 * that reel and the visitor reported, twice, that "the hamburger does
 * not work". There was no hamburger.
 *
 * So this is opt-in and leaves the default alone. Add sc-header--menu
 * and the mobile header becomes a button that shows every link; the
 * desktop row wraps instead of overflowing.
 */
.sc-header--menu .sc-header__toggle { display: none; }

@media (min-width: 768px) {
  /* EIGHT LINKS DO NOT FIT ON ONE ROW. The reel never needed to wrap
   * because that site has seven short ones; "Discuss a Trade
   * Opportunity" beside seven others does. */
  .sc-header--menu .sc-header__links { flex-wrap: wrap; row-gap: .35rem; }
}

@media (max-width: 767px) {
  .sc-header--menu { flex-wrap: wrap; align-items: center; }
  .sc-header--menu .sc-header__nav { flex: 1 1 auto; order: 2; }
  .sc-header--menu .sc-header__brand { flex: 1 1 auto; order: 1; }
  /* The carats belong to the reel, not to a menu. */
  .sc-header--menu .sc-header__carat { display: none !important; }
  .sc-header--menu .sc-header__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .5rem; order: 1; margin-left: auto;
    border: 1px solid var(--sc-muted); border-radius: 10px;
    background: none; color: var(--sc-ink); cursor: pointer;
    font: inherit; font-size: 15px; padding: .45rem .7rem;
    min-height: 44px; min-width: 44px;      /* a real touch target */
  }
  /* CLOSED BY DEFAULT, and closed means gone — a zero-height list that
   * still catches taps is how a menu "does nothing". */
  .sc-header--menu .sc-header__links {
    display: none; flex-direction: column; gap: 0;
    max-height: none; overflow: visible; width: 100%;
    order: 3; flex-basis: 100%;
  }
  .sc-header--menu[data-sc-open="1"] .sc-header__links { display: flex; }
  .sc-header--menu .sc-header__links a {
    display: flex; align-items: center; min-height: 44px;
    font-size: 1.05rem;
  }
}


/* ============ PAGE TITLE ==========================================
 * The one h1 on a page. Sections are h2 (info tiles, instructions) and
 * h3 (events) — correct for sections, and the reason a page composed
 * only of those had no h1 at all until this existed.
 */
.sc-page-title { margin: 0 0 1.5rem; }
.sc-page-title__eyebrow {
  margin: 0 0 .35rem; font-size: .8rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sc-accent);
}
.sc-page-title h1 {
  margin: 0; font-size: clamp(1.75rem, 4vw, 2.6rem); line-height: 1.15;
  color: var(--sc-heading, #23254c);
}

/* ── sc-hero ───────────────────────────────────────────────────────────
   THE FRONT DOOR, and the library did not have one.

   Every component here was a mid-page block, so a page composed
   entirely from the library could not open with anything. Measured
   2026-09-09: home_has_hero failed on 6 of 6 site-copy builds while
   passing on 21 of 22 template builds — the template builds inherit a
   hero from the template's own markup, and the copies had nothing to
   inherit.

   Full-bleed by design. A hero that stops at the content gutter reads
   as a card, not as a band; the 100vw trick escapes whatever container
   it lands in without needing the page to cooperate.

   The image is a BACKGROUND, not an <img>: it must crop rather than
   letterbox as the viewport narrows, and it carries no information a
   screen reader needs (the h1 says what the page is).

   The scrim is not decoration — it is what keeps the headline legible
   over a photograph nobody vetted for contrast. Without it a light
   image gives white-on-white, which is worse than no hero at all. */
.sc-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 2.25rem;
  padding: clamp(3rem, 9vw, 6.5rem) clamp(1.25rem, 6vw, 4rem);
  display: flex;
  align-items: center;
  min-height: 320px;
  background: var(--sc-hero-bg, var(--sc-accent, #33507a));
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: hidden;
}
.sc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.62) 0%,
                                     rgba(0,0,0,.42) 55%,
                                     rgba(0,0,0,.24) 100%);
}
/* No photograph: the scrim would darken a flat colour for no reason. */
.sc-hero--flat::before { background: none; }
.sc-hero__inner {
  position: relative;             /* above the scrim */
  max-width: 46rem;
  width: 100%;
  margin: 0 auto;
}
.sc-hero__eyebrow {
  margin: 0 0 .6rem; font-size: .8rem; letter-spacing: .1em;
  text-transform: uppercase; opacity: .9;
}
.sc-hero h1 {
  margin: 0; color: #fff;
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  line-height: 1.1;
  text-wrap: balance;
}
.sc-hero__sub {
  margin: 1rem 0 0; max-width: 42rem;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.55; opacity: .95;
}
.sc-hero .sc-btn { margin-top: 1.6rem; }

/* The band is the one place a phone must not lose the headline to
   padding — shrink the frame, never the type. */
@media (max-width: 640px) {
  .sc-hero { min-height: 240px; padding: 2.5rem 1.25rem; }
}