/* ========================================
   Adventure Partners — Avalanche Fundamentals
   Landing page styles

   Depends on css/base.css for tokens, reset and the shared header/footer.
   Direction: "field notebook" — warm paper surfaces, dark framing bands,
   hairline technical rules and measured labels. This matches the lesson
   pages, which already frame every diagram this way.
   ======================================== */

/* ----------------------------------------
   1. Layout primitives
   ---------------------------------------- */

.wrap {
  width: min(1200px, calc(100% - 3.5rem));
  margin-inline: auto;
}

/* Section label. Small, tracked, accent — the only routine use of the accent
   colour on light surfaces. */
.kicker {
  display: block;
  margin-bottom: 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aurora-deep);
}

.section--dark .kicker {
  color: var(--ice);
}

/* Display headings — Barlow Condensed, the site's display face. */
.display {
  margin-bottom: 1.25rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

.display--xl { font-size: clamp(3rem, 6.2vw, 5.75rem); }
.display--lg { font-size: clamp(2.5rem, 5vw, 4.5rem); }

/* Handwritten marginalia, as on the lesson diagrams. */
.note {
  font-family: 'Caveat', cursive;
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.35;
  color: var(--slate);
}

.section--dark .note {
  color: var(--snow-2);
}

/* Monospaced utility text for coordinates, figure numbers and measurements. */
.meta {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mist-text);
}

.section--dark .meta {
  color: var(--snow-2);
}

/* ----------------------------------------
   2. Buttons
   ---------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 1.75rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn--primary {
  background-color: var(--aurora);
  color: var(--ink);
  border-color: var(--aurora);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: #6FDCB8;
  border-color: #6FDCB8;
}

.btn--outline {
  color: var(--snow);
  border-color: rgba(245, 247, 250, 0.5);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background-color: rgba(245, 247, 250, 0.1);
  border-color: var(--snow);
}

/* ----------------------------------------
   3. Hero
   ---------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: min(760px, calc(100svh - 62px));
  background-color: var(--ink);
  color: var(--snow);
}

.hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 6vw, 6rem) clamp(1.75rem, 5vw, 5rem);
}

/* No ch-based cap here. The previous rule capped the headline at 8ch while the
   type scaled to 7rem, so the last word overflowed the column and was
   overlapped by the photo. The column bounds the size instead. */
.hero__title {
  margin-bottom: 1.5rem;
  font-size: clamp(2.75rem, 5.2vw, 5.25rem);
}

.hero__lede {
  max-width: 46ch;
  color: var(--snow-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.hero__figure {
  position: relative;
  overflow: hidden;
  min-height: 420px;
}

.hero__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}

/* Field-note coordinate tag, echoing the figure captions on lesson pages. */
.hero__coords {
  position: absolute;
  left: 1.5rem;
  bottom: 1.5rem;
  padding: 0.5rem 0.75rem;
  background-color: var(--paper);
  color: var(--ink);
  border: 1px solid rgba(138, 155, 174, 0.5);
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

/* ----------------------------------------
   4. Trust strip
   ---------------------------------------- */

.trust {
  background-color: var(--paper);
  border-bottom: 1px solid rgba(138, 155, 174, 0.5);
}

.trust__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* one item since October 2026; centred rather than left-stranded */
  gap: 1rem 2rem;
  padding: 1.125rem 0;
}

.trust__item {
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}

/* ----------------------------------------
   5. Sections
   ---------------------------------------- */

.section {
  padding: clamp(4.5rem, 9vw, 7.5rem) 0;
}

.section--paper { background-color: var(--paper); }
.section--snow  { background-color: var(--snow); }

.section--dark {
  background-color: var(--ink);
  color: var(--snow);
}

/* Notebook grid, at the same 24px pitch the lesson diagram frames use. */
.section--grid {
  background-image:
    linear-gradient(rgba(138, 155, 174, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138, 155, 174, 0.09) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ----------------------------------------
   6. Editorial opener
   ---------------------------------------- */

.editorial__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: end;
}

.editorial__lede {
  color: var(--slate);
  max-width: 56ch;
}

/* Sources and the team's signature: a full-width row under the two columns */
.editorial__sources {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.editorial__sources-text {
  color: var(--slate);
}

.editorial__signature {
  margin-top: 1rem;
  font-family: 'Caveat', cursive;
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.3;
  color: var(--mist-text);
}

.editorial__note {
  margin-top: 0.25rem;
}

/* Statement line, held between two full-width rules. */
.stakes {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding: 1.75rem 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1.15;
  text-wrap: balance;
}

/* ----------------------------------------
   7. Figure plate
   ----------------------------------------
   The same treatment lesson pages give their diagrams: a bordered plate with a
   ruled caption bar. Reused here so the landing page shows real course
   material instead of describing it.
*/

.plate {
  border: 1px solid rgba(138, 155, 174, 0.55);
  background-color: var(--white);
}

.plate__body {
  padding: 1.25rem;
}

.plate__body svg,
.plate__body img {
  display: block;
  width: 100%;
  height: auto;
}

.plate__caption {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid rgba(138, 155, 174, 0.55);
  background-color: var(--paper);
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  color: var(--mist-text);
}

/* Corner brackets — a quiet registration marker, not a decorative frame. */
.bracketed { position: relative; }

.bracketed::before,
.bracketed::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--aurora-deep);
  border-style: solid;
  pointer-events: none;
}

.bracketed::before {
  top: -5px;
  left: -5px;
  border-width: 1px 0 0 1px;
}

.bracketed::after {
  right: -5px;
  bottom: -5px;
  border-width: 0 1px 1px 0;
}

/* ----------------------------------------
   8. Structure section (diagram + counts)
   ---------------------------------------- */

.structure__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.structure__copy p {
  color: var(--slate);
  max-width: 48ch;
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 2.5rem;
  border-top: 1px solid rgba(138, 155, 174, 0.5);
}

.fact {
  padding: 1.25rem 1rem 1.25rem 0;
  border-bottom: 1px solid rgba(138, 155, 174, 0.5);
}

.fact__value {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 2.75rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.fact__label {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--mist-text);
}

/* ----------------------------------------
   9. Curriculum preview
   ----------------------------------------
   A ruled index rather than four floating cards: each module is a row with a
   numeral, a rule and its lesson count — the contents page of the notebook.
*/

.modules {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--ink);
}

