/*
  Article template — Figma node 18626:21380 ("Boating Hub > Article"),
  built as a reusable component, not a one-off Hamilton Island page (see
  article.html for the content-swap points). Generic class names
  throughout, per CLAUDE.md.

  Reuses rather than duplicates:
    .page-hero--article        hero shell (css/page-hero.css)
    .section-transition        hero/content overlap + wave (css/section-transition.css)
    .card-grid, .eyebrow       related-articles intro (css/card-grid.css, css/style.css)
    .article-card              related-articles cards (css/article-grid.css)
    .btn / .btn-teal           CTAs (css/style.css)

  This file only owns what's genuinely new: the compass column + sticky
  behaviour, and the article prose (lead/body/pull-quote/inline image).
*/

/* ---- Layout: compass column + content column ---- */

.article-layout {
  display: grid;
  /* Figma's exact widths as the MAXIMUM of each track, not a fixed size —
     same minmax() technique as .stat-showcase__body (css/stat-showcase.css)
     and .timeline-scroll__row (css/why-us-timeline.css). Fixed 411px+845px
     tracks need a container of at least 1280px; between the 1023px
     breakpoint (where this collapses to one column) and 1280px they no
     longer fit and pushed the whole layout into horizontal overflow. */
  grid-template-columns: minmax(0, 411px) minmax(0, 845px);
  gap: var(--space-2xl); /* 24px */
  /* Shared container pattern (see css/variables.css) — was `max-width:
     var(--page-container)` with no padding, which is the CONTENT width
     with no gutter added on top of it. Below 1280px, where that max-width
     stops binding, the whole layout (compass card AND article text) sat
     flush against the viewport edges with zero side margin — the "narrow
     white strip with no gutter" bug. This is the same two-property
     pattern every other section on the site already uses. */
  max-width: var(--page-container-outer);
  padding-inline: var(--page-gutter);
  margin: 0 auto;
  box-sizing: border-box;
}

/* ---- Compass ---- */
/* One sticky unit (card + share row together) — Figma groups both inside
   the same frame with matching top/bottom padding, so they scroll and
   release as a single block rather than the card alone. */

.article-compass {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl); /* 24px — closest shared-scale value to Figma's own 27px gap between the card and "Share this article" */
  position: sticky;
  /* Starts in normal flow; becomes sticky once its own top would sit
     42px below the sticky nav. --site-header-height is measured off the
     real header bar (js/article.js) rather than a hardcoded offset like
     `top: 130px` — it already accounts for the header's own breakpoint-
     dependent height, so this stays correct without a media query here. */
  top: calc(var(--site-header-height, 164px) + 42px);
  align-self: start; /* keeps the sticky element's own height intrinsic rather than stretched to the row */
}

.article-compass__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl); /* 32px */
  padding: var(--space-3xl) var(--space-4xl) var(--space-5xl); /* 32px 40px 42px */
  background: var(--colour-white);
  border: 1px solid var(--colour-light-grey);
  border-radius: 12px;
  box-sizing: border-box;
}

.article-compass__heading {
  display: flex;
  align-items: center;
  gap: var(--space-s); /* 8px */
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 24px;
  line-height: 28.8px;
  color: #117a90; /* Figma's own value — matches .article-card__date, css/article-grid.css */
}

/* Reuses the existing compass glyph (assets/icons/icon-compass.svg,
   already used by .content-filter__tile-icon--explore) via the same
   mask + background-colour technique — the file's own strokes are just
   shape data once masked, so it recolours to this heading's teal instead
   of its own hardcoded white. */
.article-compass__heading::before {
  content: "";
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-color: #117a90;
  mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI4LjUiLz4KICA8cGF0aCBkPSJtMTUuNiA4LjQtMi4zIDUuMy01LjMgMi4zIDIuMy01LjN6Ii8+Cjwvc3ZnPgo=') center / contain no-repeat;
  -webkit-mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI4LjUiLz4KICA8cGF0aCBkPSJtMTUuNiA4LjQtMi4zIDUuMy01LjMgMi4zIDIuMy01LjN6Ii8+Cjwvc3ZnPgo=') center / contain no-repeat;
}

