/* ===== Theme / base ===== */
:root{
  --bg:#f5f7fb;
  --card:#ffffff;
  --ink:#1f2a44;
  --muted:#5f6b85;
  --brand:#0a66c2;
  --brand-600:#0957a8;
  --line:#e7eaf3;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}

/* ===== Header layout ===== */
.header-row{
  display:grid;
  grid-template-columns: auto auto auto auto; /* hamburger | logo | MENU | lang */
  align-items:center;
  gap:12px;
}
.brand{ justify-self:center; }       /* лого остаётся по центру визуально */
.lang-switch{ justify-self:end; }    /* язык справа */

.hamburger{
  width:40px;height:40px;background:transparent;border:0;display:none;cursor:pointer;
}
.hamburger span{
  display:block;width:22px;height:2px;background:#fff;border-radius:2px;margin:5px auto;transition:.25s;
}

/* отдельный цвет хедера */
.site-header{ background:#0f5fb6; }

/* меню по умолчанию скрыто — покажем только на десктопе */
.desktop-nav{ 
  display:none; 
  align-items:center; 
  gap:16px; 
  white-space:nowrap; 
  overflow:auto;
  justify-self: center;   /* в сетке header-row центрируем */
  justify-self: center;   /* в сетке header-row центрируем */
}

.desktop-nav a{
  color:#eaf3ff;
  text-decoration:none;
  font-weight:600;
  opacity:.95;
  padding:6px 2px;
  border-bottom:2px solid transparent;
  transition:.2s;
}
.desktop-nav a:hover{
  color:#fff;
  border-bottom-color:#fff;
}

/* мобильный дровер */
.mobile-drawer{
  position:fixed; inset:0 auto 0 0; width:280px; max-width:82vw;
  background:#fff; color:var(--ink);
  box-shadow:2px 0 22px rgba(0,0,0,.15);
  transform:translateX(-100%); transition:transform .25s ease; z-index:1001; padding:16px;
}
.drawer-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:1000;
}
body.menu-open .mobile-drawer{ transform:translateX(0); }
body.menu-open .drawer-backdrop{ opacity:1; pointer-events:auto; }
.mobile-nav a{
  display:block; color:var(--ink); text-decoration:none;
  padding:10px 6px; border-radius:8px; margin:2px 0;
}
.mobile-nav a:hover{ background:#f0f5ff; color:var(--brand); }

/* десктоп ≥900px: показываем меню, прячем гамбургер */
@media (min-width:900px){
  .desktop-nav{ display:flex; }
  .hamburger{ display:none; }
}

/* мобилка/планшет <900px: меню скрыто, гамбургер виден */
@media (max-width:899px){
  .hamburger{ display:block; }
}

/* ===== Layout container (центруем и не на всю ширину) ===== */
.container{
  max-width:1100px;             /* ограничиваем ширину как в референсе */
  margin:0 auto;                /* по центру */
  padding:0 20px;               /* отступы от краёв экрана */
}

/* ===== Header ===== */
.site-header{
  background:var(--brand);
  color:#fff;
  position:sticky; top:0; z-index:10;
  box-shadow:0 4px 14px rgba(10,102,194,.18);
}

/* ссылки меню на десктопе (поверх синего хедера) */
.site-header .desktop-nav a{
  color:#eaf3ff;
  text-decoration:none;
  font-weight:600;
  opacity:.95;
  padding:6px 2px;
  border-bottom:2px solid transparent;
  transition:.2s;
}
.site-header .desktop-nav a:hover{
  color:#fff;
  border-bottom-color:#fff;
}


.top-bar{ position:absolute; left:16px; top:12px; }
.top-bar select{
  appearance:none;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.15);
  color:#fff; border-radius:10px;
  padding:8px 12px; font-weight:600;
}
.brand{ display:flex; align-items:center; justify-content:center; }
.logo{ height:70px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.15)); }

.category-menu button{
  background:#fff; border:1px solid var(--line);
  color:var(--ink); padding:8px 12px; border-radius:999px;
  font-weight:600; cursor:pointer; transition:.2s;
}
.category-menu button:hover{ border-color:var(--brand); color:var(--brand); }

/* ===== Featured (главный пост) ===== */
.featured{
	background:var(--card);
	border:1px solid var(--line);
	border-radius:16px;
	box-shadow:0 8px 22px rgba(31,42,68,.06);
	padding:18px;
	margin:24px 0
	}
	
.featured .card{
	display:grid;
	grid-template-columns:1fr;
	gap:16px;
	border:none;
	box-shadow:none
	}
	
