/* =====================================================================
   THERALETIK STEGLITZ — home.css
   Section khusus homepage: section text-styles, intro/metrics,
   services-accordion, why/treatment, praxis-carousel, testimonials.
   Butuh globals.css (tokens + nav/hero/footer) dimuat lebih dulu.
   Token + rem/clamp only (no px, no hex).
   ===================================================================== */

/* shared section eyebrow (home sections) */
.intro_eyebrow, .svc_eyebrow, .why_eyebrow, .praxis_eyebrow, .voice_eyebrow {
  font-weight: 500;
  font-size: var(--fs-tiny);
  color: var(--brand-o60);
}
.svc_eyebrow { color: var(--white-o60); }

/* shared big section heading colors (typography → .u-text-style-h2) */
.intro_title, .why_title, .praxis_title, .voice_title { color: var(--brand-500); }
.svc_title { color: var(--light-100); }
.intro_title_accent, .why_title_accent, .praxis_title_accent, .voice_title_accent { color: var(--brand-200); }
.svc_title_accent { color: var(--brand-400); }

/* ============================ INTRO / METRICS ============================ */
.intro_sec { background: var(--light-100); padding-block: var(--sp-sect); }
.intro_wrap { display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); }
.intro_head { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); max-width: 45.5rem; text-align: center; }
.intro_lead { font-weight: 500; font-size: var(--fs-tiny); color: var(--brand-o60); }

.intro_media { position: relative; display: flex; justify-content: center; width: 100%; padding-block: 1rem; }
.intro_photo { border-radius: var(--r-large); box-shadow: var(--shadow-photo); overflow: hidden; border: var(--bw) solid var(--white-o20); }
.intro_photo_img { width: 100%; height: 100%; object-fit: cover; }
.intro_photo.is-center { position: relative; z-index: 2; width: 25rem; height: 30.0625rem; }   /* 400x481 */
.intro_photo.is-left, .intro_photo.is-right { position: absolute; top: 50%; z-index: 1; width: 21.5rem; height: 25.8125rem; }  /* 344x413 */
.intro_photo.is-left  { left: 50%; transform: translate(-95%, -50%) rotate(-6deg); }
.intro_photo.is-right { left: 50%; transform: translate(-5%, -50%) rotate(6deg); }

.stats_row { display: flex; align-items: center; gap: var(--sp-4); }
.stat_item { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); width: 15rem; text-align: center; }
.stat_num { color: var(--brand-200); }
.stat_label { font-weight: 500; font-size: var(--fs-tiny); color: var(--brand-o60); }
.stat_divider { width: var(--bw); height: 3.34rem; background: var(--brand-o20); }

/* ============================ SERVICES (DARK BAND, accordion) ============================ */
.svc_sec {
  position: relative;
  background: var(--brand-500);
  padding-block: var(--sp-sect-lg);
  border-radius: var(--r-40);
  overflow: hidden;
  isolation: isolate;
}
.svc_glow { position: absolute; z-index: -1; pointer-events: none; max-width: none; }
.svc_glow_a { width: 38.5rem; right: -10rem; top: -16rem; }
.svc_glow_b { width: 46rem; left: -14rem; bottom: -6rem; }
.svc_wrap { display: flex; flex-direction: column; gap: var(--sp-8); }
.svc_head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-7); }
.svc_head_text { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 43.5rem; }
.svc_lead { font-weight: 500; font-size: var(--fs-tiny); color: var(--white-o60); }
.svc_cta { flex: 0 0 auto; }

.svc_grid { display: flex; align-items: stretch; gap: var(--sp-4); height: 35rem; }
/* accordion card: collapsed by default, .is-open expands */
.svc_card {
  position: relative;
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column;
  padding: var(--sp-1);
  border: var(--bw) solid var(--white-o20);
  background: var(--white-o05);
  border-radius: var(--r-large);
  overflow: hidden;
  color: inherit;
  transition: flex-grow .45s ease, flex-basis .45s ease, background .45s ease, border-color .45s ease;
}
.svc_card.is-open {
  flex: 0 0 39.5625rem;            /* 633 */
  gap: var(--sp-3);
  background: var(--light-900);
  border-color: var(--brand-o20);
}
.svc_card:focus-visible { outline: var(--bw2) solid var(--brand-400); outline-offset: .25rem; }

