/*
Theme Name: Мировая полоса
Description: Мировая новостная лента с навигацией по регионам.
Version: 1.0.0
Text Domain: mirovaya-polosa
*/
:root {
    --ink: #122446;
    --blue: #0754bb;
    --line: #dbe5f1;
    --soft: #edf4fe;
    --gutter: clamp(16px, 3vw, 52px);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #fff; color: var(--ink); font: 16px/1.5 system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--blue); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
img { max-width: 100%; height: auto; }
.screen-reader-text, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip-link:focus { display: inline-block; padding: 10px var(--gutter); }
.masthead { border-top: 4px solid var(--blue); }
.mast-inner, .topic-nav, .news-layout, .site-footer { max-width: 1560px; margin-inline: auto; padding-inline: var(--gutter); }
.mast-inner { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; padding-block: 22px; }
.brand { display: grid; line-height: 1.12; }
.brand strong { font-size: clamp(1.85rem, 4.3vw, 3.6rem); letter-spacing: -.065em; font-weight: 850; }
.brand span { margin-top: 5px; color: #405777; }
.site-search { display: flex; max-width: 100%; }
.site-search input { min-width: 0; width: 210px; border: 1px solid var(--line); padding: 9px 10px; border-radius: 5px 0 0 5px; font: inherit; }
.site-search button { border: 0; border-radius: 0 5px 5px 0; background: var(--blue); color: white; padding: 0 12px; font: inherit; cursor: pointer; }
.topic-nav { display: flex; gap: 4px; padding-block: 7px; border-block: 1px solid var(--line); overflow-x: auto; }
.topic-nav a, .region-nav a { display: block; padding: 8px 12px; border-radius: 4px; font-weight: 650; }
.topic-nav a { white-space: nowrap; }
.topic-nav [aria-current] { background: var(--blue); color: white; }
.region-nav [aria-current] { background: var(--soft); color: var(--blue); }
.news-layout { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(0, 3fr) minmax(215px, 1.2fr); gap: clamp(16px, 2.5vw, 36px); padding-block: 28px 52px; align-items: start; }
.region-panel { border-right: 1px solid var(--line); padding-right: 12px; }
.region-panel h2, .day-panel h2 { margin: 0 0 10px; font-size: 1.14rem; }
.feed h1 { margin: 0 0 10px; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; letter-spacing: -.04em; overflow-wrap: anywhere; }
.news-row { display: grid; grid-template-columns: 53px minmax(0,1fr) auto; gap: 12px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); }
.news-row time { color: var(--blue); font-weight: 750; font-variant-numeric: tabular-nums; }
.news-row h2 { margin: 0; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.35; overflow-wrap: anywhere; }
.row-regions { margin-top: 4px; color: #516785; font-size: .83rem; }
.row-photo img { display: block; width: clamp(60px, 8vw, 108px); aspect-ratio: 1.6; object-fit: cover; border-radius: 4px; }
.day-panel { border: 1px solid var(--line); padding: 14px; border-radius: 6px; }
.day-story { padding-block: 10px; border-top: 1px solid var(--line); }
.day-story img { width: 100%; aspect-ratio: 2; object-fit: cover; border-radius: 4px; }
.day-story h3 { margin: 3px 0; font-size: 1rem; line-height: 1.35; }
.empty, .story-meta { color: #516785; }
.story-content { overflow-wrap: anywhere; }
.story-content a { color: var(--blue); text-decoration: underline; }
.site-footer { border-top: 1px solid var(--line); padding-block: 18px; color: #405777; }
@media (max-width: 900px) {
    .news-layout { grid-template-columns: minmax(0, 1fr); }
    .region-panel { border-right: 0; padding-right: 0; }
    .region-nav { display: flex; gap: 4px; overflow-x: auto; }
    .region-nav a { flex: none; white-space: nowrap; }
}
@media (max-width: 500px) {
    .news-row { grid-template-columns: 43px minmax(0,1fr) auto; gap: 8px; }
    .site-search { width: 100%; }
    .site-search input { flex: 1; }
}