/* ============================================================================
   v21-home.css — the homepage as connected moments, not stacked sections.
   Consumes only tokens from v21-system.css.
   ============================================================================ */

/* ------------------------------------------------------------------- hero -- */
/* Identity first. No calendar, no carousel, nothing above the H1. Not a
   full-screen hero either: the next moment must be visible on a phone. */
.vh { padding-block: clamp(38px, 5vw, 76px) clamp(30px, 4vw, 60px); }
.vh-grid {
  display: grid; gap: clamp(26px, 4vw, 56px);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center;
}
.vh-emblem { width: 62px; height: auto; display: block; margin-bottom: var(--v-4); }
.vh-role {
  font-family: var(--v-sc); font-size: var(--v-t-eyebrow); letter-spacing: .17em;
  text-transform: uppercase; color: var(--v-bronze); margin: 0 0 var(--v-3);
}
.vh h1 {
  font-family: var(--v-display); font-weight: 400; font-size: var(--v-t-hero);
  line-height: 1.04; letter-spacing: -.005em; color: var(--v-ink);
  margin: 0 0 var(--v-4); text-wrap: balance;
}
.vh h1 .n2 { display: block; color: var(--v-maroon); }
.vh-lede { font-size: var(--v-t-body); line-height: 1.7; color: var(--v-ink-2);
  max-width: 46ch; margin: 0 0 var(--v-5); }
.vh-facts { display: flex; flex-wrap: wrap; gap: var(--v-2) var(--v-4);
  margin: 0 0 var(--v-6); padding: 0; list-style: none; }
.vh-facts li { font-family: var(--v-ui); font-size: var(--v-t-xs); color: var(--v-ink-3);
  display: flex; align-items: center; gap: 7px; }
.vh-facts li::before { content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--v-bronze-soft); flex: 0 0 auto; }
.vh-cta { display: flex; flex-wrap: wrap; gap: var(--v-3); align-items: center; }
.vh-secondary { display: flex; flex-wrap: wrap; gap: var(--v-4);
  margin-top: var(--v-4); font-family: var(--v-ui); font-size: var(--v-t-sm); }
.vh-fig { position: relative; }
.vh-fig img { width: 100%; height: auto; display: block; border-radius: var(--v-radius);
  box-shadow: var(--v-shadow); }
.vh-cap { margin: var(--v-3) 0 0; font-size: var(--v-t-xs); color: var(--v-ink-3);
  font-style: italic; }

/* ------------------------------------------------------------------ intent -- */
/* Family intention, not ritual taxonomy. A quiet two-line list, not a card
   wall: eight equal boxes is the pattern this redesign exists to remove. */
.vi-grid {
  display: grid; gap: 1px; background: var(--v-ivory-3);
  border: 1px solid var(--v-ivory-3); border-radius: var(--v-radius); overflow: hidden;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.vi-item {
  background: var(--v-paper); padding: var(--v-5) var(--v-4); text-decoration: none;
  display: flex; flex-direction: column; gap: 5px; min-height: 104px;
  transition: background-color .15s ease;
}
.vi-item:hover { background: var(--v-ivory-2); }
.vi-n { font-family: var(--v-display); font-size: 1.06rem; color: var(--v-ink); line-height: 1.25; }
.vi-s { font-family: var(--v-ui); font-size: var(--v-t-xs); color: var(--v-ink-3); line-height: 1.45; }
.vi-item:hover .vi-n { color: var(--v-maroon); }

/* ------------------------------------------------------------------ today --- */
/* One coordinated module: the day on the left, what is coming on the right.
   Everything deeper lives on panchangam.html and festivals.html. */
.vt-grid { display: grid; gap: clamp(22px, 3vw, 44px);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: start; }
.vt-day { background: var(--v-paper); border: 1px solid var(--v-ivory-3);
  border-radius: var(--v-radius); padding: clamp(20px, 2.4vw, 30px); }
.vt-date { font-family: var(--v-display); font-size: 1.28rem; color: var(--v-ink);
  margin: 0 0 2px; line-height: 1.3; }
.vt-where { font-family: var(--v-ui); font-size: var(--v-t-xs); color: var(--v-ink-3);
  margin: 0 0 var(--v-5); }
.vt-rows { display: grid; gap: 0; }
.vt-row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 4px var(--v-4);
  padding: 11px 0; border-top: 1px solid var(--v-ivory-3); align-items: baseline; }
.vt-row:first-child { border-top: 0; }
.vt-k { font-family: var(--v-sc); font-size: var(--v-t-eyebrow); letter-spacing: .13em;
  text-transform: uppercase; color: var(--v-ink-3); }
.vt-v { font-size: 1rem; color: var(--v-ink); }
.vt-v small { display: block; font-size: var(--v-t-xs); color: var(--v-ink-3);
  margin-top: 2px; font-variant-numeric: tabular-nums; }
.vt-live { color: var(--v-saffron); }
.vt-form { display: flex; flex-wrap: wrap; gap: var(--v-2); align-items: end;
  margin-top: var(--v-5); padding-top: var(--v-5); border-top: 1px solid var(--v-ivory-3); }
