/* ==========================================================================
   Durga Utsav — Royal Theme
   Palette: deep maroon / ivory / antique gold, mirrors the splash page
   ========================================================================== */

:root {
  --maroon-950: #140409;
  --maroon-900: #1e0812;
  --maroon-800: #2b0b18;
  --maroon-700: #3a1020;
  --ivory: #f6e9d2;
  --ivory-dim: #e9cd9a;
  --gold: #d4af6a;
  --gold-soft: rgba(212, 175, 106, 0.55);
  --gold-dim: rgba(212, 175, 106, 0.28);
  --gold-deep: #a8763f;
  --vermillion: #e08a7d;
  --vermillion-soft: rgba(224, 138, 125, 0.5);
  --font-display: 'Cinzel', serif;
  --font-body: 'Cormorant Garamond', serif;
  --font-bn: 'Tiro Bangla', serif;

  /* Plain R,G,B triplets (no alpha) so rgba() overlays scattered around
     the site can ride along with the theme too — see e.g.
     rgba(var(--maroon-950-rgb), 0.85) instead of a hardcoded rgba(). */
  --maroon-950-rgb: 20, 4, 12;
  --maroon-700-rgb: 58, 10, 24;
}

/* ---------- Black & Gold theme ----------
   Toggled by adding data-theme="black" to <html> (see the theme-toggle
   button + script in base.html). Same variable names, darker/neutral
   values, brighter gold — everything that already uses var(--maroon-*)
   or var(--gold*) repaints automatically, no extra rules needed. */
[data-theme="black"] {
  --maroon-950: #050505;
  --maroon-900: #0d0d0d;
  --maroon-800: #171717;
  --maroon-700: #232323;
  --ivory: #f7f0df;
  --ivory-dim: #e6d3a8;
  --gold: #e8c37c;
  --gold-soft: rgba(232, 195, 124, 0.6);
  --gold-dim: rgba(232, 195, 124, 0.3);
  --gold-deep: #b8863f;
  --vermillion: #e0a37d;
  --vermillion-soft: rgba(224, 163, 125, 0.5);

  --maroon-950-rgb: 5, 5, 5;
  --maroon-700-rgb: 23, 23, 23;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--maroon-950);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  overflow-x: hidden; /* keeps full-bleed (100vw) sections from causing a horizontal scrollbar */
  transition: background-color 0.35s ease, color 0.35s ease;
}

img { max-width: 100%; display: block; }

html[data-theme="black"] body {
  background-color: var(--maroon-950);
}

/* ---------- Thunder flicker (Kali / black & gold theme only) ----------
   No lightning-bolt clipart — just light: a soft full-page sky-flash
   wash plus a scatter of small glowing flecks across the top of the
   viewport that flicker on their own staggered cycles, so the sky
   reads as charged with intermittent lightning without drawing any
   bolt shapes. Markup lives in base.html (.thunder-field). */
.thunder-field {
  display: none;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

html[data-theme="black"] .thunder-field { display: block; }

.thunder-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(232, 195, 124, 0.5), rgba(232, 195, 124, 0) 70%);
  opacity: 0;
  animation: thunder-flash 3s ease-in-out infinite;
}

@keyframes thunder-flash {
  0%, 85%, 100% { opacity: 0; }
  86%           { opacity: 0.9; }
  87%           { opacity: 0.1; }
  88%           { opacity: 0.65; }
  90%           { opacity: 0; }
}

.flicker {
  position: absolute;
  top: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 14px 4px rgba(232, 195, 124, 0.65);
  opacity: 0;
  animation: flicker-glow 2.6s ease-in-out infinite;
}

@keyframes flicker-glow {
  0%, 80%, 100% { opacity: 0; transform: scale(0.8); }
  81%           { opacity: 1; transform: scale(1.3); }
  82%           { opacity: 0.2; transform: scale(0.9); }
  83.5%         { opacity: 0.9; transform: scale(1.2); }
  85%           { opacity: 0; transform: scale(0.8); }
}

