/* ==========================================================================
   EduCARE India — site styles

   ---------------------------------------------------------------------------
   HOW THIS SHEET WORKS
   ---------------------------------------------------------------------------

   Every size, space and colour comes from a token in :root. Components never
   invent their own values — if something needs a size that isn't on a scale,
   either it belongs on the scale or the design is wrong. The scales:

     type      --text-xs … --text-2xl, plus fluid --text-hero-* for the hero
               and --card-text, which sizes from the card's own width.
     space     --space-3xs … --space-3xl, a 0.25rem grid thinning out at the
               top. Used for every margin, padding and gap.
     leading   --leading-tight / snug / normal / loose.
     colour    surfaces (--page-bg … --card), ink (--ink / mid / soft),
               accent, and --scrim-rgb for gradients over photos.

   Units: rem everywhere, so everything tracks the reader's font-size setting.
   Fluid values are rem+vw clamps (a bare vw ignores that setting). Hairlines
   and the frame stroke stay px because they are strokes, not spacing.

   Responsive: layout responds to the width of .page, not the viewport, via
   container queries. Only the frame itself queries the viewport, since it
   cannot query its own width.

   Order below: tokens, base, layout, typography, header, hero, cards,
   callout, bands, footer, responsive.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces, back to front */
  --page-bg:   #e7e3da;   /* canvas behind the frame */
  --bg:        #faf8f4;   /* the page itself */
  --bg-tint:   #f1efe8;   /* recessed panels */
  --card:      #fffdf9;   /* raised panels */
  --line:      #ddd8cb;   /* hairlines and borders */
  --cream:     #fffefb;   /* text on dark */

  /* Ink, darkest to lightest */
  --ink:       #17140f;   /* headings, emphasis */
  --ink-mid:   #3a352d;   /* between the two; sub-titles */
  --ink-soft:  #57534b;   /* body copy */

  --accent:      #34604a; /* deep forest green */
  --accent-soft: #e4ece5;
  --link:        #2e5c46;

  /* Channels, so gradients can vary only the alpha */
  --scrim-rgb: 12 10 8;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --body:  "Lora", Georgia, "Times New Roman", serif;

  /* Type scale. --text-base is the site's 17px anchor; the rest step out
     from it. Card text is set per-card in cqi and declared on .card. */
  --text-xs:   0.8rem;
  --text-sm:   0.925rem;
  --text-base: 1.0625rem;
  --text-lg:   1.15rem;
  --text-xl:   1.3rem;
  --text-2xl:  1.85rem;

  --text-hero-title: clamp(1.6rem, 0.8rem + 2vw, 1.9rem);
  --text-hero-sub:   clamp(1.25rem, 0.75rem + 1.25vw, 1.45rem);
  --text-hero-lede:  clamp(1.1rem, 0.9rem + 0.5vw, 1.25rem);

  /* Space scale: 0.25rem grid, widening past 1.5rem. */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.25rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 2.5rem;
  --space-3xl: 3.25rem;

  --leading-tight:  1.25;
  --leading-snug:   1.4;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  --radius-sm: 0.5rem;
  --radius:    1rem;
  --radius-lg: 2rem;

  --shadow: 0 1px 2px rgb(23 20 15 / 0.05), 0 0.5rem 1.5rem rgb(23 20 15 / 0.06);

  /* Layout */
  --frame:   67.5rem;   /* widest the bordered page gets */
  --measure: 45rem;     /* text column */
  --prose:   66ch;      /* comfortable reading width inside that column */
  --gutter:  clamp(var(--space-md), 0.5rem + 2.4vw, var(--space-xl));

  --section-space: clamp(var(--space-2xl), 1.3rem + 3vw, var(--space-3xl));
}


/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--ink);
  background: var(--page-bg);
}

img { display: block; max-width: 100%; height: auto; }

/* Headings keep the body's generous leading on purpose — it is what gives
   them their unhurried presence. The hero and card labels set their own. */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--serif);
  text-wrap: balance;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.1875em;
}

