/* ============================================================================
   v22-sacred-today.css — the almanac spread at the top of the homepage.

   THE BRIEF, AND THE ONE SENTENCE THAT DECIDED THE DESIGN
     Visitors said they like seeing today's Panchāṅgam, the coming festivals and
     the month's observances — and they said it about the TOP of the page. So it
     goes above the hero. But the mandate is equally clear that it must not
     become a dashboard, and three boxed cards is exactly what a dashboard is.

   SO IT IS SET AS A PRINTED ALMANAC PAGE, NOT AS COMPONENTS
     One band, three columns, hairline rules between them and nothing around
     them. No card border, no shadow, no fill behind any column. What separates
     the three readings is a 1px rule and white space, which is how an almanac,
     a broadsheet weather page and a printed panchāṅgam have always done it —
     and it is why the three read as one object rather than three widgets.

     Everything that carries meaning is typographic: the date is display type,
     the values are tabular figures so the column of times aligns, the labels are
     small caps at 0.13em, and the only colour with a job is saffron on a live
     value. There are exactly three sizes of text in the whole component.

   MOBILE IS NOT THE SAME OBJECT SCALED DOWN
     Stacking three tall columns would make a visitor scroll past the entire
     almanac to reach the priest, which is the v20 mistake in a new costume.
     Today stays; Upcoming and This Month become a two-item segmented control —
     real buttons with role="tab", not a CSS-only accordion, because the panel
     they reveal has to be announced.
   ============================================================================ */

.st {
  background: var(--v-ivory-2);
  border-bottom: 1px solid var(--v-ivory-3);
  padding-block: clamp(22px, 2.4vw, 34px);
}

/* ---- the one line that says what this is, and where ------------------------ */
.st-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--v-2) var(--v-4);
  margin-bottom: clamp(14px, 1.6vw, 20px);
}
.st-eyebrow {
  font-family: var(--v-sc); font-size: var(--v-t-eyebrow); letter-spacing: .17em;
  text-transform: uppercase; color: var(--v-bronze); margin: 0;
}
.st-where { display: flex; align-items: baseline; gap: 6px; margin-left: auto;
  font-family: var(--v-ui); font-size: var(--v-t-xs); color: var(--v-ink-3); }
.st-where select {
  font: inherit; font-size: var(--v-t-xs); color: var(--v-ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--v-bronze-soft);
  padding: 2px 18px 2px 2px; cursor: pointer; max-width: 15rem;
  /* the native arrow on a borderless select is heavy; draw a lighter one */
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--v-bronze) 50%),
                    linear-gradient(135deg, var(--v-bronze) 50%, transparent 50%);
  background-position: right 7px center, right 3px center;
  background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
}
.st-where select:hover { border-bottom-color: var(--v-maroon); }
.st-reset { font: inherit; font-family: var(--v-ui); font-size: var(--v-t-xs);
  background: none; border: 0; padding: 2px 4px; color: var(--v-ink-3);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.st-reset:hover { color: var(--v-maroon); }
.st-reset[hidden] { display: none; }

/* ---- the spread ------------------------------------------------------------ */
.st-grid {
  display: grid; align-items: start;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .94fr) minmax(0, .94fr);
  gap: clamp(20px, 2.6vw, 40px);
}
/* The rule belongs to the column that follows it, so it never appears before
   the first column or after the last — which is what a border on the container
   would do at every breakpoint change.

   GENERAL sibling, not adjacent: the mobile tablist is a grid child sitting
   between column 1 and column 2 (display:none here, so it draws nothing and
   takes no cell). With `+` the rule before column 2 vanished the moment that
   element was inserted, and nothing on the site would have failed. */
.st-col ~ .st-col {
  border-left: 1px solid var(--v-ivory-3);
  padding-left: clamp(20px, 2.6vw, 40px);
}
.st-col h2 {
  font-family: var(--v-sc); font-size: var(--v-t-eyebrow); letter-spacing: .15em;
  text-transform: uppercase; color: var(--v-ink-3); font-weight: 400;
  margin: 0 0 var(--v-4);
}

