/* ==========================================================================
   Sri Adi Narayana Swamy Temple, Kodakanchi
   Brahmotsavam 2026-27 page  |  loaded only by festivals-2026.html
   --------------------------------------------------------------------------
   Built on the design tokens in css/style.css - the same blue, gold, cream
   and type scale as the rest of the site. Nothing here is used by another
   page, which is why it is a separate file rather than 300 more lines every
   page has to download.

   Contents
   00. Page density (type scale, leading and rhythm for this page)
   01. Text from the content file (one language at a time)
   02. Festival hero
   03. Download / print actions
   04. Countdown
   05. Introduction
   06. Festival timeline
   07. Gallery
   08. Responsive
   09. Print
   ========================================================================== */

/* ==========================================================================
   00. PAGE DENSITY
   This page is a timetable, not an essay: eleven cards, each holding a date,
   a short heading and three or four four-word lines. At the site's body size
   and leading that read as eleven posters, and a devotee looking for one day
   had to scroll past a lot of air to reach the next.

   So the type scale, the leading and the vertical rhythm all step down - for
   this page only - by redefining the tokens on <main>. Every rule in this
   file and in css/style.css then follows, without a single size repeated.

   It is scoped to <main> rather than to the body on purpose: the top bar,
   the menu and the footer are the same furniture on all ten pages and must
   not shrink on one of them.
   ========================================================================== */
.fc-page main {
  /* One step down from the site scale. */
  --fs-xs: 0.75rem;
  --fs-sm: 0.85rem;
  --fs-base: 0.95rem;
  --fs-md: 1rem;
  --fs-lg: 1.15rem;
  --fs-xl: 1.4rem;

  /* Tighter than the site default: more sections, far less prose in each. */
  --section-pad: var(--sp-5);
  --band-pad: var(--sp-5);
  --section-head-gap: var(--sp-4);

  font-size: var(--fs-base);
  line-height: 1.4;
}

/* Headings are one or two short lines; body leading on them reads as a gap
   between the lines of a single title. */
.fc-page main :is(h1, h2, h3) .bi__t { line-height: 1.25; }
.fc-page main :is(h1, h2, h3) .bi__t[lang="te"] { line-height: 1.35; }

/* An element this page hides - the unwanted language of a hand-written
   paragraph, the countdown dials once the festival has begun - must stay
   hidden even where a rule here gives it a display value. The browser's own
   [hidden] style is the weakest in the cascade, so `display: block` on
   .bi-static's spans used to override it, and the Telugu half of the contact
   line showed at the foot of the page in English. */
.fc-page [hidden] { display: none !important; }

@media (min-width: 900px) {
  .fc-page main {
    --section-pad: var(--sp-6);
    --band-pad: var(--sp-6);
  }
}

/* The shared stylesheet spaces paragraphs and list items for prose. These
   lines are too short to need that much between them. */
.fc-page main p { margin-bottom: var(--sp-3); }

/* ==========================================================================
   01. TEXT FROM THE CONTENT FILE
   Every string in js/festival-calendar-2026.js is a { te, en } pair, and
   js/festivals-2026.js renders whichever one the visitor has chosen with the
   language switcher - never both. So there is one class for the text,
   .bi__t, and it carries a lang attribute saying which language it is in.
   The site's own font tokens only switch on html[lang="te"], and this page
   re-renders rather than reloading, so the Telugu is asked for here by that
   lang attribute. Where English needs a different face from Telugu at the
   same spot, the rule is written against .bi__t[lang="en"].
   ========================================================================== */
.fc-page .bi { display: block; }

.fc-page [lang="te"] {
  font-family: "Noto Serif Telugu", "Noto Sans Telugu", Georgia, serif;
  /* A little more leading than the Latin set in section 00: Telugu carries
     taller ascenders and descenders, and its vowel signs and conjuncts clip
     against the line above below about 1.45. */
  line-height: 1.5;
}

.fc-page .bi__t { display: block; }

/* The paragraphs written into the HTML rather than built from the content
   file - the contact line, the "file missing" note, the no-JavaScript note -
   hold both languages side by side in the markup. js/festivals-2026.js hides
   the half that is not wanted; this makes the half that is left a block of
   its own, so the <noscript> copy, which keeps both, still reads as two
   paragraphs rather than one run-on line. */
.fc-page .bi-static > [lang] { display: block; }

/* The eyebrow is a pill, so it keeps its inline-block rather than
   stretching across the column. */
.fc-page .bi.eyebrow { display: inline-block; }
.fc-page .eyebrow .bi__t { display: inline; margin: 0; }

/* A button's label sits on the button's own baseline, not on a line of
   its own. */