.flicker:nth-child(2)  { left: 4%;  top: 3%;  animation-duration: 2.4s; animation-delay: 0s; }
.flicker:nth-child(3)  { left: 14%; top: 8%;  animation-duration: 2.9s; animation-delay: 0.4s; }
.flicker:nth-child(4)  { left: 24%; top: 2%;  animation-duration: 2.7s; animation-delay: 0.8s; }
.flicker:nth-child(5)  { left: 35%; top: 9%;  animation-duration: 3s;   animation-delay: 1.2s; }
.flicker:nth-child(6)  { left: 47%; top: 4%;  animation-duration: 2.5s; animation-delay: 0.2s; }
.flicker:nth-child(7)  { left: 58%; top: 10%; animation-duration: 3.2s; animation-delay: 1.5s; }
.flicker:nth-child(8)  { left: 68%; top: 5%;  animation-duration: 2.8s; animation-delay: 0.5s; }
.flicker:nth-child(9)  { left: 78%; top: 7%;  animation-duration: 2.9s; animation-delay: 1.4s; }
.flicker:nth-child(10) { left: 87%; top: 3%;  animation-duration: 2.6s; animation-delay: 1.8s; }
.flicker:nth-child(11) { left: 93%; top: 9%;  animation-duration: 3.1s; animation-delay: 0.3s; }
.flicker:nth-child(12) { left: 50%; top: 1%;  animation-duration: 2.5s; animation-delay: 2s; }
.flicker:nth-child(13) { left: 30%; top: 6%;  animation-duration: 2.8s; animation-delay: 0.9s; }

/* A brief lightning flicker in each top header corner, echoing the
   sky flash rather than a bolt shape (too small a space for the
   zigzag to read well). */
