/* =========================================================================
   Shared styles for Home + Procedures Index — the two "hub" pages.
   Verified against Figma Home desktop frame (34:2) and
   Procedures Index v2 desktop frame (485:2), 2026-07-25.
   ========================================================================= */

@import url("design-tokens.css");

.container { max-width: 1240px; margin: 0 auto; padding: 0 40px; }

/* ---------- Generic marketing hero (index-style, cream bg) ---------- */

.page-hero {
  background: var(--color-cream);
  padding: 40px 180px 56px;
}
.page-hero .breadcrumb { font-size: var(--text-footer); color: var(--color-sage); margin-bottom: 28px; }
.page-hero__kicker { font-size: var(--text-body); color: var(--color-body-muted); margin-bottom: 12px; }
.page-hero__title { font-family: var(--font-heading); font-size: var(--text-hero-h1); color: var(--color-ink); margin-bottom: 24px; max-width: 760px; }
.page-hero__desc { font-size: var(--text-body); color: var(--color-body-muted); max-width: 620px; margin-bottom: 32px; }
.page-hero__ctas { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- Section shell ---------- */

.marketing-section { padding: 64px 0; }
.marketing-section--alt { background: #FAFAF8; }
.marketing-section__eyebrow {
  font-size: var(--text-eyebrow); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-body-muted); margin-bottom: 12px;
}
.marketing-section__heading { font-family: var(--font-heading); font-size: 34px; color: var(--color-ink); margin-bottom: 16px; max-width: 640px; }
.marketing-section__desc { font-size: var(--text-body); color: var(--color-body-muted); max-width: 640px; margin-bottom: 32px; }
.marketing-section__header-row {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 40px;
}
.marketing-section__header-row .marketing-section__desc { margin-bottom: 0; }

/* ---------- Homepage hero collage ----------
   Rebuilt as a grid rather than shipped as one flat export, so the photos stay
   sharp at 2x and each carries its own alt text. Geometry from the Figma hero
   group (455px square, 3x3, 6px gutters). */

.hero--home { padding: 48px 40px; gap: 56px; justify-content: center; }
.hero--home .hero__content { max-width: 648px; }

.hero-collage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 6px;
  width: 455px; min-width: 455px; aspect-ratio: 1;
}
.hero-collage__tile { border-radius: var(--radius-sm); overflow: hidden; display: block; }
.hero-collage__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-collage__tile--sage { background: var(--color-sage); }
.hero-collage__tile--teal { background: var(--color-teal); }
.hero-collage__tile--mist { background: var(--color-blue-tint); }
/* Two collage-only shades that aren't in the token set yet */
.hero-collage__tile--sky  { background: #88CCF1; }
.hero-collage__tile--sea  { background: #2D848A; }

/* ---------- Trust band (hero stats) ---------- */

/* Full-bleed teal band, 2x2 of outlined tiles with white text, per Figma. */
.trust-band-wrap { background: var(--color-teal); padding: 56px 0; }
.trust-band {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px;
  max-width: 1058px; margin: 0 auto;
}
.trust-tile {
  border: 1px solid rgba(255, 255, 255, 0.55); border-radius: var(--radius-sm);
  padding: 28px 24px; text-align: center;
}
.trust-tile__stat { font-family: var(--font-heading); font-size: 34px; color: var(--color-white); display: block; margin-bottom: 4px; }
.trust-tile__label { font-size: var(--text-body); color: var(--color-white); display: block; }
.trust-tile__sub { font-size: var(--text-footer); color: rgba(255, 255, 255, 0.85); display: block; margin-top: 2px; }

/* Light variant — used on Meet Dr. Janette, where Figma puts the stats on the
   page background with hairline dividers rather than inside the teal band.
   Without this the tiles inherit the white-on-teal text and vanish. */
.trust-band--plain { border-top: 1px solid var(--color-blue-tint); border-bottom: 1px solid var(--color-blue-tint); gap: 0; max-width: none; }
.trust-band--plain .trust-tile { border: none; border-left: 1px solid var(--color-blue-tint); padding: 32px 24px; }
.trust-band--plain .trust-tile:first-child { border-left: none; }
.trust-band--3 { grid-template-columns: repeat(3, 1fr); }
.trust-band--plain .trust-tile__stat { color: var(--color-ink); }
.trust-band--plain .trust-tile__label,
.trust-band--plain .trust-tile__sub {
  color: var(--color-body-muted); font-size: var(--text-footer);
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* ---------- Credential badges (Dr. Janette section) ---------- */

.credential-badges { display: flex; align-items: center; gap: 70px; margin: 32px 0; }
.credential-badges img { width: 45px; height: 45px; object-fit: contain; display: block; }

/* ---------- Category / procedure cards (Procedures Index) ---------- */

.category-block { margin-bottom: 72px; }
.category-block:last-child { margin-bottom: 0; }
.category-block__badge {
  display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-teal); background: var(--color-teal-tint); border-radius: var(--radius-tag);
  padding: 4px 8px; margin-bottom: 16px;
}

.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }

.procedure-card {
  background: var(--color-white); border: 1px solid var(--color-blue-tint); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
}
.procedure-card__thumb {
  width: 100%; height: 140px; background: var(--color-hero-placeholder); overflow: hidden;
}
.procedure-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Square thumbs: the fixed 140px band cropped away the top and bottom of these
   clinical illustrations. Scoped to this grid -- the Procedures Index still uses
   the band and should be revisited when that page gets its real imagery. */
.card-grid--square-media .procedure-card__thumb { height: auto; aspect-ratio: 1; }

/* Technology cards pair a small square thumb with the description, per Figma */
.procedure-card__media { display: flex; gap: 16px; align-items: flex-start; margin: 0 24px 24px; }
.procedure-card__media img {
  width: 88px; height: 88px; flex: none; border-radius: var(--radius-md, 12px);
  object-fit: cover; display: block;
}
.procedure-card__media p { margin: 0; }
.procedure-card h3 { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-subhead); margin: 20px 24px 12px; }
.procedure-card p { font-size: var(--text-body); color: var(--color-body-muted); margin: 0 24px; flex: 1; }
.procedure-card__link { font-family: var(--font-heading); font-weight: 600; color: var(--color-teal); margin: 20px 24px 24px; display: inline-block; }

