/* Festival detail page (/festivals/{slug}). Scoped to .festival-detail.
   Self-contained palette (light + dark) so it renders correctly independent of Tailwind tokens. */
.festival-detail {
  --fd-ink: #241d14;
  --fd-ink-2: #4d4334;
  --fd-ink-3: #7a6f5d;
  --fd-faint: #a99e89;
  --fd-paper: #fbf8f3;
  --fd-card: #ffffff;
  --fd-line: #ece2d2;
  --fd-line-2: #ddd0bb;
  --fd-saffron: #e8800c;
  --fd-saffron-d: #b9620a;
  --fd-saffron-soft: #fff3e2;
  --fd-crimson: #b3321f;
  --fd-green: #1f7a4d;
  --fd-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  color: var(--fd-ink);
}
.dark .festival-detail {
  --fd-ink: #f3ead9;
  --fd-ink-2: #d9ccb3;
  --fd-ink-3: #b3a589;
  --fd-faint: #8f8369;
  --fd-paper: #1a1712;
  --fd-card: #241f18;
  --fd-line: #3a3225;
  --fd-line-2: #4d4029;
  --fd-saffron-soft: #2c2113;
}

.festival-detail a { color: var(--fd-saffron-d); text-decoration: none; }
.festival-detail a:hover { text-decoration: underline; }
.dark .festival-detail a { color: #f5b751; }

/* hero — gradient banner variant: major festivals (and any with a real hero image)
   carry the name/date/chips ON the gradient instead of a separate empty band.
   Sized by its content (no fixed aspect-ratio), so it never leaves dead space. */
.festival-detail .fd-hero--cover {
  position: relative; isolation: isolate;
  border-radius: 14px; overflow: hidden;
  padding: 26px 28px 22px; margin-bottom: 22px;
  /* taller band so the hero/gradient has room to breathe; content anchors to the
     foot of the band (over the dark part of the scrim) and the photo shows above it */
  min-height: 240px; display: flex; flex-direction: column; justify-content: flex-end;
  box-shadow: 0 8px 24px rgba(60,40,10,.14);
  background: radial-gradient(130% 150% at 50% 130%, #f0820f 0%, #7a2d0a 45%, #1a1330 100%);
}
/* optional photographic hero sits behind the text */
.festival-detail .fd-hero--cover .fd-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* scrim keeps overlaid text legible over the bright saffron foot of the gradient / any image */
.festival-detail .fd-hero--cover::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12,6,22,.12) 0%, rgba(12,6,22,.5) 100%); }
/* recolour the inner type for the dark banner (light theme + dark theme alike) */
.festival-detail .fd-hero--cover .fd-hero__title { color: #fff7ec; }
.festival-detail .fd-hero--cover .fd-hero__tagline { color: #f4dcbb; }
.festival-detail .fd-hero--cover .fd-when__lab { color: #f1d2a6; }
.festival-detail .fd-hero--cover .fd-when__big,
.dark .festival-detail .fd-hero--cover .fd-when__big { color: #ffd9a6; }
.festival-detail .fd-hero--cover .fd-when__cd { color: #f4dcbb; }
.festival-detail .fd-hero--cover .fd-chip { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.3); color: #fff3e2; }
.festival-detail .fd-hero--cover .fd-chip--hot,
.dark .festival-detail .fd-hero--cover .fd-chip--hot { background: rgba(255,206,140,.24); border-color: rgba(255,206,140,.5); color: #ffe8c8; }

/* hero */
.festival-detail .fd-hero__id { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.festival-detail .fd-hero__title { font-family: var(--fd-serif); font-size: 34px; line-height: 1.1; margin: 0; letter-spacing: -.3px; color: var(--fd-ink); }
.festival-detail .fd-hero__tagline { font-size: 14px; color: var(--fd-ink-3); margin: 4px 0 0; }
.festival-detail .fd-when { text-align: right; min-width: 160px; }
.festival-detail .fd-when__lab { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--fd-faint); }
.festival-detail .fd-when__big { font-family: var(--fd-serif); font-size: 22px; font-weight: 700; color: var(--fd-crimson); }
.dark .festival-detail .fd-when__big { color: #f0a35a; }
.festival-detail .fd-when__link { color: inherit; text-decoration: none; }
.festival-detail .fd-when__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.festival-detail .fd-when__cd { font-size: 12.5px; color: var(--fd-ink-3); }

.festival-detail .fd-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.festival-detail .fd-chip { font-size: 12px; background: var(--fd-saffron-soft); border: 1px solid var(--fd-line-2); color: var(--fd-ink-2); padding: 3px 11px; border-radius: 20px; }
.festival-detail .fd-chip--hot { background: #fbe3c7; border-color: #f0c98e; color: #a3530f; font-weight: 600; }
.dark .festival-detail .fd-chip--hot { background: #4a2f10; border-color: #6b4413; color: #f0a35a; }

/* cross-link banner */
.festival-detail .fd-xbanner {
  display: flex; gap: 10px; align-items: center; padding: 11px 15px; border-radius: 11px;
  font-size: 14px; margin: 22px 0; background: var(--fd-saffron-soft); border: 1px solid var(--fd-line-2);
}
.festival-detail .fd-xbanner a { font-weight: 700; }

/* quick answer */
.festival-detail .fd-quick {
  background: linear-gradient(180deg, var(--fd-card), var(--fd-saffron-soft));
  border: 1px solid var(--fd-line-2); border-left: 4px solid var(--fd-saffron);
  border-radius: 0 12px 12px 0; padding: 16px 20px; font-size: 16px; line-height: 1.6; margin: 22px 0;
}

/* sections */
.festival-detail .fd-sec { margin-top: 30px; border-top: 1px solid var(--fd-line); padding-top: 22px; }
.festival-detail .fd-h2 { font-family: var(--fd-serif); font-size: 21px; margin: 0 0 6px; color: var(--fd-ink); }
.festival-detail .fd-lead { color: var(--fd-ink-2); margin: 0 0 12px; }
.festival-detail .fd-caveat { font-size: 12.5px; color: var(--fd-faint); margin-top: 10px; }

/* dates */
.festival-detail .fd-dates { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
@media (max-width: 560px) {
  .festival-detail .fd-dates { grid-template-columns: repeat(3, 1fr); }
  .festival-detail .fd-hero--cover { min-height: 180px; }
}
.festival-detail .fd-dcell { background: var(--fd-card); border: 1px solid var(--fd-line); border-radius: 11px; padding: 12px 8px; text-align: center; }
.festival-detail .fd-dcell--now { border: 2px solid var(--fd-saffron); background: var(--fd-saffron-soft); }
.festival-detail .fd-dcell__yr { font-size: 11.5px; color: var(--fd-faint); }
.festival-detail .fd-dcell__dd { font-family: var(--fd-serif); font-size: 17px; font-weight: 700; color: var(--fd-ink); margin: 2px 0; }
.festival-detail .fd-dcell__wd { font-size: 11px; color: var(--fd-ink-3); }
.festival-detail .fd-dcell__link { display: block; text-decoration: none; cursor: pointer; }
.festival-detail .fd-dcell__link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* cluster */
.festival-detail .fd-cluster { display: flex; gap: 8px; flex-wrap: wrap; }
.festival-detail .fd-day { flex: 1; min-width: 100px; background: var(--fd-card); border: 1px solid var(--fd-line); border-radius: 11px; padding: 11px 12px; }
.festival-detail .fd-day--peak { border-color: var(--fd-crimson); background: color-mix(in srgb, var(--fd-crimson) 8%, var(--fd-card)); }
.festival-detail .fd-day__dt { font-size: 11.5px; color: var(--fd-ink-3); margin-bottom: 4px; }
.festival-detail .fd-day__name { display: block; font-size: 13.5px; font-weight: 700; }

/* prose + rituals */
.festival-detail .fd-prose p { color: var(--fd-ink-2); margin: 10px 0; line-height: 1.62; }
.festival-detail .fd-ritual-list { list-style: none; padding: 0; margin: 8px 0 0; }
.festival-detail .fd-ritual-list li { padding: 8px 0 8px 24px; position: relative; border-top: 1px solid var(--fd-line); color: var(--fd-ink-2); }
.festival-detail .fd-ritual-list li:first-child { border-top: none; }
.festival-detail .fd-ritual-list li::before { content: "\25C6"; position: absolute; left: 4px; top: 10px; color: var(--fd-saffron); font-size: 11px; }

/* custom callout */
.festival-detail .fd-custom--callout { background: var(--fd-saffron-soft); border: 1px solid var(--fd-line-2); border-radius: 12px; padding: 16px 18px; }
.festival-detail .fd-custom p { color: var(--fd-ink-2); margin: 8px 0; }

/* regional */
.festival-detail .fd-regrow { padding: 13px 0; border-top: 1px solid var(--fd-line); }
.festival-detail .fd-regrow:first-child { border-top: none; }
.festival-detail .fd-regrow__name { font-weight: 700; color: var(--fd-ink); }
.festival-detail .fd-regrow__note { font-size: 13.5px; color: var(--fd-ink-2); }

/* muhurat */
.festival-detail .fd-muhurat { background: var(--fd-card); border: 1px solid var(--fd-line); border-radius: 12px; padding: 6px 16px; }
.festival-detail .fd-muhurat__row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--fd-line); }
.festival-detail .fd-muhurat__row:first-child { border-top: none; }
.festival-detail .fd-muhurat__lab { color: var(--fd-ink-3); font-size: 13px; text-transform: capitalize; }
.festival-detail .fd-muhurat__val { font-family: var(--fd-serif); font-weight: 700; color: var(--fd-green); }
.dark .festival-detail .fd-muhurat__val { color: #6fcf97; }

/* compute */
.festival-detail .fd-compute { background: var(--fd-card); border: 1px solid var(--fd-line); border-radius: 12px; padding: 14px 18px; }
.festival-detail .fd-compute > summary { cursor: pointer; list-style: none; }
.festival-detail .fd-compute > summary::-webkit-details-marker { display: none; }
.festival-detail .fd-compute > summary::before { content: "\25B8 "; color: var(--fd-saffron-d); }
.festival-detail .fd-compute[open] > summary::before { content: "\25BE "; }
.festival-detail .fd-compute__text { color: var(--fd-ink-2); font-size: 14px; margin: 10px 0 0; line-height: 1.6; }

/* faq */
.festival-detail .fd-faq { border: 1px solid var(--fd-line); border-radius: 10px; margin: 8px 0; background: var(--fd-card); overflow: hidden; }
.festival-detail .fd-faq > summary { cursor: pointer; padding: 13px 16px; font-weight: 600; color: var(--fd-ink); list-style: none; }
.festival-detail .fd-faq > summary::-webkit-details-marker { display: none; }
.festival-detail .fd-faq > summary::after { content: "+"; float: right; color: var(--fd-faint); }
.festival-detail .fd-faq[open] > summary::after { content: "\2013"; }
.festival-detail .fd-faq__a { padding: 0 16px 14px; color: var(--fd-ink-2); font-size: 14.5px; }

/* related + tools grids */
.festival-detail .fd-relgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 11px; }
.festival-detail .fd-relcard { background: var(--fd-card); border: 1px solid var(--fd-line); border-radius: 11px; padding: 12px 13px; }
.festival-detail .fd-relcard:hover { border-color: var(--fd-saffron); text-decoration: none; }
.festival-detail .fd-relcard__name { font-weight: 700; color: var(--fd-ink); font-size: 14px; }
.festival-detail .fd-relcard__meta { font-size: 11.5px; color: var(--fd-faint); margin-top: 1px; }
.festival-detail .fd-toolgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.festival-detail .fd-toolcard { background: var(--fd-card); border: 1px solid var(--fd-line); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; font-weight: 600; color: var(--fd-ink-2); }
.festival-detail .fd-toolcard:hover { border-color: var(--fd-saffron); text-decoration: none; }