/* Preview overrides for Cloudflare-ready static build */

.brand { font-size: 1.5rem; }

@media (max-width: 720px) {
  .brand { font-size: 1.18rem; }
}

.preview-accent { color: var(--jade-400); font-style: italic; }
.preview-about-hero { padding-top: clamp(4.25rem, 10vw, 7.5rem); }
.preview-about-hero .eyebrow { font-size: clamp(0.95rem, 1vw, 1.1rem); letter-spacing: 0.34em; margin-bottom: 1.15rem; }
.preview-about-hero h1 { font-size: var(--step-4); }
.preview-about-hero .lede { margin-top: 1.25rem; }

.mp-values-stack { display:grid; gap:.9rem; margin-top:1.35rem; }
.mp-values-stack__item { display:grid; grid-template-columns:3.25rem minmax(0,1fr); gap:1rem; align-items:start; padding:1rem 1.15rem; border:1px solid var(--border); border-radius:var(--radius-md); background:linear-gradient(180deg, rgba(17,38,33,.92), rgba(12,29,24,.96)); }
.mp-values-stack__letter { display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-serif); font-size:clamp(2.2rem,4vw,3rem); line-height:1; color:var(--jade-400); font-style:italic; }
.mp-values-stack__title { margin:0; font-size:var(--step-0); color:var(--text-100); }
.mp-values-stack__copy { margin:.25rem 0 0; font-size:var(--step--1); line-height:1.5; color:var(--text-300); }

/* No tint on the frame or the <img>: portraits render in original colours
   (2026-08-20). The old jade duotone lived here and in components.css. */
.preview-person .person__photo { width:120px; height:120px; border-radius:50%; overflow:hidden; margin-bottom:1rem; }
.preview-person .person__photo img { width:100%; height:100%; object-fit:cover; }

.preview-schools__support { max-width:50rem; margin-top:1.35rem; margin-bottom:1.1rem; }
.preview-schools__support h3 { margin:0; font-size:clamp(1.2rem,1.8vw,1.55rem); }
.preview-schools__support p { margin:.75rem 0 0; font-size:var(--step--1); line-height:1.62; color:var(--text-300); }
.preview-schools__grid { display:grid; grid-template-columns:1.1fr .95fr .95fr; gap:1.35rem; margin-top:1.35rem; }
.preview-schools__card { padding:1.35rem 1.4rem 1.5rem; border:1px solid var(--border); border-radius:var(--radius-lg); background:linear-gradient(180deg, rgba(17,38,33,.95), rgba(12,29,24,.99)); }
.preview-schools__card--cta { background:radial-gradient(circle at top right, rgba(107,207,187,.08), transparent 38%), linear-gradient(180deg, rgba(17,38,33,.95), rgba(12,29,24,.99)); }
.preview-schools__card h3 { margin:0; font-size:clamp(1.35rem,2vw,1.75rem); }
.preview-schools__card p { margin:.85rem 0 0; font-size:var(--step--1); line-height:1.6; color:var(--text-300); }
.preview-schools__card ul { margin:.75rem 0 0; padding:0; list-style:none; display:grid; gap:.7rem; }
.preview-schools__card li { position:relative; padding-left:1.15rem; font-size:.96rem; line-height:1.5; color:var(--text-300); }
.preview-schools__card li::before { content:""; position:absolute; left:0; top:.55em; width:.45rem; height:.45rem; border-radius:50%; background:var(--jade-400); }
.preview-schools__logos { margin-top:var(--space-lg); padding:var(--space-xl) clamp(1.1rem,2.5vw,2rem); border:1px solid var(--border); border-radius:var(--radius-lg); background:rgba(15,36,31,.45); }
.preview-schools__logos h3 { margin:0; font-size:clamp(1.2rem,1.8vw,1.55rem); }
.preview-schools__logos p { margin:.6rem 0 0; font-size:var(--step--1); line-height:1.6; color:var(--text-300); }
/* ---------- School logo wall ----------
   Rebuilt 2026-09-02. The grid was `auto-fit minmax(9rem,1fr)` with a flat
   1.35rem gap, tuned when this section held FOUR logos. At seven it broke
   in four ways at once, all visible at 1440px:

   1. Six across and a single orphan on row two. auto-fit packs as many
      tracks as fit, so the per-row count is whatever the viewport happens
      to allow — it is not a composition.
   2. Ragged baselines. Nothing reserved the caption's second line, so
      "Stonyhurst Southville International School" wrapped to four lines
      and dragged its whole tile out of line with its neighbours.
   3. The caption was set at --step--1 in --text-300 — 14.2px at 1440px,
      two steps under body text — for what is the entire point of the
      section: which schools are in the network. The partner wall next
      door sets its equivalent label at 16-18px in --text-100.
   4. row-gap equalled column-gap at 1.35rem, so rows whose captions ran
      to three and four lines closed up against the plates beneath them.

   FLEX, NOT GRID — deliberately, and the one place this departs from
   .partner-wall. That wall has exactly six partners in a six-column grid,
   so it can never orphan. The school count is NOT stable: four in August,
   seven today, and the client adds more each time a school signs. Any
   fixed column count orphans at some future count (7 in threes is 3+3+1).
   A flex wrap is count-agnostic: the last row simply runs short instead of
   stranding a lone tile in a track sized for six, and it stays that way at
   7, 8, 10 or 13 without anyone re-tuning a breakpoint. Left-aligned, not
   centred — the eyebrow, heading and lede above it all set a left margin,
   and a centred wall floats away from that edge.

   The basis clamp resolves to four across from 768px up (4+3) and two on a
   phone. Floor is 140px, matching .partner-wall: measured in headless
   Chrome at 360px and 390px, a 140px floor still holds two columns even
   though this wall sits inside a padded panel and has ~30px less room than
   .partner-wall does at the same viewport. */