.fc-page .btn .bi { display: inline; }
.fc-page .btn .bi__t { display: inline; margin: 0; }

/* ==========================================================================
   02. FESTIVAL HERO
   ========================================================================== */
.fc-hero {
  position: relative;
  padding-block: var(--sp-6) var(--band-pad);
  background:
    radial-gradient(circle at 50% -20%, rgba(201, 162, 39, 0.28), transparent 62%),
    linear-gradient(160deg, var(--blue-900) 0%, var(--blue-800) 55%, #0a2450 100%);
  color: var(--white);
  text-align: center;
  overflow: hidden;
}

/* A thin gold band top and bottom, in the manner of a temple notice. */
.fc-hero::before,
.fc-hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 4px;
  background: linear-gradient(90deg,
    transparent, var(--gold-600) 18%, var(--gold-400) 50%, var(--gold-600) 82%, transparent);
}
.fc-hero::before { top: 0; }
.fc-hero::after { bottom: 0; }

.fc-hero .breadcrumb-bi { margin-bottom: var(--sp-3); }
.fc-hero .breadcrumb-bi .bi__t {
  font-size: var(--fs-sm);
  color: var(--gold-400);
}

.fc-hero__temple {
  margin: 0 0 var(--sp-3);
}
.fc-hero__temple .bi__t {
  font-size: clamp(1rem, 2.8vw, 1.3rem);
  font-weight: 600;
  color: var(--gold-400);
  letter-spacing: 0.01em;
}

.fc-hero__occasion {
  margin: 0 auto var(--sp-4);
  max-width: 22ch;
}
.fc-hero__occasion .bi__t {
  font-size: clamp(1.45rem, 5vw, 2.35rem);
  font-weight: 700;
  color: var(--white);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
/* In English the title sets in the display face; in Telugu it keeps the
   Telugu serif set above. Cinzel is small-caps in feel already, so it needs
   no uppercasing, and it runs wider than Telugu at the same size. */
.fc-hero__occasion .bi__t[lang="en"] {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 4vw, 1.9rem);
  letter-spacing: 0.02em;
}

.fc-hero__meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: center;
  margin: 0;
}
.fc-hero__span .bi__t {
  display: inline-block;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--blue-900);
  background: linear-gradient(180deg, var(--gold-400), var(--gold-500));
  border-radius: 999px;
  padding: 0.35em 1.2em;
}

.fc-hero__place .bi__t { font-size: var(--fs-sm); color: #b9c8de; }

/* ==========================================================================
   03. DOWNLOAD / PRINT ACTIONS
   ========================================================================== */
.fc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-top: var(--sp-4);
}

.fc-action { align-items: center; }

.fc-action[disabled],
.fc-action[aria-disabled="true"] {
  opacity: 0.7;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.fc-action__note {
  flex-basis: 100%;
  margin: var(--sp-2) 0 0;
  text-align: center;
}
.fc-action__note .bi__t { font-size: var(--fs-xs); color: #b9c8de; }

/* ==========================================================================
   04. COUNTDOWN
   ========================================================================== */
.fc-count {
  background: var(--blue-800);
  color: var(--white);
  padding-block: var(--band-pad);
  text-align: center;
  border-block: 3px solid var(--gold-600);
}

.fc-count__heading { margin: 0 0 var(--sp-4); }
.fc-count__heading .bi__t { font-size: var(--fs-xl); color: var(--gold-400); }
.fc-count__heading .bi__t[lang="en"] {
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--fs-md);
}

.fc-count__dials {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  max-width: 620px;
  margin-inline: auto;
}

.fc-count__dial {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(227, 189, 75, 0.45);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-2);
}

.fc-count__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 5.5vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--gold-400);
  font-variant-numeric: tabular-nums;
}

.fc-count__label .bi__t { font-size: var(--fs-sm); }

.fc-count__state {
  max-width: 46ch;
  margin: 0 auto;
}
.fc-count__state .bi__t { font-size: var(--fs-lg); font-weight: 600; }
.fc-count__state--live .bi__t { color: var(--gold-400); }

.fc-count__note {
  max-width: 60ch;
  margin: var(--sp-4) auto 0;
}
.fc-count__note .bi__t { font-size: var(--fs-sm); color: #c2d0e6; }

/* ==========================================================================
   05. INTRODUCTION
   ========================================================================== */
.fc-intro__body { max-width: 72ch; margin-inline: auto; }

.fc-intro__para .bi__t { font-size: var(--fs-md); color: var(--ink-900); }

.fc-intro__para + .fc-intro__para { margin-top: var(--sp-3); }

/* ==========================================================================
   06. FESTIVAL TIMELINE
   One <li> per day. The gold rail runs down the left on a phone and down the
   middle from 900px up, with the cards alternating either side.
   ========================================================================== */
.fc-timeline {
  position: relative;
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0 0 0 46px;
}

.fc-timeline::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 17px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg,
    var(--gold-400), var(--gold-600) 45%, var(--gold-600) 55%, var(--blue-100));
}

