/* Lawsie Radio Hub: now-playing layout
 * Scoped to .lawsie-radio-hub so the rules never leak into the rest of the theme.
 * Mobile-first; desktop tweaks live in the min-width block at the end.
 */

.lawsie-radio-hub {
    --lrh-text: #0f172a;
    --lrh-muted: #475569;
    --lrh-rule: #e5e7eb;
    --lrh-accent: #2563eb;
    --lrh-pill-bg: #f1f5f9;
    --lrh-pill-text: #1e293b;
    --lrh-radius: 12px;
    --lrh-radius-pill: 999px;

    line-height: 1.55;
    color: var(--lrh-text);
}

/* Transient loading state shown while the client retries the first fetch. Muted and
 * gently pulsing so a slow first load reads as "working", not "broken". */
.lawsie-radio-hub--loading {
    color: var(--lrh-muted);
    animation: lawsie-radio-hub-pulse 1.4s ease-in-out infinite;
}
@keyframes lawsie-radio-hub-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
    .lawsie-radio-hub--loading {
        animation: none;
    }
}

/* Now-playing track is the page's headline. Give it weight. */
.lawsie-radio-hub__current .lawsie-radio-hub__track {
    font-size: 1.75rem;
    line-height: 1.2;
    margin: 0.25rem 0 0.75rem;
}
.lawsie-radio-hub__piece {
    font-weight: 700;
}
.lawsie-radio-hub__composer {
    font-weight: 600;
    color: var(--lrh-muted);
}

/* Refresh stamp sits below the track, demoted visually. */
.lawsie-radio-hub__refresh {
    font-size: 0.85rem;
    color: var(--lrh-muted);
    margin: 0 0 1rem;
}
.lawsie-radio-hub__refresh small {
    color: var(--lrh-muted);
}

/* Pipeline-health pill sits inline at the start of the "Last refreshed" line.
 * Reads the most recent played_at row for this station against thresholds in
 * PipelineHealth.php. Saturated green when fresh, amber when slow, red when
 * stuck. All three colour pairs hit WCAG AA contrast for white text on the
 * background (live 4.6:1, slow 4.7:1, stuck 6.1:1).
 */
.lawsie-radio-hub__health {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.3em 0.75em;
    margin-right: 0.5em;
    border-radius: var(--lrh-radius-pill);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
    vertical-align: 0.05em;
    background: var(--lrh-pill-bg);
    color: var(--lrh-pill-text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.lawsie-radio-hub__health-dot {
    display: inline-block;
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.lawsie-radio-hub__health-prefix {
    font-weight: 500;
    opacity: 0.85;
}
.lawsie-radio-hub__health--live {
    background: #15803d;
    color: #ffffff;
}
.lawsie-radio-hub__health--slow {
    background: #b45309;
    color: #ffffff;
}
.lawsie-radio-hub__health--stuck {
    background: #b91c1c;
    color: #ffffff;
}

/* Album artwork: cap the size, keep a clean square, never overflow. */
.lawsie-radio-hub__image {
    display: block;
    max-width: 320px;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--lrh-radius);
    margin: 0.5rem 0 1.25rem;
}

/* About sandwich (Option B layout): artwork on the left, About body on the right at
 * desktop widths; stacks back to single column on mobile. plays-this-week and the
 * "About this artist" heading sit ABOVE the grid as full-width rows.
 *
 * Flexbox over grid here so the layout adapts naturally when there's no artwork
 * (common: BBC placeholder is filtered out). With one child, the beside-content
 * takes the whole row; no empty image column to look at. */
.lawsie-radio-hub__about-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0.5rem 0 0;
}
.lawsie-radio-hub__about-grid > .lawsie-radio-hub__image {
    flex: 0 0 auto;
    width: 100%;
    max-width: 320px;
    margin: 0;
}
.lawsie-radio-hub__about-grid > .lawsie-radio-hub__about-beside {
    flex: 1 1 280px;
    min-width: 0;
}
@media (min-width: 640px) {
    .lawsie-radio-hub__about-grid {
        gap: 1.5rem;
        align-items: flex-start;
    }
    .lawsie-radio-hub__about-grid > .lawsie-radio-hub__image {
        width: 260px;
    }
}

/* Section dividers above the About, Live and Recently played headings. */
.lawsie-radio-hub__about,
.lawsie-radio-hub__live,
.lawsie-radio-hub__recent {
    border-top: 1px solid var(--lrh-rule);
    padding-top: 1.25rem;
    margin-top: 1.5rem;
}
.lawsie-radio-hub__about-heading,
.lawsie-radio-hub__live-heading,
.lawsie-radio-hub__recent h3 {
    font-size: 1.15rem;
    margin: 0 0 0.75rem;
}
.lawsie-radio-hub__about p,
.lawsie-radio-hub__live p {
    margin: 0.25rem 0;
}

/* Plays-this-week as a small muted stat. */
.lawsie-radio-hub__plays-this-week {
    font-size: 0.95rem;
    color: var(--lrh-muted);
}

/* Tag pills. */
.lawsie-radio-hub__about-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}
.lawsie-radio-hub__about-tags-label {
    font-weight: 600;
    margin-right: 0.25rem;
}
.lawsie-radio-hub__tag {
    display: inline-block;
    background: var(--lrh-pill-bg);
    color: var(--lrh-pill-text);
    border-radius: var(--lrh-radius-pill);
    padding: 0.1rem 0.65rem;
    font-size: 0.85rem;
    line-height: 1.6;
}