.preview-schools__logo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: start;
  column-gap: var(--space-lg);
  row-gap: var(--space-xl);
  margin: var(--space-xl) 0 0;
  padding: 0;
  list-style: none;
}

.preview-school {
  display: grid;
  gap: var(--space-sm);
  flex: 0 1 clamp(140px, 18vw, 208px);
  justify-items: center;
  text-align: center;
}

/* Square plate, sized by the flex item. The old max-width:11rem (176px)
   never actually bit under auto-fit — six tracks inside a 1200px container
   worked out to ~166px, just under the cap — but at the 208px item this
   layout now uses it would, insetting every crest by 16px for no reason.
   Dropped rather than raised, so the plate simply follows the column.
   No hover lift here, unlike .partner-wall__item: these plates are plain
   <li>, never wrapped in an <a> (see the template docblock), and a lift on
   a non-link is a promise the markup does not keep. */
.preview-school__plate {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  padding: clamp(0.75rem, 1.2vw, 1.15rem);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.preview-school__plate img { width: 100%; height: 100%; object-fit: contain; }

/* 16-18px in --text-100, matching .partner-wall__name rather than the
   --step--1 / --text-300 caption this used to be. Both cleared 4.5:1
   already (11.19:1 before, 15.26:1 now) — the problem was never contrast,
   it was that the school's NAME is the point of the section and was set
   two steps below body text.

   min-height reserves the second line so a one-line name and a two-line
   name keep the same tile height. max-width is gone: 16ch forced a wrap
   inside a track already wide enough to hold the name. */
.preview-school__name {
  min-height: 2.7em;
  max-width: 20ch;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.35;
  color: var(--text-100);
}

.preview-journey__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.35rem; margin-top:2.2rem; }
.preview-journey__card { padding:1.25rem 1.3rem 1.4rem; border:1px solid var(--border); border-radius:var(--radius-lg); background:linear-gradient(180deg, rgba(17,38,33,.95), rgba(12,29,24,.98)); }
.preview-journey__card--lead { grid-column:1/-1; min-height:16rem; background:radial-gradient(circle at top right, rgba(107,207,187,.09), transparent 42%), linear-gradient(180deg, rgba(17,38,33,.95), rgba(12,29,24,.99)); }
.preview-journey__tag { display:inline-block; margin-bottom:.9rem; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--amber-400); }
.preview-journey__card h3 { margin:0; font-size:clamp(1.55rem,2.2vw,1.9rem); line-height:1.02; }
.preview-journey__card--lead h3 { font-size:clamp(2rem,3vw,2.7rem); max-width:18ch; }
.preview-journey__card p { margin:.85rem 0 0; font-size:var(--step--1); line-height:1.6; color:var(--text-300); }
.preview-journey__card--lead p { font-size:var(--step-0); max-width:48ch; }