html[data-theme="black"] .site-header::before,
html[data-theme="black"] .site-header::after {
  content: "";
  position: absolute;
  top: 0;
  width: 26px;
  height: 100%;
  background: radial-gradient(ellipse at 50% 0%, #fff8e6 0%, var(--gold) 30%, rgba(232, 195, 124, 0) 75%);
  opacity: 0;
  pointer-events: none;
  animation: thunder-flash 3s ease-in-out infinite;
}
html[data-theme="black"] .site-header::before { left: 12px; animation-delay: 0.15s; }
html[data-theme="black"] .site-header::after { right: 12px; animation-delay: 1.3s; }

@media (prefers-reduced-motion: reduce) {
  html[data-theme="black"] .thunder-flash,
  html[data-theme="black"] .flicker,
  html[data-theme="black"] .site-header::before,
  html[data-theme="black"] .site-header::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ---------- Floating particles (black & gold theme only) ---------- */
.particle-field {
  display: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 4;
}

html[data-theme="black"] .particle-field { display: block; }

.particle {
  position: absolute;
  bottom: -5vh;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  box-shadow: 0 0 6px 1px rgba(232, 195, 124, 0.7);
  animation: particle-drift linear infinite;
}

@keyframes particle-drift {
  0%   { transform: translate(0, 0); opacity: 0; }
  8%   { opacity: 0.75; }
  92%  { opacity: 0.5; }
  100% { transform: translate(var(--drift-x, 30px), -110vh); opacity: 0; }
}

.particle:nth-child(1)  { left: 4%;  width: 2px; height: 2px; --drift-x: 20px; animation-duration: 16s; animation-delay: 0s; }
.particle:nth-child(2)  { left: 11%; width: 4px; height: 4px; --drift-x: -25px; animation-duration: 21s; animation-delay: 2s; }
.particle:nth-child(3)  { left: 18%; width: 3px; height: 3px; --drift-x: 15px; animation-duration: 18s; animation-delay: 5s; }
.particle:nth-child(4)  { left: 26%; width: 2px; height: 2px; --drift-x: -10px; animation-duration: 24s; animation-delay: 1s; }
.particle:nth-child(5)  { left: 34%; width: 5px; height: 5px; --drift-x: 30px; animation-duration: 19s; animation-delay: 7s; }
.particle:nth-child(6)  { left: 42%; width: 3px; height: 3px; --drift-x: -20px; animation-duration: 22s; animation-delay: 3s; }
.particle:nth-child(7)  { left: 50%; width: 2px; height: 2px; --drift-x: 10px; animation-duration: 17s; animation-delay: 6s; }
.particle:nth-child(8)  { left: 58%; width: 4px; height: 4px; --drift-x: -30px; animation-duration: 23s; animation-delay: 0.5s; }
.particle:nth-child(9)  { left: 66%; width: 3px; height: 3px; --drift-x: 18px; animation-duration: 20s; animation-delay: 4s; }
.particle:nth-child(10) { left: 74%; width: 2px; height: 2px; --drift-x: -15px; animation-duration: 15s; animation-delay: 8s; }
.particle:nth-child(11) { left: 82%; width: 5px; height: 5px; --drift-x: 25px; animation-duration: 25s; animation-delay: 2.5s; }
.particle:nth-child(12) { left: 90%; width: 3px; height: 3px; --drift-x: -20px; animation-duration: 18s; animation-delay: 6.5s; }
.particle:nth-child(13) { left: 96%; width: 2px; height: 2px; --drift-x: 12px; animation-duration: 21s; animation-delay: 1.5s; }
.particle:nth-child(14) { left: 8%;  width: 3px; height: 3px; --drift-x: -18px; animation-duration: 26s; animation-delay: 9s; }
.particle:nth-child(15) { left: 55%; width: 2px; height: 2px; --drift-x: 22px; animation-duration: 14s; animation-delay: 3.5s; }
.particle:nth-child(16) { left: 70%; width: 4px; height: 4px; --drift-x: -12px; animation-duration: 19s; animation-delay: 5.5s; }
a { color: inherit; text-decoration: none; }

main { min-height: 100vh; }

/* --------------------------------------------------------------------- */
/* Back button                                                            */
/* --------------------------------------------------------------------- */

.back-btn {
  position: fixed;
  top: 24px;
  left: 28px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1.1rem 0.5rem 0.85rem;
  background: rgba(20, 4, 9, 0.45);
  border: 1px solid var(--gold-soft);
  border-radius: 2px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  backdrop-filter: blur(6px);
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}

.back-btn:hover {
  border-color: var(--gold);
  color: var(--ivory);
  background: rgba(20, 4, 9, 0.7);
}

.back-btn svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* --------------------------------------------------------------------- */
/* Flash messages                                                         */
/* --------------------------------------------------------------------- */

.flash-stack {
  position: fixed;
  top: 24px;
  right: 28px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.flash {
  padding: 0.7rem 1.2rem;
  border-radius: 2px;
  font-size: 0.95rem;
  border: 1px solid var(--gold-soft);
  background: rgba(20, 4, 9, 0.85);
  color: var(--ivory);
  backdrop-filter: blur(6px);
}

.flash-success { border-color: var(--gold); }
.flash-info { border-color: rgba(212, 175, 106, 0.35); }

/* --------------------------------------------------------------------- */
/* Buttons                                                                */
/* --------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.85rem 2.2rem;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.35s ease, box-shadow 0.35s ease, transform 0.2s ease;
}

.btn-gold {
  color: var(--maroon-950);
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  border: 1px solid var(--gold);
  box-shadow: 0 6px 22px rgba(212, 175, 106, 0.3);
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(212, 175, 106, 0.45);
}

.btn-outline {
  color: var(--ivory);
  background: transparent;
  border: 1px solid var(--gold-soft);
}

.btn-outline::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
  z-index: -1;
}

.btn-outline:hover {
  color: var(--maroon-950);
  border-color: var(--gold);
}

.btn-outline:hover::before {
  transform: scaleX(1);
}

.btn-small {
  padding: 0.5rem 1.3rem;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
}

/* --------------------------------------------------------------------- */
/* Hero                                                                    */
/* --------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, var(--maroon-800), var(--maroon-950) 75%);
}

.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-photo-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(20, 4, 9, 0.35),
    rgba(20, 4, 9, 0.55) 70%,
    var(--maroon-950) 100%
  );
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1040px;
  padding: 0 1.5rem;
  box-sizing: border-box;
}

.hero-eyebrow {
  display: block;
  font-family: var(--font-bn);
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: 1.1rem;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  letter-spacing: 0.03em;
  line-height: 1.3;
  color: var(--ivory);
  text-shadow: 0 2px 24px rgba(212, 175, 106, 0.25);
  margin-bottom: 1.4rem;
}

/* Each sentence in the heading is forced onto exactly one line and
   auto-sized to fit by the script at the bottom of this page (see
   fitHeroLines) — CSS alone can't reliably guarantee "one line" across
   every screen width without either overflowing on narrow screens or
   guessing too conservatively on wide ones. */
.hero-line {
  display: inline-block;
  white-space: nowrap;
}

.hero p {
  font-size: clamp(0.92rem, 1.5vw, 1.1rem);
  line-height: 1.55;
  color: var(--ivory-dim);
  max-width: 620px;
  margin: 0 auto 2.2rem;
}

.hero-cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------- */
/* Sections                                                                */
/* --------------------------------------------------------------------- */

.section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 3.6rem 1.75rem;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.8rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--gold-dim);
}

.eyebrow {
  display: block;
  font-family: var(--font-bn);
  font-size: 1rem;
  color: var(--gold);
  margin-bottom: 0.4rem;
}

.section-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: 0.03em;
  color: var(--ivory);
}

