/* Jamming.Live Featured rows: Home Featured Artists / Venues and the Featured rows above the Discover results.
   Up to five cards are visible at once on a wide row, fewer on a narrower one (the row's OWN width decides, so a page with an ad rail shows fewer).
   Rotation and the controls exist only when there are more entries than visible cards (jl-featured-row.js). */
/* The section above the Discover results. */
.fr-lead { margin: 10px 0 26px; }
.fr-lead h2 { margin: 0 0 12px; font-size: clamp(1.25rem, 2.2vw, 1.6rem); }

.fr { --fr-gap: 16px; container-type: inline-size; container-name: fr; position: relative; }

/* Card widths match the regular results (at least about 200px each): 440 / 660 / 880 / 1100px of row width hold 2 / 3 / 4 / 5 cards.
   The viewport: without the script it scrolls sideways (every entry reachable); with it (.is-ready) it clips and the script slides the track. A small
   padding keeps a card's hover lift and focus ring unclipped; it is narrower than the gap, so a neighbouring card never shows. */
.fr-viewport { --fr-visible: 1; overflow-x: auto; padding: 6px; margin: -6px; scroll-padding-inline: 6px; scroll-snap-type: x proximity; }
@container fr (min-width: 440px) { .fr-viewport { --fr-visible: 2; } }
@container fr (min-width: 660px) { .fr-viewport { --fr-visible: 3; } }
@container fr (min-width: 880px) { .fr-viewport { --fr-visible: 4; } }
@container fr (min-width: 1100px) { .fr-viewport { --fr-visible: 5; } }
.fr.is-ready .fr-viewport { overflow: hidden; scroll-snap-type: none; }

.fr-track { position: relative; list-style: none; margin: 0; padding: 0; display: flex; gap: var(--fr-gap); }
.fr.is-ready .fr-track { transition: transform 0.5s ease; }
.fr-item { flex: 0 0 calc((100% - (var(--fr-visible) - 1) * var(--fr-gap)) / var(--fr-visible)); min-width: 0; scroll-snap-align: start; }

.fr-card { height: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: border-color 150ms, transform 150ms; }
.fr-card:hover { border-color: #555563; transform: translateY(-2px); }
.fr-card:has(a:focus-visible) { border-color: var(--focus); outline: 3px solid var(--focus); outline-offset: 2px; }
.fr-card a { display: block; height: 100%; color: inherit; text-decoration: none; }
.fr-card a:focus-visible { outline: none; }
.fr-media { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #15151c, #0b0b10); overflow: hidden; }
.fr-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fr-date { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; align-items: center; min-width: 46px; padding: 5px 8px; border-radius: 6px; background: var(--accent); color: #fff; line-height: 1.1; }
.fr-date span { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; }
.fr-date strong { font-size: 1.35rem; }
.fr-body { padding: 12px 14px 14px; min-width: 0; }
.fr-body h3 { margin: 0 0 4px; font-size: 1.05rem; line-height: 1.25; overflow-wrap: anywhere; }
.fr-body p { margin: 0 0 3px; font-size: 0.92rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.fr-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; align-items: baseline; }
.fr-link { color: var(--accent-ink); font-weight: 600; white-space: nowrap; }

/* Controls (hidden until the script finds more entries than visible cards). */
.fr-controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.fr-controls[hidden] { display: none; }
.fr-btn { min-width: 44px; min-height: 44px; padding: 0 14px; font: inherit; font-weight: 600; color: var(--ink); background: var(--panel-2); border: 1px solid #3a3a45; border-radius: 8px; cursor: pointer; }
.fr-btn:hover { border-color: #fff; }
.fr-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.fr-btn[hidden] { display: none; }
.fr-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .fr.is-ready .fr-track { transition: none; }
  .fr-card { transition: none; }
  .fr-card:hover { transform: none; }
}