/* ---- column 1: today ------------------------------------------------------- */
.st-date {
  font-family: var(--v-display); font-size: clamp(1.32rem, 1.05rem + .9vw, 1.72rem);
  line-height: 1.16; color: var(--v-ink); margin: 0 0 2px; text-wrap: balance;
}
.st-sub { font-family: var(--v-ui); font-size: var(--v-t-xs); color: var(--v-ink-3);
  margin: 0 0 var(--v-4); }
.st-rows { display: grid; gap: 0; margin: 0; }
.st-row {
  /* 8.4rem is the width of "SUNRISE · SUNSET" set in small caps at .13em —
     the longest label the column carries. Narrower and that one row wraps
     while the other four do not, which is exactly the ragged left edge an
     almanac column exists to avoid. */
  display: grid; grid-template-columns: 8.4rem minmax(0, 1fr);
  gap: 2px var(--v-3); padding: 7px 0; align-items: baseline;
  border-top: 1px solid var(--v-ivory-3);
}
.st-row:first-child { border-top: 0; padding-top: 0; }
.st-k {
  font-family: var(--v-sc); font-size: var(--v-t-eyebrow); letter-spacing: .13em;
  text-transform: uppercase; color: var(--v-ink-3); margin: 0;
}
.st-v { font-size: .96rem; line-height: 1.4; color: var(--v-ink); margin: 0;
  font-variant-numeric: tabular-nums; }
.st-v em { font-style: normal; color: var(--v-ink-3); font-size: var(--v-t-xs);
  display: block; margin-top: 1px; }
/* the ONE colour with a job: a value that is true only right now */
.st-live { color: var(--v-saffron); }

/* ---- columns 2 and 3: dated lists ------------------------------------------ */
.st-list { display: grid; gap: 0; }
.st-item {
  display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: 2px var(--v-3);
  padding: 8px 0; border-top: 1px solid var(--v-ivory-3);
  text-decoration: none; align-items: baseline;
}
.st-item:first-child { border-top: 0; padding-top: 0; }
.st-d {
  font-family: var(--v-ui); font-size: var(--v-t-xs); color: var(--v-saffron);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.st-n { font-size: .93rem; line-height: 1.38; color: var(--v-ink); }
.st-c { grid-column: 2; font-family: var(--v-ui); font-size: var(--v-t-xs);
  color: var(--v-ink-3); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden; }
a.st-item:hover .st-n { color: var(--v-maroon); }
/* today, in a list of dates */
.st-item-now .st-d { font-weight: 600; }
.st-item-now .st-n::after {
  content: "today"; font-family: var(--v-sc); font-size: .58rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--v-saffron); margin-left: 7px;
  vertical-align: 2px;
}

.st-more {
  margin: var(--v-4) 0 0; font-family: var(--v-ui); font-size: var(--v-t-xs);
}
.st-more a { color: var(--v-maroon); text-decoration: underline;
  text-underline-offset: 3px; }
.st-empty { font-size: var(--v-t-sm); color: var(--v-ink-3); line-height: 1.6;
  margin: 0; }

