/* Components for the inner pages (about, services, academy, experiences, work, book, contact).
   Reads tokens.css; every page also loads site.css. */

/* Page hero: title, lede and a photo or logo, on the brand's black particle canvas */
.page-hero {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .62) 55%, rgba(0, 0, 0, .3) 100%),
    var(--black) url(/assets/img/particles-1280.webp) center / cover no-repeat;
  padding: clamp(44px, 7vw, 84px) 0;
}
.page-hero .wrap { display: grid; gap: 36px; align-items: start; }
/* One title style on every page (Faye, v2.17), set by the About page she approved: the pink
   label a little larger, the title a little smaller, both starting at the same height. */
.page-hero .eyebrow { color: var(--on-black-accent); font-size: clamp(1rem, 2.8vw, 1.25rem); }
.page-hero h1 { font-size: clamp(1.9rem, 7vw, 3.4rem); margin: 10px 0 16px; }
.page-hero .lede { max-width: 46ch; }
.page-hero .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-media { justify-self: center; width: min(86vw, 440px); }
.hero-media.tilt { transform: rotate(2.5deg); }
/* Tall (portrait) banner photos: smaller on phones; on desktop they take their height from
   the text beside them, so the photo ends level with the buttons (Faye, v2.17), up to a
   limit, so a long introduction (Coaching, v2.24) never pushes the photo into the words. Always the
   whole photo in its own proportions, scaled, never cropped (Faye, v2.18). */
.hero-media.hero-tall { width: min(66vw, 300px); }
.hero-media img { width: 100%; }
.hero-logo { justify-self: center; width: min(44vw, 260px); }

/* Section headings inside a column (rule-title is for full-width centred titles) */
.section-head { font-size: clamp(1.5rem, 4.6vw, 2.4rem); margin-bottom: 22px; }
/* a heading kept on one line (Coaching's "Choose Your Path to Growth", Faye, v2.24): sized
   to the column it sits in, so it fits at every width */
.prose:has(> .one-line-head) { container-type: inline-size; }
.section-head.one-line-head { white-space: nowrap; font-size: min(4.5cqw, 2.4rem); }
.section-intro { max-width: 60ch; margin: 24px auto 0; text-align: center; }
.rule-title + .section-intro { margin: -12px auto 32px; }
.light .section-intro { color: var(--on-light-muted); }
.section-intro.muted { color: var(--on-black-muted); }

/* Two-column text + picture */
.split { display: grid; gap: 32px; align-items: center; }
.split img { width: 100%; border-radius: var(--radius); }
.split.top { align-items: start; }
/* a tall photo beside text, shown whole and a little narrower (Instructor Training, v2.35) */
.split img.split-portrait { width: min(100%, 380px); justify-self: center; }
.prose { max-width: 62ch; }
.prose p + p { margin-top: 16px; }
.prose .lead-in { font-size: 1.2rem; font-weight: var(--w-sub); }
.muted { color: var(--on-black-muted); }
.light .muted { color: var(--on-light-muted); }