.vt-form label { display: block; font-family: var(--v-sc); font-size: var(--v-t-eyebrow);
  letter-spacing: .13em; text-transform: uppercase; color: var(--v-ink-3); margin-bottom: 5px; }
.vt-form input[type=date] { font: inherit; font-size: var(--v-t-sm); padding: 10px 12px;
  min-height: 44px; border: 1px solid var(--v-ivory-3); border-radius: var(--v-radius-s);
  background: var(--v-paper); color: var(--v-ink); }
.vt-links { display: flex; flex-wrap: wrap; gap: var(--v-4); margin-top: var(--v-5);
  font-family: var(--v-ui); font-size: var(--v-t-sm); }

.vt-ahead h3 { font-family: var(--v-sc); font-size: var(--v-t-eyebrow); letter-spacing: .15em;
  text-transform: uppercase; color: var(--v-bronze); margin: 0 0 var(--v-4); font-weight: 400; }
.vt-ob { display: grid; gap: 0; }
.vt-ob a { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: var(--v-3);
  padding: 12px 0; border-top: 1px solid var(--v-ivory-3); text-decoration: none;
  align-items: baseline; }
.vt-ob a:first-child { border-top: 0; }
.vt-ob-d { font-family: var(--v-ui); font-size: var(--v-t-xs); color: var(--v-saffron);
  font-variant-numeric: tabular-nums; }
.vt-ob-n { font-size: var(--v-t-sm); color: var(--v-ink); line-height: 1.4; }
.vt-ob a:hover .vt-ob-n { color: var(--v-maroon); }


/* The day panel is a reference, not a ruling, and it says so where it is read —
   not in a footnote. Asserted by tools/verify_site.py on every page that offers
   timing. */
.vt-note { font-size: var(--v-t-xs); line-height: 1.6; color: var(--v-ink-3);
  margin: var(--v-4) 0 0; padding-top: var(--v-4);
  border-top: 1px solid var(--v-ivory-3); max-width: 58ch; }

/* --------------------------------------------------------------- ceremonies -- */
/* An editorial list, deliberately NOT a second grid of the same shape as the
   intent block above it. */
.vc-list { display: grid; gap: 0; margin-top: var(--v-2); }
.vc-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--v-3) var(--v-5);
  padding: var(--v-5) 0; border-top: 1px solid var(--v-ivory-3);
  text-decoration: none; align-items: baseline; }
.vc-item:hover .vc-n { color: var(--v-maroon); }
.vc-n { display: block; font-family: var(--v-display); font-size: 1.22rem; color: var(--v-ink); line-height: 1.3; }
.vc-p { display: block; font-size: var(--v-t-sm); line-height: 1.65; color: var(--v-ink-2);
  max-width: 62ch; margin-top: 5px; }
.vc-d { font-family: var(--v-ui); font-size: var(--v-t-xs); color: var(--v-ink-3);
  white-space: nowrap; }
.vc-more { margin-top: var(--v-6); }

/* ------------------------------------------------------------------- meet ---- */
.vm-grid { display: grid; gap: clamp(26px, 4vw, 56px);
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; }
.vm-fig img { width: 100%; height: auto; display: block; border-radius: var(--v-radius); }
.vm-body p { font-size: var(--v-t-body); line-height: 1.75; color: var(--v-ink-2);
  max-width: 60ch; margin: 0 0 var(--v-4); }
.vm-quote { border-left: 2px solid var(--v-bronze-soft); padding-left: var(--v-5);
  margin: var(--v-6) 0 0; }
.vm-quote blockquote { margin: 0; font-family: var(--v-display); font-size: 1.15rem;
  line-height: 1.55; color: var(--v-ink); font-style: italic; }
.vm-quote figcaption { margin-top: var(--v-3); font-family: var(--v-ui);
  font-size: var(--v-t-xs); color: var(--v-ink-3); }

/* ------------------------------------------------------------------ final ---- */
.vf { background: var(--v-maroon); color: #fff; }
.vf .v-h2 { color: #fff; }
.vf-in { display: grid; gap: var(--v-5); justify-items: center; text-align: center; }
.vf p { color: rgba(255,255,255,.86); font-size: var(--v-t-body); line-height: 1.7;
  max-width: 52ch; margin: 0; }
.vf .v-btn-primary { background: #fff; color: var(--v-maroon); }
.vf .v-btn-primary:hover { background: var(--v-ivory-2); }
.vf .v-btn-secondary { border-color: rgba(255,255,255,.5); color: #fff; }
.vf .v-btn-secondary:hover { background: rgba(255,255,255,.1); }
.vf-row { display: flex; flex-wrap: wrap; gap: var(--v-3); justify-content: center; }

/* ------------------------------------------------------------- responsive --- */
@media (max-width: 1000px) {
  .vh-grid, .vm-grid { grid-template-columns: 1fr; }
  .vh-fig { order: -1; max-width: 420px; }
  .vi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vt-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .vt-row { grid-template-columns: 1fr; gap: 2px; }
  .vc-item { grid-template-columns: 1fr; }
  .vh-fig { max-width: none; }
}
@media (max-width: 380px) {
  .vi-grid { grid-template-columns: 1fr; }
}