/* Renova — Signature differentiator: "Treatment Finder"  (Kai)
   PURE progressive enhancement. Consumes Cass's :root palette. Hooks (Cass-provided,
   on the Treatments page):
     <div class="finder">
       <button class="finder__tab" data-goal="…"> × 5      (goal selector)
       <section class="finder__group" data-goal="…"> × 5   (matching content groups)
         <article class="tx-card" data-tx> …               (expandable treatment cards)
   signature.js reads data-goal off the DOM (never hardcodes the goal strings), adds .js
   to .finder, injects a per-group mobile accordion header + panel wrapper, and wires the
   card accordion. Active tab/group use .is-current (NOT Cass's .is-active); accordions
   use .is-open. Both are confirmed free of collision.

   DESKTOP (>=721px): tabbed grid — tabs shown, ONE group visible, cards are an accordion.
   MOBILE (<=720px): the 5 goal-groups become a clean STACKED ACCORDION — tabs hide,
   injected group headers toggle each group open/closed, cards remain an accordion inside.
   Usable at 375 exactly as at 1280 (core feature).

   FALLBACK: no-JS -> .finder never gets .js -> nothing is hidden -> all groups + all cards
   render fully expanded (Cass's crawlable state — good for AEO). Reduced-motion -> instant
   show/hide (JS sets max-height with no transition). */

/* ===== tabs ===== */
.finder.js .finder__tab{
  cursor: pointer;
  transition: color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}
.finder.js .finder__tab[aria-selected="true"],
.finder.js .finder__tab.is-current{
  color: var(--paper, #fff);
  background-color: var(--mauve-deep, #8E6A6D);
  /* restrained gold-marble sheen on mauve */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold, #C2A15A) 55%, transparent),
              0 8px 20px color-mix(in srgb, var(--mauve-deep, #8E6A6D) 30%, transparent);
}

/* ===== injected mobile group-accordion header (hidden on desktop) ===== */
.finder.js .finder__acc{
  display: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.9rem, 3vw, 1.15rem) clamp(1rem, 4vw, 1.3rem);
  font-family: var(--f-disp, serif);
  font-size: clamp(1.1rem, 4.5vw, 1.35rem);
  color: var(--plum-ink, #4A363A);
  background: var(--paper, #fff);
  border: 1px solid var(--line, rgba(74, 54, 58, .12));
  border-left: 3px solid var(--mauve, #B08D8F);
  border-radius: var(--rad, 4px);
  margin-top: 0.6rem;
}
.finder.js .finder__acc .finder__acc-icon{
  flex: 0 0 auto;
  width: 0.7rem;
  height: 0.7rem;
  border-right: 2px solid var(--gold-deep, #A6863F);
  border-bottom: 2px solid var(--gold-deep, #A6863F);
  transform: rotate(45deg);
  transition: transform 260ms ease;
}
.finder.js .finder__acc[aria-expanded="true"]{
  color: var(--paper, #fff);
  background: var(--mauve-deep, #8E6A6D);
  border-color: var(--mauve-deep, #8E6A6D);
}
.finder.js .finder__acc[aria-expanded="true"] .finder__acc-icon{
  border-color: var(--paper, #fff);
  transform: rotate(-135deg);
}

/* group-panel wrapper injected by JS (holds the group's cards) */
.finder.js .finder__group-panel{ }

/* ===== treatment-card accordion (all widths) ===== */
.finder.js .tx-card__trigger{
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.finder.js .tx-card__trigger::after{
  content: "";
  flex: 0 0 auto;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--mauve-deep, #8E6A6D);
  border-bottom: 2px solid var(--mauve-deep, #8E6A6D);
  transform: rotate(45deg);
  transition: transform 260ms ease;
}
.finder.js .tx-card.is-open > .tx-card__trigger::after{ transform: rotate(-135deg); }

.finder.js .tx-card__panel{
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 420ms ease, opacity 300ms ease;
}
.finder.js .tx-card.is-open > .tx-card__panel{
  max-height: 40rem;   /* generous ceiling; card detail is short */
  opacity: 1;
}

/* ===== DESKTOP: tabbed grid ===== */
@media (min-width: 721px){
  .finder.js .finder__acc{ display: none !important; }
  .finder.js .finder__group{ display: none; }
  .finder.js .finder__group.is-current{ display: block; }
  /* groups are fully open on desktop; the mobile group-collapse never applies */
  .finder.js .finder__group-panel{
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible;
  }
}

/* ===== MOBILE (<=720px): stacked group-accordion ===== */
@media (max-width: 720px){
  .finder.js .finder__tab{ display: none; }          /* tabs collapse away */
  .finder.js .finder__acc{ display: flex; }          /* group headers appear */
  .finder.js .finder__group{ display: block; }       /* all groups stack */
  .finder.js .finder__group-panel{
    overflow: hidden;
    max-height: 0;                                    /* JS sets exact px on open */
    opacity: 0;
    transition: max-height 460ms ease, opacity 320ms ease;
  }
  .finder.js .finder__group.is-open > .finder__group-panel{ opacity: 1; }
}

/* reduced-motion: kill all accordion easing (JS still sets end states) */
@media (prefers-reduced-motion: reduce){
  .finder.js .finder__tab,
  .finder.js .finder__acc,
  .finder.js .finder__acc-icon,
  .finder.js .tx-card__trigger::after,
  .finder.js .tx-card__panel,
  .finder.js .finder__group-panel{ transition: none !important; }
}