/* RideLink News panel on the map (app.html).
   Kept in its own file rather than added to the 140KB styles.css so it can be
   read, reviewed and removed on its own. Every selector is namespaced .rl-news
   so nothing here can reach the map's own overlays.

   Placement: the map already carries a dozen fixed overlays. This sits under
   the top banner on the LEFT, and is capped to less than half the viewport so
   it can never reach the centred .map-search-bar. Below 760px the search bar
   spans the width, so it drops underneath it instead. */

#rlNewsPanel {
    position: absolute;
    top: 116px;
    left: 16px;
    width: min(320px, calc(50vw - 40px));
    z-index: 1000;
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid rgba(244, 196, 48, 0.35);
    border-radius: 14px;
    overflow: hidden;
    color: #e9e9ee;
    font-family: 'Inter', system-ui, sans-serif;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
#rlNewsPanel[hidden] { display: none; }

/* Collapsed row: chip, one-line headline, chevron. */
.rl-news-head { display: flex; align-items: stretch; }

#rlNewsToggle {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    /* 44px min so it is a real touch target (WCAG 2.2 SC 2.5.8). */
    min-height: 44px;
    padding: 9px 4px 9px 12px;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

.rl-news-chip {
    flex: none;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.7px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #F4C430;
    color: #000;
    white-space: nowrap;
}
/* #B91C1C carries white at about 6.5:1; the theme's lighter red would fail
   WCAG 1.4.3 on a chip this small. */
.rl-news-breaking .rl-news-chip { background: #B91C1C; color: #fff; }
.rl-news-breaking { border-color: rgba(185, 28, 28, 0.55); }

#rlNewsHeadline {
    flex: 1;
    min-width: 0;
    font-family: 'Climate Crisis', 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rl-news-chevron {
    flex: none;
    width: 16px;
    height: 16px;
    margin-right: 2px;
    transition: transform 0.18s ease;
    color: rgba(244, 196, 48, 0.85);
}
.rl-news-open .rl-news-chevron { transform: rotate(180deg); }

#rlNewsClose {
    flex: none;
    width: 34px;
    min-height: 44px;
    background: transparent;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.55);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}
#rlNewsClose:hover { color: #fff; }

/* Expanded card. */
#rlNewsBody {
    padding: 0 12px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
#rlNewsBody[hidden] { display: none; }

#rlNewsImage {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 9px;
    margin: 12px 0 10px;
    background: rgba(255, 255, 255, 0.05);
    display: block;
}
#rlNewsImage[hidden] { display: none; }

#rlNewsDate {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 10px;
}
#rlNewsSummary {
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 6px;
    /* A deck is one or two sentences; a malformed issue must not push the map
       off the screen. */
    max-height: 7.8em;
    overflow: hidden;
}

#rlNewsSources {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 11px;
}
#rlNewsSources a {
    font-size: 11px;
    font-weight: 700;
    color: #F4C430;
    text-decoration: none;
    border: 1px solid rgba(244, 196, 48, 0.3);
    border-radius: 999px;
    padding: 4px 9px;
}
#rlNewsSources a:hover { background: rgba(244, 196, 48, 0.12); }

#rlNewsPanel button:focus-visible,
#rlNewsPanel a:focus-visible {
    outline: 2px solid #F4C430;
    outline-offset: 2px;
    border-radius: 6px;
}

/* Breakpoint worked out from the real geometry, not guessed.
   .map-search-bar is centred with width min(320px, 100vw - 220px), so its left
   edge is 50vw - width/2. Against this panel's right edge (16 + min(320,
   50vw - 40)) the two collide from about 1000px downwards; 1100px is the first
   width with a comfortable gap (54px). Sitting side by side below that is what
   produced an overlap band across ordinary laptop widths.

   Under 1100px the panel drops BELOW the search bar. It stops short of the
   right edge because .top-right-buttons is a column at right:16px running from
   top:122px down past this panel - full width would have put that column on
   top of this panel's close button. */
@media (max-width: 1100px) {
    #rlNewsPanel {
        top: 168px;
        left: 12px;
        right: 68px;
        width: auto;
    }
    #rlNewsSummary { max-height: 6.2em; }
}

/* Landscape phones: the collapsed pill only, so an expanded card can never
   cover the map. Position is left to the width rules above - overriding `top`
   here would push it back up into the banner. */
@media (max-height: 520px) {
    #rlNewsBody { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .rl-news-chevron { transition: none; }
}