/* =======================================================================
   Marketing pages
   =======================================================================

   Styles for the About, Contact and training pages. Everything here is
   driven by class names the page content applies, so the pages stay
   editable in the block editor — a section keeps its design when you
   change the words inside it.

   Nothing here is a new colour. Every value comes from the existing
   tokens, so these pages follow the light/dark theme like the rest of
   the site.
   ===================================================================== */

/* ---------- Section rhythm ---------- */

.sf-section {
  padding-block: var(--sf-space-16);
}

.sf-section + .sf-section {
  padding-block-start: 0;
}

.sf-section--tint {
  background: var(--sf-surface-2);
  padding-block: var(--sf-space-16);
  margin-block: var(--sf-space-16);
}

.sf-section--tint + .sf-section { padding-block-start: 0; }

.sf-section__inner {
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: var(--sf-space-5);
}

/* ---------- Page hero ---------- */

.sf-hero {
  background: var(--sf-ink);
  color: var(--sf-on-ink);
  padding-block: var(--sf-space-20);
  position: relative;
  overflow: hidden;
}

/* A quiet geometric wash rather than a stock photograph: it never looks
   dated, never loads a megabyte, and reads the same in both themes. */
.sf-hero::after {
  content: "";
  position: absolute;
  inset-block-start: -30%;
  inset-inline-end: -10%;
  width: 36rem;
  height: 36rem;
  border-radius: var(--sf-radius-full);
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
}

.sf-hero__inner {
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: var(--sf-space-5);
  position: relative;
}

.sf-hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--sf-text-xs);
  font-weight: var(--sf-weight-semibold);
  color: var(--sf-on-ink-muted);
  margin-block-end: var(--sf-space-3);
}

.sf-hero h1 {
  color: var(--sf-on-ink);
  max-width: 20ch;
  margin-block-end: var(--sf-space-4);
}

.sf-hero__lede {
  color: var(--sf-on-ink-muted);
  font-size: var(--sf-text-lg);
  max-width: 54ch;
}

/* ---------- Alternating two-column rows ---------- */

.sf-split {
  display: grid;
  gap: var(--sf-space-10);
  align-items: center;
}

@media (min-width: 768px) {
  .sf-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-space-12); }

  /* Reverses the visual order without moving it in the document, so a
     screen reader and a keyboard still read heading before detail. */
  .sf-split--reverse .sf-split__media { order: -1; }
}

.sf-split__body > :first-child { margin-block-start: 0; }

.sf-split__media {
  background: var(--sf-surface-2);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-xl);
  padding: var(--sf-space-8);
}

/* ---------- Card grids ---------- */

.sf-cards {
  display: grid;
  gap: var(--sf-space-5);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.sf-card {
  background: var(--sf-surface);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-lg);
  padding: var(--sf-space-6);
  transition: transform var(--sf-duration-base) ease, box-shadow var(--sf-duration-base) ease, border-color var(--sf-duration-base) ease;
}

.sf-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow-md);
  border-color: var(--sf-border-strong);
}

.sf-card h3 { margin-block-start: 0; font-size: var(--sf-text-lg); }
.sf-card p:last-child { margin-block-end: 0; }

.sf-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Sized to its text: these hold short labels such as "SQL" or
     "Review", not single glyphs, so a fixed square would clip them. */
  min-width: 2.5rem;
  height: 2rem;
  padding-inline: var(--sf-space-3);
  border-radius: var(--sf-radius-md);
  background: var(--sf-accent-soft);
  color: var(--sf-accent-strong);
  margin-block-end: var(--sf-space-4);
  font-weight: var(--sf-weight-semibold);
  font-size: var(--sf-text-xs);
  letter-spacing: 0.04em;
}

/* ---------- Numbered steps ---------- */

.sf-steps { counter-reset: sf-step; display: grid; gap: var(--sf-space-6); }

.sf-step {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--sf-space-5);
  align-items: start;
}