/* "Save this track" block: two per-track CTA links (Spotify + Apple Music search)
 * sitting between the refresh stamp and the trivia block. Styled bigger and more
 * button-like than the tag/outbound pills so they read as actions, not chips. */
.lawsie-radio-hub__playlist {
    margin: 0.75rem 0 1rem;
}
.lawsie-radio-hub__playlist-heading {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.4rem;
}
.lawsie-radio-hub__playlist-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.35rem;
}
.lawsie-radio-hub__playlist-link {
    display: inline-block;
    padding: 0.5rem 0.9rem;
    border-radius: var(--lrh-radius);
    border: 1px solid var(--lrh-accent);
    color: var(--lrh-accent);
    background: transparent;
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.3;
    transition: background-color 150ms ease, color 150ms ease;
}
.lawsie-radio-hub__playlist-link:hover,
.lawsie-radio-hub__playlist-link:focus {
    background: var(--lrh-accent);
    color: #fff;
    text-decoration: none;
}
.lawsie-radio-hub__playlist-credit {
    margin: 0;
    color: var(--lrh-muted);
}
.lawsie-radio-hub__playlist-credit small {
    font-size: 0.75rem;
}

/* Lyrics CTA: deliberately NOT in pill format, sits between playlist block and trivia
 * as the standalone headline action for the current track. Larger, accent-coloured,
 * underlined for affordance. */
