/* ==========================================================================
   Private coaching abroad (coaching-abroad.html; abroad-sent.html needs only styles.css)
   Loaded after styles.css. It reuses the site's tokens and classes and adds
   only what this page needs: a darker photo header, the terms on ink, the
   offer list, the portrait crop and the grouped enquiry form.
   ========================================================================== */

/* ---------- Photo header ---------- */
/* Taller than the other photo headers, so on phones the photo shows above the text,
   and padded at the top so a long title never runs under the fixed header. */
.ab-ph { min-height: 92vh; min-height: 92svh; padding-top: calc(var(--header-h) + 40px); }
@media (min-width: 768px) { .ab-ph { min-height: 90vh; min-height: 90svh; } }

/* Darker than Racing/Partners: the label, lede and button sit on the photo too. Two scrims:
   one over the whole photo, and one tied to the text block (it starts just above the label),
   so the text keeps its contrast however tall the screen is. The label (white at 78%) stays
   above 4.5:1 even where the white sail is behind it (measured from 360x640 to 1920x1080). */
.ab-ph .ph__media::after {
  background:
    linear-gradient(180deg, rgba(11, 11, 12, .5) 0, rgba(11, 11, 12, 0) 22%),
    linear-gradient(0deg, rgba(11, 11, 12, .75) 0, rgba(11, 11, 12, .4) 50%, rgba(11, 11, 12, .25) 100%);
}
.ab-ph .ph__in::before {
  content: ""; position: absolute; z-index: -1; top: -96px; bottom: 0; left: -100vw; right: -100vw;
  background: linear-gradient(0deg, rgba(11, 11, 12, .55) 0, rgba(11, 11, 12, .55) calc(100% - 96px), rgba(11, 11, 12, 0) 100%);
  pointer-events: none;
}
.ab-ph .ph__in { padding-bottom: 36px; }
@media (min-width: 768px) { .ab-ph .ph__in { padding-bottom: 64px; } }
.ab-ph h1 { margin: 18px 0 24px -.04em; font-size: clamp(3rem, 8.2vw, 8.5rem); }
/* one line per phrase on wide screens; each phrase wraps on its own on phones */
.ab-ph h1 > span { display: block; }
@media (max-width: 767px) { .ab-ph h1 { font-size: 13.2vw; } }
.ab-ph .lede { margin-bottom: 30px; max-width: 32ch; }

/* ---------- The offer (on ink) ---------- */
.dark .dl, .dark .dl > div { border-color: var(--rule-dark); }
.dark .row__v > .dl > div:not([hidden]) ~ div { border-top-color: var(--rule-dark); }
.dark .dl--labels dt { color: rgba(255, 255, 255, .78); }
.ab-intro { max-width: 20ch; margin-bottom: 48px; font-size: clamp(1.9rem, 4vw, 3.4rem); }
@media (min-width: 768px) { .ab-intro { margin-bottom: 64px; } }
.ab-v {
  display: block;
  font-family: var(--display); font-weight: 800; font-size: clamp(1.35rem, 2.5vw, 2rem);
  line-height: 1.15; letter-spacing: -.01em;
}
/* the config values start in lower case ("from €5,000 per month"), so they can also sit mid-sentence */
.ab-cap::first-letter { text-transform: uppercase; }
.ab-note { display: block; margin-top: 8px; max-width: 52ch; font-size: .95rem; color: var(--muted); }
.dark .ab-note { color: rgba(255, 255, 255, .78); }

/* ---------- What you get: a plain ruled list ---------- */
.ab-list li {
  padding-block: 18px; border-top: 1px solid var(--rule);
  font-family: var(--display); font-weight: 800; font-size: clamp(1.2rem, 2.2vw, 1.75rem);
  line-height: 1.2; letter-spacing: -.01em;
}
.row__v > .ab-list li:first-child { padding-top: 0; border-top: 0; }
.ab-list li:last-child { border-bottom: 1px solid var(--rule); }
@media (max-width: 759px) { .ab-list li:last-child { border-bottom: 0; padding-bottom: 0; } }

/* ---------- Why me ---------- */
/* a little smaller than the Story stack, so each credential fits on one line beside the portrait */
.ab-why .stack { margin-bottom: 28px; }
.ab-why .stack li { font-size: clamp(1.45rem, 2.3vw, 2.05rem); }
.ab-why .prose { margin-bottom: 4px; }
/* noah-portrait.jpg has a burned-in credit in the bottom-left corner: .fig--crop (styles.css)
   scales the photo from the top so the bottom 12% stays out of frame at any aspect ratio. */
.ab-portrait img { aspect-ratio: 4 / 5; }
@media (max-width: 759px) { .ab-portrait img { aspect-ratio: 4 / 3; } }

/* ---------- Enquiry form ---------- */
.ab-lead { margin-bottom: 32px; }
.ab-group { margin: 0; padding: 0; border: 0; min-width: 0; }
/* a floated legend is laid out like a normal heading (no gap cut into the rule above it) */
.ab-group > legend { float: left; width: 100%; margin: 0 0 18px; padding: 0; }
.ab-group__in { clear: both; display: grid; gap: 22px; }
.ab-group + .ab-group { padding-top: 28px; border-top: 1px solid var(--rule); }
.ab-alt { margin: 32px 0 0; overflow-wrap: anywhere; }