/* The story sidebar's Public Safety Radio advert (Components/SafetyRadioAd):
   the Local front's band (local-front.css, .psr-promo) stood on end. */
.sra {
    --sra-amber: #ffb627;
    --sra-red: #ff4b3e;
    --sra-ink: #f7f3ea;
    position: relative; display: flex; flex-direction: column; gap: 6px;
    margin: 4px 0 18px; padding: 16px 16px 18px;
    overflow: hidden; border-radius: 8px;
    color: var(--sra-ink); text-decoration: none;
    background:
        radial-gradient(circle at 34px 34px, rgba(255, 182, 39, 0.24), rgba(255, 182, 39, 0) 120px),
        linear-gradient(160deg, #0a1428 0%, #102446 60%, #1b1f4a 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 6px 18px rgba(10, 20, 40, 0.22);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.sra::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 182, 39, 0.07) 45%, rgba(255, 75, 62, 0.06) 50%, transparent 58%);
    transform: translateX(-100%);
    animation: sra-sweep 6s ease-in-out infinite;
}
.sra:hover, .sra:focus-visible { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 10px 24px rgba(10, 20, 40, 0.32); }
.sra:focus-visible { outline: 3px solid var(--sra-amber); outline-offset: 3px; }
.sra > * { position: relative; z-index: 1; }

.sra-top { display: flex; align-items: center; gap: 10px; }
.sra-signal { display: block; width: 54px; height: 54px; flex: none; margin: -6px 0 -6px -8px; }
.sra-signal svg { display: block; width: 100%; height: 100%; }
.sra-tower { stroke: var(--sra-ink); stroke-width: 3.2; }
.sra-beacon { fill: var(--sra-red); stroke: none; animation: sra-beacon 1.6s ease-in-out infinite; }
.sra-waves path { stroke: var(--sra-amber); stroke-width: 4; opacity: 0; animation: sra-wave 2.4s ease-out infinite; }
.sra-waves .w2 { animation-delay: 0.35s; }
.sra-waves .w3 { animation-delay: 0.7s; }
.sra-kicker {
    display: inline-flex; align-items: center; gap: 8px;
    font: 800 0.66rem/1.2 Arial, Helvetica, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sra-amber);
}
.sra-live { width: 8px; height: 8px; border-radius: 50%; background: var(--sra-red); animation: sra-live 1.6s ease-out infinite; }
.sra-title { font: 800 1.22rem/1.15 Georgia, 'Times New Roman', serif; color: #fff; }
.sra-dek { font: 0.86rem/1.4 Georgia, 'Times New Roman', serif; color: #c9d3e6; }
.sra-call {
    display: flex; flex-direction: column; margin-top: 6px; padding: 8px 12px;
    border-left: 3px solid var(--sra-amber); border-radius: 0 4px 4px 0; background: rgba(255, 255, 255, 0.06);
}
.sra-call-label { font: 700 0.62rem/1.25 Arial, Helvetica, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: #9fb0cf; }
.sra-call-head {
    margin-top: 3px; font: 700 0.95rem/1.28 Georgia, 'Times New Roman', serif; color: #fff;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sra-call-agency { margin-top: 3px; font: 0.76rem/1.3 Arial, Helvetica, sans-serif; color: #9fb0cf; }
.sra-cta {
    align-self: flex-start; margin-top: 8px; padding: 8px 14px; border-radius: 999px;
    background: var(--sra-amber); color: #0a1428;
    font: 800 0.84rem/1 Arial, Helvetica, sans-serif; white-space: nowrap; transition: background 0.18s ease;
}
.sra:hover .sra-cta { background: #ffc85a; }

@keyframes sra-wave { 0% { opacity: 0; } 20% { opacity: 0.95; } 100% { opacity: 0; } }
@keyframes sra-beacon { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes sra-live { 0% { box-shadow: 0 0 0 0 rgba(255, 75, 62, 0.7); } 100% { box-shadow: 0 0 0 8px rgba(255, 75, 62, 0); } }
@keyframes sra-sweep { 0%, 40% { transform: translateX(-100%); } 70%, 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
    .sra::after, .sra-beacon, .sra-waves path, .sra-live { animation: none; }
    .sra-waves path { opacity: 0.8; }
    .sra { transition: none; }
}