.article-compass__divider {
  margin: 0;
  border: none;
  border-top: 1px solid var(--colour-light-grey);
}

.article-compass__index {
  display: flex;
  flex-direction: column;
  gap: var(--space-l); /* 16px, between the current-article title and the numbered list */
}

.article-compass__title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 18px;
  line-height: 25.2px;
  color: var(--colour-header-grey);
}

.article-compass__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-l); /* 16px between items */
  list-style: none;
  margin: 0;
  padding: 0;
}

.article-compass__list a {
  display: flex;
  gap: 10px;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 16px;
  line-height: 19.2px;
  color: var(--colour-body-grey);
  text-decoration: none;
}

.article-compass__list a:hover,
.article-compass__list a:focus-visible {
  color: var(--colour-brand-teal);
}

.article-compass__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.article-compass__tag {
  padding: var(--space-2xs) var(--space-m); /* 4px 12px */
  background: var(--colour-grey-101);
  border-radius: var(--space-2xs);
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 14px;
  line-height: 19.5px;
  letter-spacing: 0.42px;
  color: var(--colour-mid-grey);
}

.article-compass__back {
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
  color: #117a90;
  text-decoration: none;
}

.article-compass__back:hover,
.article-compass__back:focus-visible {
  text-decoration: underline;
}

/* ---- Share row ---- */
/* Centred under the compass column as a whole (not lined up with the
   card's own text inset) — the last thing in the sticky unit, so its own
   bottom margin is what creates breathing room before the sticky unit's
   column ends, rather than the row butting straight up against it. */

.article-compass__share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-l); /* 16px */
  margin-bottom: var(--space-4xl); /* 40px, breathing room before the next section */
}

.article-compass__share-label {
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
  color: var(--colour-sky-teal);
}

.article-compass__social {
  display: flex;
  align-items: center;
  gap: var(--space-l); /* 16px */
  list-style: none;
  margin: 0;
  padding: 0;
}

.article-compass__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--colour-sky-teal);
}

.article-compass__social a:hover,
.article-compass__social a:focus-visible {
  background: var(--colour-brand-teal);
}

.article-compass__social img {
  width: 11px;
  height: 12px;
}

/* ---- Content column ---- */

.article-content-col {
  min-width: 0;
  /* Matches the compass card's own bottom padding (Figma bakes the same
     144px into both columns so they read as one row height) — the
     compass's sticky travel naturally stops here, before the related-
     articles section begins. */
  padding-bottom: var(--space-section-l); /* 144px */
}

.article-feature-image {
  margin: 0 0 var(--space-6xl); /* 64px — Figma's own gap before the lead paragraph */
  border-radius: 12px;
  overflow: hidden;
}

.article-feature-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- Prose ---- */
/* 765px reading column inside the 845px content column (40px inset each
   side). Anchor targets for the Compass's numbered links are real
   <section id="…"> elements (see article.html) — scroll-margin-top
   accounts for the sticky nav the same way the Compass's own sticky
   offset does, so a clicked link never lands a heading under the nav. */

.article-body {
  padding-inline: var(--space-4xl); /* 40px each side → 765px reading column */
  box-sizing: border-box;
}

.article-body section {
  margin-top: var(--space-l); /* 16px between the anchor sections */
  scroll-margin-top: calc(var(--site-header-height, 164px) + 42px);
}

.article-body section:first-child {
  margin-top: 0;
}

.article-body section > * {
  margin-top: var(--space-l); /* 16px baseline rhythm between paragraphs within a section */
}

.article-body section > *:first-child {
  margin-top: 0;
}

