/* ==========================================================================
   Kerala Ayurvedic Panchakarma Centre — Treatment page styles
   CIAMETECH Private Limited · 2026
   Loaded alongside styles.css on treatments.html, faq.html and every
   /treatments/*.html condition page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */

.breadcrumb {
  padding-block: var(--space-4);
  background: var(--color-cream);
  border-bottom: 1px solid var(--color-line);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}
.breadcrumb li { display: flex; align-items: center; gap: var(--space-2); }
.breadcrumb li + li::before {
  content: '';
  width: 5px; height: 5px;
  border-top: 1px solid var(--color-line-strong);
  border-right: 1px solid var(--color-line-strong);
  transform: rotate(45deg);
  flex: none;
}
.breadcrumb a { color: var(--color-ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-terracotta-deep); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--color-ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   Condition page hero — photography-led, matching the home page treatment
   -------------------------------------------------------------------------- */

.treatment-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: calc(var(--header-h) + var(--space-16));
  padding-bottom: var(--space-16);
  background: var(--color-forest-deep);
  color: var(--color-white);
}
.treatment-hero .hero-media { position: absolute; inset: 0; z-index: -2; }
.treatment-hero .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.treatment-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Same treatment as the home hero, and for the same reason — see the note
     on .hero::after in styles.css. Slightly denser peak because a condition
     hero is a shorter box, so the type sits closer to the edges. */
  background:
    radial-gradient(ellipse 82% 128% at 26% 52%,
      rgba(var(--scrim), 0.84) 0%,
      rgba(var(--scrim), 0.74) 40%,
      rgba(var(--scrim), 0.36) 66%,
      rgba(var(--scrim), 0) 86%),
    linear-gradient(100deg,
      rgba(var(--scrim), 0.22) 0%,
      rgba(var(--scrim), 0.14) 55%,
      rgba(var(--scrim), 0.05) 85%,
      rgba(var(--scrim), 0.02) 100%),
    /* Matches the home hero band — raised from 0.45/24% so the header phone
       link clears AA over the brighter parts of these photographs too. */
    linear-gradient(180deg, rgba(var(--scrim), 0.66) 0%, transparent 34%);
  pointer-events: none;
}
.treatment-hero h1 {
  color: var(--color-white);
  max-width: 26ch;
  font-size: var(--text-4xl);
  margin-bottom: var(--space-6);
}
/* The classical name, set as a small credential line under the heading. Only
   appears where the source texts genuinely name the condition — seven of the
   twelve. Restraint here is the point: a Sanskrit label on every page would
   read as decoration. */
.classical-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-turmeric-light);
}
.classical-name span {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* 0.62 measured 4.24:1 against the composited hero — marginally under AA. */
  color: rgba(252, 250, 245, 0.74);
}
.classical-name em {
  flex: 1 1 100%;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: normal;
  color: rgba(252, 250, 245, 0.78);
}

.treatment-hero .treatment-intro {
  max-width: 44rem;
  font-size: var(--text-lg);
  line-height: 1.8;
  color: rgba(252, 250, 245, 0.9);
  margin-bottom: var(--space-8);
}

/* --------------------------------------------------------------------------
   Body layout — content column plus sticky booking rail
   -------------------------------------------------------------------------- */

.treatment-body {
  display: grid;
  gap: var(--space-12);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1020px) {
  .treatment-body { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--space-16); }
  .treatment-aside { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
}

.treatment-section + .treatment-section { margin-top: var(--space-16); }
.treatment-section h2 { font-size: var(--text-3xl); margin-bottom: var(--space-4); }
/* Cap the line length. Without this the content column runs past 75 characters
   on a wide screen, which is where long-form reading starts to degrade. */
.treatment-section > p,
.step-list li,
.faq-answer p { color: var(--color-ink-soft); line-height: 1.85; max-width: var(--measure); }
.treatment-section > p { line-height: 1.85; }

/* Numbered "what to expect" steps */
.step-list { counter-reset: step; margin-top: var(--space-8); }
.step-list li {
  position: relative;
  counter-increment: step;
  padding-left: var(--space-16);
  padding-bottom: var(--space-8);
  color: var(--color-ink-soft);
  line-height: 1.8;
}
.step-list li:last-child { padding-bottom: 0; }
.step-list li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: var(--color-white);
  border: 1px solid rgba(200, 135, 42, 0.5);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-terracotta-deep);
}
.step-list li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 19px; top: 44px; bottom: 12px;
  width: 1px;
  background: var(--color-line);
}
.step-list li strong { display: block; color: var(--color-ink); margin-bottom: var(--space-1); }

