/* ==========================================================================
   Valley View Radio 97.7 MHz — page styles
   Loaded only by vvu_radio.php. Tailwind (CDN) still handles layout on the
   page; everything here is the station-specific chrome that would otherwise
   be an unreadable pile of utility classes: the live player, the on-air
   ticker, the weekly grid and the sticky mini player.
   ========================================================================== */

.vvr {
    --vvr-ink: #150f3d;
    --vvr-ink-2: #241a63;
    --vvr-violet: #6d28d9;
    --vvr-violet-2: #8b5cf6;
    --vvr-magenta: #c026d3;
    --vvr-gold: #f0b429;
    --vvr-gold-soft: #fcd34d;

    --vvr-surface: #ffffff;
    --vvr-surface-2: #f6f4fb;
    --vvr-line: #e6e1f2;
    --vvr-text: #1a1533;
    --vvr-muted: #625a80;
}

@media (prefers-color-scheme: dark) {
    .vvr {
        --vvr-surface: #12101f;
        --vvr-surface-2: #1a1730;
        --vvr-line: #2c2748;
        --vvr-text: #f3f1fb;
        --vvr-muted: #a49dc4;
    }
}

/* The schedule panels set display via a class, which would otherwise beat the
   user agent's [hidden] rule on specificity and leave hidden panels visible. */
.vvr [hidden] { display: none !important; }

.vvr-gradient {
    background: linear-gradient(135deg, #150f3d 0%, #4c1d95 42%, #7c3aed 74%, #c026d3 100%);
}

.vvr-gold-text {
    background: linear-gradient(100deg, var(--vvr-gold-soft), var(--vvr-gold));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--vvr-gold);
}

/* --------------------------------------------------------------------------
   Section headings
   -------------------------------------------------------------------------- */

.vvr-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--vvr-violet);
}

@media (prefers-color-scheme: dark) {
    .vvr-eyebrow { color: var(--vvr-gold); }
}

.vvr-heading {
    font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--vvr-text);
}

.vvr-sub {
    font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
    line-height: 1.65;
    color: var(--vvr-muted);
    max-width: 60ch;
}

.vvr-rule {
    width: 4.5rem;
    height: .3rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--vvr-violet), var(--vvr-gold));
}

/* --------------------------------------------------------------------------
   Live player
   -------------------------------------------------------------------------- */

.vvr-player {
    position: relative;
    overflow: hidden;
    border-radius: 2rem;
    color: #fff;
    box-shadow: 0 30px 70px -30px rgba(21, 15, 61, .75);
}

.vvr-player::before,
.vvr-player::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
}

.vvr-player::before {
    width: 26rem; height: 26rem;
    top: -10rem; right: -8rem;
    background: rgba(240, 180, 41, .28);
}

.vvr-player::after {
    width: 24rem; height: 24rem;
    bottom: -12rem; left: -6rem;
    background: rgba(192, 38, 211, .35);
}

.vvr-player__inner {
    position: relative;
    z-index: 1;
    padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
}

/* Live badge ------------------------------------------------------------- */

.vvr-live {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem 1rem .45rem .8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

.vvr-live__dot {
    position: relative;
    width: .6rem; height: .6rem;
    border-radius: 50%;
    background: #ef4444;
    flex: none;
}

.vvr-live__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #ef4444;
    animation: vvr-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}

.vvr-live[data-state="offline"] .vvr-live__dot,
.vvr-live[data-state="offline"] .vvr-live__dot::after { background: #94a3b8; }
.vvr-live[data-state="offline"] .vvr-live__dot::after { animation: none; }

@keyframes vvr-ping {
    75%, 100% { transform: scale(2.4); opacity: 0; }
}

/* Equaliser -------------------------------------------------------------- */

.vvr-eq {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 1.6rem;
}

.vvr-eq span {
    width: 3px;
    height: 30%;
    border-radius: 2px;
    background: var(--vvr-gold-soft);
    transition: height .2s ease;
}

.vvr-eq.is-playing span { animation: vvr-wave 1s ease-in-out infinite; }
.vvr-eq.is-playing span:nth-child(2) { animation-delay: .12s; }
.vvr-eq.is-playing span:nth-child(3) { animation-delay: .24s; }
.vvr-eq.is-playing span:nth-child(4) { animation-delay: .36s; }
.vvr-eq.is-playing span:nth-child(5) { animation-delay: .48s; }

@keyframes vvr-wave {
    0%, 100% { height: 25%; }
    50%      { height: 100%; }
}

/* Play button ------------------------------------------------------------ */

.vvr-play {
    position: relative;
    width: 5.5rem;
    height: 5.5rem;
    flex: none;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--vvr-ink);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .6);
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}

.vvr-play:hover:not(:disabled) { transform: scale(1.06); }
.vvr-play:active:not(:disabled) { transform: scale(.97); }

.vvr-play:focus-visible {
    outline: 3px solid var(--vvr-gold);
    outline-offset: 4px;
}

.vvr-play:disabled {
    cursor: not-allowed;
    opacity: .5;
    box-shadow: none;
}