/* ---------- Merged stories feed (FEAT-011 S4/S5) ----------
   Replaces the retired .preview-events, .preview-event, .preview-trending
   and .preview-article rules, which drew two sections out of one set of
   content and shared four images between them. Uniform grid, no
   lead card: the base stays neutral so each variant can impose its own
   hierarchy and the bake-off compares design, not incidental layout. */
.preview-stories__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.35rem; margin-top:2rem; align-items:stretch; }
.preview-story { display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius-lg); background:linear-gradient(180deg, rgba(17,38,33,.95), rgba(12,29,24,.98)); }
.preview-story__media { position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--ink-750); }
.preview-story__media img { width:100%; height:100%; object-fit:cover; display:block; }

/* No-image state. Four of the twelve real posts have no image anywhere
   in the repo, so this is a designed state, not a fallback: a jade-wash
   plate carrying the category as a watermark. Deliberately NOT a grey
   box and NOT a stock photo — inventing imagery for a mental-health
   programme misrepresents the work. */
.preview-story--no-media .preview-story__media { display:flex; align-items:center; justify-content:center; padding:1rem; background:radial-gradient(circle at 30% 20%, rgba(107,207,187,.14), transparent 60%), var(--ink-850); border-bottom:1px solid var(--border); }
.preview-story--no-media .preview-story__media span { font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.2em; text-transform:uppercase; color:var(--jade-700); text-align:center; line-height:1.5; }

.preview-story__body { display:flex; flex-direction:column; padding:1.15rem 1.2rem 1.3rem; }
.preview-story__meta { display:flex; gap:.55rem; flex-wrap:wrap; align-items:center; margin-bottom:.8rem; font-family:var(--font-mono); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-500); }
.preview-story__tag { padding:.32rem .58rem; border:1px solid rgba(107,207,187,.26); border-radius:var(--radius-pill); background:rgba(19,49,43,.72); color:var(--jade-300); }
.preview-story h3 { margin:0; font-size:var(--step-1); line-height:1.12; }

/* The whole title is the link. No separate "Read article" call — the old
   markup had one per card plus a section CTA, which gave the section
   seven competing actions. */
.preview-story h3 a { color:inherit; text-decoration:none; }
.preview-story h3 a:hover { color:var(--jade-300); }
.preview-story__body p { margin:.8rem 0 0; font-size:var(--step--1); line-height:1.58; color:var(--text-300); }
.preview-stories__more { margin-top:var(--space-xl); text-align:center; }

@media (prefers-reduced-motion: reduce) {
  .preview-story h3 a { transition:none; }
}

@media (max-width: 1100px) {
  .preview-schools__grid,
  .preview-journey__grid,
  .preview-stories__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preview-journey__card--lead { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .preview-schools__grid,
  .preview-journey__grid,
  .preview-stories__grid { grid-template-columns: 1fr; }
  .preview-journey__card--lead { grid-column: span 1; }
  .mp-values-stack__item { grid-template-columns: 1fr; }
  .preview-person .person__photo { width: 108px; height: 108px; }
}