/* Reusable round icon badge for section headings — used on every
   section so the page reads as one considered system rather than a
   stack of ad-hoc blocks. */
.section-head-with-icon {
  display: flex;
  align-items: center;
}

.section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--maroon-900);
  border: 1px solid var(--gold-soft);
  color: var(--gold);
  margin-right: 0.9rem;
  flex-shrink: 0;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.section-head-with-icon:hover .section-icon {
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(212, 175, 106, 0.3);
}

.section-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.sort-links {
  display: flex;
  gap: 1.6rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sort-links a {
  color: var(--ivory-dim);
  padding-bottom: 0.3rem;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.sort-links a:hover,
.sort-links a.active {
  color: var(--gold);
  border-color: var(--gold);
}

/* --------------------------------------------------------------------- */
/* Location / city dropdown                                               */
/* --------------------------------------------------------------------- */

.location-section {
  padding-bottom: 0;
}

.location-form {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.select-wrap {
  position: relative;
  display: inline-block;
  min-width: 260px;
}

.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ivory);
  background: var(--maroon-900);
  border: 1px solid var(--gold-soft);
  border-radius: 2px;
  padding: 0.9rem 2.8rem 0.9rem 1.3rem;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.select-wrap select:hover,
.select-wrap select:focus {
  border-color: var(--gold);
  outline: none;
}

.select-wrap select option {
  background: var(--maroon-900);
  color: var(--ivory);
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: normal;
}

.select-caret {
  position: absolute;
  top: 50%;
  right: 1.1rem;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  pointer-events: none;
}

/* --------------------------------------------------------------------- */
/* Map                                                                     */
/* --------------------------------------------------------------------- */

.map-frame {
  position: relative;
  border: 1px solid var(--gold-dim);
  border-radius: 2px;
  overflow: hidden;
}

#overview-map {
  width: 100%;
  height: 460px;
}

.map-fallback {
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--ivory-dim);
  background: var(--maroon-900);
  text-align: center;
  padding: 1.5rem;
}

.map-fallback code {
  color: var(--gold);
  font-family: monospace;
}

/* --------------------------------------------------------------------- */
/* Pandal grid & cards                                                    */
/* --------------------------------------------------------------------- */

.pandal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 260px);
  justify-content: center;
  gap: 1.75rem;
}

/* .pandal-grid's own `display: grid` above is an author rule, and
   author rules always beat the browser's built-in `[hidden] {
   display: none }` UA rule — regardless of specificity. Without this,
   #pandalFullView stays visually rendered (stacked right under the
   list) even while its `hidden` attribute is set correctly by the
   List/Full toggle script. Same story for #pandalListView once Full
   is selected. The #id[hidden] selectors here outrank the plain
   class rules so whichever view isn't active is actually hidden. */
#pandalFullView[hidden],
#pandalListView[hidden] {
  display: none;
}

.pandal-card {
  position: relative;
  width: 260px;
  background: var(--maroon-900);
  border: 1px solid var(--gold-dim);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s),
              transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s),
              border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Cards fade/rise in once their grid scrolls into view (see the
   IntersectionObserver in the page scripts) rather than animating
   immediately on load, so scrolling through the page feels considered.
   The script clears --reveal-delay again right after, so the hover
   transform below never inherits a stale stagger delay. */
.in-view .pandal-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .pandal-card { transition: border-color 0.3s ease, box-shadow 0.3s ease; opacity: 1; transform: none; }
}

.empty-state {
  color: var(--ivory-dim);
  font-style: italic;
  padding: 2rem 0;
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.pandal-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-soft);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45), 0 0 22px rgba(212, 175, 106, 0.18);
}

/* Slim diagonal light sweep on hover — a quieter, more elegant cue
   than a plain shadow bump. */
