/* Shared styles for the programme subpages (Incubator, Residential Fellowship, Local groups, workshops).
   Loaded after tokens.css and the homepage mockups' shared.css. Each page sets its programme tone on .tone-* */
:root {
  --fellow: var(--saige-future);
  --fellow-deep: #4A3470;
  --fellow-accent: var(--saige-future-accent-on-dark);
  --fellow-on: #EAE3F5;
}

.section { padding-block: 64px; border-top: 1px solid var(--saige-line); scroll-margin-top: 76px; }
.section > .wrap > .h2, .sec-head { margin-bottom: 28px; }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; }
.footer-bottom .mail { color: var(--saige-cream); user-select: all; }
@media (max-width: 600px) { .section { padding-block: 48px; scroll-margin-top: 64px; } }

.sq { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 2px; background: var(--c); }
.c-fellow { --c: var(--fellow); }
.c-maths { --c: var(--saige-maths); }
.c-hubs { --c: var(--saige-hubs); }
.c-incubator { --c: var(--saige-incubator); }

/* ---------- Programme hero: a coloured band with the headline on a streaked image ---------- */
.p-hero { padding-block: 28px 48px; background: var(--band); color: var(--on); }
.crumb { display: inline-flex; align-items: center; gap: 6px; font: 500 14px/1.3 var(--saige-font-sans); color: var(--on-2); text-decoration: none; margin-bottom: 18px; }
.crumb:hover { color: var(--on); }
.crumb svg { width: 14px; height: 14px; }
.banner { position: relative; display: flex; align-items: flex-end; min-height: clamp(280px, 28vw, 360px); border-radius: var(--saige-radius-card); overflow: hidden; background: var(--deep); }
.banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.banner::after { content: ""; position: absolute; inset: 0; background: var(--veil); }
.banner-over { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; width: 100%; padding: 40px 44px; }
.banner-title { display: flex; flex-direction: column; align-items: flex-start; }
.banner .tag { background: var(--tag-bg); color: var(--tag-fg); }
.banner h1 { font-size: clamp(40px, 5.2vw, 72px); line-height: 1.02; letter-spacing: -0.02em; margin-top: 18px; max-width: 17ch; color: var(--title); }
.banner h1 em { font-style: italic; color: var(--accent); }
.banner .pitch { font-size: 19px; line-height: 1.5; color: var(--title-2); margin-top: 14px; max-width: 46ch; }
.partners { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; }
.partners > span { font: 500 12px/1.3 var(--saige-font-sans); color: var(--title-2); }
.partners > div { display: flex; align-items: center; gap: 22px; }
.partners img { width: auto; opacity: .95; }
.partners .p-ellis { height: 30px; }
.partners .p-hertie { height: 34px; }

/* facts and sign-up below the banner, all starting on one top line */
.p-body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-areas: "facts form" "more form"; gap: 24px 40px; align-items: start; margin-top: 32px; }
.facts { grid-area: facts; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 24px; }
.facts div, .p-act { border-top: 1px solid var(--rule); padding-top: 12px; }
.facts dt { font: 600 12px/1.3 var(--saige-font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--on-2); }
.facts dd { font: 400 21px/1.25 var(--saige-font-serif); margin-top: 6px; }
.facts dd small { display: block; font: 400 14px/1.4 var(--saige-font-sans); color: var(--on-2); margin-top: 4px; }
.p-act { grid-area: form; }
.p-more { grid-area: more; justify-self: start; }
.p-hero .link-u { color: var(--on); border-bottom-color: var(--accent-line); }
.p-act .interest { background: var(--btn-bg); color: var(--btn-fg); }

/* tones */
.tone-fellow { --band: var(--fellow); --on: var(--saige-cream); --on-2: var(--fellow-on); --deep: var(--fellow-deep); --rule: rgba(248, 246, 236, .35);
  --veil: linear-gradient(90deg, rgba(36, 24, 56, .78) 0%, rgba(36, 24, 56, .45) 45%, rgba(36, 24, 56, 0) 80%), linear-gradient(0deg, rgba(36, 24, 56, .45), rgba(36, 24, 56, 0) 55%), radial-gradient(ellipse 40% 55% at 100% 100%, rgba(36, 24, 56, .55), rgba(36, 24, 56, 0));
  --title: var(--saige-cream); --title-2: var(--fellow-on); --accent: var(--fellow-accent); --accent-line: var(--fellow-accent); --tag-bg: var(--fellow-accent); --tag-fg: var(--saige-ink); --btn-bg: var(--saige-cream); --btn-fg: var(--saige-ink); }