.vvr-play .material-symbols-outlined {
    font-size: 3rem;
    font-variation-settings: 'FILL' 1;
}

.vvr-play::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: vvr-halo 2.4s ease-out infinite;
}

.vvr-play:disabled::after,
.vvr-play.is-busy::after { animation: none; }

@keyframes vvr-halo {
    0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); }
    70%  { box-shadow: 0 0 0 22px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* Volume ----------------------------------------------------------------- */

.vvr-volume { display: flex; align-items: center; gap: .6rem; min-width: 0; }

.vvr-volume button {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: .25rem;
    border-radius: .5rem;
}

.vvr-volume button:focus-visible { outline: 2px solid var(--vvr-gold); outline-offset: 2px; }

.vvr-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    max-width: 11rem;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .25);
    cursor: pointer;
}

.vvr-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--vvr-violet);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

.vvr-range::-moz-range-thumb {
    width: 16px; height: 16px;
    border: 3px solid var(--vvr-violet);
    border-radius: 50%;
    background: #fff;
}

.vvr-range:focus-visible { outline: 2px solid var(--vvr-gold); outline-offset: 4px; }

/* Slot progress ---------------------------------------------------------- */

.vvr-progress {
    height: .45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
    overflow: hidden;
}

.vvr-progress__bar {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--vvr-gold-soft), #fff);
    transition: width 1s linear;
}

/* Station dial ----------------------------------------------------------- */

.vvr-dial {
    aspect-ratio: 1;
    border-radius: 2rem;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(10px);
    display: grid;
    place-items: center;
    text-align: center;
    padding: 2rem;
    overflow: hidden;
    position: relative;
}

.vvr-dial img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

.vvr-dial__frequency {
    font-size: clamp(2.75rem, 1.5rem + 6vw, 5rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.03em;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.vvr-card {
    background: var(--vvr-surface);
    border: 1px solid var(--vvr-line);
    border-radius: 1.25rem;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.vvr-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 46px -26px rgba(21, 15, 61, .45);
    border-color: color-mix(in srgb, var(--vvr-violet) 45%, transparent);
}

.vvr-show__logo {
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background:
        radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .95), rgba(246, 244, 251, .95));
    border-bottom: 1px solid var(--vvr-line);
}

@media (prefers-color-scheme: dark) {
    .vvr-show__logo {
        background: radial-gradient(120% 120% at 50% 0%, #ffffff, #eee9f7);
    }
}

.vvr-show__logo img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

/* Shows with no artwork of their own get the station banner. It is 2:1 and the
   tile is 16:10, so `cover` trims ~11% from each side — which also crops away
   the white paper margins of the photographed banner. The category badge keeps
   the eleven banner cards from reading as one repeated image. */
.vvr-show__banner {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--vvr-ink);
    border-bottom: 1px solid var(--vvr-line);
}

.vvr-show__banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vvr-show__badge {
    position: absolute;
    top: .75rem;
    left: .75rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .75rem;
    display: grid;
    place-items: center;
    background: var(--c);
    color: #fff;
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .7);
}

.vvr-show__badge .material-symbols-outlined {
    font-size: 1.4rem;
    color: #fff;
}

.vvr-show__fallback {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    gap: .35rem;
    border-radius: 1rem;
    color: #fff;
}

/* Stated on the children too: one of the legacy stylesheets was winning over
   the inherited colour and rendering both the glyph and the label dark on the
   coloured tile. */
