/* ==========================================================================
   rituals.html — page-specific styles (Rituals & Learn)
   Builds on site.css tokens and components. Nothing here overrides globals.
   ========================================================================== */

/* ---- Intro ------------------------------------------------------------- */
.rituals-intro .split { align-items: end; }
.rituals-intro__title { font-size: var(--fs-4xl); line-height: 0.98; letter-spacing: -0.03em; }
.rituals-intro__figure .media-frame__inner { --ratio: 4 / 5; }
@media (min-width: 900px) {
  .rituals-intro__figure { transform: translateY(var(--space-6)); }
}

/* On-this-page navigation (chips as links) */
.page-index { margin-top: var(--space-7); }
.page-index__label {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.page-index .chip { text-decoration: none; min-height: 44px; }
.page-index .chip__count { opacity: 0.85; }

/* ---- Brewing tabs ---------------------------------------------------- */
.brew-tabs .tabs__list { justify-self: start; }
.brew-panel { display: grid; gap: var(--space-7); padding-top: var(--space-2); }
@media (min-width: 900px) {
  .brew-panel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-9); align-items: start; }
}
.brew-panel__aside { display: grid; gap: var(--space-5); }
.brew-panel__title { font-size: var(--fs-xl); margin-bottom: var(--space-3); }
.brew-panel .steps { margin-top: var(--space-6); }
/* Without JS every panel is shown in sequence: separate them clearly */
.brew-tabs:not(.is-enhanced) .tabs__panel + .tabs__panel {
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-8);
  margin-top: var(--space-6);
}
.brew-tabs.is-enhanced .tabs__panel:not([hidden]) { animation: mk-fade-up var(--dur-3) var(--ease-out); }
.brew-tabs .tabs__panel:focus-visible { outline-offset: 8px; }

.suits-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.suits-list a { text-decoration: none; min-height: 44px; }
.suits-list a:hover { border-color: var(--accent); color: var(--text); }

/* Blend-by-blend brew table (data from products.json) */
.brew-table-wrap {
  margin-top: var(--space-8);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow-x: auto;
  background: var(--surface);
  box-shadow: var(--inner-highlight);
}
.brew-table { width: 100%; min-width: 620px; font-size: var(--fs-sm); }
/* phones: fade the right edge so it is clear the table scrolls sideways */
@media (max-width: 699px) {
  .brew-table-wrap { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
  .brew-table-wrap.is-scrolled-end { -webkit-mask-image: none; mask-image: none; }
}
.brew-table-hint { margin-top: var(--space-3); font-size: var(--fs-xs); color: var(--text-faint); }
@media (min-width: 700px) { .brew-table-hint { display: none; } }
.brew-table caption {
  caption-side: top;
  text-align: left;
  padding: var(--space-5) var(--space-5) var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--text);
}
.brew-table caption span { display: block; margin-top: var(--space-1); font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--text-muted); }
.brew-table th,
.brew-table td { padding: var(--space-3) var(--space-5); text-align: left; border-top: 1px solid var(--hairline); vertical-align: middle; }
.brew-table thead th {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.brew-table tbody th { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-base); color: var(--text); }
.brew-table tbody th a { text-decoration: none; }
.brew-table tbody th a:hover { color: var(--accent); text-decoration: underline; }
.brew-table td { color: var(--text-muted); }
.brew-table td.num { color: var(--text); white-space: nowrap; }
.brew-table tbody tr { transition: background-color var(--dur-2) var(--ease-out); }
.brew-table tbody tr:hover { background: var(--shell); }

/* ---- Time-of-day selector -------------------------------------------- */
.daypart { display: grid; gap: var(--space-7); }
.daypart__options {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .daypart__options { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.daypart__options legend { padding: 0; margin-bottom: var(--space-4); font-size: var(--fs-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); }

.daypart-option { position: relative; display: block; cursor: pointer; }
.daypart-option input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.daypart-option__box {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-4);
  align-items: center;
  min-height: 88px;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline-strong);
  background: var(--shell);
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring);
}
.daypart-option:hover .daypart-option__box { border-color: var(--text-faint); }
.daypart-option:active .daypart-option__box { transform: scale(0.98); }
.daypart-option__icon {
  grid-row: span 2;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  color: var(--accent);
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.daypart-option__icon svg { width: 22px; height: 22px; }
.daypart-option__name { font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.1; color: var(--text); }
.daypart-option__hours { font-size: var(--fs-xs); letter-spacing: 0.08em; color: var(--text-faint); }
.daypart-option input:checked + .daypart-option__box {
  background: var(--forest-800);
  border-color: var(--gold-400);
  box-shadow: var(--inner-highlight), 0 18px 40px -24px rgba(201, 151, 58, 0.45);
}
.daypart-option input:checked + .daypart-option__box .daypart-option__icon {
  background: var(--gold-400);
  border-color: var(--gold-400);
  color: var(--ink-950);
}
.daypart-option input:focus-visible + .daypart-option__box { outline: 2px solid var(--gold-400); outline-offset: 3px; }

.daypart__result { display: grid; gap: var(--space-7); }
.daypart__head { display: grid; gap: var(--space-4); }
@media (min-width: 900px) {
  .daypart__head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-8); align-items: end; }
}
.daypart__title { font-size: var(--fs-2xl); }
.daypart__note { font-size: var(--fs-sm); color: var(--text-faint); }
.daypart__pairs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

