/* ==========================================================================
   TREATMENTS PAGE v3 (uses site.css tokens only)
   ========================================================================== */

/* hero: keep the lead tight */
.pagehero .lead { max-width: 52ch; }

/* intro under the section heading */
.trow-intro { margin-top: 1rem; max-width: 48ch; }

/* --------------------------------------------------------------------------
   DETAILED LEDGER (.tledger / .trow): hairline rows with price + includes
   -------------------------------------------------------------------------- */
.tledger { border-top: 1px solid var(--line); margin-top: 3rem; }

.trow {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 0.85fr) minmax(0, 1.35fr) auto;
  gap: clamp(1.25rem, 2.5vw, 2.75rem);
  align-items: start;
  padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1rem, 2vw, 1.75rem);
  margin-inline: calc(-1 * clamp(1rem, 2vw, 1.75rem));
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-md);
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
  overflow: hidden;
  isolation: isolate;
  transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease), border-color 0.4s var(--ease);
}
/* keep every bit of row content above the wash + sheen layers */
.trow > * { position: relative; z-index: 2; }

/* charcoal gradient wash that fades in on hover (not a flat jet-black block) */
.trow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(120% 150% at 16% -10%, oklch(31% 0.013 80 / 0.6) 0%, transparent 55%),
    linear-gradient(150deg, var(--cinema-2) 0%, oklch(20% 0.006 86) 58%, oklch(16.5% 0.005 88) 100%);
  transition: opacity 0.45s var(--ease);
}
/* light glare/sheen that sweeps across the block on hover */
.trow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    105deg,
    transparent 36%,
    oklch(100% 0 0 / 0.10) 45%,
    oklch(94% 0.05 88 / 0.24) 50%,
    oklch(100% 0 0 / 0.10) 55%,
    transparent 64%
  );
  transform: translateX(-130%);
  will-change: transform, opacity;
}

/* hover: gentle lift + charcoal wash + a single eased glare sweep */
.trow:hover {
  box-shadow: var(--shadow-deep);
  transform: translateY(-3px);
  border-bottom-color: transparent;
}
.trow:hover::before { opacity: 1; }
.trow:hover::after  { animation: trow-sheen 1.15s var(--ease-io) 0.06s; }

@keyframes trow-sheen {
  0%   { transform: translateX(-130%); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(130%); opacity: 0; }
}
.trow:hover .trow__num { color: var(--brass-light); }
.trow:hover .trow__name { color: var(--milk); }
.trow:hover .trow__price { color: var(--milk-soft); }
.trow:hover .trow__price strong { color: var(--brass-light); }
.trow:hover .trow__body p { color: var(--milk-soft); }
.trow:hover .trow__inc { color: var(--milk-soft); }
.trow:hover .trow__inc span { color: var(--brass-light); }
.trow:hover .tlink { color: var(--brass-light); }
.trow:hover .tlink::after { background: var(--brass-light); }

.trow__num {
  font-family: var(--font-d);
  font-weight: 300;
  font-size: 1.15rem;
  color: var(--brass-deep);
  font-variant-numeric: tabular-nums;
  padding-top: 0.4rem;
}

.trow__name {
  font-family: var(--font-d);
  font-weight: 600;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.8rem);
  text-transform: uppercase;
  line-height: 1.12;
  margin: 0;
}

.trow__price {
  margin-top: 0.65rem;
  color: var(--ink-soft);
  font-size: 0.98rem;
}
.trow__price strong {
  color: var(--brass-deep);
  font-size: 1.25em;
  font-weight: 700;
}

.trow__body p { color: var(--ink-soft); max-width: 56ch; }

.trow__inc {
  margin-top: 0.9rem;
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.trow__inc span {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brass-deep);
  margin-bottom: 0.25rem;
}

.trow__act { justify-self: end; padding-top: 0.45rem; white-space: nowrap; }
.trow__act--stack {
  display: grid;
  gap: 1rem;
  justify-items: start;
  white-space: normal;
}

/* featured PERL row: warm brass tint bleeding past the row edges */
.trow--feature {
  background: oklch(95.8% 0.018 87);
  padding-inline: clamp(1rem, 2vw, 1.75rem);
  margin-inline: calc(-1 * clamp(1rem, 2vw, 1.75rem));
  border-radius: var(--r-sm);
}
/* feature row crossfades from its warm tint into the same charcoal ::before wash */
.trow--feature .trow__name { color: var(--brass-deep); }

/* accessibility: no glare sweep / lift when reduced motion is requested */
@media (prefers-reduced-motion: reduce) {
  .trow:hover { transform: none; }
  .trow:hover::after { animation: none; }
  .trow::before { transition: opacity 0.2s linear; }
}

/* financing note under the ledger */
.trow-finance {
  margin-top: 2rem;
  color: var(--ink-soft);
  font-size: 0.98rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1.25rem;
}

/* consultation cinema */
.consult-cta { margin-top: 2rem; }
.cinema .checks { margin-top: 1.5rem; }

/* --------------------------------------------------------------------------
   LAB + PEEWEE
   -------------------------------------------------------------------------- */
.lab-list { margin-top: 1.25rem; }
.lab-more {
  margin-top: 1.25rem;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  max-width: 50ch;
}

/* two stacked frames with varied aspect ratios, offset */
.lab-imgs {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: end;
}

/* peewee strip */
.pee {
  display: grid;
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  border-top: 1px solid var(--line);
  margin-top: var(--sect-sm);
  padding-top: var(--sect-sm);
}
.pee__img { max-width: 300px; }
.pee__head { margin-bottom: 1rem; }
.pee p { color: var(--ink-soft); max-width: 58ch; }
.pee .ctarow { margin-top: 1.5rem; }

/* --------------------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .trow { grid-template-columns: 2.5rem 1fr; row-gap: 0.6rem; }
  .trow__body, .trow__act { grid-column: 2; }
  .trow__act { justify-self: start; padding-top: 0.2rem; }
}

@media (max-width: 640px) {
  .lab-imgs { grid-template-columns: 1fr; align-items: start; }
  .lab-imgs .pull-down { margin-bottom: 0; }
  .pee { grid-template-columns: 1fr; }
  .pee__img { max-width: 240px; }
}

/* Section 4: compact "Additional Care" list (demoted from full trows; keeps anchor ids) */
.tcare { border-top: 1px solid var(--line); margin-top: 2.5rem; padding-top: 2rem; }
.tcare__head { color: var(--ink-soft); margin-bottom: 1rem; }
.tcare__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; max-width: 72ch; }
.tcare__list li { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.55; scroll-margin-top: 6.5rem; }
.tcare__list strong { color: var(--ink); }
.tcare__price { color: var(--brass-deep); white-space: nowrap; font-variant-numeric: tabular-nums; }
