/* ===================================================================
   CONDITIONS WE TREAT — Vibha Jain Hypnotherapy
   Page-specific layouts. Reuses tokens from main.css.
   Unique compositions: indexed jump-grid, CSS-only category filter,
   editorial anchored condition cards.
   =================================================================== */

/* ---------- PAGE HERO EMBELLISHMENT ---------- */
.cond-hero { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.cond-hero .crumbs { margin-bottom: 1.8rem; }
.cond-hero-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}
.cond-hero-figure {
  position: relative;
  align-self: stretch;
  min-width: 0;
}
.cond-hero-figure .media-frame { width: 100%; height: 100%; min-height: 320px; }
.cond-hero-figure .float-note {
  position: absolute; left: 0; bottom: 8%;
  padding: 1rem 1.3rem; max-width: 220px;
}
.cond-hero-figure .float-note p { font-size: 0.82rem; line-height: 1.5; color: var(--forest); }
.cond-hero-figure .float-note .pill { margin-bottom: 0.6rem; }
@media (max-width: 980px){
  .cond-hero-grid { grid-template-columns: 1fr; }
  .cond-hero-figure { display: none; }
}

/* ---------- JUMP INDEX (anchored chips) ---------- */
.cond-index {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2rem, 4vw, 3rem);
}
.cond-index-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.8rem 1.4rem;
  margin-bottom: 1.6rem;
}
.cond-index-head h2 { font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem); }
.cond-index-head .muted { font-size: 0.88rem; }
.jump-cloud { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.jump-chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.55rem 1.05rem; border-radius: 100px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.45);
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0.01em; color: var(--ink);
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.jump-chip::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold-soft); transition: transform .4s var(--ease);
}
.jump-chip:hover {
  background: var(--forest); color: var(--ivory); border-color: var(--forest);
  transform: translateY(-2px);
}
.jump-chip:hover::before { transform: scale(1.6); background: var(--champagne); }

/* ---------- CATEGORY FILTER (CSS-only via radio) ---------- */
.filter-bar { display: none; }
.filter-tabs {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin-bottom: clamp(2.2rem, 4vw, 3.4rem);
}
.filter-tab {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.7rem 1.3rem; border-radius: 100px;
  border: 1px solid var(--line); cursor: pointer;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--forest); background: transparent;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
  user-select: none;
}
.filter-tab .fc-count {
  font-size: 0.7rem; opacity: 0.6; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.filter-tab:hover { border-color: var(--gold); }

/* checked state lights the matching tab + filters cards */
#fa:checked ~ .filter-tabs [for="fa"],
#fm:checked ~ .filter-tabs [for="fm"],
#fc:checked ~ .filter-tabs [for="fc"],
#fh:checked ~ .filter-tabs [for="fh"],
#fs:checked ~ .filter-tabs [for="fs"] {
  background: var(--forest); color: var(--ivory); border-color: var(--forest);
}
#fa:checked ~ .filter-tabs [for="fa"] .fc-count,
#fm:checked ~ .filter-tabs [for="fm"] .fc-count,
#fc:checked ~ .filter-tabs [for="fc"] .fc-count,
#fh:checked ~ .filter-tabs [for="fh"] .fc-count,
#fs:checked ~ .filter-tabs [for="fs"] .fc-count { opacity: 0.85; }

/* default (fa = all) shows everything; other filters hide non-matching */
#fm:checked ~ .cond-track .cond-card:not([data-cat~="mind"]),
#fc:checked ~ .cond-track .cond-card:not([data-cat~="confidence"]),
#fh:checked ~ .cond-track .cond-card:not([data-cat~="habits"]),
#fs:checked ~ .cond-track .cond-card:not([data-cat~="sleep"]) {
  display: none;
}
/* hide category band headings when a specific filter is active */
#fm:checked ~ .cond-track .cat-band,
#fc:checked ~ .cond-track .cat-band,
#fh:checked ~ .cond-track .cat-band,
#fs:checked ~ .cond-track .cat-band { display: none; }