.sf-step::before {
  counter-increment: sf-step;
  content: counter(sf-step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--sf-radius-full);
  background: var(--sf-accent);
  color: var(--sf-on-brand);
  font-weight: var(--sf-weight-bold);
}

.sf-step h3 { margin-block-start: 0; font-size: var(--sf-text-base); }
.sf-step p:last-child { margin-block-end: 0; }

/* ---------- Statistic strip ---------- */

.sf-stats {
  display: grid;
  gap: var(--sf-space-5);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  text-align: center;
}

.sf-stat__value {
  display: block;
  font-family: var(--sf-font-display);
  font-size: var(--sf-text-3xl);
  color: var(--sf-accent-strong);
  line-height: 1.1;
}

.sf-stat__label { color: var(--sf-text-secondary); font-size: var(--sf-text-sm); }

/* ---------- Call to action ---------- */

.sf-cta {
  background: var(--sf-ink);
  color: var(--sf-on-ink);
  border-radius: var(--sf-radius-xl);
  padding: var(--sf-space-10);
  text-align: center;
}

.sf-cta h2 { color: var(--sf-on-ink); margin-block-start: 0; }
.sf-cta p { color: var(--sf-on-ink-muted); max-width: 52ch; margin-inline: auto; }

/* ---------- Contact ---------- */

.sf-contact-grid {
  display: grid;
  gap: var(--sf-space-8);
}

@media (min-width: 1024px) {
  .sf-contact-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

.sf-map {
  border-radius: var(--sf-radius-lg);
  overflow: hidden;
  border: 1px solid var(--sf-border);
  min-height: 18rem;
  background: var(--sf-surface-2);
}

.sf-map iframe { display: block; width: 100%; height: 100%; min-height: 18rem; border: 0; }

/* A note to the site owner, visible only while a section is unfinished. */
.sfpages-placeholder {
  border-inline-start: 3px solid var(--sf-amber);
  background: var(--sf-amber-50);
  padding: var(--sf-space-3) var(--sf-space-4);
  border-radius: var(--sf-radius-sm);
  color: var(--sf-amber-ink);
  font-size: var(--sf-text-sm);
}

/* ---------- Scroll reveal ----------
   The element is visible by default and only hidden once the script
   confirms it can reveal it again. Without that, anyone with JavaScript
   blocked — or a script that fails to load — gets a blank page. */

[data-reveal] {
  opacity: 1;
}

.sf-reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity var(--sf-duration-slow) ease, transform var(--sf-duration-slow) ease;
}

.sf-reveal-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Stagger: children of a revealed group arrive in sequence. */
.sf-reveal-ready [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity var(--sf-duration-slow) ease, transform var(--sf-duration-slow) ease;
}

.sf-reveal-ready [data-reveal-group].is-revealed > * { opacity: 1; transform: none; }
.sf-reveal-ready [data-reveal-group].is-revealed > :nth-child(2) { transition-delay: calc(var(--sf-duration-fast) * 0.15); }
.sf-reveal-ready [data-reveal-group].is-revealed > :nth-child(3) { transition-delay: calc(var(--sf-duration-fast) * 0.25); }
.sf-reveal-ready [data-reveal-group].is-revealed > :nth-child(4) { transition-delay: calc(var(--sf-duration-fast) * 0.35); }
.sf-reveal-ready [data-reveal-group].is-revealed > :nth-child(5) { transition-delay: calc(var(--sf-duration-fast) * 0.45); }
.sf-reveal-ready [data-reveal-group].is-revealed > :nth-child(6) { transition-delay: calc(var(--sf-duration-fast) * 0.55); }

/* Motion is a preference, not a feature. Everything still arrives; it
   simply arrives immediately. The global reduced-motion rule in base.css
   collapses the durations, and this removes the offset so nothing can be
   left mid-transition. */
@media (prefers-reduced-motion: reduce) {
  .sf-reveal-ready [data-reveal],
  .sf-reveal-ready [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
  }
}