/* Spanish Grinds — single stylesheet. Mobile-first. 8px spacing scale, 6px radius everywhere. */

/* ---------- Fonts (self-hosted, latin subset) ---------- */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/source-serif-4-600.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-serif-4-italic-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-600.woff2") format("woff2");
}

/* ---------- Palette ---------- */
:root {
  --bg: #FBFAF7;        /* page background */
  --bg-alt: #F2EFE9;    /* alternate section background */
  --navy: #16324F;      /* headings, brand, links, focus ring */
  --ink: #1F2933;       /* body text */
  --muted: #5B6673;     /* attributions, footer */
  --cta: #C2410C;       /* CTA buttons ONLY — nowhere else */
  --cta-hover: #9A3412;
  --line: #E3DED4;      /* hairline rule, input borders */
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Inter", -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;             /* deliberate — do not shrink to 16px */
  font-weight: 400;
  line-height: 1.6;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.container {
  max-width: 680px;
  margin-inline: auto;
  padding-inline: 24px;
}

section, footer { padding-block: 64px; }
.alt { background: var(--bg-alt); }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 24px;
}
h1 { font-size: 34px; line-height: 1.15; letter-spacing: -0.01em; }
h2 { font-size: 26px; line-height: 1.25; }
h3 { font-size: 20px; line-height: 1.3; margin-bottom: 8px; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

/* Body links: navy, underlined. Never terracotta. */
a { color: var(--navy); text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}

/* ---------- Hero (tight so it fits one mobile screen under 700px) ---------- */
.hero { padding-block: 32px 64px; }
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: left;
}
.hero-inner > div { width: 100%; }
.portrait {
  display: block;
  width: 176px;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 6px;   /* soft-cornered portrait, not a circle */
}
h1 { margin-bottom: 8px; }

/* The credential line — the most valuable sentence on the page.
   Fluid size: 21px wherever it fits, easing down on narrow phones so the
   line never breaks across more than two lines (its governing rule). */
.credential {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(18px, calc((100vw - 48px) * 0.058), 21px);
  line-height: 1.35;
  color: var(--navy);
  margin: 0 0 16px;
}
.credential::before {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  background: var(--line);   /* the only decorative element on the page */
  margin-bottom: 8px;
}
.support {
  font-size: 17px;
  color: var(--muted);
  margin-bottom: 16px;
}

/* ---------- Buttons — terracotta appears here and nowhere else ---------- */
.button {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 8px 32px;
  background: var(--cta);
  color: #FFFFFF;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
  text-decoration: none;
  border: none;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(22, 50, 79, 0.24);  /* the page's only shadow */
  cursor: pointer;
}
.button:hover { background: var(--cta-hover); }
.button:disabled { opacity: 0.7; cursor: default; }

/* ---------- Sessions list ---------- */
.covers {
  margin: 0 0 24px;
  padding-left: 24px;
}
.covers li { margin-bottom: 16px; }
.covers li:last-child { margin-bottom: 0; }
.covers strong { color: var(--navy); }

/* ---------- Testimonials ---------- */
.testimonial { margin: 0 0 32px; }
.testimonial:last-of-type { margin-bottom: 0; }
.testimonial blockquote {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
}
.testimonial blockquote::before { content: "\201C"; }
.testimonial blockquote::after { content: "\201D"; }
.testimonial figcaption {
  font-size: 15px;
  color: var(--muted);
}

/* ---------- Getting started ---------- */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 32px 0;
  padding: 0;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 40px;
  margin-bottom: 32px;
}
.steps li:last-child { margin-bottom: 0; }
.steps li::before {
  content: counter(step) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: var(--navy);
}
.availability { margin-bottom: 48px; }

/* ---------- Form ---------- */
.form-heading {
  font-size: 24px;
  margin-bottom: 24px;
  scroll-margin-top: 24px;   /* breathing room when the hero CTA jumps here */
}
.honeypot { display: none; }
.field { margin-bottom: 24px; }
.field label {
  display: block;
  font-weight: 600;
  font-size: 17px;
  margin-bottom: 8px;
}
.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 8px 16px;
  background: #FFFFFF;
  color: var(--ink);
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.field textarea { resize: vertical; }
.form-status { margin-top: 16px; }
.form-status:empty { display: none; }
.form-success { font-weight: 600; }
.whatsapp { margin-top: 24px; }

/* ---------- Footer ---------- */
footer {
  font-size: 15px;
  color: var(--muted);
}
footer p { margin-bottom: 8px; }
footer strong { color: var(--navy); }

/* ---------- Desktop ---------- */
@media (min-width: 768px) {
  body { font-size: 19px; }
  section, footer { padding-block: 96px; }
  .hero { padding-block: 96px; }
  .hero-inner { gap: 32px; }
  .portrait { width: 280px; flex-shrink: 0; }
  h1 { font-size: 52px; }
  h2 { font-size: 34px; }
  .credential { font-size: 27px; }
  .support { font-size: 18px; }
  .form-heading { font-size: 28px; }
  .testimonial blockquote { font-size: 20px; }
  .button { display: inline-flex; width: auto; }
}

/* Wide enough for the photo to sit beside the hero text without squeezing the H1.
   1008px = 680px text measure + 48px gap + 280px photo. */
@media (min-width: 960px) {
  .hero .container { max-width: 1008px; }
  .hero-inner {
    flex-direction: row-reverse;   /* text left, photo right */
    align-items: center;
    gap: 48px;
  }
  .hero-inner > div { flex: 1; min-width: 0; }
}