.pandal-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(212, 175, 106, 0.16) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 0.85s ease;
  pointer-events: none;
  z-index: 1;
}

.pandal-card:hover::after {
  transform: translateX(130%);
}

@media (prefers-reduced-motion: reduce) {
  .pandal-card::after { display: none; }
}

/* Fixed 260 x 162 media block (matches the Top 10 cards) on every card,
   everywhere on the site. overflow: hidden is a safety net — even if a
   photo is a tall portrait crop, it can never push the card taller. */
.card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  height: 162px;
  flex: 0 0 auto;
  overflow: hidden;
  background: linear-gradient(135deg, var(--maroon-800), var(--maroon-700));
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 640px) {
  .pandal-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
  .pandal-card { width: 100%; }
}

.rank-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--maroon-950);
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}

.card-body {
  padding: 1.4rem 1.5rem 1.6rem;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.35rem;
}

.card-area {
  font-family: var(--font-bn);
  font-size: 0.85rem;
  color: var(--gold);
  letter-spacing: 0.02em;
}

.card-body h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: var(--ivory);
  margin: 0.15rem 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-body h3 a:hover { color: var(--gold); }

.card-theme {
  font-style: italic;
  color: var(--ivory-dim);
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-hours {
  font-size: 0.85rem;
  color: rgba(246, 233, 210, 0.55);
  letter-spacing: 0.02em;
}

.card-footer {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vote-count {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--vermillion);
  line-height: 1;
}

.vote-count .label {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(246, 233, 210, 0.5);
}

.card-footer .btn {
  border-radius: 999px;
}

/* --------------------------------------------------------------------- */
/* Footer                                                                  */
/* --------------------------------------------------------------------- */

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 3rem 1.5rem 3.5rem;
  border-top: 1px solid var(--gold-dim);
  text-align: center;
}

.footer-en {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

.footer-bn {
  font-family: var(--font-bn);
  font-size: 0.95rem;
  color: var(--ivory-dim);
}

/* --------------------------------------------------------------------- */
/* Pandal detail page                                                     */
/* --------------------------------------------------------------------- */

.detail-section {
  max-width: 820px;
}

.detail-media {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--maroon-800), var(--maroon-700));
  border: 1px solid var(--gold-dim);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 2rem;
}

.detail-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-head h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: 0.02em;
  color: var(--ivory);
  margin: 0.3rem 0 0.4rem;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.hours-badge,
.traffic-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: 2px;
  border: 1px solid var(--gold-dim);
  color: var(--ivory-dim);
}

.traffic-badge {
  font-weight: 600;
  border-width: 1px;
  border-style: solid;
}

.traffic-low {
  color: #8fd19e;
  border-color: rgba(143, 209, 158, 0.5);
  background: rgba(143, 209, 158, 0.08);
}

.traffic-medium {
  color: #e9cd9a;
  border-color: var(--gold-soft);
  background: rgba(212, 175, 106, 0.08);
}

.traffic-high {
  color: #e08a7d;
  border-color: rgba(224, 138, 125, 0.5);
  background: rgba(224, 138, 125, 0.08);
}

.detail-description {
  margin: 1.6rem 0;
  font-size: 1.1rem;
  color: var(--ivory-dim);
  max-width: 640px;
}

.detail-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 0;
  border-top: 1px solid var(--gold-dim);
  border-bottom: 1px solid var(--gold-dim);
  margin-bottom: 2rem;
}

.vote-count.large {
  font-size: 2.2rem;
}

.detail-map-frame {
  margin-bottom: 2rem;
}

#detail-map {
  width: 100%;
  height: 340px;
}

.back-to-grid {
  display: inline-block;
}

/* --------------------------------------------------------------------- */
/* Trending badge (index grid)                                            */
/* --------------------------------------------------------------------- */

.trending-badge {
  background: linear-gradient(135deg, #e08a7d, #a8763f);
}

/* --------------------------------------------------------------------- */
/* Recommendation quiz                                                    */
/* --------------------------------------------------------------------- */

.quiz-section {
  max-width: 720px;
}

.quiz-intro {
  color: var(--ivory-dim);
  margin-bottom: 2.5rem;
  max-width: 560px;
}

.quiz-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.quiz-field label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: 0.9rem;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.radio-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--gold-dim);
  border-radius: 30px;
  font-size: 0.92rem;
  color: var(--ivory-dim);
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.radio-pill:has(input:checked) {
  border-color: var(--gold);
  color: var(--ivory);
  background: rgba(212, 175, 106, 0.12);
}

