/**
 * The row builder, in Trio's design.
 *
 * Trio's own rows (inc/rows-trio-render.php) draw the markup its templates
 * always had, and app.css already styles that. This file covers everything
 * else the builder can put on a page: the engine's own row types — text and
 * photo, just words, steps, cards, big numbers, questions, a wide photo —
 * restyled from Digital Help Desk's app.css in Trio's navy, teal, Fraunces and
 * Figtree. Then the scroll effects any row can carry, and the bands.
 */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --s-1: 8px;
  --s-2: 14px;
  --s-3: 20px;
  --s-4: 32px;
  --s-5: 48px;
  --s-6: 64px;
  --r-lg: 14px;
  --r-xl: 20px;
  --sh-card: 0 2px 10px rgba(11, 46, 58, 0.05), 0 16px 48px rgba(11, 46, 58, 0.08);
  --sh-lift: 0 18px 50px rgba(11, 46, 58, 0.14);
  --t-h2: clamp(28px, 3.6vw, 40px);
  --t-h3: 21px;
}

/* ─── The engine's sections ─────────────────────────────────── */

.section { position: relative; padding: clamp(64px, 9vw, 120px) 0; background: var(--c-paper); color: var(--c-navy); }
.section--paper-deep { background: var(--c-paper-deep); }
.section--deep { background: var(--c-navy); color: #fff; }

/* Trio's sections open on an eyebrow and a serif heading, not a rule. */
.section .rule { display: none; }
.section .eyebrow {
  font-family: var(--font-sans); font-size: 11px; font-weight: 500;
  letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--c-navy); opacity: 0.55; margin: 0 0 20px;
}
.section__head { max-width: 660px; margin: 0 0 var(--s-5); position: relative; z-index: 1; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__title,
.split__title {
  font-family: var(--font-serif); font-size: var(--t-h2); font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.15; color: var(--c-navy); margin: 0 0 var(--s-2);
}
.section__intro {
  font-family: var(--font-serif); font-size: clamp(18px, 1.7vw, 22px); line-height: 1.62;
  color: var(--c-navy); opacity: 0.82; margin: 0;
}
.section__intro p:last-child, .split__body p:last-child { margin-bottom: 0; }
.section .dot { color: var(--c-red); }

.section--deep .eyebrow { color: #fff; opacity: 0.7; }
.section--deep .section__title,
.section--deep .split__title,
.section--deep .section__intro { color: #fff; }
.section--deep .dot { color: var(--c-teal); }

/* ─── Text and photo ────────────────────────────────────────── */

.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--s-6); align-items: center; }
.split--reverse .split__media { order: -1; }
.split__media { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 3; background: var(--c-paper-deep); box-shadow: var(--sh-lift); }
.split__media picture { display: block; width: 100%; height: 100%; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__media--portrait { aspect-ratio: 4 / 5; max-width: 400px; }
.split__body { font-size: 17px; line-height: 1.65; opacity: 0.86; margin: 0 0 var(--s-3); }
.split__body p { margin: 0 0 var(--s-3); }
.split__list { list-style: none; padding: 0; margin: 0 0 var(--s-4); display: grid; gap: var(--s-1); }
.split__list li { position: relative; padding-left: 32px; font-size: 16px; }
.split__list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 999px; background: rgba(19, 142, 163, 0.14); }
.split__list li::after { content: ""; position: absolute; left: 6px; top: 7px; width: 8px; height: 5px; border-left: 2px solid var(--c-red); border-bottom: 2px solid var(--c-red); transform: rotate(-45deg); }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--c-red); text-decoration: none; }
.link-arrow svg { transition: transform 0.25s var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }
.section--deep .link-arrow { color: var(--c-teal); }

/* ─── Just words, and a wide photo ──────────────────────────── */

.section .prose { max-width: 720px; font-size: 17px; line-height: 1.75; }
.section .prose > * + * { margin-top: 1.1em; }
.section .prose p, .section .prose ul, .section .prose ol { margin-bottom: 0; opacity: 0.86; }
.section .prose h2 { font-family: var(--font-serif); font-size: clamp(24px, 2.6vw, 30px); font-weight: 500; letter-spacing: -0.015em; margin-top: var(--s-5); }
.section .prose h3 { font-family: var(--font-serif); font-size: var(--t-h3); font-weight: 500; margin-top: var(--s-4); }
.section .prose ul, .section .prose ol { padding-left: 1.3em; }
.section .prose li + li { margin-top: 0.4em; }
.section .prose li::marker { color: var(--c-red); }
.section .prose a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--c-red); }
.section .prose strong { font-weight: 600; }
.section .prose--cols { max-width: none; columns: 2; column-gap: var(--s-6); }
.section .prose--cols > * { break-inside: avoid; }

.rowbanner__media { position: relative; overflow: hidden; border-radius: var(--r-xl); aspect-ratio: 16 / 6; background: var(--c-paper-deep); box-shadow: var(--sh-lift); }
.rowbanner__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rowbanner__body { margin-top: var(--s-5); }

/* ─── Steps, cards and big numbers ──────────────────────────── */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.step { padding: var(--s-4); background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-card); color: var(--c-navy); }
.step__n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 64px; height: 64px; padding: 0 12px; border-radius: 999px;
  background: var(--c-paper-deep); color: var(--c-red);
  font-family: var(--font-sans); font-size: 14px; font-weight: 700; margin: 0 0 var(--s-3);
}
.step__title { font-family: var(--font-serif); font-size: var(--t-h3); font-weight: 500; margin: 0 0 var(--s-1); }
.step__body { font-size: 15px; line-height: 1.7; opacity: 0.8; margin: 0; }