.fc-day { position: relative; }
.fc-day + .fc-day { margin-top: var(--sp-4); }

/* The marker is centred on the rail with translateX rather than sized to fit
   it, so a card covering a range of days ("2 – 4") widens into a pill instead
   of crushing its label inside a 38px circle. */
.fc-day__marker {
  position: absolute;
  top: 22px;
  left: -27px;
  transform: translateX(-50%);
  min-width: 38px;
  height: 38px;
  padding-inline: 9px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-400), var(--gold-500));
  border: 3px solid var(--cream);
  box-shadow: 0 0 0 2px var(--gold-600);
}

/* The body face, not the display one: Cinzel draws "1" as a serifed I, which
   makes "11" hard to read at this size. */
.fc-day__num {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--blue-900);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fc-day__card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold-500);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.fc-day__card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

/* A day whose programme the office has not confirmed. */
.fc-day--pending .fc-day__card {
  background: var(--blue-050);
  border: 1px dashed var(--blue-600);
  border-top: 3px dashed var(--gold-600);
}
.fc-day--pending .fc-day__marker {
  background: var(--white);
  box-shadow: 0 0 0 2px var(--gold-600);
}
.fc-day--pending .fc-day__num { color: var(--gold-700); }
.fc-day--pending .fc-day__media img { opacity: 0.55; }

.fc-day__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--blue-100);
}
.fc-day__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* A day still showing the bundled placeholder rather than a photograph of
   its own. Shown whole on a tinted ground, so it reads as a frame waiting to
   be filled instead of a photograph cropped wrongly. */
.fc-day__media--stand-in {
  background: var(--blue-100);
  border-inline-end: 1px solid var(--line);
}
.fc-day__media--stand-in img {
  object-fit: contain;
  padding: var(--sp-4);
}

.fc-day__tag {
  position: absolute;
  top: var(--sp-3);
  inset-inline-start: var(--sp-3);
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  background: rgba(6, 26, 56, 0.88);
  color: var(--gold-400);
  border: 1px solid var(--gold-600);
  border-radius: 999px;
  padding: 0.25em 0.9em;
  font-size: var(--fs-xs);
}
.fc-day__tag .bi,
.fc-day__tag .bi__t { display: inline; }
.fc-day__tag b { font-variant-numeric: tabular-nums; }

.fc-day__body { padding: var(--sp-4); }

.fc-day__date {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-2);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}
.fc-day__date .bi__t { font-size: var(--fs-md); font-weight: 600; color: var(--blue-800); }

.fc-day__weekday .bi__t { color: var(--ink-500); font-weight: 400; }
.fc-day__weekday .bi__t { font-size: var(--fs-sm); }

.fc-day__code {
  margin-inline-start: auto;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--gold-700);
  background: var(--gold-100);
  border-radius: var(--radius-sm);
  padding: 0.2em 0.6em;
  white-space: nowrap;
}

.fc-day__title { margin: 0 0 var(--sp-2); }
.fc-day__title .bi__t { font-size: var(--fs-lg); color: var(--blue-800); }

.fc-day__badge {
  margin: 0 0 var(--sp-2);
}
.fc-day__badge .bi,
.fc-day__badge .bi__t { display: inline; }
.fc-day__badge .bi {
  background: var(--gold-100);
  border: 1px dashed var(--gold-600);
  border-radius: 999px;
  padding: 0.25em 0.9em;
  font-size: var(--fs-xs);
  color: var(--gold-700);
}

.fc-day__items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fc-day__items li {
  position: relative;
  padding-inline-start: 1.6em;
  padding-block: 0.2em;
  /* The shared stylesheet gives every li a bottom margin for prose lists.
     Here the row padding and the dotted rule already separate the lines. */
  margin-bottom: 0;
}
.fc-day__items li + li { border-top: 1px dotted var(--line); }

/* A gold lamp-flame mark rather than a bullet. */
.fc-day__items li::before {
  content: "\25C6";
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  font-size: 0.6em;
  color: var(--gold-600);
}
.fc-day__items .bi__t { font-size: var(--fs-base); color: var(--ink-900); }

/* ==========================================================================
   07. GALLERY
   ========================================================================== */
.fc-gallery__subhead { margin: var(--sp-4) 0 var(--sp-3); }
.fc-gallery__subhead .bi__t { font-size: var(--fs-lg); color: var(--blue-800); }

