/* Блок погоды: прогноз строкой и таблица климатических норм.
   Размеры в px, а не в em: темы на этих сайтах навязывают своим span
   и td фиксированный font-size, и относительные единицы схлопываются
   в одинаковые — иерархия пропадает. Это уже проверено на карточках карт. */

.wx {
    margin: 1.1em 0;
    padding: 9px 11px;
    border: 1px solid #e0dedb;
    border-radius: 4px;
    background: #fbfbfa;
}
.wx-head { font-size: 14px; font-weight: 700; line-height: 1.3; margin-bottom: 8px; }

/* Текущая погода: значок, крупная температура, мелкие подробности рядом. */
.wx-now { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.wx-now .wx-ico { flex: 0 0 auto; }
.wx-now .wx-t { font-size: 20px; font-weight: 700; line-height: 1; }
.wx-now .wx-meta { display: flex; flex-direction: column; font-size: 10px; line-height: 1.35; }
.wx-now .wx-l { opacity: .55; }
.wx-now .wx-d { }
.wx-now .wx-w { opacity: .6; white-space: nowrap; }

.wx-sub { font-size: 10px; font-weight: 700; margin: 8px 0 3px; opacity: .7; }

/* Таблица норм намеренно мелкая: двенадцать строк при крупном шрифте
   занимали пол-экрана и отжимали текст статьи вниз. */
.wx-wrap { overflow-x: auto; }
.wx-tab { border-collapse: collapse; width: 100%; font-size: 10px; line-height: 1.2; }
.wx-tab th,
.wx-tab td {
    padding: 1px 4px;
    border-bottom: 1px solid #efeeec;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.wx-tab th {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .5;
    padding-bottom: 3px;
}
.wx-tab th:first-child,
.wx-tab td.wx-m { text-align: left; }
.wx-tab tbody tr:last-child td { border-bottom: none; }

.wx-src { font-size: 9px; line-height: 1.4; opacity: .5; margin-top: 7px; }
.wx-src a { color: inherit; }

/* --- Обзорная карта --- */
.wx-map { margin: 1.4em 0; border: 1px solid #ddd; background: #eee; }
/* Метка — текст, а не картинка: лишних запросов за иконками нет. */
.leaflet-container .wx-pin {
    width: auto !important; height: auto !important; margin: 0 !important;
    white-space: nowrap; text-align: center; cursor: pointer;
    transform: translate(-50%, -50%);
}
.wx-pin b {
    display: inline-block; padding: 2px 6px; border-radius: 3px;
    background: #4a6b8a; color: #fff; font-size: 13px; font-weight: 700;
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.wx-pin.wx-pin-warm b { background: #b4643c; }
.wx-pin.wx-pin-cold b { background: #4e7f9e; }
.wx-pin span {
    display: block; font-size: 11px; color: #333; margin-top: 1px;
    text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}

/* --- Список городов --- */
.wx-cities { list-style: none; margin: 1.2em 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px 16px; }
.wx-cities li { margin: 0; padding: 5px 0; border-bottom: 1px solid #ececea;
    display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.wx-cities li a { font-weight: 600; }
.wx-c-t { font-weight: 700; font-variant-numeric: tabular-nums; margin-left: auto; }
.wx-c-d { font-size: 12px; opacity: .6; flex: 0 0 auto; }

@media (max-width: 480px) {
    .wx { padding: 12px 13px; }
    .wx-head { font-size: 14px; }
    .wx-tab th, .wx-tab td { padding: 2px 4px; }
    .wx-tab { font-size: 9px; }
    .wx-now .wx-t { font-size: 18px; }
    .wx-now .wx-ico { width: 26px; height: 29px; }
    .wx-map { height: 340px !important; }
    .wx-cities { grid-template-columns: 1fr; }
    .wx-c-d { display: none; }
}