/* The Local front only (/news/city-desk), loaded after custom.css.
   ---------------------------------------------------------------------------
   1. A smaller masthead (the owner, 9 Oct 2026). The State front keeps the
      full-size nameplate; these rules are scoped to .section-edition-main--local
      so they outrank custom.css's own breakpoints without touching State.
   2. The promotion for Logan County Public Safety Radio under it: a dark band,
      a radio tower sending out waves, the newest call. */

/* ------------------------------------------------------- 1. masthead ---- */
.section-edition-main--local .section-edition-masthead-inner { padding: 9px 0 8px; }
.section-edition-main--local .section-edition-kicker {
    min-height: 0; padding: 2px 8px; margin-bottom: 4px; font-size: 0.58rem;
}
.section-edition-main--local .section-edition-masthead h1 { font-size: 1.8rem; gap: 14px; }
.section-edition-main--local .section-edition-masthead h1::before,
.section-edition-main--local .section-edition-masthead h1::after { max-width: 120px; }
.section-edition-main--local .section-edition-masthead p { margin-top: 5px; font-size: 0.88rem; }
.section-edition-main--local .section-edition-masthead p::after { display: none; }
.section-edition-main--local .section-edition-date { margin-top: 5px; padding-top: 4px; font-size: 0.64rem; }
@media (min-width: 768px) {
    .section-edition-main--local .section-edition-masthead h1 { font-size: 2.2rem; }
}
@media (min-width: 1180px) {
    .section-edition-main--local .section-edition-masthead h1 { font-size: 2.5rem; }
}

/* ------------------------------------------------- 2. the promotion ---- */
.psr-promo-wrap {
    width: min(1180px, calc(100% - 32px));
    margin: 18px auto 0;
}
@media (min-width: 1600px) { .psr-promo-wrap { width: min(92vw, 2400px); } }
@media (max-width: 720px) { .psr-promo-wrap { width: min(100% - 24px, 1180px); margin-top: 14px; } }

.psr-promo {
    --psr-amber: #ffb627;
    --psr-red: #ff4b3e;
    --psr-ink: #f7f3ea;
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1.25fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 22px;
    padding: 8px 22px 8px 10px;
    overflow: hidden;
    border-radius: 6px;
    color: var(--psr-ink);
    text-decoration: none;
    background:
        radial-gradient(circle at 70px 50%, rgba(255, 182, 39, 0.22), rgba(255, 182, 39, 0) 150px),
        linear-gradient(110deg, #0a1428 0%, #102446 55%, #1b1f4a 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 6px 20px rgba(10, 20, 40, 0.22);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
/* A faint sweep of signal across the band. */
.psr-promo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 182, 39, 0.07) 45%, rgba(255, 75, 62, 0.06) 50%, transparent 58%);
    transform: translateX(-100%);
    animation: psr-sweep 6s ease-in-out infinite;
    pointer-events: none;
}
.psr-promo:hover,
.psr-promo:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 10px 26px rgba(10, 20, 40, 0.32);
}
.psr-promo:focus-visible { outline: 3px solid var(--psr-amber); outline-offset: 3px; }

/* The tower and its waves. */
.psr-promo-signal { display: block; width: 62px; height: 62px; flex: none; }
.psr-promo-signal svg { display: block; width: 100%; height: 100%; }
.psr-promo-tower { stroke: var(--psr-ink); stroke-width: 3.2; }
.psr-promo-beacon { fill: var(--psr-red); stroke: none; animation: psr-beacon 1.6s ease-in-out infinite; }
.psr-promo-waves path { stroke: var(--psr-amber); stroke-width: 4; opacity: 0; animation: psr-wave 2.4s ease-out infinite; }
.psr-promo-waves .w2 { animation-delay: 0.35s; }
.psr-promo-waves .w3 { animation-delay: 0.7s; }

.psr-promo-text, .psr-promo-latest { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; }
.psr-promo-kicker {
    display: inline-flex; align-items: center; gap: 8px;
    font: 800 0.66rem/1.2 Arial, Helvetica, sans-serif;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--psr-amber);
}
.psr-promo-live {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--psr-red);
    box-shadow: 0 0 0 0 rgba(255, 75, 62, 0.7);
    animation: psr-live 1.6s ease-out infinite;
}
.psr-promo-title {
    margin-top: 2px;
    font: 800 clamp(1.15rem, 2vw, 1.45rem)/1.1 Georgia, 'Times New Roman', serif;
    color: #fff;
}
.psr-promo-dek { margin-top: 2px; font: 0.88rem/1.35 Georgia, 'Times New Roman', serif; color: #c9d3e6; }

.psr-promo-latest {
    padding: 6px 12px;
    border-left: 3px solid var(--psr-amber);
    background: rgba(255, 255, 255, 0.06);
    border-radius: 0 4px 4px 0;
}
.psr-promo-latest-label {
    font: 700 0.64rem/1.2 Arial, Helvetica, sans-serif;
    letter-spacing: 0.1em; text-transform: uppercase; color: #9fb0cf;
}
.psr-promo-latest-head {
    margin-top: 2px;
    font: 700 0.95rem/1.25 Georgia, 'Times New Roman', serif; color: #fff;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.psr-promo-latest-agency { margin-top: 3px; font: 0.78rem/1.3 Arial, Helvetica, sans-serif; color: #9fb0cf; }

.psr-promo-cta {
    position: relative; z-index: 1;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--psr-amber);
    color: #0a1428;
    font: 800 0.85rem/1 Arial, Helvetica, sans-serif;
    white-space: nowrap;
    transition: background 0.18s ease;
}
.psr-promo:hover .psr-promo-cta { background: #ffc85a; }

/* Narrower screens: the tower and words, then the latest call, then the button. */
@media (max-width: 980px) {
    .psr-promo { grid-template-columns: auto minmax(0, 1fr); padding: 10px 16px 12px 10px; }
    .psr-promo-latest { grid-column: 1 / -1; }
    .psr-promo-cta { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 520px) {
    .psr-promo-signal { width: 52px; height: 52px; }
    .psr-promo { gap: 8px 12px; }
    .psr-promo-dek { font-size: 0.86rem; }
}

@keyframes psr-wave {
    0% { opacity: 0; transform: scale(0.85); }
    25% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.08); }
}
.psr-promo-waves path { transform-box: view-box; transform-origin: 60px 54px; }
@keyframes psr-beacon { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes psr-live {
    0% { box-shadow: 0 0 0 0 rgba(255, 75, 62, 0.7); }
    100% { box-shadow: 0 0 0 9px rgba(255, 75, 62, 0); }
}
@keyframes psr-sweep {
    0%, 35% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Still, for readers who ask for less motion: the waves drawn, nothing moving. */
@media (prefers-reduced-motion: reduce) {
    .psr-promo, .psr-promo::after, .psr-promo-waves path, .psr-promo-beacon, .psr-promo-live { animation: none; transition: none; }
    .psr-promo::after { display: none; }
    .psr-promo-waves path { opacity: 0.85; }
    .psr-promo-waves .w3 { opacity: 0.45; }
}