/* The engine's card grid shares its class names with Trio's pillars section,
   whose padding, white band and top border must not land on a grid inside a
   row — so inside .section the grid is only a grid. */
.section .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); padding: 0; background: none; border: 0; }
.section .pillar { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--s-4); }
.section .pillar__title { font-family: var(--font-serif); font-size: var(--t-h3); font-weight: 500; margin: 0 0 var(--s-1); color: var(--c-navy); }
.section .pillar__body { font-size: 15px; line-height: 1.7; opacity: 0.8; margin: 0; color: var(--c-navy); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.stat { text-align: center; }
.stat__n { font-family: var(--font-serif); font-size: clamp(44px, 5.5vw, 64px); font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: #fff; }
.stat__n .dot { color: var(--c-teal); }
.stat__n .dot--sym { font-size: 0.5em; vertical-align: 0.42em; margin-left: 0.14em; }
.stat__label { font-family: var(--font-sans); font-size: 14px; color: rgba(255, 255, 255, 0.72); margin-top: var(--s-2); }
.stats--light .stat__n { color: var(--c-navy); }
.stats--light .stat__n .dot { color: var(--c-red); }
.stats--light .stat__label { color: var(--c-muted); }

/* ─── Questions and answers ─────────────────────────────────── */

.faq { max-width: 780px; }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__item summary { cursor: pointer; list-style: none; padding: var(--s-3) 40px var(--s-3) 0; position: relative; font-family: var(--font-serif); font-size: 20px; font-weight: 500; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 26px; color: var(--c-red); }
.faq__item[open] summary::after { content: "\2013"; }
.faq__body { padding: 0 0 var(--s-3); line-height: 1.7; opacity: 0.8; }
.faq__body p { margin: 0; }
.section--deep .faq__item { border-color: rgba(255, 255, 255, 0.18); }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--s-4); }
  .split--reverse .split__media { order: 0; }
  .steps, .section .pillars, .stats { grid-template-columns: 1fr; }
  .section .prose--cols { columns: 1; }
  .rowbanner__media { aspect-ratio: 16 / 9; }
}

/* ─── Trio's rows on a band the design did not give them ───────
   A Trio row on its own band adds no class; these only apply when Mat picks
   another band in the Studio. */
.is-band-paper { background: var(--c-paper); }
.is-band-paper-deep { background: var(--c-paper-deep); }
.is-band-deep { background: var(--c-navy); color: #fff; }
.is-band-deep :is(h2, h3, p, li, blockquote, em, .pathway__title, .pillar__title a) { color: #fff; }
.service-statement.is-band-paper .service-statement__text,
.service-statement.is-band-paper-deep .service-statement__text { color: var(--c-navy); }

/* A page's copy and its closing card are two rows now; they sit together as
   they did when one template drew both. */
.service-body:has(+ .service-body--cta) { padding-bottom: 0; }
.service-body--cta { padding-top: 0; }

/* The Book page before a booking link has been set. */
.booking__empty {
  margin-top: 32px; padding: 28px 32px; background: #fff; border-radius: var(--r-lg);
  box-shadow: var(--sh-card); font-size: 17px; line-height: 1.6; color: var(--c-navy);
}
.booking__empty p { margin: 0; }
.booking__empty a { color: var(--c-red); }

/* A hero slide's eyebrow and second button, which the Hero panel can set. */
.findrack-slide__eyebrow { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase; color: #fff; opacity: 0.8; margin: 0 0 14px; }
.findrack-slide__link--secondary { margin-left: 12px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.6); }

/* ─── Scroll effects ────────────────────────────────────────────
   Chosen per row in the Studio. The hidden state exists only once theme.js
   has put fx-on on <html>: no script, or reduced motion, and every row is
   simply visible. Reveals play once and stay. From DHD's app.css. */
html.fx-on .fx-reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.5s ease, transform 0.55s var(--ease-out);
}
html.fx-on .fx--zoom { transform: scale(0.96) translateY(12px); }
html.fx-on .fx-reveal.is-inview { opacity: 1; transform: none; }

html.fx-on .fx--stagger .container > * > * {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.5s ease, transform 0.55s var(--ease-out);
}
html.fx-on .fx--stagger.is-inview .container > * > * { opacity: 1; transform: none; }
html.fx-on .fx--stagger.is-inview .container > * > :nth-child(2) { transition-delay: 0.09s; }
html.fx-on .fx--stagger.is-inview .container > * > :nth-child(3) { transition-delay: 0.18s; }
html.fx-on .fx--stagger.is-inview .container > * > :nth-child(4) { transition-delay: 0.27s; }
html.fx-on .fx--stagger.is-inview .container > * > :nth-child(5) { transition-delay: 0.36s; }
html.fx-on .fx--stagger.is-inview .container > * > :nth-child(n+6) { transition-delay: 0.45s; }

/* Slide over: the row rides up over the pinned row above it. Sticky is
   ordinary scrolling, not autonomous motion, so it stays under reduced motion. */
.fx-pin { position: sticky; top: var(--pin-top, 0px); }
:where(.fx-cover) { background: var(--c-paper); }