/* ==========================================================================
   GNC SG — Article Detail Page
   ========================================================================== */

.article-detail {
  max-width: var(--container-narrow);
  margin: 0 auto;
}

/* Category badge */
.article-detail__badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
}

.article-detail__title {
  margin-bottom: var(--space-6);
}

.article-detail__hero-image {
  margin-bottom: var(--space-8);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Article.png shows a 16:9 banner. The "wide" image style only scales to
   1090px and keeps the source ratio, so a square or portrait upload would
   otherwise render as a very tall block and push the body off-screen. */
.article-detail__hero-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Section headings ("Shop This Article", "Related Articles") — plain bold,
   matching the design. */
.article-detail__shop h2 {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-8);
}

.article-detail__body {
  margin-bottom: var(--space-12);
}

.article-detail__body h2 {
  margin-top: var(--space-8);
}

.article-detail__body h3 {
  margin-top: var(--space-6);
}

/* ---- Shop This Article section (full-bleed band below the article) ----
   The section now sits outside <article>, so it spans the page on its own and
   its inner .container aligns with the breadcrumb — no negative-margin
   breakout, which only ever widened it to the article column plus padding. */
.article-detail__shop {
  background-color: var(--color-bg-muted);
}

/* ---- Related Articles section (full width below article) ---- */

.related-articles {
  background-color: var(--color-bg);
}

.related-articles h2 {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-8);
}

/* ==========================================================================
   Mobile (design/mobile/article/article.png, drawn at 375px)
   ==========================================================================
   Measured at 375px: a 22px category badge, a 28px title on 29px, a 16:10
   hero, then the two rails below the body stop being rails — "Shop This
   Article" becomes a 2x2 grid of 165px cards 12px apart, and "Related
   Articles" becomes a single column. Both are carousels at every other width.
   ========================================================================== */

@media (max-width: 767px) {

  .article-detail__title {
    font-size: var(--font-size-2xl);
    line-height: 29px;
    margin-bottom: var(--space-4);
  }

  .article-detail__badge {
    margin-bottom: var(--space-3);
  }

  /* 16:10 here against the 16:9 the desktop banner uses. */
  .article-detail__hero-image {
    margin-bottom: var(--space-5);
  }

  .article-detail__hero-image img {
    aspect-ratio: 16 / 10;
  }

  .article-detail__body {
    margin-bottom: var(--space-8);
  }

  .article-detail__shop h2,
  .related-articles h2 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-5);
  }

  /* ---- Rails become static layouts ----
     carousel.js has already run by this point: it moves the slides into a
     .carousel-strip and then writes display, gap and transform onto that strip
     — and the slide widths onto each slide — as inline styles. Inline beats
     any stylesheet rule, so every property being unwound below needs
     !important. It is load-bearing here, not a shortcut. The arrows and dots
     are already hidden below 768px by carousel.css.

     Done here rather than by teaching carousel.js to skip these rails: the
     breakpoint would then have to be handled in two places, and a resize past
     it would need the whole rail torn down and rebuilt. */
  .article-detail__shop .carousel-track,
  .related-articles .carousel-track {
    overflow: visible;
    /* The rail no longer moves, so it should not claim horizontal drags. */
    touch-action: auto;
    cursor: default;
  }

  .article-detail__shop .carousel-strip,
  .related-articles .carousel-strip {
    display: grid !important;
    transform: none !important;
  }

  .article-detail__shop .carousel-slide,
  .related-articles .carousel-slide {
    min-width: 0 !important;
    max-width: none !important;
  }

  /* Four product cards, two up. 165px each with a 12px gutter inside the
     343px content box. */
  .article-detail__shop .carousel-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px !important;
  }

  /* Article cards read full width, one under the other. */
  .related-articles .carousel-strip {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6) !important;
  }
}