.vvr-show__fallback .material-symbols-outlined { font-size: 2.6rem; color: #fff; }
.vvr-show__fallback > span { color: #fff; }

.vvr-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Category colours shared by chips, grid cells and the legend ------------- */

.vvr-cat-news     { --c: #dc2626; }
.vvr-cat-worship  { --c: #7c3aed; }
.vvr-cat-devotion { --c: #0891b2; }
.vvr-cat-talk     { --c: #ea580c; }
.vvr-cat-youth    { --c: #db2777; }
.vvr-cat-sports   { --c: #16a34a; }
.vvr-cat-music    { --c: #2563eb; }

.vvr-chip {
    background: color-mix(in srgb, var(--c) 14%, transparent);
    color: var(--c);
}

@media (prefers-color-scheme: dark) {
    .vvr-chip {
        background: color-mix(in srgb, var(--c) 26%, transparent);
        color: color-mix(in srgb, var(--c) 45%, white);
    }
}

/* Inside the player the ground is always the dark violet gradient, so the
   category colour would sit at far too low a contrast. */
.vvr-player .vvr-chip {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Weekly schedule grid
   -------------------------------------------------------------------------- */

.vvr-grid-wrap {
    border: 1px solid var(--vvr-line);
    border-radius: 1.25rem;
    background: var(--vvr-surface);
    overflow: hidden;
}

.vvr-grid-scroll { overflow-x: auto; }

.vvr-grid {
    width: 100%;
    min-width: 60rem;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .84rem;
}

.vvr-grid th,
.vvr-grid td {
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--vvr-line);
    border-right: 1px solid var(--vvr-line);
    vertical-align: middle;
}

.vvr-grid th:last-child,
.vvr-grid td:last-child { border-right: 0; }

.vvr-grid thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--vvr-ink);
    color: #fff;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .72rem;
    text-align: center;
    white-space: nowrap;
}

.vvr-grid thead th.is-today { background: var(--vvr-violet); }

.vvr-grid th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--vvr-surface-2);
    color: var(--vvr-muted);
    font-weight: 700;
    white-space: nowrap;
    text-align: left;
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
}

.vvr-grid td { text-align: center; color: var(--vvr-text); }

.vvr-grid td.is-empty { color: transparent; }
.vvr-grid td.is-empty::after { content: "·"; color: var(--vvr-line); }

.vvr-grid td.has-show {
    background: color-mix(in srgb, var(--c) 9%, transparent);
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--c) 70%, transparent);
    font-weight: 600;
}

@media (prefers-color-scheme: dark) {
    .vvr-grid td.has-show { background: color-mix(in srgb, var(--c) 16%, transparent); }
}

.vvr-grid td.is-now {
    background: color-mix(in srgb, var(--c) 26%, transparent);
    box-shadow: inset 0 0 0 2px var(--c);
    font-weight: 800;
}

.vvr-grid tbody tr.is-now-row th[scope="row"] {
    color: var(--vvr-violet);
    background: color-mix(in srgb, var(--vvr-violet) 12%, var(--vvr-surface-2));
}

/* Day-by-day view (default on small screens) ------------------------------ */

.vvr-daytabs {
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    padding-bottom: .25rem;
    scrollbar-width: thin;
}

.vvr-daytab {
    flex: none;
    border: 1px solid var(--vvr-line);
    background: var(--vvr-surface);
    color: var(--vvr-muted);
    border-radius: 999px;
    padding: .5rem 1.05rem;
    font-weight: 700;
    font-size: .85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s ease;
}

.vvr-daytab:hover { color: var(--vvr-text); border-color: var(--vvr-violet); }

.vvr-daytab[aria-selected="true"] {
    background: var(--vvr-ink);
    border-color: var(--vvr-ink);
    color: #fff;
}

/* Day-by-day / full-week switch */
.vvr-viewtab {
    padding: .5rem 1rem;
    border: 0;
    border-radius: .6rem;
    background: transparent;
    color: var(--vvr-muted);
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.vvr-viewtab[aria-selected="true"] {
    background: var(--vvr-ink);
    color: #fff;
}

.vvr-viewswitch {
    display: inline-flex;
    gap: .25rem;
    padding: .25rem;
    border: 1px solid var(--vvr-line);
    border-radius: .85rem;
    background: var(--vvr-surface);
}

.vvr-daylist { display: grid; gap: .5rem; }

.vvr-dayrow {
    display: grid;
    grid-template-columns: 8.5rem 1fr auto;
    gap: .85rem;
    align-items: center;
    padding: .8rem 1rem;
    border: 1px solid var(--vvr-line);
    border-left: 4px solid var(--c, var(--vvr-line));
    border-radius: .85rem;
    background: var(--vvr-surface);
}

.vvr-dayrow__time {
    font-size: .78rem;
    font-weight: 700;
    color: var(--vvr-muted);
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
}

.vvr-dayrow__title { font-weight: 700; color: var(--vvr-text); }

.vvr-dayrow.is-now {
    border-color: var(--vvr-violet);
    background: color-mix(in srgb, var(--vvr-violet) 8%, var(--vvr-surface));
    box-shadow: 0 0 0 1px var(--vvr-violet);
}

@media (max-width: 640px) {
    .vvr-dayrow { grid-template-columns: 1fr; gap: .3rem; }
}

/* --------------------------------------------------------------------------
   Sticky mini player
   -------------------------------------------------------------------------- */

.vvr-mini {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    transform: translateY(110%);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
    color: #fff;
    box-shadow: 0 -12px 40px -12px rgba(0, 0, 0, .5);
}

.vvr-mini.is-visible { transform: translateY(0); }

.vvr-mini__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 80rem;
    margin: 0 auto;
    padding: .7rem clamp(.9rem, 3vw, 2rem);
}

.vvr-mini__btn {
    width: 2.9rem; height: 2.9rem;
    flex: none;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--vvr-ink);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.vvr-mini__btn:disabled { opacity: .5; cursor: not-allowed; }
.vvr-mini__btn .material-symbols-outlined { font-size: 1.7rem; font-variation-settings: 'FILL' 1; }
.vvr-mini__btn:focus-visible { outline: 3px solid var(--vvr-gold); outline-offset: 3px; }

.vvr-mini__meta { min-width: 0; flex: 1; }
.vvr-mini__meta p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vvr-mini__close {
    border: 0;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border-radius: 50%;
    width: 2rem; height: 2rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex: none;
}

@media (max-width: 640px) {
    .vvr-mini__volume { display: none; }
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .vvr-eq.is-playing span,
    .vvr-live__dot::after,
    .vvr-play::after {
        animation: none !important;
    }
    .vvr-card:hover { transform: none; }
    .vvr-mini { transition: none; }
}