/* Lists with the brand tick */
.ticks { list-style: none; padding: 0; display: grid; gap: 12px; }
.ticks + p, .contact-list + p { margin-top: 24px; }
.prose p + .ticks { margin-top: 20px; }
.ticks + .btn { margin-top: 28px; }
.ticks li { position: relative; padding-left: 32px; font-weight: var(--w-sub); }
/* white ticks (Faye, v2.34): a white circle with a black tick on dark sections, a black
   circle with a white tick on light ones, where white would disappear */
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .32em; width: 18px; height: 18px; border-radius: 50%;
  background: var(--off-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.light .ticks li::before {
  background: var(--black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* Service cards */
.card-grid { display: grid; gap: 18px; }
.service-card { display: flex; flex-direction: column; }
.service-card .card-body { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.service-card .ticks { margin: 6px 0 4px; gap: 8px; }
.service-card .ticks li { font-weight: var(--w-body); font-size: var(--text-sm); color: var(--on-black-muted); }
.light .service-card .ticks li { color: var(--on-light-muted); }
.service-card .btn { align-self: flex-start; margin-top: auto; }
.service-card img { aspect-ratio: 4 / 3; object-fit: cover; }

/* Three values / pillars */
.trio { display: grid; gap: 18px; }
.trio-item { border-top: 3px solid var(--persian-rose); padding-top: 18px; }
.light .trio-item { border-top-color: var(--honey-flower); }
.trio-item h3 { font-size: 1.2rem; margin-bottom: 6px; }

/* Big quote */
.big-quote { max-width: 34ch; margin: 0 auto; text-align: center; font-size: clamp(1.3rem, 3.4vw, 2rem); line-height: 1.35; }
.big-quote-band { background: var(--honey-flower); color: var(--on-honey); }

/* Client and partner names */
.names { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.names li {
  padding: 10px 16px; border-radius: 0;
  border: 1.5px solid rgba(253, 253, 253, .3); font-weight: var(--w-sub); font-size: var(--text-sm);
}
.light .names li { border-color: var(--black); }

/* Videos: a branded poster until tapped, so YouTube only loads when asked */
.video-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 280px)); justify-content: center; }
.video { position: relative; border-radius: var(--radius); overflow: hidden; background: #111; aspect-ratio: 9 / 16; }
.video button {
  position: absolute; inset: 0; width: 100%; padding: 0; border: 0; cursor: pointer;
  background: transparent; color: var(--off-white); text-align: left; font: inherit;
}
/* covers are each video's own thumbnail (tools/fetch-thumbnails.py), shown at full brightness
   with a fade along the bottom so the title reads on any picture (Faye, v2.36) */
.video img { width: 100%; height: 100%; object-fit: cover; }
.video button::before { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .85)); }
.video .play {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: 68px; height: 68px; border-radius: 50%; background: var(--hot-purple); color: var(--black);
  display: grid; place-items: center;
}
.video .play svg { width: 26px; height: 26px; margin-left: 4px; }
.video .caption { position: absolute; left: 16px; right: 16px; bottom: 16px; font-weight: var(--w-heading); line-height: 1.3; text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 14px rgba(0, 0, 0, .7); }
.video .caption small { display: block; font-weight: var(--w-body); color: var(--on-black-muted); margin-top: 4px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* a landscape video (Retreats, v2.20): one wide player instead of the portrait Shorts' column */
.video-grid.wide { grid-template-columns: minmax(0, 820px); }
.video.wide { aspect-ratio: 16 / 9; }
.videos + .videos { padding-top: 0; }
.video-note { font-size: var(--text-xs); color: var(--on-black-muted); margin-top: 14px; text-align: center; }

/* Call-to-action band */
.cta-band { background: var(--honey-flower); color: var(--on-honey); text-align: center; }
.cta-band h2 { font-size: clamp(1.6rem, 5vw, 2.6rem); }
.cta-band p { max-width: 46ch; margin: 14px auto 0; }
.cta-band .cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }
.cta-band .btn-line { color: var(--off-white); }

/* Simple facts row */
.facts { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.fact { border: 1.5px solid rgba(253, 253, 253, .26); border-radius: var(--radius); padding: 18px; }
.fact b { display: block; font-size: 1.1rem; }
.fact span { color: var(--on-black-muted); font-size: var(--text-sm); }

/* Contact details */
.contact-list { list-style: none; padding: 0; display: grid; gap: 14px; }
.contact-list a { font-weight: var(--w-heading); font-size: 1.1rem; }
.contact-list small { display: block; color: var(--on-black-muted); }

/* Enquiry form */
.form { display: grid; gap: 18px; }
.form .row { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label { font-weight: var(--w-heading); font-size: var(--text-sm); }
.field .hint { font-weight: var(--w-body); color: var(--on-black-muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: var(--tap); padding: 12px 14px;
  font: var(--w-body) var(--text) / 1.4 var(--font);
  color: var(--off-white); background: #111;
  border: 1.5px solid rgba(253, 253, 253, .35); border-radius: 12px;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--persian-rose); outline-offset: 1px; border-color: transparent; }
.field [aria-invalid="true"] { border-color: var(--persian-rose); }
.form-note { font-size: var(--text-sm); color: var(--on-black-muted); }
.form-status { font-weight: var(--w-heading); color: var(--on-black-accent); min-height: 1.6em; }
/* "Add me to Faye's mailing list": unticked by default; the whole line is the tap target */
.check { display: flex; gap: 12px; align-items: flex-start; min-height: var(--tap); cursor: pointer; font-size: var(--text-sm); }
.check input { flex: none; width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--hot-purple); cursor: pointer; }

/* About: "About" over "Faye Edwards", her bio, and her photo as a cut-out standing straight
   with no frame, like the home page. On a phone the title and photo share the top row. */
.page-hero .about-title { margin: 0 0 16px; }
.about-word { display: block; }
.about-name { display: block; margin-top: 10px; font-size: inherit; }
.about-bio .lede { max-width: 52ch; }
.about-hero .wrap { grid-template-columns: 1fr 42%; column-gap: 16px; row-gap: 0; align-items: end; }
.about-title { grid-column: 1; grid-row: 1; align-self: start; }
.about-photo {
  grid-column: 2; grid-row: 1; width: 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, #000 86%, transparent);
}
.about-bio { grid-column: 1 / -1; margin-top: 26px; }

/* Retreats: each retreat's name, its place on a second line, the dates in rose, a button */
.retreat-title { margin-bottom: 14px; }
.retreat-title .title { display: block; font-size: clamp(1.5rem, 4.6vw, 2.4rem); }
.retreat-place { display: block; margin-top: 8px; font-size: clamp(1.15rem, 2.6vw, 1.45rem); }
.retreat-date { color: var(--on-black-accent); font-weight: var(--w-heading); }
.retreat .prose .btn { margin-top: 24px; }
/* one gap between retreats, not two stacked (Faye, v2.17) */
.retreat + .retreat { padding-top: 0; }

/* Instructor Training (Faye's brief, v2.31): the partner credit under the banner, the two
   concept cards carrying the concept logos, lists in two columns on a computer, the FAQs as
   open-and-close questions, and a plain centred closing section (no purple banner) */
.page-hero .hero-note { margin-top: 14px; max-width: 52ch; color: var(--on-black-muted); }
.concept-card img { aspect-ratio: auto; object-fit: contain; width: min(70%, 260px); margin: 28px auto 0; }
.concept-both { margin: 28px auto 0; font-weight: var(--w-heading); }
.ticks-cols { max-width: 60rem; margin: 0 auto; }
.faqs { max-width: 52rem; margin: 0 auto; }
.faqs details { border-bottom: var(--rule); }
.faqs summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 12px 0; cursor: pointer; list-style: none;
  font-weight: var(--w-heading); font-size: 1.1rem;
}
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary::after { content: "+"; flex: none; color: var(--on-black-accent); font-size: 1.6rem; line-height: 1; }
.faqs details[open] summary::after { content: "\2212"; }
.faqs details p { padding: 0 0 18px; color: var(--on-black-muted); max-width: 62ch; }
.closing { text-align: center; }
.closing p { max-width: 60ch; margin: 0 auto; }
.closing .cta { display: flex; justify-content: center; margin-top: 26px; }
.closing .closing-note { margin-top: 28px; color: var(--on-black-muted); }

/* Work Gallery (Faye's brief, v2.33): videos in her labelled groups, every cover in one style
   (the video's own YouTube thumbnail, stored on the site, a play button and the title), three across on a
   computer and a swipeable row on a phone; then her photos as an even grid of squares with a
   caption under each, three across on a computer and two on a phone */
.gallery-group { margin: 44px 0 16px; }
.rule-title + .gallery-group { margin-top: 0; }
.video-grid.gallery-row { grid-template-columns: none; justify-content: stretch; }
.photo-gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.gallery-photo { width: calc((100% - 18px) / 2); }
.gallery-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); }
.gallery-photo figcaption { margin-top: 10px; font-weight: var(--w-heading); text-align: center; }
.photo-retreats img { object-position: 22% 50%; }
.photo-hosting img { object-position: 50% 57%; }
.photo-teaching img { object-position: 44% 50%; }
.photo-coaching img { object-position: 40% 45%; }
.photo-events img { object-position: 60% 50%; }
@media (max-width: 899px) {
  .video-grid.gallery-row {
    grid-auto-flow: column; grid-auto-columns: 82%;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 6px; scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .video-grid.gallery-row::-webkit-scrollbar { display: none; }
  .gallery-row .video { scroll-snap-align: start; }
}
@media (min-width: 900px) {
  .video-grid.gallery-row { grid-template-columns: repeat(3, 1fr); }
  .gallery-photo { width: calc((100% - 36px) / 3); }
}

/* The Story of F.I.T, with the Mind Fit Retreats group photo beside it (under it on a phone) */
.story { display: grid; gap: 32px; }
.story-photo img { width: 100%; border-radius: var(--radius); }
.story-photo figcaption { margin-top: 10px; font-size: var(--text-sm); color: var(--on-black-muted); }

@media (min-width: 900px) {
  .page-hero .wrap { grid-template-columns: 1.15fr .85fr; }
  .split { grid-template-columns: 1fr 1fr; gap: 56px; }
  .split.flip > :first-child { order: 2; }
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .card-grid.two { grid-template-columns: repeat(2, 1fr); }
  .ticks-cols { grid-template-columns: 1fr 1fr; column-gap: 48px; }
  .trio { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .form .row { grid-template-columns: 1fr 1fr; }
  /* on desktop, titles start close under the menu bar (Faye, v2.13), and the banner ends
     closer to the section after it (v2.17) */
  .page-hero { padding-top: 32px; padding-bottom: 40px; }
  .section.retreat { padding-bottom: 40px; }
  /* each retreat's words get the wider column, so the first one fits the opening screen */
  .retreat .split { grid-template-columns: 1.2fr .8fr; }
  .retreat .split.flip { grid-template-columns: .8fr 1.2fr; }
  .page-hero + .section { padding-top: 40px; }
  /* the Services F.I.T and the Mind Fit Retreats logo fill the right of their banners
     (Faye, v2.17); the Retreats introduction runs wider so the first retreat is on screen */
  .hero-logo-lg { width: min(34vw, 480px); align-self: center; }
  /* the Retreats title runs on one line above her introduction, the logo beside it */
  .retreats-hero .wrap { row-gap: 0; }
  .retreats-hero .wrap > div { display: contents; }
  .retreats-hero .eyebrow, .retreats-hero h1 { grid-column: 1 / -1; }
  .retreats-hero .lede, .retreats-hero .cta { grid-column: 1; }
  .retreats-hero .lede { max-width: 64ch; }
  .retreats-hero .hero-logo { grid-column: 2; grid-row: 3 / 5; }
  .retreats-hero { padding-bottom: 28px; }
  .retreats-hero + .section { padding-top: 32px; }
  /* the Services cards' pictures and titles show on the opening screen */
  .service-card img { aspect-ratio: 3 / 2; }
  .page-hero .wrap:has(.hero-tall) { align-items: stretch; }
  .hero-media.hero-tall { width: auto; max-width: 100%; height: 0; min-height: min(100%, 560px, 45vw); align-self: end; justify-self: end; }
  /* Coaching: the photo's centre lines up with the centre of the photo in the section below
     (Faye, v2.22). With the wrap's content width W, that photo's centre sits at 0.75W + 14px
     (.split: two columns, 56px gap) and this column starts at 0.575W + 15.3px (1.15fr .85fr,
     36px gap), so the centre goes 0.175W - 1.3px into the column. */
  /* Work With Faye: the banner photo in the Coaching frame, a little larger, centred
     against the words beside it (Faye, v2.22) */
  .page-hero .wrap:has(.hero-feature) { grid-template-columns: 1fr 1fr; align-items: center; }
  .hero-media.hero-feature { width: min(38vw, 500px); }
  .page-hero .wrap:has(.align-below) { container-type: inline-size; }
  .hero-media.hero-tall.align-below { justify-self: start; margin-left: calc(17.5cqw - 1.3px); transform: translateX(-50%) rotate(2.5deg); }
  .about-hero .wrap { grid-template-columns: 1.15fr .85fr; grid-template-rows: auto 1fr; column-gap: 36px; }
  .about-bio { grid-column: 1; grid-row: 2; margin-top: 22px; }
  /* her photo starts level with the top of the title (Faye, v2.16), its crop line faded */
  .about-photo {
    grid-column: 2; grid-row: 1 / 3; justify-self: end; align-self: start; width: min(32vw, 420px);
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
    mask-image: linear-gradient(to bottom, #000 82%, transparent);
  }
  .story { grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: start; }
  .story-photo { position: sticky; top: 96px; margin-top: 8px; }
}