/* expanded content (number + title + desc + image) */
.svc_card_expanded { display: none; flex-direction: column; gap: var(--sp-3); flex: 1; min-height: 0; }
.svc_card.is-open .svc_card_expanded { display: flex; }
.svc_card_head {
  display: flex; gap: var(--sp-4);
  padding: var(--sp-3);
  background: var(--light-1000);
  border: var(--bw) solid var(--brand-o20);
  border-radius: var(--r-main);
}
.svc_card_num { color: var(--brand-500); }
.svc_card_num.is-accent { color: var(--brand-400); }
.svc_card_body { display: flex; flex-direction: column; gap: var(--sp-1); }
.svc_card_title { line-height: var(--lh-snug); color: var(--brand-500); }
.svc_card_text { font-weight: 500; font-size: var(--fs-tiny); color: var(--brand-o60); }
.svc_card_media { flex: 1; min-height: 0; border: var(--bw) solid var(--brand-o20); border-radius: var(--r-main); overflow: hidden; background: var(--dark-100); }
.svc_card_img { width: 100%; height: 100%; object-fit: cover; }

/* collapsed content (vertical title + number) */
.svc_card_collapsed {
  display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--sp-4);
  padding: var(--sp-3);
}
.svc_card.is-open .svc_card_collapsed { display: none; }
.svc_card_vtitle {
  writing-mode: vertical-rl; transform: rotate(180deg);
  color: var(--brand-400); white-space: nowrap;
}

/* ============================ WHY / TREATMENT CARDS ============================ */
.why_sec { background: var(--light-100); padding-block: var(--sp-sect); }
.why_wrap { display: flex; flex-direction: column; gap: var(--sp-8); }
.why_head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-7); }
.why_head_text { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 35.3125rem; }
.why_lead { max-width: 24.8125rem; font-weight: 500; font-size: var(--fs-tiny); color: var(--brand-o60); }

.why_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.why_card {
  position: relative;
  display: flex; gap: var(--sp-4);
  padding: var(--sp-3);
  background: var(--light-900);
  border: var(--bw) solid var(--brand-o10);
  border-radius: var(--r-large);
  overflow: hidden;
}
.why_card_leaf { position: absolute; top: -.9375rem; right: -1rem; width: 19.36rem; height: auto; z-index: 0; pointer-events: none; }
.why_card_media { flex: 0 0 15.6875rem; height: 20.9375rem; border: var(--bw) solid var(--brand-o20); border-radius: var(--r-main); overflow: hidden; position: relative; z-index: 1; }
.why_card_img { width: 100%; height: 100%; object-fit: cover; }
.why_card_body { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-4); }
.why_card_num { line-height: var(--lh-snug); color: var(--brand-500); }
.why_card_meta { display: flex; flex-direction: column; gap: var(--sp-3); }
.why_card_title { line-height: var(--lh-snug); color: var(--brand-500); }
.why_card_text { font-weight: 500; font-size: var(--fs-tiny); color: var(--brand-o60); }

/* ============================ PRAXIS / CAROUSEL ============================ */
.praxis_sec { background: var(--light-100); padding-block: var(--sp-sect); display: flex; flex-direction: column; gap: var(--sp-8); overflow: hidden; }
.praxis_head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-7); }
.praxis_head_text { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 47.8125rem; }
.praxis_lead { max-width: 29.875rem; font-weight: 500; font-size: var(--fs-tiny); color: var(--brand-o60); }
.praxis_nav { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; }
.praxis_arrow {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--sp-3) var(--sp-4);
  border: var(--bw) solid var(--brand-o10);
  border-radius: var(--r-100);
  transition: background .2s ease, transform .2s ease;
}
.praxis_arrow.is-next { background: var(--light-900); }
.praxis_arrow:hover { background: var(--brand-500); transform: translateY(-.125rem); }
.praxis_arrow:hover .praxis_arrow_icon { filter: invert(1) brightness(2); }
.praxis_arrow:focus-visible { outline: var(--bw2) solid var(--brand-500); outline-offset: .125rem; }
.praxis_arrow_icon { width: 1.5rem; height: 1.5rem; }

