/* src/ModernAstro.Web/wwwroot/css/festivals-index.css
   Timeless festival hub + search (/festivals). Editorial saffron/cream/serif, sharing the
   calendar-redesign + festival-detail token idiom. Three layers: an atmospheric hero, a
   photographic "great festivals" mosaic, and a fully client-filterable A–Z directory whose rows
   carry a per-deity accent swatch. The editorial layers collapse while a search/filter is active. */

.fi { max-width: 1080px; margin: 0 auto; }

/* ---------- hero ---------- */
.fi-hero { position: relative; overflow: hidden; border-radius: 22px; margin: 6px 0 28px;
  padding: clamp(28px, 5vw, 46px) clamp(22px, 4vw, 38px) clamp(24px, 4vw, 34px);
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 46%, #fde4c4 100%);
  border: 1px solid #fbd6ad; }
.dark .fi-hero { background: linear-gradient(135deg, #1c1410 0%, #261a10 55%, #2c1c0f 100%); border-color: #43301d; }
.fi-hero__glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 80% at 88% -12%, rgba(249,115,22,.30), transparent 60%),
              radial-gradient(40% 70% at 6% 120%, rgba(202,138,4,.18), transparent 60%); }
.fi-hero__inner { position: relative; z-index: 1; max-width: 47rem; }
.fi-hero__eyebrow { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #c2410c; font-weight: 700; margin: 0 0 9px; }
.dark .fi-hero__eyebrow { color: #fb923c; }
.fi-hero__h1 { font-family: "Merriweather", Georgia, serif; font-weight: 800; font-size: clamp(30px, 6vw, 46px);
  line-height: 1.04; letter-spacing: -.02em; margin: 0; color: #2a1709; }
.dark .fi-hero__h1 { color: #fdf3e7; }
.fi-hero__sub { color: #7c5a3a; font-size: 15.5px; margin: 12px 0 20px; max-width: 42rem; line-height: 1.6; }
.dark .fi-hero__sub { color: #c4a988; }

.fi-search { position: relative; display: flex; align-items: center; max-width: 40rem; }
.fi-search__icon { position: absolute; left: 16px; width: 19px; height: 19px; color: #a8a29e; pointer-events: none; }
.fi-search input { width: 100%; height: 54px; padding: 0 44px; border-radius: 14px;
  border: 1px solid #f0c79a; background: rgba(255,255,255,.92); font-family: inherit; font-size: 16px; color: #1c1917;
  box-shadow: 0 6px 22px -14px rgba(120,53,15,.5); }
.fi-search input::placeholder { color: #b09576; }
.fi-search input:focus { outline: none; border-color: #f97316; box-shadow: 0 0 0 3px rgba(249,115,22,.18); background: #fff; }
.dark .fi-search input { background: rgba(28,20,12,.85); border-color: #5a4225; color: #f5f5f4; }
.fi-search__clear { position: absolute; right: 12px; width: 28px; height: 28px; border-radius: 99px;
  border: 0; background: #f5ede2; color: #78716c; font-size: 18px; line-height: 1; cursor: pointer; }
.dark .fi-search__clear { background: #3a2c1c; color: #c4a988; }

/* ---------- shared section heads ---------- */
.fi-eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #92837a; font-weight: 700; margin: 0 0 10px; }
.fi-sec { margin: 0 0 14px; }
.fi-sec--dir { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid #ece6df; padding-bottom: 10px; }
.dark .fi-sec--dir { border-bottom-color: #2c2620; }
.fi-sec__h { font-family: "Merriweather", Georgia, serif; font-weight: 700; font-size: clamp(20px, 3vw, 26px);
  line-height: 1.1; color: #2a1709; margin: 0; }
.dark .fi-sec__h { color: #fdf3e7; }
.fi-sec__sub { color: #92837a; font-size: 14px; margin: 5px 0 0; }

/* ---------- upcoming rail (client-hydrated) ---------- */
.fi-upcoming { margin: 0 0 30px; }
.fi-upcoming__rail { display: flex; gap: 11px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.fi-up { position: relative; flex: 0 0 auto; min-width: 178px; padding: 13px 15px 13px 19px; border-radius: 13px;
  border: 1px solid #ece6df; background: #fff; text-decoration: none; color: inherit; overflow: hidden; transition: border-color .15s, transform .15s; }
.dark .fi-up { background: #1c1714; border-color: #2c2620; }
.fi-up::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--up-accent, #f97316); }
.fi-up:hover { border-color: var(--up-accent, #f97316); transform: translateY(-2px); }
.fi-up__d { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--up-accent, #c2410c); }
.fi-up__n { display: block; font-family: "Merriweather", Georgia, serif; font-weight: 700; font-size: 15px; line-height: 1.18; margin-top: 4px; color: #1c1917; }
.dark .fi-up__n { color: #f5f5f4; }
.fi-up__in { font-size: 12px; color: #92837a; margin-top: 3px; }

/* ---------- featured mosaic ---------- */
.fi-featured { margin: 0 0 34px; }
.fi-feat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; grid-auto-flow: dense; }
.fi-feat { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden;
  text-decoration: none; color: #fff; background: #2a1709; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.fi-feat.is-noimg { background: linear-gradient(140deg, #c2410c, #7c2d12); }
.fi-feat__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.fi-feat:hover .fi-feat__img { transform: scale(1.055); }
.fi-feat__scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(178deg, rgba(20,12,8,0) 32%, rgba(20,12,8,.55) 68%, rgba(20,12,8,.86) 100%); }
.fi-feat__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 13px 14px;
  display: flex; flex-direction: column; gap: 2px; }
.fi-feat__name { font-family: "Merriweather", Georgia, serif; font-weight: 700; font-size: 16px; line-height: 1.12;
  text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.fi-feat__deity { font-size: 12px; opacity: .9; }
.fi-feat__timing { display: none; align-self: flex-start; margin-top: 8px; font-size: 11px; font-weight: 600;
  letter-spacing: .02em; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
  padding: 3px 10px; border-radius: 999px; backdrop-filter: blur(2px); }

/* the lead tile dominates from tablet up, and earns the larger type + timing chip */
.fi-feat--lead { grid-column: span 2; }
.fi-feat--lead .fi-feat__name { font-size: clamp(22px, 3.4vw, 32px); }
.fi-feat--lead .fi-feat__deity { font-size: 13.5px; }
.fi-feat--lead .fi-feat__timing { display: inline-flex; }
.fi-feat--lead .fi-feat__body { padding: 18px 20px; gap: 3px; }

@media (min-width: 640px) {
  .fi-feat-grid { grid-template-columns: repeat(3, 1fr); gap: 13px; }
  .fi-feat--lead { grid-column: span 2; grid-row: span 2; }
}
@media (min-width: 980px) {
  .fi-feat-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
}

/* ---------- facets ---------- */
.fi-dir { scroll-margin-top: 80px; }
.fi-facets { margin: 16px 0 10px; display: flex; flex-direction: column; gap: 8px; }
.fi-facet-row { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.fi-facet-lab { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #a8a29e; font-weight: 600; min-width: 64px; }
.fi-chip { appearance: none; cursor: pointer; border: 1px solid #e7e5e4; background: #fff; color: #57534e;
  font-family: inherit; font-weight: 500; font-size: 13px; padding: 5px 12px; border-radius: 999px; transition: border-color .12s, background .12s; }
.fi-chip:hover { border-color: #d6a06a; }
.fi-chip.is-on { background: #fff7ed; border-color: #f97316; color: #c2410c; font-weight: 600; }
.dark .fi-chip { background: #1c1714; border-color: #3a322b; color: #c4a988; }
.dark .fi-chip.is-on { background: #2c2114; color: #fdba74; border-color: #ea580c; }

/* ---------- count ---------- */
.fi-count { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 8px 0 2px; font-size: 13px; color: #92837a; }
.fi-clear { border: 0; background: none; color: #c2410c; font-weight: 600; font-size: 13px; cursor: pointer; }

/* ---------- directory list ---------- */
.fi-list { list-style: none; margin: 0; padding: 0; }
.fi-row { border-bottom: 1px solid #f0ece6; }
.dark .fi-row { border-bottom-color: #2a241e; }
.fi-row[hidden] { display: none; }
.fi-row__link { display: flex; align-items: center; gap: 14px; padding: 11px 8px; border-radius: 11px;
  text-decoration: none; color: inherit; }
.fi-row__link:hover { background: #fdf6ee; }
.dark .fi-row__link:hover { background: #1c1714; }
/* 3:2 media box — holds the festival photo when we have one, else shows the accent gradient.
   Fixed size for every row so the name column stays aligned whether a row has a photo or not. */
.fi-row__media { flex: 0 0 auto; position: relative; width: 54px; aspect-ratio: 3 / 2; border-radius: 9px;
  overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
.fi-row__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease; }
.fi-row__link:hover .fi-row__thumb { transform: scale(1.06); }
/* Desktop has the room — give the photography more presence. */
@media (min-width: 980px) {
  .fi-row__media { width: 76px; border-radius: 11px; }
}
.fi-row__main { flex: 1 1 auto; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; min-width: 0; }
.fi-row__name { font-family: "Merriweather", Georgia, serif; font-weight: 700; font-size: 16.5px; color: #1c1917; line-height: 1.2; }
.dark .fi-row__name { color: #f5f5f4; }
.fi-row__link:hover .fi-row__name { color: #c2410c; }
.dark .fi-row__link:hover .fi-row__name { color: #fdba74; }
.fi-row__deity { font-size: 13px; color: #a8a29e; }
.fi-row__timing { flex: 0 0 auto; font-size: 12.5px; color: #92837a; white-space: nowrap; font-variant-numeric: tabular-nums; }

.fi-empty { color: #92837a; font-style: italic; text-align: center; padding: 40px 0; }

/* search/filter active → collapse the editorial layers, tighten the directory heading */
.fi.is-filtering .fi-browse { display: none; }
.fi.is-filtering #fi-dir-h { font-size: 15px; color: #92837a; font-family: inherit; font-weight: 600; }

/* ---------- footer ---------- */
.fi-foot { margin-top: 26px; padding-top: 18px; border-top: 1px solid #ece6df; }
.dark .fi-foot { border-top-color: #2c2620; }
.fi-foot__cta { display: inline-block; font-weight: 600; font-size: 14px; color: #c2410c; text-decoration: none; }
.fi-foot__cta:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .fi-row__main { gap: 2px 9px; }
  .fi-row__timing { white-space: normal; }
}