.tone-incubator { --band: var(--saige-incubator); --on: #FFFFFF; --on-2: #E3EEDD; --deep: #2E4D2A; --rule: rgba(255, 255, 255, .38);
  --veil: linear-gradient(90deg, rgba(22, 38, 19, .8) 0%, rgba(22, 38, 19, .45) 45%, rgba(22, 38, 19, 0) 80%), linear-gradient(0deg, rgba(22, 38, 19, .45), rgba(22, 38, 19, 0) 55%);
  --title: #FFFFFF; --title-2: #E3EEDD; --accent: #CFE6B9; --accent-line: var(--saige-butter); --tag-bg: #CFE6B9; --tag-fg: var(--saige-ink); --btn-bg: var(--saige-cream); --btn-fg: var(--saige-ink); }
.tone-hubs { --band: var(--saige-hubs); --on: var(--saige-ink); --on-2: #3B3A1E; --deep: #8A6A05; --rule: rgba(30, 36, 20, .4);
  --veil: linear-gradient(90deg, rgba(248, 230, 160, .92) 0%, rgba(248, 230, 160, .7) 42%, rgba(248, 230, 160, 0) 78%), linear-gradient(0deg, rgba(248, 230, 160, .4), rgba(248, 230, 160, 0) 50%);
  --title: var(--saige-ink); --title-2: #3B3A1E; --accent: var(--saige-moss); --accent-line: var(--saige-ink); --tag-bg: var(--saige-ink); --tag-fg: var(--saige-hubs); --btn-bg: var(--saige-moss); --btn-fg: var(--saige-cream); }

/* ---------- Quotes: a sliding row, three per view ---------- */
.st-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.st-arrows { display: flex; gap: 10px; }
.st-arrows button { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: transparent; border: 1px solid var(--saige-ink-2); color: var(--saige-ink); cursor: pointer; transition: background-color .15s ease, opacity .15s ease; }
.st-arrows button:hover:not(:disabled) { background: var(--saige-moss); border-color: var(--saige-moss); color: var(--saige-cream); }
.st-arrows button:disabled { opacity: .3; cursor: default; }
.st-arrows svg { width: 18px; height: 18px; }
.st-track { --gap: 48px; --per: 3; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); gap: var(--gap);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 4px; }
.st-track::-webkit-scrollbar { display: none; }
.st-track:focus-visible { outline-offset: 6px; }
.st-track .quote { scroll-snap-align: start; }
.quote { display: flex; flex-direction: column; gap: 14px; border-top: 1.5px solid rgba(30, 36, 20, .55); padding-top: 14px; }
.quote blockquote { font: 400 20px/1.42 var(--saige-font-serif); letter-spacing: -0.003em; flex: 1; }
.quote .who { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; }
.quote .who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.quote .who p { font-size: 14px; line-height: 1.4; color: var(--saige-ink-2); }
.quote .who b { display: block; color: var(--saige-ink); font-weight: 600; }

/* ---------- FAQ ---------- */
.faq { border-top: 1.5px solid rgba(30, 36, 20, .55); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--saige-line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 2px; cursor: pointer; list-style: none; font: 400 22px/1.25 var(--saige-font-serif); letter-spacing: -0.005em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 14px 1.6px no-repeat, linear-gradient(currentColor, currentColor) center / 1.6px 14px no-repeat; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 2px 20px; color: var(--saige-ink-2); max-width: 64ch; }

/* ---------- Newsletter ---------- */
.news { border-top: 1px solid var(--saige-line); padding-block: 56px 52px; }
.news-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px 64px; align-items: start; }
.news-row .h3 { font-size: clamp(28px, 2.8vw, 34px); }
.news-row p.sub { color: var(--saige-ink-2); margin-top: 8px; max-width: 46ch; }

@media (max-width: 1000px) {
  .p-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "facts" "form" "more"; }
  .st-track { --per: 2; --gap: 32px; }
}
@media (max-width: 900px) {
  .news-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .p-hero { padding-block: 20px 40px; }
  .banner { min-height: 300px; }
  .banner-over { flex-direction: column; align-items: flex-start; padding: 24px 20px; }
  .banner::after { background: var(--veil-m, var(--veil)); }
  .tone-fellow { --veil-m: linear-gradient(0deg, rgba(36, 24, 56, .8), rgba(36, 24, 56, .25) 75%); }
  .tone-incubator { --veil-m: linear-gradient(0deg, rgba(22, 38, 19, .82), rgba(22, 38, 19, .3) 75%); }
  .tone-hubs { --veil-m: linear-gradient(0deg, rgba(248, 230, 160, .94), rgba(248, 230, 160, .55) 80%); }
  .banner .pitch { font-size: 17.5px; }
  .partners { align-items: flex-start; }
  .partners .p-ellis { height: 26px; }
  .partners .p-hertie { height: 30px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
  .facts dd { font-size: 19px; }
  .st-track { --per: 1; --gap: 20px; grid-auto-columns: 86%; }
  .st-arrows button { width: 40px; height: 40px; }
  .quote blockquote { font-size: 18.5px; }
  .faq summary { font-size: 19px; padding-block: 16px; }
  .news { padding-block: 44px 40px; }
}