/* ═══ Страновые хабы и посадочные «раздел × страна» ════════════════════
   Макеты «Страна.dc.html» и «Страна моб.dc.html» от 04.09.2026, бриф 25.

   Классы с префиксом str-. Префикс не для красоты: витрина каталога уже
   ловила три конфликта, когда её .dirs и .dir совпали с классами из
   style.css и направления рисовались белыми плитками.

   Плитки товаров берём из listing.css — сетка .tiles и сама .tile общие
   с каталогом, избранным и похожими товарами.
   ═════════════════════════════════════════════════════════════════════ */

/* ── Шапка страны ────────────────────────────────────────────────────── */
.str-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;
  align-items:start;margin:26px 0 0}
.str-head__in{min-width:0}
.str-kick{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.str-kick p{margin:0;font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--burgundy)}

/* Знак страны. На широком экране крупный кругом справа, на узком —
   мелкий рядом с рубрикой: иначе он съедает высоту первого экрана */
.str-glyph{display:grid;place-items:center;flex:none;width:112px;height:112px;
  background:var(--burgundy);border-radius:var(--radius-pill);
  color:#FFF;font-size:44px;font-weight:600}
.str-glyph--sm{display:none;width:48px;height:48px;font-size:20px}

.container .str-h1{max-width:16ch;margin:0 0 20px;
  font-size:clamp(46px,6.2vw,80px);line-height:.98;font-weight:600;
  letter-spacing:-.05em;text-wrap:balance}

.str-facts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  margin:0;font-size:16px;color:var(--muted)}
.str-facts span{display:inline-flex;align-items:center;gap:14px}
.str-facts i{font-style:normal;color:#C3B2B7}

.str-lead{display:flex;flex-direction:column;gap:16px;max-width:880px;
  margin:30px 0 0}
.str-lead p{margin:0;font-size:19px;line-height:1.6;color:#3C3336;
  text-wrap:pretty}

/* ── Заголовок секции с подписью и ссылкой ───────────────────────────── */
.str-sect{margin-top:48px}
.str-sect--wide{margin-top:56px}
.str-sect__head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;padding-bottom:16px;border-bottom:1px solid var(--burgundy)}
.str-sect__in{min-width:0}
.container .str-sect__head h2{margin:0 0 6px;font-size:clamp(24px,2.4vw,32px);
  line-height:1.15;font-weight:600;letter-spacing:-.03em}
.str-note{margin:0;max-width:64ch;font-size:14px;line-height:1.5;
  color:var(--muted);text-wrap:pretty}
.str-all{flex:none;display:inline-flex;align-items:center;min-height:44px;
  font-size:15px;font-weight:600;white-space:nowrap}

.str-sect .tiles{margin-top:20px}

/* Заголовок без подписи — направления, бренды, подборки */
.container .str-h2{margin:0 0 18px;font-size:clamp(22px,2.1vw,28px);
  line-height:1.2;font-weight:600;letter-spacing:-.025em}
.str-h2row{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:12px;margin-bottom:18px}
.container .str-h2row h2{margin:0;font-size:clamp(22px,2.1vw,28px);
  line-height:1.2;font-weight:600;letter-spacing:-.025em}
.str-h2row a{display:inline-flex;align-items:center;min-height:44px;
  font-size:14px;font-weight:600}

/* ── Направления ─────────────────────────────────────────────────────── */
.str-dirs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:16px}
.str-dir{display:flex;flex-direction:column;gap:10px;padding:28px 30px;
  background:var(--white);border:1px solid #EDE4DE;
  border-radius:var(--radius-panel);color:var(--ink)}
.str-dir:hover{border-color:var(--burgundy);color:var(--ink)}
.str-dir__top{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px}
.str-dir__t{font-size:24px;line-height:1.2;font-weight:600;letter-spacing:-.025em}
.str-dir__n{flex:none;font-size:15px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--burgundy)}
.str-dir__types{max-width:40ch;font-size:15px;line-height:1.5;
  color:var(--muted);text-wrap:pretty}
.str-dir__brands{font-size:13px;line-height:1.5;color:var(--muted)}

/* ── Бренды страны ───────────────────────────────────────────────────── */
.str-brands{display:flex;flex-wrap:wrap;gap:10px}
.str-brand{display:inline-flex;align-items:baseline;gap:10px;min-height:48px;
  padding:11px 22px;background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius-pill);color:var(--ink)}
.str-brand:hover{border-color:var(--burgundy);color:var(--burgundy)}
.str-brand b{font-size:16px;font-weight:600;letter-spacing:-.01em}
.str-brand span{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}