/* ---------- Treatment steps (featured treatment) ---------- */

.treatment-feature { display: flex; gap: 56px; align-items: flex-start; }
.treatment-feature__image { width: 400px; height: 500px; min-width: 400px; border-radius: var(--radius-lg); background: var(--color-hero-placeholder); overflow: hidden; }
.treatment-feature__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.treatment-feature__content { flex: 1; }
.treatment-feature--reverse { flex-direction: row-reverse; }
.treatment-steps { list-style: none; margin: 24px 0 32px; padding: 0; display: flex; flex-direction: column; gap: 0; }
.treatment-steps li { display: flex; gap: 16px; padding: 20px 0; border-top: 1px solid var(--color-blue-tint); }
.treatment-steps li:first-child { border-top: none; }
.treatment-steps__num {
  flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--color-teal); color: var(--color-white);
  font-family: var(--font-heading); font-weight: 500; display: flex; align-items: center; justify-content: center;
}
.treatment-steps h4 { font-family: var(--font-heading); font-weight: 500; font-size: var(--text-subhead); margin: 0 0 4px; }
.treatment-steps p { margin: 0; font-size: var(--text-body); color: var(--color-body-muted); }

/* ---------- Reviews (reused visual language from procedure pages) ---------- */

.reviews-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

/* ---------- CTA band (dark) ---------- */

.cta-band-alt {
  background: var(--color-ink); padding: 64px 180px; text-align: center;
}
.cta-band-alt h2 { font-family: var(--font-heading); font-size: 28px; color: var(--color-white); margin-bottom: 16px; }
.cta-band-alt p { font-size: var(--text-body); color: #C9CDC7; max-width: 640px; margin: 0 auto 32px; }
.cta-band-alt__ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cta-band-alt .btn--primary { background: var(--color-white); color: var(--color-ink); }
.cta-band-alt .btn--outline { background: transparent; color: var(--color-white); border: 1px solid #4D5752; }

/* ---------- Referral CTA (two-column) ---------- */

.referral-cta { display: flex; gap: 56px; align-items: center; background: var(--color-refer-box); border-radius: var(--radius-xl); padding: 56px; }
.referral-cta__image { width: 320px; height: 320px; min-width: 320px; border-radius: var(--radius-lg); background: var(--color-hero-placeholder); overflow: hidden; }
.referral-cta__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.referral-cta__content { flex: 1; }
.referral-cta h2 { font-family: var(--font-heading); font-size: 28px; margin-bottom: 16px; }
.referral-cta p { font-size: var(--text-body); color: var(--color-body-muted); margin-bottom: 32px; }
.referral-cta__ctas { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- Mobile ---------- */

@media (max-width: 900px) {
  .container { padding: 0 20px; }
  /* .hero flips to column-reverse here, so the collage sits below the copy */
  .hero--home { padding: 24px 20px 32px; gap: 32px; }
  .hero-collage { width: 100%; min-width: 0; max-width: 420px; }
  .page-hero { padding: 24px 20px 32px; }
  .marketing-section { padding: 48px 0; }
  .marketing-section__header-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .trust-band-wrap { padding: 32px 0; }
  .trust-band, .trust-band--3 { grid-template-columns: 1fr; gap: 16px; }
  .trust-band--plain .trust-tile { border-left: none; border-top: 1px solid var(--color-blue-tint); }
  .trust-band--plain .trust-tile:first-child { border-top: none; }
  .credential-badges { gap: 28px; justify-content: space-between; margin: 24px 0; }
  .card-grid, .card-grid--3, .card-grid--2 { grid-template-columns: 1fr; }
  .treatment-feature,
  .treatment-feature--reverse { flex-direction: column; }
  .treatment-feature__image { width: 100%; height: 260px; min-width: 0; }
  /* The slot goes landscape here, so a centred crop would clip faces off the top */
  .treatment-feature__image img { object-position: 50% 20%; }
  .reviews-grid-2 { grid-template-columns: 1fr; }
  .cta-band-alt { padding: 48px 20px; }
  .referral-cta { flex-direction: column; padding: 32px; }
  .referral-cta__image { width: 100%; height: 220px; min-width: 0; }
}