.radio-pill input {
  accent-color: var(--gold);
}

/* --------------------------------------------------------------------- */
/* Match results                                                          */
/* --------------------------------------------------------------------- */

.match-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.match-card {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  background: var(--maroon-900);
  border: 1px solid var(--gold-dim);
  border-radius: 2px;
  padding: 1.3rem 1.6rem;
  animation: popIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.match-rank {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--gold);
  min-width: 2.4rem;
}

.match-body {
  flex: 1;
}

.match-body h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ivory);
  margin: 0.1rem 0;
}

.match-bar-wrap {
  width: 100%;
  max-width: 320px;
  height: 6px;
  background: rgba(212, 175, 106, 0.15);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 0.8rem;
}

.match-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  border-radius: 4px;
}

.match-percent {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: rgba(246, 233, 210, 0.55);
}

@media (max-width: 640px) {
  .match-card { flex-direction: column; align-items: flex-start; }
  .detail-footer { flex-direction: column; gap: 1.2rem; align-items: flex-start; }
  .section { padding: 2.5rem 1.25rem; }
  .back-btn { top: 16px; left: 16px; padding: 0.45rem 0.9rem 0.45rem 0.7rem; }
}

/* --------------------------------------------------------------------- */
/* Quiz: text inputs, row layout, hints, errors                          */
/* --------------------------------------------------------------------- */

.select-wrap-small {
  max-width: 220px;
}

.text-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--ivory);
  background: var(--maroon-900);
  border: 1px solid var(--gold-soft);
  border-radius: 2px;
  padding: 0.75rem 1.1rem;
  transition: border-color 0.3s ease;
}

.text-input::placeholder {
  color: rgba(246, 233, 210, 0.35);
}

.text-input:hover,
.text-input:focus {
  border-color: var(--gold);
  outline: none;
}

.quiz-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.optional-tag {
  color: rgba(246, 233, 210, 0.45);
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: normal;
  text-transform: none;
}

.quiz-hint {
  font-size: 0.88rem;
  color: rgba(246, 233, 210, 0.5);
  margin-top: -0.8rem;
}

.quiz-error {
  margin-top: 1.5rem;
  padding: 0.9rem 1.2rem;
  border: 1px solid rgba(224, 138, 125, 0.5);
  background: rgba(224, 138, 125, 0.08);
  color: #e08a7d;
  border-radius: 2px;
  font-size: 0.95rem;
}

@media (max-width: 640px) {
  .quiz-field-row { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------- */
/* Inline results (matches + route) on the quiz page                     */
/* --------------------------------------------------------------------- */

.results-anchor {
  margin-top: 3.5rem;
  padding-top: 3rem;
  border-top: 1px solid var(--gold-dim);
  scroll-margin-top: 2rem;
}

.results-head {
  margin-top: 2.5rem;
}
.results-head:first-child {
  margin-top: 0;
}

.route-start {
  color: var(--ivory-dim);
  margin-bottom: 1.8rem;
}

.route-note {
  display: block;
  font-size: 0.82rem;
  color: rgba(246, 233, 210, 0.45);
  margin-top: 0.3rem;
}

.route-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding-left: 0.5rem;
  margin-bottom: 2rem;
}

.route-timeline::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--gold-dim);
}

.route-stop {
  position: relative;
  display: flex;
  gap: 1.2rem;
  animation: popIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.route-stop-marker {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--maroon-950);
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
}

.route-stop-body {
  flex: 1;
  padding-bottom: 0.2rem;
}

.route-stop-body h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ivory);
  margin: 0.1rem 0 0.15rem;
}

.route-leg {
  display: block;
  font-size: 0.85rem;
  color: var(--gold);
  margin-top: 0.3rem;
}

.route-cumulative {
  display: block;
  font-size: 0.78rem;
  color: rgba(246, 233, 210, 0.45);
  margin-top: 0.15rem;
}

.route-summary {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--gold-dim);
  border-radius: 2px;
  background: var(--maroon-900);
}

.route-total-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(246, 233, 210, 0.5);
}

.route-total-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--gold);
  margin-top: 0.2rem;
}