/* ── Подборки ────────────────────────────────────────────────────────── */
.str-pb{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:16px}
.str-pb__c{display:flex;flex-direction:column;gap:10px;padding:28px 30px;
  background:var(--white);border:1px solid #EDE4DE;
  border-radius:var(--radius-panel);color:var(--ink)}
.str-pb__c:hover{border-color:var(--burgundy);color:var(--ink)}
.str-pb__meta{font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.str-pb__t{font-size:23px;line-height:1.2;font-weight:600;letter-spacing:-.025em}
.str-pb__n{max-width:44ch;font-size:15px;line-height:1.5;color:var(--muted);
  text-wrap:pretty}

/* ── Проза о стране ──────────────────────────────────────────────────── */
.str-text{padding:34px 36px;background:var(--white);
  border-radius:var(--radius-panel)}
.container .str-text h2{margin:0 0 20px;font-size:clamp(22px,2.1vw,28px);
  line-height:1.25;font-weight:600;letter-spacing:-.02em}
.str-text__in{display:flex;flex-direction:column;gap:14px;max-width:74ch}
.str-text__in p{margin:0;font-size:17px;line-height:1.65;color:#3C3336;
  text-wrap:pretty}

/* ── Переход ко второй стране ────────────────────────────────────────── */
.str-other{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:14px;min-height:88px;padding:20px 30px;
  margin-top:44px;background:rgba(255,255,255,.5);border:1px solid var(--border);
  border-radius:var(--radius-card);color:var(--ink)}
.str-other:hover{border-color:var(--burgundy);color:var(--ink)}
.str-other__t{display:block;font-size:21px;font-weight:600;letter-spacing:-.02em}
.str-other__m{display:block;font-size:14px;color:var(--muted)}
.str-other__a{flex:none;color:var(--burgundy)}

/* ═══ Планшет ═════════════════════════════════════════════════════════
   Крупный знак убираем первым: 112 пикселей круга рядом с заголовком
   в 46 пунктов оставляют заголовку меньше половины строки.
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  .str-head{grid-template-columns:minmax(0,1fr)}
  .str-glyph{display:none}
  .str-glyph--sm{display:grid}
}

@media (max-width:900px){
  .str-dirs{grid-template-columns:minmax(0,1fr)}
  .str-pb{grid-template-columns:minmax(0,1fr)}
}

/* ═══ Телефон ═════════════════════════════════════════════════════════ */
@media (max-width:767px){
  .str-head{margin-top:16px;gap:0}
  .str-kick{gap:10px;margin-bottom:10px}
  .str-glyph--sm{width:34px;height:34px;font-size:15px}
  .container .str-h1{margin-bottom:14px;font-size:40px;line-height:1;
    letter-spacing:-.04em}

  /* На телефоне факты идут столбиком: строкой через точки они
     переносятся так, что число отрывается от подписи */
  .str-facts{display:flex;flex-direction:column;gap:0;margin-top:2px}
  .str-facts span{display:flex;align-items:center;justify-content:space-between;
    gap:14px;width:100%;min-height:44px;border-bottom:1px solid #E6DBD4;
    font-size:15px}
  .str-facts i{display:none}

  .str-lead{gap:12px;margin-top:18px}
  .str-lead p{font-size:15px}

  .str-sect,.str-sect--wide{margin-top:30px}
  .str-sect__head{flex-direction:column;align-items:flex-start;gap:12px;
    padding-bottom:12px}
  .container .str-sect__head h2{font-size:24px}
  .str-all{min-height:52px;width:100%;justify-content:center;padding:0 20px;
    background:var(--burgundy);border-radius:var(--radius-pill);color:#FFF}
  .str-all:hover{background:var(--burgundy-hover);color:#FFF}

  .container .str-h2,.container .str-h2row h2{font-size:22px}
  .str-dir,.str-pb__c{gap:8px;padding:18px;border-radius:18px}
  .str-dir__t{font-size:19px;letter-spacing:-.02em}
  .str-dir__types,.str-pb__n{font-size:14px}
  .str-dir__n{font-size:14px}
  .str-brands{gap:8px}
  .str-brand{min-height:46px;padding:11px 18px}
  .str-brand b{font-size:15px}
  .str-brand span{font-size:12px}
  .str-pb__t{font-size:19px;letter-spacing:-.02em}
  .str-text{padding:22px 20px;border-radius:var(--radius-panel)}
  .container .str-text h2{margin-bottom:14px;font-size:21px}
  .str-text__in{gap:12px}
  .str-text__in p{font-size:15px;line-height:1.6}
  .str-other{min-height:72px;padding:16px 20px;margin-top:26px}
  .str-other__t{font-size:18px}
  .str-other__m{font-size:13px}
}