.module {
  display: grid;
  grid-template-columns: 5.5rem 1fr 12rem;
  gap: 1.5rem;
  align-items: start;
  padding: 2rem 0;
  border-bottom: 1px solid rgba(138, 155, 174, 0.5);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s ease, padding-left 0.2s ease;
}

/* The locked third part: dimmed, with a padlock before the title */
.module--locked {
  opacity: 0.8;
  border-bottom-style: dashed;
}

.module__num--lock {
  display: flex;
  align-items: center;
  height: 1em;
  color: var(--mist);
}

.module__lockicon {
  display: block;
}

.module:hover,
.module:focus-visible {
  background-color: rgba(79, 209, 165, 0.07);
  padding-left: 0.75rem;
}

.module__num {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--mist-text);
  font-variant-numeric: tabular-nums;
}

.module__title {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 1.05;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.module__desc {
  display: block;
  color: var(--slate);
  font-size: 0.9375rem;
  max-width: 52ch;
}

.module__count {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--aurora-deep);
  padding-top: 0.5rem;
  text-align: right;
}

/* ----------------------------------------
   10. Field day band
   ---------------------------------------- */

.field__grid {
  display: grid;
  grid-template-columns: 1fr 0.75fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.field__lede {
  color: var(--snow-2);
  max-width: 46ch;
}

/* Packing list as a checklist, not prose. */
.packlist {
  margin-top: 2rem;
  border-top: 1px solid rgba(138, 155, 174, 0.4);
}

.packlist li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(138, 155, 174, 0.22);
  font-size: 0.9375rem;
  color: var(--snow-2);
}

.packlist li::before {
  content: '';
  flex: none;
  width: 12px;
  height: 12px;
  border: 1px solid var(--ice);
  border-radius: 1px;
}

.field__aside {
  max-width: 340px;
  margin-left: auto;
}

.field__aside img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.field__aside .meta {
  display: block;
  margin-top: 0.75rem;
}

/* ----------------------------------------
   11. Guide
   ----------------------------------------
   Typographic, with no stand-in portrait. The quote carries the section.
*/

.guide__grid {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

/* Instructor name row: a small round portrait with the name beside it,
   the name's letters about as tall as the picture */
.guide__name {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.guide__name .display {
  margin: 0;
  font-size: clamp(2.5rem, 8vw, 4rem);
}

.guide__photo {
  display: block;
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(138, 155, 174, 0.5);
}

/* Second instructor block: breathing room between the two guides */
.guide__grid--second {
  margin-top: clamp(3rem, 8vw, 5rem);
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid rgba(138, 155, 174, 0.5);
}

.guide__cred {
  color: var(--mist-text);
  font-size: 0.9rem;
  max-width: 44ch;
}

.guide__quote {
  margin: 1.75rem 0;
  padding-left: 1.5rem;
  border-left: 3px solid var(--aurora-deep);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.2;
}

.guide__body {
  color: var(--slate);
  max-width: 50ch;
}

/* Credential table — measured, technical, honest about what it lists. */
.credtable {
  border-top: 1px solid rgba(138, 155, 174, 0.5);
}

.credtable__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(138, 155, 174, 0.5);
  font-size: 0.875rem;
}

.credtable__key {
  color: var(--mist-text);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-top: 0.15rem;
}

.credtable__val {
  text-align: right;
  font-weight: 500;
}

/* ----------------------------------------
   12. Closing call to action
   ---------------------------------------- */

.cta {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}

.cta__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* ----------------------------------------
   13. Scroll reveal
   ----------------------------------------
   .reveal--pending is applied by JS only when motion is allowed, so the page
   is fully visible with JS disabled or reduced motion requested. Matches the
   convention already used on curriculum.php and the lesson pages.
*/

.reveal--pending {
  opacity: 0;
  transform: translateY(14px);
}

.reveal--visible {
  opacity: 1;
  transform: none;
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .reveal--pending,
  .reveal--visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .module,
  .btn {
    transition: none;
  }
}

/* ----------------------------------------
   14. Responsive
   ---------------------------------------- */

@media (max-width: 900px) {
  .module {
    grid-template-columns: 3.5rem 1fr;
  }

  .module__count {
    grid-column: 2;
    text-align: left;
    padding-top: 0.75rem;
  }
}

@media (max-width: 768px) {
  .wrap {
    width: calc(100% - 2rem);
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .hero__figure {
    order: -1;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .hero__actions .btn {
    flex: 1 1 100%;
  }

  .editorial__grid,
  .structure__grid,
  .field__grid,
  .guide__grid {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .facts { margin-top: 2rem; }

  .field__aside {
    max-width: 100%;
    margin-left: 0;
  }

  .cta__row {
    flex-direction: column;
    align-items: flex-start;
  }
}