.lawsie-radio-hub__lyrics-cta {
    margin: 0.75rem 0 1rem;
    font-size: 1.1rem;
}
.lawsie-radio-hub__lyrics-cta a {
    color: var(--lrh-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.lawsie-radio-hub__lyrics-cta a:hover,
.lawsie-radio-hub__lyrics-cta a:focus {
    text-decoration: none;
}

/* "Buy me a pint" ask. Sits under the trivia on the live page and above the back link
   on artist pages. Quiet by design: body-sized text, muted colour, only the link in
   the accent, so it reads as a friendly aside rather than an advert. */
.lawsie-radio-hub__pint {
    margin: 1rem 0;
    font-size: 0.95rem;
    color: var(--lrh-muted);
}
.lawsie-radio-hub__pint a {
    color: var(--lrh-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.lawsie-radio-hub__pint a:hover,
.lawsie-radio-hub__pint a:focus {
    text-decoration: none;
}

/* Trivia bullet list (6 Music "Deep Cuts" output). Slightly inset, comfortable line
 * height, clear bullet markers. The Lineup line below the list renders as a normal
 * paragraph via the surrounding .lawsie-radio-hub__trivia container. */
.lawsie-radio-hub__trivia-list {
    margin: 0 0 0.6rem;
    padding-left: 1.25rem;
    list-style: disc;
}
.lawsie-radio-hub__trivia-list li {
    margin: 0.15rem 0;
    line-height: 1.5;
}
.lawsie-radio-hub__trivia > p {
    margin: 0.25rem 0 0;
}

/* Outbound reference links: pill-style anchors that visually echo the tag pills
 * but read as clickable, with the accent colour for affordance. */
.lawsie-radio-hub__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
}
.lawsie-radio-hub__links-label {
    font-weight: 600;
    margin-right: 0.25rem;
}
.lawsie-radio-hub__link {
    display: inline-block;
    background: var(--lrh-pill-bg);
    color: var(--lrh-accent);
    border-radius: var(--lrh-radius-pill);
    padding: 0.15rem 0.7rem;
    font-size: 0.85rem;
    line-height: 1.6;
    text-decoration: none;
}
.lawsie-radio-hub__link:hover,
.lawsie-radio-hub__link:focus {
    background: var(--lrh-accent);
    color: #fff;
    text-decoration: none;
}

/* Setlist as a tidy two-column list on wider screens, ordinary list on mobile. */
.lawsie-radio-hub__setlist {
    margin: 0.5rem 0 1rem;
}
.lawsie-radio-hub__setlist-heading {
    font-weight: 600;
    margin: 0.25rem 0 0.4rem;
}
.lawsie-radio-hub__setlist-list {
    margin: 0;
    padding-left: 1.2rem;
}

/* Upcoming gigs: each item is a row on desktop, stacked on mobile. */
.lawsie-radio-hub__upcoming-gigs {
    margin: 0.75rem 0 1.25rem;
}
.lawsie-radio-hub__upcoming-gigs-heading {
    font-size: 1rem;
    margin: 0 0 0.5rem;
}
.lawsie-radio-hub__upcoming-gigs-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.lawsie-radio-hub__upcoming-gig {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--lrh-rule);
}
.lawsie-radio-hub__upcoming-gig:last-child {
    border-bottom: 0;
}
.lawsie-radio-hub__upcoming-gig-date {
    font-weight: 600;
    color: var(--lrh-text);
}
.lawsie-radio-hub__upcoming-gig-venue {
    color: var(--lrh-muted);
    font-size: 0.95rem;
}
.lawsie-radio-hub__upcoming-gig-link {
    color: var(--lrh-accent);
    font-size: 0.9rem;
    text-decoration: none;
    margin-top: 0.1rem;
}
.lawsie-radio-hub__upcoming-gig-link:hover,
.lawsie-radio-hub__upcoming-gig-link:focus {
    text-decoration: underline;
}

/* Artist names linked to their own /6music/artist/{slug}/ page. Used in the
 * recently-played list and the similar-artists line on the live block, and in
 * the similar-artists line on the artist page itself. Subtle underline so the
 * affordance is obvious without screaming. */
.lawsie-radio-hub__artist-link {
    color: var(--lrh-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.lawsie-radio-hub__artist-link:hover,
.lawsie-radio-hub__artist-link:focus {
    text-decoration: none;
}

/* ---- Artist pages (/6music/artist/{slug}/ etc.) ---- */
/* Inherits all the .lawsie-radio-hub__* visuals (artwork sandwich, link pills,
 * trivia list, playlist CTAs, lyrics CTA) so the per-artist page reads visually
 * the same as the live block. The .lawsie-artist-page__* rules here add the
 * artist-specific bits: breadcrumb, h1, lead, tracks list, plays-by-dj. */
.lawsie-artist-page {
    color: var(--lrh-text);
    line-height: 1.55;
}
.lawsie-artist-page__breadcrumb {
    font-size: 0.85rem;
    color: var(--lrh-muted);
    margin: 0 0 0.5rem;
}
.lawsie-artist-page__breadcrumb a {
    color: var(--lrh-accent);
    text-decoration: none;
}
.lawsie-artist-page__breadcrumb a:hover,
.lawsie-artist-page__breadcrumb a:focus {
    text-decoration: underline;
}
/* Foot-of-page route back to the live page for readers who scrolled the whole artist
   page. Same weight as the lyrics CTA so it reads as an action, set off by a rule
   above so it is clearly the end of the article rather than part of the last block. */
.lawsie-artist-page__back {
    margin: 1.5rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--lrh-rule);
    font-size: 1.1rem;
}
.lawsie-artist-page__back a {
    color: var(--lrh-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.lawsie-artist-page__back a:hover,
.lawsie-artist-page__back a:focus {
    text-decoration: none;
}
.lawsie-artist-page__title {
    font-size: 2rem;
    line-height: 1.15;
    margin: 0 0 0.4rem;
}
.lawsie-artist-page__lead {
    font-size: 1.05rem;
    color: var(--lrh-text);
    margin: 0 0 1.25rem;
}
.lawsie-artist-page__tracks,
.lawsie-artist-page__djs {
    border-top: 1px solid var(--lrh-rule);
    padding-top: 1.25rem;
    margin-top: 1.5rem;
}
.lawsie-artist-page__tracks h2,
.lawsie-artist-page__djs h2 {
    font-size: 1.15rem;
    margin: 0 0 0.75rem;
}
.lawsie-artist-page__tracks-list,
.lawsie-artist-page__djs-list {
    margin: 0;
    padding-left: 1.25rem;
}
.lawsie-artist-page__tracks-list li,
.lawsie-artist-page__djs-list li {
    margin: 0.4rem 0;
}
.lawsie-artist-page__track-title,
.lawsie-artist-page__dj-name {
    color: var(--lrh-text);
}
.lawsie-artist-page__track-stat {
    color: var(--lrh-muted);
    font-size: 0.9rem;
}
.lawsie-artist-page__track-trivia {
    margin: 0.35rem 0 0.25rem 0;
    padding-left: 1rem;
    list-style: disc;
}
.lawsie-artist-page__track-trivia-item {
    color: var(--lrh-text);
    font-size: 0.9rem;
    margin: 0.2rem 0;
    line-height: 1.45;
}

/* Shared three-option station nav strip. Sits at the top of /{station}/, the
   /{station}/stats/ page, and the daily-archive category page. Active item is
   plain text with aria-current, others are links. */
.lawsie-station-nav {
    margin: 0 0 1rem;
    font-size: 0.95rem;
}
.lawsie-station-nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--lrh-rule);
}
.lawsie-station-nav__item {
    display: inline-flex;
    align-items: center;
}
.lawsie-station-nav__item + .lawsie-station-nav__item::before {
    content: "|";
    color: var(--lrh-muted);
    margin-right: 0.75rem;
    opacity: 0.5;
}
/* Specificity bumped with the parent class so the theme's generic
   .entry-content a rules can't override the blue. Underline kept on by
   default so the items read as links at a glance, without relying on
   colour alone. */
.lawsie-station-nav .lawsie-station-nav__link {
    color: var(--lrh-accent);
    text-decoration: underline;
}
.lawsie-station-nav .lawsie-station-nav__link:hover,
.lawsie-station-nav .lawsie-station-nav__link:focus {
    color: var(--lrh-accent);
    text-decoration: none;
}
.lawsie-station-nav__current {
    color: var(--lrh-text);
    font-weight: 600;
}

/* Stats page (/{station}/stats/) — daily-built per-station ranking lists. */
.lawsie-stats-page__breadcrumb {
    font-size: 0.9rem;
    color: var(--lrh-muted);
    margin: 0 0 0.5rem;
}
.lawsie-stats-page__breadcrumb a {
    color: var(--lrh-muted);
    text-decoration: none;
}
.lawsie-stats-page__breadcrumb a:hover,
.lawsie-stats-page__breadcrumb a:focus {
    text-decoration: underline;
}
.lawsie-stats-page__title {
    font-size: 1.65rem;
    line-height: 1.2;
    margin: 0 0 0.25rem;
}
.lawsie-stats-page__updated {
    color: var(--lrh-muted);
    font-size: 0.95rem;
    margin: 0 0 1rem;
}
.lawsie-stats-page__section {
    border-top: 1px solid var(--lrh-rule);
    padding-top: 1.25rem;
    margin-top: 1.5rem;
}
.lawsie-stats-page__section h2 {
    font-size: 1.15rem;
    margin: 0 0 0.75rem;
}
.lawsie-stats-page__window {
    font-size: 0.95rem;
    color: var(--lrh-muted);
    margin: 1rem 0 0.4rem;
    font-weight: 600;
}
.lawsie-stats-page__rank-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: rank;
}
.lawsie-stats-page__rank-item {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--lrh-rule);
}
.lawsie-stats-page__rank-item:last-child {
    border-bottom: none;
}
.lawsie-stats-page__rank {
    flex: 0 0 1.75rem;
    text-align: right;
    color: var(--lrh-muted);
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
}
.lawsie-stats-page__rank-name {
    flex: 1 1 auto;
    color: var(--lrh-text);
    line-height: 1.4;
}
.lawsie-stats-page__rank-sub {
    color: var(--lrh-muted);
    font-size: 0.9rem;
}
.lawsie-stats-page__rank-plays {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--lrh-muted);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    min-width: 7.5rem;
    justify-content: flex-end;
}
.lawsie-stats-page__rank-plays-number {
    min-width: 2.25rem;
    text-align: right;
}
.lawsie-stats-page__lollipop {
    width: 5rem;
    height: 0.75rem;
    display: block;
}
.lawsie-stats-page__jump {
    margin: 0.5rem 0 1.25rem;
    padding: 0.75rem 0.9rem;
    background: var(--lrh-pill-bg);
    border-radius: var(--lrh-radius);
}
.lawsie-stats-page__jump-heading {
    margin: 0 0 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--lrh-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.lawsie-stats-page__jump-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.lawsie-stats-page__jump-item {
    margin: 0.25rem 0;
    line-height: 1.45;
}
.lawsie-stats-page__jump .lawsie-stats-page__jump-link {
    color: var(--lrh-accent);
    text-decoration: underline;
    font-weight: 500;
}
.lawsie-stats-page__jump .lawsie-stats-page__jump-sub {
    color: var(--lrh-accent);
    text-decoration: underline;
    font-size: 0.85rem;
}
.lawsie-stats-page__jump-subs {
    margin-left: 0.4rem;
    color: var(--lrh-muted);
}
.lawsie-stats-page__daily-bars {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0.5rem 0 0.5rem;
}
@media (min-width: 640px) {
    .lawsie-stats-page__daily-bars {
        max-width: 720px;
    }
}
.lawsie-stats-page__debuts-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.lawsie-stats-page__debuts-item {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--lrh-rule);
}
.lawsie-stats-page__debuts-item:last-child {
    border-bottom: none;
}
.lawsie-stats-page__debut-artist {
    flex: 1 1 auto;
}
.lawsie-stats-page__date-pill {
    background: var(--lrh-pill-bg);
    color: var(--lrh-pill-text);
    border-radius: var(--lrh-radius-pill);
    padding: 0.15rem 0.55rem;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.lawsie-stats-page__heatmap {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0.5rem 0 0.5rem;
}
@media (min-width: 640px) {
    .lawsie-stats-page__heatmap {
        max-width: 720px;
    }
}
.lawsie-stats-page__intro {
    color: var(--lrh-text);
    font-size: 0.95rem;
    margin: 0 0 0.35rem;
    line-height: 1.45;
}
.lawsie-stats-page__muted {
    color: var(--lrh-muted);
    font-size: 0.9rem;
    margin: 0 0 0.5rem;
}
.lawsie-stats-page__empty {
    color: var(--lrh-muted);
    font-size: 0.95rem;
    margin: 0.5rem 0 0;
}
.lawsie-stats-page__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Donut chart: inline SVG on the left, swatch+label legend on the right.
   Stacks on narrow viewports. Used for the plays-by-presenter and the
   6 Music genre-share charts. */
.lawsie-stats-page__donut-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: 0.75rem 0;
}
.lawsie-stats-page__donut {
    width: 160px;
    height: 160px;
    flex: 0 0 auto;
}
.lawsie-stats-page__donut-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 360px;
}
.lawsie-stats-page__donut-legend-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--lrh-rule);
    font-size: 0.9rem;
}
.lawsie-stats-page__donut-legend-item:last-child {
    border-bottom: none;
}
.lawsie-stats-page__donut-swatch {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 2px;
    flex: 0 0 auto;
}
.lawsie-stats-page__donut-legend-label {
    flex: 1 1 auto;
    color: var(--lrh-text);
}
.lawsie-stats-page__donut-legend-count {
    color: var(--lrh-muted);
    font-variant-numeric: tabular-nums;
    min-width: 2.25rem;
    text-align: right;
}
.lawsie-stats-page__donut-legend-pct {
    color: var(--lrh-muted);
    font-variant-numeric: tabular-nums;
    min-width: 2.75rem;
    text-align: right;
}
@media (min-width: 640px) {
    .lawsie-stats-page__donut-wrap {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 1.5rem;
    }
    .lawsie-stats-page__donut {
        width: 180px;
        height: 180px;
    }
}

/* Page-since footer note: muted, small. */
.lawsie-radio-hub__page-since {
    font-size: 0.85rem;
    color: var(--lrh-muted);
    margin-top: 1rem;
}

/* Mobile floor: keep body text readable on small viewports. */
@media (max-width: 480px) {
    .lawsie-radio-hub,
    .lawsie-radio-hub p,
    .lawsie-radio-hub li {
        font-size: 16px;
    }
    .lawsie-radio-hub__current .lawsie-radio-hub__track {
        font-size: 1.5rem;
    }
}

/* Desktop: arrange each upcoming gig as a single row, columns of date / venue / link. */
@media (min-width: 640px) {
    .lawsie-radio-hub__upcoming-gig {
        flex-direction: row;
        align-items: baseline;
        gap: 1rem;
    }
    .lawsie-radio-hub__upcoming-gig-date {
        flex: 0 0 8.5rem;
    }
    .lawsie-radio-hub__upcoming-gig-venue {
        flex: 1 1 auto;
    }
    .lawsie-radio-hub__upcoming-gig-link {
        flex: 0 0 auto;
        margin-top: 0;
    }
    .lawsie-radio-hub__setlist-list {
        column-count: 2;
        column-gap: 2rem;
    }
}