.fc-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: var(--sp-4);
}

.fc-gallery__item {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.fc-gallery__item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.fc-gallery__item figcaption {
  padding: var(--sp-3) var(--sp-4);
  border-top: 2px solid var(--gold-500);
}
.fc-gallery__item figcaption .bi__t { font-size: var(--fs-sm); }

.fc-gallery__year {
  display: inline-block;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--gold-700);
  background: var(--gold-100);
  border-radius: var(--radius-sm);
  padding: 0.15em 0.55em;
}

.fc-gallery__more { margin: var(--sp-4) 0 0; text-align: center; }

/* ==========================================================================
   08. RESPONSIVE
   ========================================================================== */
@media (min-width: 600px) {
  .fc-count__dial { padding: var(--sp-4) var(--sp-3); }

  /* The photograph sits beside the text rather than above it. Eleven days
     each showing a 16/9 photograph over a list would run to several screens
     of scrolling; beside it, a day is one glance. */
  .fc-day__card { display: grid; grid-template-columns: 210px 1fr; }
  .fc-day__media { aspect-ratio: auto; height: 100%; min-height: 150px; }
}

/* From 900px the rail stays on the left and the cards take the full column.
   They used to alternate either side of a centre rail, which suits a handful
   of tall entries but not eleven short ones: each card then used half the
   width and the facing half stood empty, so the page was as long as a single
   column would have been and looked half-blank while reading. A centre rail
   also has to put two consecutive days at the same height, which on a
   timeline reads as "these happened at once". The column is capped rather
   than filling the 1180px wrap, so a three-word line does not stretch the
   card to the width of the screen. */
@media (min-width: 900px) {
  .fc-timeline {
    max-width: 880px;
    margin-inline: auto;
  }
  .fc-day__card { grid-template-columns: 240px 1fr; }
}

/* ==========================================================================
   09. PRINT
   A devotee should be able to print this page and pin it up. The site's own
   print rules in css/style.css already drop the header, footer, back-to-top
   and chant button; these flatten the timeline, keep a day's card whole on
   one sheet, and make sure nothing is left invisible by a scroll animation
   that never ran.
   ========================================================================== */
@media print {
  /* Cards below the fold have never been scrolled into view, so their reveal
     animation has not run and they would print blank. */
  .fc-page [data-reveal] { opacity: 1 !important; animation: none !important; }

  .fc-page { background: #fff; }

  /* Screen-only furniture. */
  .fc-actions,
  .fc-gallery__more,
  .fc-cta,
  .topbar { display: none !important; }

  /* The hero and countdown print as plain type - a page of navy ink is a
     waste of a devotee's cartridge. */
  .fc-hero,
  .fc-count {
    background: #fff !important;
    color: #000 !important;
    border: 0;
    padding-block: 0 12pt;
    text-align: center;
  }
  .fc-hero::before,
  .fc-hero::after { display: none; }
  .fc-hero__occasion .bi__t { font-size: 20pt; color: #000; text-shadow: none; }
  .fc-hero__occasion .bi__t[lang="en"] { font-size: 16pt; }
  .fc-hero__temple .bi__t { font-size: 13pt; color: #000; }
  .fc-hero__span .bi__t { background: none; color: #000; padding: 0; font-size: 12pt; }

  .fc-hero__place .bi__t,
  .fc-count__note .bi__t { color: #333 !important; }

  .fc-count__dials { display: none; }
  .fc-count__heading { display: none; }

  /* The timeline flattens to a single column of whole cards. */
  .fc-timeline { padding: 0; }
  .fc-timeline::before { display: none; }

  .fc-day,
  .fc-day:nth-child(odd),
  .fc-day:nth-child(even),
  .fc-day:nth-child(2) {
    width: 100%;
    margin: 0 0 10pt !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .fc-day__marker,
  .fc-day__media { display: none; }

  .fc-day__card {
    display: block;
    box-shadow: none;
    border: 1px solid #999;
    border-top: 2pt solid #000;
    transform: none;
  }
  .fc-day--pending .fc-day__card { background: #fff; border-style: dashed; }
  .fc-day__body { padding: 8pt 10pt; }
  .fc-day__title .bi__t { font-size: 13pt; color: #000; }
  .fc-day__date .bi__t { color: #000; }
  .fc-day__code { background: none; color: #000; border: 1px solid #999; }

  /* Photographs are the one thing worth not printing in bulk. */
  .fc-gallery__grid { display: none; }
  .fc-gallery__subhead { display: none; }

  /* The site's print rules append every http link's address after it, which
     on this page would litter the schedule. */
  .fc-page a[href^="http"]::after { content: none; }
}