a:hover { text-decoration-thickness: 2px; }

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


/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

/* The bordered card everything sits inside, and the query container that
   every responsive rule below measures against. */
.page {
  container: page / inline-size;
  max-width: var(--frame);
  margin: var(--space-xl) auto;
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg);
}

/* Text runs at --measure; the header opts out to span the frame. */
.container {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide { max-width: none; }

.section { padding-block: var(--section-space); }

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  z-index: 100;
  padding: var(--space-2xs) var(--space-sm);
  background: var(--ink);
  color: var(--cream);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.skip-link:focus { top: 0; }


/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

/* 700, not 600: no Playfair 600 is loaded, so a "600" here would silently
   render at 700 anyway. Saying 700 makes the intent explicit. */
.section h2 {
  margin-bottom: var(--space-sm);
  font-size: var(--text-2xl);
  font-weight: 700;
}

/* The device that titles this site: one word underlined. */
.underline {
  text-decoration: underline;
  text-decoration-color: var(--ink);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.135em;
}

/* Standfirst under a section title. Body face, not Playfair — a second
   helping of the display serif right below the title reads as a weaker
   echo of it rather than as its own element. */
.section-subtitle {
  max-width: 48ch;
  margin: 0 0 var(--space-lg);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: var(--leading-normal);
  color: var(--ink);
}

.prose { max-width: var(--prose); }

.prose p { margin: 0 0 var(--space-sm); color: var(--ink-soft); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 600; }

/* The payoff line a section lands on: prose-sized, carried by weight. */
.closing-line { font-weight: 700; }

/* Sub-heading introducing a grid or list beneath it. */
.grid-title {
  margin: var(--space-2xl) 0 var(--space-md);
  font-family: var(--body);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
}

.section-footnote {
  max-width: var(--prose);
  margin: var(--space-xl) 0 0;
  font-style: italic;
  color: var(--ink-soft);
}

/* External links carry a small arrow drawn in currentColor. */
.ext::after {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-left: 0.25em;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17 17 7"/><path d="M8 7h9v9"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17 17 7"/><path d="M8 7h9v9"/></svg>') center / contain no-repeat;
}


/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: clamp(var(--space-xs), 0.55rem + 0.65vw, var(--space-sm));
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  flex-shrink: 0;
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}

.brand img { width: 2rem; height: auto; }

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-md), 0.25rem + 2.4vw, var(--space-xl));
  margin-inline: var(--space-sm);
}

.nav-link {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}

.nav-link:hover { color: var(--ink); text-decoration: underline; }

.nav-toggle {
  display: none;
  padding: var(--space-2xs);
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  content: "";
  display: block;
  position: relative;
  width: 1.5rem;
  height: 2px;
  background: var(--ink);
  transition: transform 0.2s, top 0.2s;
}

.nav-toggle-bar::before { position: absolute; top: -0.4375rem; }
.nav-toggle-bar::after  { position: absolute; top:  0.4375rem; }

.nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after  { top: 0; transform: rotate(-45deg); }


/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: clamp(38.125rem, 100vw, 45rem);
  overflow: hidden;
  background: var(--bg-tint);
}

/* The photo is 150% of the hero's height with its aspect preserved and
   anchored top centre, so a clear band of it runs on below the overlay.
   Staying a real <img> keeps it indexable.   
*/
.hero-img {
  position: absolute;
  top: 0;
  left: 49%;
  transform: translateX(-50%);
  height: 150%;
  width: auto;
  min-width: 100%;
  max-width: none;
  object-fit: cover;
}

/* The dimmed panel sits over the upper part of that photo. */
.hero-overlay {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(var(--space-xl), 0.25rem + 5vw, var(--space-2xl)) var(--gutter);
  text-align: center;
  color: var(--cream);
  background: linear-gradient(
    to bottom,
    rgb(var(--scrim-rgb) / 0.88) 100%
  );
  border-bottom: 3px solid rgb(8 7 5 / 0.95);
}