.rec { display: grid; gap: var(--space-3); align-content: start; }
.rec__why {
  padding-inline: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  border-left: 1px solid var(--accent);
  padding-left: var(--space-3);
  margin-left: var(--space-2);
}
.rec-grid.is-entering > * { animation: mk-fade-up var(--dur-3) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }
/* the offset column keeps its translate while animating */
@media (min-width: 1100px) {
  .rec-grid.is-entering.product-grid--offset > :nth-child(3n + 2) { animation-name: rec-fade-offset; }
}
@keyframes rec-fade-offset { from { opacity: 0; transform: translateY(calc(var(--space-8) + 12px)); } to { opacity: 1; transform: translateY(var(--space-8)); } }

/* ---- Sourcing -------------------------------------------------------- */
.promise-grid { margin-top: var(--space-8); }
.promise {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: var(--surface);
  box-shadow: var(--inner-highlight);
}
.promise__mark {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  color: var(--accent);
}
.promise__mark svg { width: 20px; height: 20px; }
.promise h3 { font-size: var(--fs-lg); }
.promise p { color: var(--text-muted); font-size: var(--fs-sm); }

/* .tag--confirm now lives in site.css (shared by home, shop and blend pages) */
.sourcing-figure .media-frame__inner { --ratio: 4 / 5; }

/* ---- Clinic band ----------------------------------------------------- */
.clinic-band { min-height: 88dvh; }
.clinic-band__inner { max-width: 720px; display: grid; gap: var(--space-5); }
.clinic-band h2 { color: var(--cream-50); }
.clinic-band h2 em { color: var(--gold-300); }
.clinic-band .lead { color: rgba(251, 248, 241, 0.84); }
.clinic-band .btn--ghost { --btn-fg: var(--cream-50); border-color: rgba(245, 239, 227, 0.4); }
.clinic-flow {
  list-style: none;
  padding: 0;
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-4);
  border-top: 1px solid rgba(245, 239, 227, 0.18);
  padding-top: var(--space-5);
}
@media (min-width: 640px) { .clinic-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } }
.clinic-flow li { display: grid; gap: var(--space-1); font-size: var(--fs-sm); color: rgba(251, 248, 241, 0.78); }
.clinic-flow strong { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-lg); color: var(--cream-50); }
.clinic-flow span.mono { font-size: var(--fs-xs); color: var(--gold-300); }

/* ---- FAQ ------------------------------------------------------------- */
.faq-layout { display: grid; gap: var(--space-8); }
@media (min-width: 900px) {
  .faq-layout { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-9); align-items: start; }
  .faq-layout > :first-child { position: sticky; top: calc(var(--nav-h) + 3rem); }
}
.accordion__panel a { color: var(--accent); }
.accordion__panel ul { padding-left: 1.2em; }
.accordion__panel li + li { margin-top: 0.35em; }
.accordion__item summary:hover { color: var(--accent); }

/* ---- Closing CTA ----------------------------------------------------- */
.rituals-cta { display: grid; gap: var(--space-6); }
@media (min-width: 900px) {
  .rituals-cta { grid-template-columns: minmax(0, 1.3fr) auto; align-items: end; gap: var(--space-8); }
}

/* step headings sit under the panel h3, so they are h4 */
.brew-panel .step h4 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-lg); letter-spacing: -0.01em; margin-bottom: var(--space-2); }

/* brew-stat values: keep ranges like 95-100 on one line inside the narrower aside */
.brew-panel .brew-stat__value { font-size: var(--fs-xl); white-space: nowrap; }
.brew-panel .brew-stat { padding-inline: var(--space-2); }

.promise { align-content: start; }
/* extra left-side shade so the clinic copy stays legible over busy footage */
.clinic-band .media-bg__overlay::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8, 16, 12, 0.72) 0%, rgba(8, 16, 12, 0.45) 45%, rgba(8, 16, 12, 0) 75%);
}