.featured img{width:100%;height:auto;border-radius:12px}
.featured h2{font-size:28px;line-height:1.25;margin:0 0 6px}
.featured p{color:var(--muted);margin:8px 0 0}

/* ===== Grid (фиксированные размеры карточек, центр в контейнере) ===== */

/* Desktop ≥1200px: 3 колонки по 320px, центрируем сетку */
.grid{
  display:grid;
  grid-template-columns:repeat(3, 320px);
  justify-content:center;       /* центрируем всю сетку внутри контейнера */
  gap:24px;
  margin:10px 0 22px;
}

/* Tablet 700–1199px: 2 колонки по 300px, также центр */
@media (max-width:1199px){
  .grid{ grid-template-columns:repeat(2, 300px); }
}

/* Mobile <700px: 1 колонка, карточка тянется до 90% */
@media (max-width:699px){
  .grid{ grid-template-columns:minmax(0, 1fr); }
  .card{ width:100%; max-width:90%; margin:0 auto; }
}

/* ===== Card ===== */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 6px 14px rgba(31,42,68,.05);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card img{
  width:100%;
  height:210px;                 /* фиксированная высота превью */
  object-fit:cover;
  transition:transform .35s ease;
}
.card h3{ margin:10px 12px 14px; font-size:16px; }
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 24px rgba(31,42,68,.12);
  border-color:var(--brand);
}
.card:hover img{ transform:scale(1.05); }

/* ===== Section title ===== */
.section-title{ margin:26px 0 10px; font-size:20px; color:var(--ink); }

/* ===== Helper for main story wrapper ===== */
.main-story-wrapper{
max-width:900px;
margin:0 auto 24px;
padding:0 20px;
}

/* ===== Load more ===== */
.load-more-wrap{ text-align:center; margin:10px 0 30px; }
#load-more-btn{
  background:var(--brand);
  color:#fff; border:0; border-radius:12px;
  padding:10px 16px; font-weight:700; cursor:pointer;
  box-shadow:0 8px 16px rgba(10,102,194,.25);
  transition:filter .2s ease, transform .1s;
}
#load-more-btn:hover{ filter:brightness(1.05); }
#load-more-btn:active{ transform:translateY(1px); }
#load-more-btn.loading{ position:relative; }
#load-more-btn.loading::after{
  content:"";
  width:16px; height:16px;
  border:2px solid rgba(255,255,255,.6);
  border-top-color:#fff;
  border-radius:50%;
  display:inline-block;
  margin-left:8px;
  animation:spin .9s linear infinite;
  vertical-align:-3px;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ===== Footer ===== */
.footer{
  border-top:1px solid var(--line);
  background:#fff;
  margin-top:10px;
  padding:20px 0;
  color:var(--muted);
}
.footer .links a{ color:var(--brand); text-decoration:none; }
.footer .links a:hover{ text-decoration:underline; }
.footer .copy{ margin-top:8px; font-size:13px; }

/* ===== Lang switch (select) ===== */
.lang-switch select{
  appearance:none;               /* убираем родной вид */
  -webkit-appearance:none;
  -moz-appearance:none;

  background:
    /* кастомная стрелка справа (SVG) */
    url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")
    no-repeat right 12px center,
    rgba(255,255,255,.16);        /* полупрозрачный фон */

  color:#fff;
  border:1px solid rgba(255,255,255,.35);
  border-radius:12px;
  padding:8px 38px 8px 12px;      /* место под стрелку справа */
  font-weight:600;
  font-size:14px;
  line-height:1;
  min-width:118px;

  transition:background-color .2s ease, border-color .2s ease,
             box-shadow .2s ease, transform .05s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  cursor:pointer;
}

/* hover / active / focus */
.lang-switch select:hover{
  background-color:rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.55);
}
.lang-switch select:active{
  transform:translateY(1px);
}
.lang-switch select:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(255,255,255,.35);
}

/* Стили для выпадающего списка */
.lang-switch select option {
  background:#fff;          /* фон списка */
  color:#1f2a44;            /* тёмный текст */
  font-weight:500;
}

/* для активной/выбранной опции */
.lang-switch select option:checked {
  background:#f0f5ff;
  color:var(--brand);
}

/* отключённое состояние — на случай будущих экспериментов */
.lang-switch select:disabled{
  opacity:.7; cursor:not-allowed;
}

/* компактнее на узких экранах */
@media (max-width:899px){
  .lang-switch select{
    padding:7px 34px 7px 10px;
    font-size:13px;
    min-width:102px;
    border-radius:10px;
  }
}

.logo-link {
  display:inline-block;
}
.logo-link:hover {
  text-decoration:none;
}