.hero-content { max-width: 38.75rem; }

.hero-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.25rem;
  height: 5.25rem;
  margin: 0 auto var(--space-md);
  border: 3px solid rgb(0 0 0 / 0.9);
  border-radius: 50%;
  background-color: rgb(255 255 255 / 0.9);
}

.hero-mark img {
  width: 3rem;
  height: auto;
  margin-top: 5%;
}

.hero h1 {
  margin: 0 0 var(--space-3xs);
  font-size: var(--text-hero-title);
  font-weight: 400;
  line-height: var(--leading-tight);
  color: var(--cream);
}

.hero h1 strong { font-weight: 700; }

.subtitle {
  margin: 0 0 var(--space-md);
  font-family: var(--serif);
  font-size: var(--text-hero-sub);
  color: rgb(255 255 255 / 0.8);
}

.lede {
  margin: 0 auto;
  font-size: var(--text-hero-lede);
  color: rgb(255 255 255 / 0.88);
}

.lede strong { color: var(--cream); }


/* --------------------------------------------------------------------------
   Cards

   One base plus three orthogonal variants:
     --mini    tighter padding, title matched to body size
     --thumb   photo strip on top that flex-grows to equalize row heights
     --pillar  a --thumb whose title rides on the photo
   Titles use .card-title so nothing depends on element selectors, which is
   what made this need specificity workarounds before.
   -------------------------------------------------------------------------- */

.card-grid {
  display: grid;
  gap: var(--space-sm);
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}

/* Unmodified .card-grid stacks in one column; --2 opts into two. */
.card-grid--2 { grid-template-columns: repeat(2, 1fr); margin-top: 0; }

/* Each card is its own query container so its text can size from its own
   width. A pillar card sits inside the callout's padding and is ~7% narrower
   than a belief card; this makes its type ~7% smaller automatically, at every
   viewport, with no ratio to maintain. The rem bounds keep it responsive to
   browser font scaling, which a bare cqi value would ignore. */
.card {
  container-type: inline-size;
  --card-text: clamp(0.85rem, 4.87cqi, 1rem);

  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card p,
.card address {
  margin: 0;
  font-size: var(--card-text);
  color: var(--ink-soft);
}

.card address { font-style: normal; }

/* Stacked blocks inside a card need air between them; without this a note
   and the value beneath it run together. */
.card p + p,
.card p + address { margin-top: var(--space-2xs); }

.card-title {
  margin-bottom: var(--space-3xs);
  font-family: var(--body);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
}

/* Connecting words around a linked term ("with us", "or") step back so the
   link is what the eye lands on. */
.card-title span { color: var(--ink-soft); }

/* Matched to the body text beneath it: weight and colour do the work of a
   title, not scale. */
.card-title--flush { font-size: var(--card-text); }

.card-note {
  margin-top: var(--space-3xs);
  font-size: var(--text-sm);
  font-style: italic;
}

.card--mini { padding: var(--space-sm) var(--space-md); }

.card--thumb {
  padding: 0;
  overflow: hidden;
}

/* flex-basis 0 so the photo's intrinsic size never inflates the card: the
   text stack sets the row height and the photo fills what is left. The img
   is absolutely positioned because a percentage height cannot resolve
   against a flex-sized box. */
.card-thumb {
  position: relative;
  flex: 1 1 0;
  min-height: 7.5rem;
}

.card-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--crop, center);
}

.card--thumb .card-body {
  flex: 0 0 auto;
  padding: var(--space-sm) var(--space-md);
}

/* Pillar cards wear their name on the photo, so all four labels line up at
   the card's top edge however far each photo grew to equalize its row. */
.card-label {
  position: absolute;
  inset: 0 0 auto;
  margin: 0;
  padding: var(--space-xs) var(--space-sm) var(--space-md);
  /* Body face, not Playfair: the display serif's hairlines break up against
     photographic detail, while Lora's even strokes hold over anything. */
  font-family: var(--body);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  text-align: center;
  color: var(--cream);
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
  background: linear-gradient(
    to bottom,
    rgb(var(--scrim-rgb) / 0.88) 0%,
    rgb(var(--scrim-rgb) / 0.72) 50%,
    rgb(var(--scrim-rgb) / 0) 100%
  );
}