/* --------------------------------------------------------------------------
   Booking rail
   -------------------------------------------------------------------------- */

.booking-rail {
  padding: var(--space-8);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-turmeric);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lift);
}
.booking-rail h2 { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.booking-rail p { font-size: var(--text-sm); color: var(--color-ink-soft); margin-bottom: var(--space-6); }
.booking-rail .btn { width: 100%; }
.booking-rail .btn + .btn { margin-top: var(--space-3); }

.rail-meta {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
}
.rail-meta li {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  line-height: 1.7;
  margin-bottom: var(--space-3);
}
.rail-meta li:last-child { margin-bottom: 0; }
.rail-meta svg { width: 17px; height: 17px; flex: none; color: var(--color-turmeric); margin-top: 4px; }

/* Pricing block — no numeric price is ever printed on the site */
.pricing-note {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-8);
  margin-top: var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-turmeric);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.pricing-note svg { width: 22px; height: 22px; flex: none; color: var(--color-turmeric); margin-top: 3px; }
.pricing-note p { font-size: var(--text-sm); color: var(--color-ink-soft); line-height: 1.8; margin: 0; }
.pricing-note strong { display: block; color: var(--color-ink); font-size: var(--text-base); margin-bottom: var(--space-1); }

/* --------------------------------------------------------------------------
   Related conditions — internal linking
   -------------------------------------------------------------------------- */

.related-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 700px) { .related-grid { grid-template-columns: repeat(3, 1fr); } }

.related-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.related-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-turmeric);
  box-shadow: var(--shadow-soft);
}
.related-card .related-name {
  font-size: var(--text-lg);
  color: var(--color-ink);
}
.related-card .related-cue {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-terracotta-deep);
}
.related-card .related-cue svg { width: 15px; height: 15px; transition: transform 0.22s ease; }
.related-card:hover .related-cue svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Treatments index page cards
   -------------------------------------------------------------------------- */

.treatment-index { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 640px) { .treatment-index { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .treatment-index { grid-template-columns: repeat(3, 1fr); } }

.treatment-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-8);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}
.treatment-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--color-turmeric);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.treatment-card:hover,
.treatment-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--color-line-strong);
  box-shadow: var(--shadow-lift);
}
.treatment-card:hover::before,
.treatment-card:focus-visible::before { transform: scaleX(1); }

.treatment-card .treatment-name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  margin-bottom: var(--space-3);
}
.treatment-card .treatment-blurb {
  flex: 1 1 auto;
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-6);
}
.treatment-card .treatment-cue {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-terracotta-deep);
}
.treatment-card .treatment-cue svg { width: 16px; height: 16px; transition: transform 0.24s ease; }
.treatment-card:hover .treatment-cue svg { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   FAQ accordion (native <details> — keyboard accessible without JavaScript)
   -------------------------------------------------------------------------- */

.faq-list { max-width: 48rem; }
.faq-item {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  overflow: hidden;
  transition: box-shadow 0.22s ease, border-color 0.22s ease;
}
.faq-item[open] { border-color: var(--color-line-strong); box-shadow: var(--shadow-soft); }

.faq-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6);
  cursor: pointer;
  list-style: none;
  /* font-family intentionally omitted — set in styles.css so the Playfair
     minimum-size rule applies */
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.4;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '';
  flex: none;
  width: 11px; height: 11px;
  margin-top: 7px;
  border-right: 2px solid var(--color-turmeric);
  border-bottom: 2px solid var(--color-turmeric);
  transform: rotate(45deg);
  transition: transform 0.24s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: 11px; }
.faq-item summary:hover { color: var(--color-terracotta-deep); }

.faq-answer {
  padding: 0 var(--space-6) var(--space-6);
  color: var(--color-ink-soft);
  line-height: 1.85;
}
.faq-answer p + p { margin-top: var(--space-4); }

.faq-group + .faq-group { margin-top: var(--space-16); }
.faq-group h2 { font-size: var(--text-2xl); margin-bottom: var(--space-6); }