/* ---------- CONDITION TRACK + CATEGORY BANDS ---------- */
.cond-track { display: flex; flex-direction: column; gap: clamp(2.4rem, 5vw, 4rem); }
.cat-band {
  display: flex; align-items: center; gap: 1.2rem;
  margin-top: clamp(1rem, 2vw, 2rem);
}
.cat-band:first-child { margin-top: 0; }
.cat-band h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem);
  white-space: nowrap;
}
.cat-band .cb-num {
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.28em; color: var(--gold-ink); text-transform: uppercase;
}
.cat-band::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

/* card grid within each band */
.cond-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.1rem, 2vw, 1.8rem);
}
@media (max-width: 980px){ .cond-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px){ .cond-grid { grid-template-columns: 1fr; } }

/* ---------- CONDITION CARD ---------- */
.cond-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--ivory);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  overflow: hidden;
  scroll-margin-top: 110px;
  transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}
.cond-card::before {
  content: ""; position: absolute; inset: 0 auto auto 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--gold-soft), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease);
}
.cond-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(172,139,79,0.4);
}
.cond-card:hover::before { transform: scaleX(1); }
.cond-card:target {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(172,139,79,0.16), var(--shadow-md);
}

.cond-card .icon-badge { margin-bottom: 1.2rem; }
.cond-card:hover .icon-badge { background: var(--forest); color: var(--champagne); }
.cond-card h3 {
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  margin-bottom: 0.7rem;
}
.cond-card p {
  color: var(--text-soft); font-size: 0.94rem; line-height: 1.62;
  margin-bottom: 1.3rem;
}
.cond-card .link-underline { margin-top: auto; font-size: 0.84rem; }
.cond-tagline {
  display: inline-block;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-ink); margin-bottom: 0.9rem;
}

/* ---------- MID-PAGE REASSURANCE STRIP ---------- */
.reassure { position: relative; overflow: hidden; }
.reassure-grid {
  display: grid; grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
@media (max-width: 980px){ .reassure-grid { grid-template-columns: 1fr; } }
.reassure-figure .media-frame { box-shadow: var(--shadow-md); }
.reassure-list { display: grid; gap: 1.4rem; margin-top: 2rem; }
.reassure-list li {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start;
}
.reassure-list .ri-dot {
  width: 38px; height: 38px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: rgba(157,171,144,0.18); color: var(--sage-dp);
  border: 1px solid var(--line-soft);
}
.reassure-list .ri-dot svg { width: 19px; height: 19px; stroke-width: 1.5; }
.reassure-list b { display: block; color: var(--forest-dp); font-family: var(--font-sans); font-weight: 600; font-size: 0.98rem; margin-bottom: 0.2rem; }
.reassure-list p { color: var(--text-soft); font-size: 0.9rem; margin: 0; }

/* ---------- FAQ (reuses .acc-item) ---------- */
.cond-faq-grid {
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4.5rem);
}
@media (max-width: 980px){ .cond-faq-grid { grid-template-columns: 1fr; } }

/* ---------- CLOSING CTA ---------- */
.cond-cta-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
@media (max-width: 980px){ .cond-cta-grid { grid-template-columns: 1fr; } }
.cond-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; }
.cond-cta-figure .media-frame { box-shadow: var(--shadow-lg); }
@media (max-width: 680px){ .cond-cta-figure { display: none; } }


/* ---------- QA FIXES ---------- */
/* the tall hero frame must never be wider than its own column */
.cond-hero-figure .media-frame.tall { aspect-ratio: auto; }
.cond-hero-figure .media-frame.tall > picture { position: absolute; inset: 0; }
@media (max-width: 1080px){
  .cond-hero-figure .float-note { left: 0; right: auto; max-width: 190px; }
}

/* category band headings must be allowed to wrap on narrow phones */
@media (max-width: 560px){
  .cat-band { flex-wrap: wrap; gap: .5rem .9rem; }
  .cat-band h2 { white-space: normal; }
  .cat-band::after { flex-basis: 100%; }
}