/* ==============================================================
   JULEKONSERTENE BY FOR BY (21.10.2026)
   Søylefiguren rett under heroen på /julekonsert/: én rad per by, lengden
   er antallet julekonserter, i samme skala for alle. Hver rad er én lenke
   til byens liste. Navnet og tallet er tekst, så figuren leses også uten
   stolpene. Ingen bokser, ingen kant, ingen piller.
   Egen fil fordi figuren bare finnes her, og css/style.css (med
   versjonsnummeret alle sidene deler) skal ikke røres for én side.
   Lastes av scripts/generate-hub-pages.js (extraHead i genJulekonsertHub).

   Fargen er sidens gule aksent i mørk modus. I lys modus er den samme gule
   for lys mot hvitt (1,6:1), så stolpen er en mørkere rav (#B07F00, 3,4:1
   mot #fff, kontrollert med dataviz-validatoren 21.10.2026).
   ============================================================== */

.jul-byfigur {
  --jul-stolpe: #B07F00;
  list-style: none;
  margin: 18px 0 10px;
  padding: 0;
  max-width: 760px;
}
[data-theme="dark"] .jul-byfigur {
  --jul-stolpe: var(--accent);
}

.jul-byfigur__rad {
  display: grid;
  grid-template-columns: minmax(6.5rem, 9.5rem) 1fr 2.75rem;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 4px 0;
  color: var(--text);
  text-decoration: none;
}
.jul-byfigur__by {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.jul-byfigur__strek {
  display: block;
  width: 100%;
  height: 12px;
  overflow: visible;
}
.jul-byfigur__strek rect {
  fill: var(--jul-stolpe);
}
.jul-byfigur__tall {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.jul-byfigur__rad:focus-visible {
  outline: 2px solid var(--focus-ring, var(--accent));
  outline-offset: 3px;
  border-radius: 4px;
}
@media (hover: hover) {
  .jul-byfigur__rad:hover .jul-byfigur__by {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
@media (max-width: 480px) {
  .jul-byfigur__rad {
    grid-template-columns: 6.25rem 1fr 2.5rem;
    gap: 10px;
  }
}

.jul-byfigur-hale {
  margin-top: 6px;
}

/* Stolpene vokser fra venstre når figuren kommer inn i bildet, by for by.
   js/main.js setter .js-reveal og .is-inview på seksjoner med
   data-motion-reveal. Uten bevegelse (eller uten JS) står de ferdige. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .jul-byfigur__strek rect {
    transform: scaleX(0);
    transform-box: fill-box;
    transform-origin: 0 50%;
  }
  .js-reveal.is-inview .jul-byfigur__strek rect {
    transform: scaleX(1);
    transition: transform 720ms var(--ease-out-quart, cubic-bezier(0.23, 1, 0.32, 1));
  }
  .js-reveal.is-inview .jul-byfigur li:nth-child(2) rect { transition-delay: 40ms; }
  .js-reveal.is-inview .jul-byfigur li:nth-child(3) rect { transition-delay: 80ms; }
  .js-reveal.is-inview .jul-byfigur li:nth-child(4) rect { transition-delay: 120ms; }
  .js-reveal.is-inview .jul-byfigur li:nth-child(5) rect { transition-delay: 160ms; }
  .js-reveal.is-inview .jul-byfigur li:nth-child(6) rect { transition-delay: 200ms; }
  .js-reveal.is-inview .jul-byfigur li:nth-child(7) rect { transition-delay: 240ms; }
  .js-reveal.is-inview .jul-byfigur li:nth-child(8) rect { transition-delay: 280ms; }
  .js-reveal.is-inview .jul-byfigur li:nth-child(9) rect { transition-delay: 320ms; }
  .js-reveal.is-inview .jul-byfigur li:nth-child(10) rect { transition-delay: 360ms; }
  .js-reveal.is-inview .jul-byfigur li:nth-child(11) rect { transition-delay: 400ms; }
  .js-reveal.is-inview .jul-byfigur li:nth-child(12) rect { transition-delay: 440ms; }
}

/* ---------- Svarlista i heroen (21.10.2026) ----------
   De sju store kveldene med dato, sted og billettlenke på første skjerm.
   Heroen er mørk i begge temaer, så fargene er hvite og gule her som i
   resten av heroen. Rader med tynn skillestrek, ingen bokser og ingen piller.
   Hver rad er et rutenett, så navnet og stedet brekker i sin egen kolonne. */
.jul-hero-liste {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
/* Samme bredde som innholdskolonnen under: hele containeren, ikke 760 px-kolonnen
   som resten av heroen bruker. Høyere spesifisitet enn .page-hero--festivals .container > *. */
.page-hero--festivals.page-hero--jul-fri .container > .jul-hero-liste {
  max-width: none;
}
.jul-hero-liste li {
  display: grid;
  grid-template-columns: 7.2rem 1fr auto;
  align-items: baseline;
  gap: 2px 14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
}
.jul-hero-liste li:last-child {
  border-bottom: 0;
}
.jul-hero-liste__dato {
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.jul-hero-liste__hva a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.jul-hero-liste__hva > span {
  display: block;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
}
.jul-hero-liste__billett {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
@media (hover: hover) {
  .jul-hero-liste__hva a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .jul-hero-liste__billett:hover { color: var(--accent); }
}
.jul-hero-liste a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
@media (max-width: 480px) {
  .jul-hero-liste li {
    grid-template-columns: 6.9rem 1fr auto;
    gap: 2px 8px;
    padding: 8px 0;
    font-size: 0.95rem;
  }
}
/* Juleturneene som rader med hårstrek mellom (kritikkpass 21.10.2026). Øverst
   artist, antall byer og første og siste dato; byene på én kort linje under.
   Ingen bokser, piller eller versaletiketter. */
.jul-turne {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  max-width: 820px;
  border-top: 1px solid var(--border);
}
.jul-turne li {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.jul-turne__topp {
  display: grid;
  grid-template-columns: 1fr auto 9.5rem;
  gap: 4px 16px;
  align-items: baseline;
}
.jul-turne__navn { font-weight: 600; }
.jul-turne__antall,
.jul-turne__dato {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.jul-turne__dato { text-align: right; }
.jul-turne__byer {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}
@media (max-width: 480px) {
  .jul-turne__topp {
    grid-template-columns: 1fr auto;
    grid-template-areas: "navn antall" "dato dato";
  }
  .jul-turne__navn { grid-area: navn; }
  .jul-turne__antall { grid-area: antall; }
  .jul-turne__dato { grid-area: dato; text-align: left; color: var(--text-muted); }
}

/* Uten kortrutenettet står figurblokka og resten av siden inntil hverandre, og
   .page-content + .page-content la en strek oppå seksjonens egen hårstrek. */
.container.page-content--featured + .container.page-content { border-top: 0; }

/* ---------- Fotobånd og flat tekstflate (v2, 21.10.2026) ----------
   Eierregel: aldri tekst over bilder. Fotoet står fritt som bånd øverst; H1,
   ingress og de sju kveldene ligger på en flat mørk flate rett under. Flaten er
   mørk i begge temaer, som resten av hero-flatene på huset. */
.page-hero--festivals.page-hero--jul-fri {
  padding: 0 0 44px;
  background-color: #0d0d14;
  background-image: none;
}
.page-hero--festivals.page-hero--jul-fri::before {
  display: none;
}
.page-hero--jul-fri > .container {
  padding-top: 22px;
}
.jul-foto {
  margin: 0;
}
.jul-foto__bilde {
  position: relative;
  overflow: hidden;
  height: clamp(170px, 21vw, 300px);
  background: #0d0d14;
}
.jul-foto__bilde img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 50%;
}
@media (min-width: 700px) {
  .jul-foto__bilde img { object-position: center 50%; }
}
.jul-foto__kreditt {
  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 20px 0;
  font-size: 0.75rem;
  color: var(--hero-ink-faint);
  text-align: right;
}
.jul-foto__kreditt a {
  color: var(--hero-ink-muted);
}

/* ---------- Alle byer A-Å (v2) ----------
   Én vanlig lenke under figuren, til starten av bylista. */
.jul-alle-byer {
  margin: 14px 0 8px;
}
.jul-alle-byer a {
  display: inline-block;
  padding: 11px 0;
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.jul-alle-byer a:focus-visible {
  outline: 2px solid var(--focus-ring, var(--accent));
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Bylista gruppert og foldet (v2) ---------- */
.jul-by-antall {
  margin-left: 6px;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-muted);
  white-space: nowrap;
}
.jul-by-flere {
  margin-top: 4px;
}
.jul-by-flere > summary {
  display: inline-block;
  padding: 10px 0;
  cursor: pointer;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.jul-by-flere > summary:focus-visible {
  outline: 2px solid var(--focus-ring, var(--accent));
  outline-offset: 2px;
  border-radius: 2px;
}

/* Artistlista (v2): samme hårstrekrader som juleturneene, ikke kortrutenett. */
.jul-artister .jul-turne__topp {
  grid-template-columns: 1fr auto;
  grid-template-areas: none;
}
.jul-artister .jul-turne__navn,
.jul-artister .jul-turne__dato {
  grid-area: auto;
}
.jul-artister .jul-turne__dato {
  color: var(--text);
}
@media (max-width: 480px) {
  .jul-artister .jul-turne__dato { color: var(--text-muted); }
}
.jul-by-flere {
  margin-bottom: 22px;
}

/* Ingressen får aldri en kort siste linje (kontrollert på 390 og 1440). */
.page-hero--jul-fri .lead {
  text-wrap: pretty;
}