/* ============================================
   HARA Content landing pages
   Shared layout for the editorial treatment pages
   (/trt, /bhrt, /gut) and the /treatments hub.
   Palette-aware via the .lp[data-palette] tokens
   defined in landing-pages.css. No new colors.
   ============================================ */

/* --- Hero --- */
.lc-hero {
  padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 7vw, 6rem);
  position: relative;
  overflow: hidden;
}
.lc-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.lc-hero__copy { max-width: 38rem; }
.lc-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: var(--lp-text);
  font-size: clamp(2.4rem, 1.4rem + 4vw, 4.6rem);
  margin: 1rem 0 1.25rem;
}
.lc-hero h1 em { font-style: italic; color: var(--lp-accent); }
.lc-hero__sub {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--lp-text-soft);
  margin-bottom: 2rem;
}
.lc-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.lc-hero__visual {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lc-hero__visual svg { width: 100%; height: auto; max-width: 460px; filter: drop-shadow(var(--lp-shadow)); }

/* Solo hero (no side visual): single centered column. Scoped to --solo so the
   shared .lc-hero 2-col grid used by featured/gut/bhrt stays untouched. */
.lc-hero--solo .lc-hero__grid { grid-template-columns: 1fr; }
.lc-hero--solo .lc-hero__copy {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.lc-hero--solo .lc-hero__actions { justify-content: center; }

/* --- Patient transformation banner: leads the page, edges fade into the olive bg ---
   The JPEG already carries the dark-olive clinic background (same family as
   --lp-bg #3a4534), so we fade all four edges to transparent and let the page
   background show through = no hard rectangle, no visible seam. Ratio preserved
   by width:100% + height:auto so the photos never smoosh horizontally. */
.lc-proof-banner {
  padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(0.5rem, 2vw, 1.5rem);
  background: var(--lp-bg);            /* #3a4534, the fade target */
}
.lc-proof-banner__figure {
  margin: 0 auto;
  max-width: 1280px;                   /* never upscale past the source = stays crisp */
}
.lc-proof-banner__img {
  display: block;
  width: 100%;
  height: auto;                        /* preserves 16:9 -> no horizontal smoosh */
  /* Dissolve all four edges into the page background */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;   /* legacy WebKit keyword for "intersect" */
          mask-image:
    linear-gradient(to right,  transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-composite: intersect;
}

/* --- Generic section heading --- */
.lc-head { max-width: 58ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.lc-head--center { margin-inline: auto; text-align: center; }
.lc-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--lp-text);
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.2rem);
  margin: 0.75rem 0 1rem;
}
.lc-head h2 em { font-style: italic; color: var(--lp-accent); }
.lc-prose p {
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--lp-text-soft);
  margin: 0 0 1rem;
  max-width: 62ch;
}
.lc-prose strong { color: var(--lp-text); font-weight: 600; }

/* --- Signs / who it's for: two-column chip list --- */
.lc-signs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem 2rem;
}
.lc-signs li {
  position: relative;
  padding: 0.9rem 0 0.9rem 1.75rem;
  border-bottom: 1px solid var(--lp-rule);
  color: var(--lp-text);
  font-size: var(--text-base);
}
.lc-signs li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.35rem;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--lp-accent);
}

/* --- Steps (how Hara does it) --- */
.lc-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  counter-reset: step;
}
.lc-step { padding-top: 1.5rem; border-top: 2px solid var(--lp-accent); }
.lc-step__n {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.2em;
  color: var(--lp-accent);
  display: block;
  margin-bottom: 0.5rem;
}
.lc-step h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  color: var(--lp-text);
  margin: 0 0 0.6rem;
}
.lc-step p { color: var(--lp-text-soft); line-height: 1.6; font-size: var(--text-base); margin: 0; }

/* --- Programs (TRT tiers) --- */
.lc-programs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: 2.5rem;
}
.lc-program {
  background: var(--lp-bg);
  border: 1px solid var(--lp-rule);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--lp-shadow);
}
.lc-program__len {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem);
  color: var(--lp-accent);
  margin: 0 0 0.5rem;
}
.lc-program p { color: var(--lp-text-soft); line-height: 1.6; margin: 0; font-size: var(--text-base); }

/* --- Benefits --- */
.lc-benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem) clamp(1.5rem, 4vw, 3rem);
}
.lc-benefit { padding-bottom: 1.25rem; border-bottom: 1px solid var(--lp-rule); }
.lc-benefit h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--lp-text);
  margin: 0 0 0.4rem;
}
.lc-benefit p { color: var(--lp-text-soft); line-height: 1.55; margin: 0; font-size: var(--text-base); }

/* --- Safety considerations --- */
.lc-considerations { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.lc-considerations li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--lp-rule);
  color: var(--lp-text-soft);
  line-height: 1.6;
  font-size: var(--text-base);
}
.lc-considerations li strong { color: var(--lp-text); }