/* ---- the mobile segmented control ------------------------------------------ */
/* Hidden on desktop, where all three columns are visible at once. */
.st-tabs { display: none; }
.st-tabs [role="tablist"] {
  display: flex; gap: 0; border: 1px solid var(--v-ivory-3);
  border-radius: var(--v-radius); overflow: hidden; margin-bottom: var(--v-4);
}
.st-tabs button {
  flex: 1 1 0; min-height: 42px; padding: 9px 10px; border: 0; cursor: pointer;
  background: var(--v-paper); color: var(--v-ink-2);
  font: inherit; font-family: var(--v-sc); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase;
}
.st-tabs button + button { border-left: 1px solid var(--v-ivory-3); }
.st-tabs button[aria-selected="true"] { background: var(--v-maroon); color: #fff; }

@media (max-width: 900px) {
  .st-grid { grid-template-columns: 1fr; gap: var(--v-5); }
  .st-col ~ .st-col { border-left: 0; padding-left: 0; }
  /* Upcoming and This Month become one tabbed area; Today is never hidden. */
  .st-tabs { display: block; border-top: 1px solid var(--v-ivory-3);
    padding-top: var(--v-5); }
  /* HIDDEN, NOT SHOWN — and the direction is the whole point.
     These panels used to be display:none until JavaScript added .st-shown to
     one of them, so the band was 205px shorter at first paint than a moment
     later. The markup now ships with the second panel carrying .st-hidden and
     the first carrying nothing, which is exactly the state the script would
     have produced — so the script changes which panel is hidden, never how
     many. Nothing moves. */
  .st-col-tabbed.st-hidden { display: none; }
  .st-col-tabbed > h2 { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* The label column narrows on a small phone; it does NOT stack.
   Stacking looked tidier in a mock-up and cost about twenty pixels a row —
   four rows of that is a fifth of a screen, paid so that "TITHI" could sit on
   its own line. The two-column reading is also the one a printed panchāṅgam
   uses, and it is what makes the times align down the page. */
@media (max-width: 420px) {
  .st-row { grid-template-columns: 7.4rem minmax(0, 1fr); gap: 2px var(--v-2); }
  .st-where { margin-left: 0; width: 100%; }
}

/* WITHOUT JAVASCRIPT — and why this is no longer a CSS toggle
     The band used to be hidden behind `html:not(.v-js)`, a class that only
     exists once a script has run. That made the whole almanac invisible at
     first paint and 733px tall a few hundred milliseconds later, which pushed
     Gurukkal's own section half a screen down AFTER the page was painted:
     0.36 CLS on a phone, on the element a visitor is most likely to be
     reaching for. A layout that depends on JavaScript to become visible
     cannot be measured out of that.

     So the grid is always displayed. It ships with its rows and their labels
     already in the markup and an em dash where each value will go, so the box
     is its final size before a single script runs, and the explanation for a
     visitor without JavaScript lives in a <noscript> — which needs no class,
     no script and no CSP exception to work. */
.st-nojs { font-size: var(--v-t-sm); line-height: 1.7;
  color: var(--v-ink-2); margin: 0 0 var(--v-4); max-width: 62ch; }

/* ---- mobile height budget --------------------------------------------------
   Measured before tuning: Sacred Today was 959px tall on a 390x844 phone, which
   put the priest's own name at y=1537 — nearly two screens of almanac before
   the person whose site this is. Visitors asked for the almanac at the top, not
   for it to become the page.

   So on a phone the module tightens rather than truncating: smaller vertical
   rhythm, and the two supplementary readings — Abhijit, and the fifth and sixth
   observance — give way. Rāhu Kālam, the tithi, the nakṣatra and the sunrise
   stay, because those are the four a family actually looks up, and everything
   removed is one tap away behind the links that are already there. */
@media (max-width: 900px) {
  .st { padding-block: var(--v-5); }
  .st-row { padding: 6px 0; }
  .st-date { font-size: 1.24rem; }
  .st-item { padding: 7px 0; }
  .st-row-extra { display: none; }
  /* Three entries, not four. A fourth festival on a phone is a date three
     months out — it is not what the visitor came to the top of the page for,
     and the calendar link directly beneath it is one tap. */
  .st-list .st-item:nth-child(n+4) { display: none; }
  .st-col h2 { margin-bottom: var(--v-3); }
  .st-tabs { padding-top: var(--v-4); }
  .st-tabs [role="tablist"] { margin-bottom: 0; }
  .st-grid { gap: var(--v-4); }
}