/* Taller than a plain thumb: the label and its scrim occupy the top of this
   photo, so it needs the extra room to show as much clear picture. */
.card--pillar .card-thumb { min-height: 10.5rem; }

/* Examples inside a card. No bullet markers: each item runs several lines in
   a column this narrow, so a hanging marker ends up stranded beside a block
   of text. Hairlines separate the items instead. */
.card-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--card-text);
  color: var(--ink-soft);
}

.card-list li {
  padding: var(--space-xs) 0;
  border-top: 1px solid var(--line);
}

.card-list li:first-child { padding-top: 0; border-top: none; }
.card-list li:last-child { padding-bottom: 0; }


/* --------------------------------------------------------------------------
   Panels
   -------------------------------------------------------------------------- */

/* Pull-quote: the org's vision statement set as its motto. */
.quote-card {
  margin: 0;
  padding: var(--space-lg);
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow);
}

.quote-card-title {
  margin: 0 0 var(--space-3xs);
  font-family: var(--body);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--ink-mid);
}

.quote-card blockquote { margin: 0; }
.quote-card blockquote p { margin: 0; color: var(--ink-soft); }

/* Boxed aside, the way a textbook breaks a panel out of the running text.
   Its padding comes straight out of the width of the cards inside, so it is
   kept modest deliberately. */
.callout {
  margin-top: var(--space-2xl);
  padding: clamp(var(--space-sm), 0.4rem + 1.4vw, var(--space-md));
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.callout .grid-title {
  margin-top: 0;
  color: var(--ink-soft);
}

.callout-footer {
  margin-top: var(--space-lg);
  margin-inline: var(--space-sm);
  line-height: var(--leading-normal);
}

.callout-note {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--ink-soft);
}

/* Two short reference lines, set tighter than the note above them. */
.callout-footnotes { line-height: var(--leading-tight); }
.callout-footnotes a { font-weight: 700; }

.callout .section-footnote {
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
}


/* --------------------------------------------------------------------------
   Photo bands

   Full-bleed figures between sections. Each image may carry its own framing
   via the --crop custom property set inline; the values are tuned per photo
   and are not interchangeable.
   -------------------------------------------------------------------------- */

.band {
  margin: 0;
  height: clamp(12.5rem, 42vw, 27.5rem);
}

.band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--crop, center);
}


/* --------------------------------------------------------------------------
   Page footer
   -------------------------------------------------------------------------- */

/* A quiet sign-off under the last band, not a section in its own right. */
.page-footer {
  padding-block: var(--space-xl);
  font-size: var(--text-sm);
  text-align: center;
  color: var(--ink-soft);
}

.page-footer p { margin: 0; }

.page-footer-legal {
  margin-top: var(--space-xs);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}


/* --------------------------------------------------------------------------
   Responsive

   Everything here measures the .page container, except the frame itself,
   which cannot query its own width and so queries the viewport.
     67.5rem  the frame's max — below it, borders and rounding come off
     56.25rem the full nav row starts crowding the frame edge
     40rem    two-column card grids stop working
   -------------------------------------------------------------------------- */

@media (width <= 67.5rem) {
  .page {
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}

@container page (width <= 56.25rem) {
  .main-nav { display: none; }
  .nav-toggle { display: block; }

  .site-header.is-open .main-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /* Must beat the hero overlay's z-index, which comes later in the DOM
       and would otherwise paint over the open menu. */
    z-index: 10;
    padding-block: var(--space-2xs) var(--space-xs);
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }

  .site-header.is-open .nav-link {
    padding: var(--space-xs) var(--gutter);
  }
}

@container page (width <= 40rem) {
  .card-grid--2 { grid-template-columns: 1fr; }
  .hero-overlay { min-height: 22.5rem; }
}