/* --- FAQ accordion --- */
.lc-faq { max-width: 820px; margin-inline: auto; }
.lc-faq details {
  border-bottom: 1px solid var(--lp-rule);
  padding: 0.4rem 0;
}
.lc-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 2.5rem 1.1rem 0;
  position: relative;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--lp-text);
}
.lc-faq summary::-webkit-details-marker { display: none; }
.lc-faq summary::after {
  content: '+';
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--lp-accent);
  transition: transform var(--duration-base) var(--ease-out);
}
.lc-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.lc-faq details p {
  margin: 0 0 1.2rem;
  color: var(--lp-text-soft);
  line-height: 1.65;
  font-size: var(--text-base);
  max-width: 70ch;
}

/* --- Closing CTA band --- */
.lc-cta { text-align: center; }
.lc-cta h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem);
  color: var(--lp-text);
  margin: 0.75rem 0 1rem;
}
.lc-cta p { color: var(--lp-text-soft); max-width: 52ch; margin: 0 auto 2rem; line-height: 1.6; }

/* --- Treatments hub grid --- */
.lc-hub {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.lc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Item-card: the offering's collectible art floats up top on a rarity aura,
     diamond above it, copy below on the solid surface. --lc-card-img is set
     per card inline in featured.html. */
  padding: 124px clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--lp-rule);
  border-radius: var(--radius-lg);
  background-color: var(--lc-card-base);
  background-image:
    radial-gradient(ellipse 62% 90px at 50% 62px, var(--lc-aura) 0%, transparent 72%),
    var(--lc-card-img, none);
  background-repeat: no-repeat, no-repeat;
  background-position: center top, center 22px;
  background-size: auto, auto 84px;
  text-decoration: none;
  color: var(--lp-text);
  overflow: visible;
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.lp[data-palette="wellness"] .lc-card {
  --lc-card-base: #ebe4d3;
  --lc-aura: rgba(136, 146, 109, 0.16);
  --gem-trace: rgba(136, 146, 109, 0.75);
}
.lp[data-palette="clinic"] .lc-card {
  --lc-card-base: #2c3528;
  --lc-aura: rgba(196, 176, 120, 0.18);
  --gem-trace: rgba(196, 176, 120, 0.7);
}
/* Scene cards (people / media): fixed-height photo header band, then solid
   card. No bottom bleed; --scene-pos / --scene-zoom crop the bystander and
   lift the face. */
.lc-card--scene {
  padding-top: 0;
  background-image: none;
}
.lc-card__scene-img {
  display: block;
  height: 168px;
  margin: 0 calc(-1 * clamp(1.5rem, 3vw, 2.25rem)) clamp(1.25rem, 2.5vw, 1.75rem);
  border-top-left-radius: calc(var(--radius-lg) - 1px);
  border-top-right-radius: calc(var(--radius-lg) - 1px);
  background-image: var(--item-img);
  background-size: var(--scene-zoom, 140%);
  background-position: var(--scene-pos, 55% 30%);
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
}
.lc-card:hover { transform: translateY(-4px); box-shadow: var(--lp-shadow); }

/* Diamond gem, seated on the top edge, matching the home Featured panel. */
.lc-card::before {
  content: '';
  position: absolute;
  top: -19px;
  left: 50%;
  width: 16px;
  height: 16px;
  transform: translateX(-50%) rotate(45deg);
  background: linear-gradient(135deg, var(--olive) 0%, #c4b078 50%, var(--olive) 100%);
  border-radius: 3px;
  box-shadow: 0 3px 12px rgba(136, 146, 109, 0.4),
              inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  animation: gemGlow 6s ease-in-out infinite;
  z-index: 3;
}
.lc-card:hover::before { animation-duration: 4s; }

/* The line traces the gem's lower facets instead of slicing through it. */
.lc-card::after {
  content: '';
  position: absolute;
  top: -21px;
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translateX(-50%) rotate(45deg);
  background: transparent;
  border-right: 1.5px solid var(--gem-trace);
  border-bottom: 1.5px solid var(--gem-trace);
  z-index: 2;
}

@keyframes gemGlow {
  0%, 100% { box-shadow: 0 3px 12px rgba(136, 146, 109, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
  50%      { box-shadow: 0 3px 17px rgba(196, 176, 120, 0.5),  inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
}
.lc-card__tag {
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lp-accent);
  margin-bottom: 0.75rem;
}
.lc-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  margin: 0 0 0.6rem;
  color: var(--lp-text);
}
.lc-card p { color: var(--lp-text-soft); line-height: 1.55; margin: 0 0 1.25rem; font-size: var(--text-base); flex: 1; }
.lc-card__more { color: var(--lp-accent); font-size: var(--text-sm); letter-spacing: 0.04em; }

/* --- Responsive --- */
@media (max-width: 900px) {
  .lc-hero__grid { grid-template-columns: 1fr; }
  .lc-hero__visual { order: -1; max-width: 320px; margin-inline: auto; }
  .lc-steps { grid-template-columns: 1fr; }
  .lc-programs { grid-template-columns: 1fr; }
  .lc-hub { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .lc-signs { grid-template-columns: 1fr; }
  .lc-benefits { grid-template-columns: 1fr; }
  .lc-hub { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .lc-card { transition: none; }
  .lc-card:hover { transform: none; }
  .lc-card::before { animation: none; }
  .lc-faq summary::after { transition: none; }
}