.article-lead {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 600;
  /* Same fluid ramp as .text-h5 (css/typography.css) — this is that exact
     20→24px pair, just not written as the shared class here. Was a flat
     24px, which is fine at desktop but sits large/tight against a 320–390px
     column; the clamp keeps the approved 24px at 1280px+ and eases down
     below it like every other heading-scale element on the site. */
  font-size: clamp(20px, 18.25px + 0.449vw, 24px);
  line-height: 1.2;
  color: var(--colour-header-grey);
}

.article-body p {
  /* No margin here on purpose — the baseline rhythm above (.article-body
     section > *) already sets each paragraph's own margin-top, and this
     selector has the same specificity; a margin:0 here would silently
     win by source order and flatten the 16px rhythm back to 0. */
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 16px;
  line-height: 25.6px;
  color: var(--colour-body-grey);
}

.article-body a {
  color: var(--colour-orange);
  text-decoration: underline;
}

.article-pull-quote {
  margin: 0;
  padding-left: var(--space-3xl); /* 32px */
  border-left: 4px solid var(--colour-sky-teal);
  font-family: var(--font-primary);
  font-weight: 600;
  /* Same fluid ramp as .article-lead/.text-h5 above — was a flat 24px,
     which read as oversized once the 32px left padding also eats into a
     narrow mobile column. */
  font-size: clamp(20px, 18.25px + 0.449vw, 24px);
  line-height: 1.2;
  color: var(--colour-body-grey);
}

.article-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Pull quotes and inline images get extra breathing room (Figma pads
   32px above AND below each) rather than the flat 16px rhythm above —
   both selectors below have higher specificity than the plain `> *`
   rule, so they win regardless of source order. */
.article-body section > .article-pull-quote,
.article-body section > .article-image {
  margin: var(--space-5xl) 0;
}

.article-image {
  margin: var(--space-5xl) 0; /* 32px */
}

.article-body section > .article-pull-quote + *,
.article-body section > .article-image + * {
  margin-top: var(--space-3xl); /* 32px */
}

.article-caption {
  color: var(--colour-body-grey);
}

/* ---- Related-articles CTA, nested in .card-grid__inner ---- */
/* .article-grid__cta (css/article-grid.css) carries its own 40px
   margin-top for its original Boating Hub context, where .article-grid__inner
   is a plain block container with no gap of its own. Reused here inside
   .card-grid__inner instead (for its intro/eyebrow pattern), which already
   supplies a 64px flex gap between every child — without this override the
   two would stack to 104px. Scoped to this exact nesting only; the
   original Boating Hub usage is untouched. */
.card-grid__inner > .article-grid__cta {
  margin-top: 0;
}

/* ================================================================
   Responsive
   ================================================================ */
/* Compass returns to normal document flow (no longer sticky) once the
   layout collapses to a single column — matches the rest of the site's
   1024px structural breakpoint (css/page-hero.css, css/card-grid.css). */
@media (max-width: 1023px) {
  .article-layout {
    grid-template-columns: 1fr;
  }

  .article-compass {
    position: static;
    top: auto;
  }

  .article-content-col {
    padding-bottom: var(--space-section-s); /* 96px */
  }
}

@media (max-width: 767px) {
  .article-body {
    /* .article-layout itself now supplies the standard --page-gutter (see
       above), so the article text aligns to that single, consistent
       gutter instead of adding its own separate inset on top of it. */
    padding-inline: 0;
  }

  /* The "Your compass" TOC card takes up a lot of a phone screen for what
     it offers there — hidden on mobile only, per the brief. Only the card
     itself, not .article-compass as a whole: the share row is a separate
     child of that same wrapper and stays visible, now reading as the
     first thing after the hero instead of sitting under the card. */
  .article-compass__card {
    display: none;
  }

  .article-compass {
    gap: 0;
  }

  .article-compass__share {
    margin: 0 0 var(--space-3xl); /* 32px, down from 40 — was sized to close out the sticky column, which no longer applies once the card above it is hidden */
  }
}