.praxis_track {
  display: flex; gap: var(--sp-4);
  padding-inline: var(--band-gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--band-gutter);
  scrollbar-width: none;
}
.praxis_track::-webkit-scrollbar { display: none; }
.praxis_card { flex: 0 0 50rem; max-width: 85vw; display: flex; flex-direction: column; gap: var(--sp-3); scroll-snap-align: start; }
.praxis_card_media { height: 34.5rem; border: var(--bw) solid var(--brand-o20); border-radius: var(--r-large); overflow: hidden; background: var(--light-1000); }
.praxis_card_img { width: 100%; height: 100%; object-fit: cover; }
.praxis_card_label { font-weight: 500; color: var(--brand-500); }

/* ============================ TESTIMONIALS ============================ */
.voice_sec { background: var(--light-100); padding-top: var(--sp-sect); padding-bottom: var(--sp-sect-lg); display: flex; flex-direction: column; gap: var(--sp-8); }
.voice_head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-7); }
.voice_head_text { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 35.3125rem; }
.voice_lead { max-width: 24.8125rem; font-weight: 500; font-size: var(--fs-tiny); color: var(--brand-o60); }

/* swiper (native scroll + arrows; infinite loop driven by JS) */
.voice_stage { position: relative; display: flex; align-items: center; justify-content: center; }
.voice_track { display: flex; gap: var(--sp-4); overflow-x: auto; scrollbar-width: none; padding-block: .25rem; }
.voice_track::-webkit-scrollbar { display: none; }
.voice_card {
  position: relative; flex: 0 0 27.3125rem; max-width: 85vw; height: 35.75rem;
  border: var(--bw) solid var(--brand-o20);
  border-radius: var(--r-main);
  overflow: hidden;
}
.voice_card_img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.voice_card_scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 35%, var(--black-o55)); }
.voice_card_body { position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }
.voice_card_quote { line-height: var(--lh-snug); color: var(--light-100); }
.voice_card_meta { display: flex; align-items: center; gap: var(--sp-3); font-weight: 500; font-size: var(--fs-tiny); }
.voice_card_name { color: var(--light-100); }
.voice_card_role { color: var(--white-o60); }

.voice_arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.75rem; height: 3.75rem;
  background: var(--light-100);
  border: var(--bw) solid var(--brand-o10);
  border-radius: var(--r-999);
  box-shadow: var(--shadow-photo);
  transition: background .2s ease, transform .2s ease;
}
.voice_arrow.is-prev { left: var(--site-margin); transform: translate(-50%, -50%); }
.voice_arrow.is-next { right: var(--site-margin); transform: translate(50%, -50%); }
.voice_arrow:hover { background: var(--brand-500); }
.voice_arrow.is-prev:hover { transform: translate(-50%, -50%) scale(1.06); }
.voice_arrow.is-next:hover { transform: translate(50%, -50%) scale(1.06); }
.voice_arrow:hover .voice_arrow_icon { filter: invert(1) brightness(2); }
.voice_arrow:focus-visible { outline: var(--bw2) solid var(--brand-500); outline-offset: .125rem; }
.voice_arrow_icon { width: 1.5rem; height: 1.5rem; }

/* ============================ RESPONSIVE (home) ============================ */
@media (max-width: 60rem) {
  .svc_head, .why_head, .praxis_head, .voice_head { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .why_grid { grid-template-columns: minmax(0, 1fr); }
  .svc_grid { flex-direction: column; height: auto; }
  .svc_card { flex: none; gap: var(--sp-3); background: var(--light-900); border-color: var(--brand-o20); }
  .svc_card_expanded { display: flex; }
  .svc_card_collapsed { display: none; }
  .svc_card_media { min-height: 16rem; }
}

@media (max-width: 48rem) {
  .stats_row { flex-wrap: wrap; justify-content: center; row-gap: var(--sp-5); }
  .voice_card { flex-basis: 22rem; height: 30rem; }
}

@media (max-width: 30rem) {
  .voice_arrow { display: none; }
  .intro_photo.is-left, .intro_photo.is-right { display: none; }
  .intro_photo.is-center { width: 100%; max-width: 22rem; height: auto; aspect-ratio: 400 / 481; }
  .stat_item { width: 100%; }
  .stat_divider { display: none; }
  .why_card { flex-direction: column; }
  .why_card_media { flex-basis: auto; width: 100%; height: 16rem; }
}