/* ============================================================
   DICE PEPTIDES — HOME PAGE STYLESHEET (front-page only)
   Homepage-exclusive sections: Hero, value Pillars, Calculator
   teaser. Loaded only on the front page (depends on base.css).
   Design System v1.0.
   ============================================================ */

/* ============================================================
   SECTION: Hero
   ============================================================ */
/* Art-directed hero: full-width split. Text aligns to the content frame on the
   left; the render fills the right track and bleeds to the screen edge so it reads
   as a dominant, intentionally-placed element — not an image floating in a column. */
.hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.25fr); align-items: center; gap: var(--sp-8); min-height: 620px; padding-block: var(--sp-16); }
.hero__copy { padding-left: calc((100vw - min(100vw, var(--container))) / 2 + var(--gutter)); padding-right: var(--sp-2); }
.hero__kicker { display: block; margin-bottom: var(--sp-5); }
/* Recomposed for the short two-line headline: larger, bolder lines that hold the
   original block's visual weight without widening the column or moving the image. */
.hero__title { color: var(--text-primary); font-size: clamp(30px, 7vw, 60px); line-height: 1.06; letter-spacing: -0.04em; text-wrap: balance; }
.hero__sub { margin-top: var(--sp-5); max-width: 460px; }
/* One button, with the COA link stacked beneath it as a quiet secondary action. */
.hero__cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); margin-top: var(--sp-8); }
.hero__cta-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--accent);
  text-decoration: none;
}
.hero__cta-link span { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); }
.hero__cta-link:hover { color: var(--accent-strong); }
.hero__cta-link:hover span { transform: translateX(3px); }
/* Two columns rather than a wrapping row: four items in the narrow hero column
   wrapped 3 + 1, which read as an accident. A 2×2 block is deliberate. */
.hero__trust { display: grid; grid-template-columns: repeat(2, max-content); gap: var(--sp-2) var(--sp-6); margin-top: var(--sp-4); font-size: 13px; color: var(--text-muted); }
.hero__trust li { display: inline-flex; align-items: center; gap: 6px; }
.hero__trust svg { width: 14px; height: 14px; color: var(--success); flex-shrink: 0; }
/* Hero render floats on the page. The updated Dice render is shot on a near-white studio
   background that blends into the light page; a soft radial mask feathers the outer edge
   so the backdrop never reads as a rectangle, and a subtle drop-shadow grounds the vials.
   Photo pixels untouched. */
.hero__media { position: relative; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.hero__media img {
  width: 100%; max-width: 720px; height: auto; max-height: 78vh; object-fit: contain;
  -webkit-mask-image: radial-gradient(92% 96% at 50% 50%, #000 72%, transparent 100%);
          mask-image: radial-gradient(92% 96% at 50% 50%, #000 72%, transparent 100%);
  filter: drop-shadow(0 22px 38px rgba(15,26,51,0.12));
}

/* ============================================================
   SECTION: Why Dice Peptides (value pillars)
   ============================================================ */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.pillar { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--sp-6); }
.pillar__icon { width: 28px; height: 28px; color: var(--accent); margin-bottom: var(--sp-3); }
.pillar__title { font-size: 20px; font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-2); }

/* ============================================================
   SECTION: Calculator teaser
   ============================================================ */
.calc { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: var(--sp-12); display: grid; grid-template-columns: 1fr auto; gap: var(--sp-10); align-items: center; }
.calc__body { max-width: 460px; }
.calc__title { color: var(--text-primary); margin-block: var(--sp-3); }
.calc__cta { margin-top: var(--sp-6); }
.calc__media img { max-height: 240px; object-fit: contain; }  /* single vial render — sized to sit beside the copy without dominating */

/* ============================================================
   RESPONSIVE (homepage-only)
   ============================================================ */
/* Hero stacks below the split breakpoint, re-ordered for mobile:
   kicker → heading → IMAGE → sub → CTAs → trust. The render is a sibling of
   .hero__copy, so `display: contents` lifts the copy's children into the hero's
   flex column, letting the image sit right below the heading and above the
   buttons. `order` sets the sequence. Desktop (>1139px) keeps the 2-col grid. */
@media (max-width: 1139px) {
  .hero { display: flex; flex-direction: column; gap: 0; min-height: 0; overflow: visible; padding-inline: var(--gutter); }
  .hero__copy { display: contents; }
  .hero__kicker { order: 1; }
  .hero__title  { order: 2; }
  .hero__media  { order: 3; margin: var(--sp-6) auto 0; max-width: 520px; width: 100%; justify-self: auto; }
  .hero__sub    { order: 4; }
  .hero__cta    { order: 5; }
  .hero__trust  { order: 6; }
}

@media (max-width: 900px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .calc { grid-template-columns: 1fr; }
  .calc__media { display: none; }
}

@media (max-width: 600px) {
  .pillars { grid-template-columns: 1fr; }
  /* The 48px card padding is too heavy on phones — it squeezed the CTA against
     the card edge at ≤360px. Ease it so the copy and button keep clear margins. */
  .calc { padding: var(--sp-6); }

  /* ---- Phone hero: compressed ~30% -------------------------------------
     Spacing only — type scale, image, copy and colours are untouched. Every
     value below is a tightened version of the desktop rhythm, not a new one,
     so the section reads as deliberate rather than cramped. Goal: hero, CTA
     and trust row land within the first screen on a typical phone. */
  .hero { padding-block: var(--sp-5) var(--sp-4); }   /* was 64/64 */
  .hero__kicker { margin-bottom: var(--sp-2); }        /* was 20 */

  /* The stacked hero inherits align-items:center from the desktop grid, which
     centres any child narrower than the column — the kicker and, now that it is
     a single button, the CTA. The headline, copy and trust list are full-width
     and so read as left-aligned, and the mix looked accidental. Stretch the two
     narrow blocks so the whole hero is one clean left-aligned column. */
  .hero__kicker, .hero__cta { align-self: stretch; }
  .hero__media  { margin-top: var(--sp-2); }           /* was 24 */
  .hero__sub    { margin-top: var(--sp-3); }           /* was 20 */
  .hero__cta    { margin-top: var(--sp-4); }           /* was 32 */
  .hero__trust  { margin-top: var(--sp-4); }

  /* The render is a 3:2 studio shot with generous empty space above and below
     the vials. Cropping the frame to 16:9 removes ~35px of that dead space
     while the vials keep their size — the product does not shrink, the padding
     around it does. The radial mask already feathers the edges, so the tighter
     frame is invisible. Same image file, untouched pixels. */
  .hero__media img { aspect-ratio: 16 / 9; object-fit: cover; }

  /* Two calm columns instead of a ragged wrapped row. */
  .hero__trust {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--sp-2) var(--sp-3);
    font-size: 12.5px;
  }
  .hero__trust li { align-items: flex-start; }
  .hero__trust svg { margin-top: 2px; }

  /* Products sooner: the band that used to buffer the hero is gone, so the
     first section only needs a modest lead-in. */
  .hero + .section { padding-top: var(--sp-6); }
}

/* PROMO BANNER — the cobalt announcement band is a shared component and now
   lives in base.css (it renders site-wide: the sale strip on the homepage, the
   research-use notice everywhere else). Nothing homepage-specific remains. */