/* =========================
   TOKENS / THEME
========================= */
:root{
  --bg:#fafafa;
  --surface:#ffffff;
  --on-bg:#222222;
  --muted:#666666;
  --line:#e8e8e8;

  /* Accent лишаємо для кнопок/лінків, але НЕ для меню */
  --accent:#3b6ae0;
  --accent-hover:#2e58c0;

  --nav-text:#222;
  --nav-hover-bg:#f4f5f7;
  --nav-active:#111;

  --radius:12px;
  --radius-lg:16px;
  --shadow:0 4px 12px rgba(0,0,0,.06);
  --shadow-hover:0 6px 22px rgba(0,0,0,.12);

  --max-width:1200px;
  --px:20px;
  --section-y:64px;
  --section-y-sm:40px;

  --h1:clamp(28px, 4vw, 42px);
  --h2:clamp(22px, 3.2vw, 30px);
  --h3:clamp(18px, 2.6vw, 22px);

  /* Тривалості/криві для плавностей */
  --e2:.2s ease;
  --e3:.3s cubic-bezier(.2,.8,.2,1);
}

/* =========================
   BASE / RESET
========================= */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html,body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  background:var(--bg);
  color:var(--on-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; display:block; }
a{ color:#000000; text-decoration:none; }
a:hover{ color:#696969; }
h1,h2,h3,h4,h5,h6{
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  font-weight:600; line-height:1.2; margin:0 0 .6em;
}
h1{ font-size:var(--h1); }
h2{ font-size:var(--h2); }
h3{ font-size:var(--h3); }
p{ margin:0 0 1em; color:var(--on-bg); }
.hero-overlay .lead { color:#ededed; }

ul,ol{ padding-left:1.2rem; margin:0 0 1em; }
hr{ border:none; border-top:1px solid var(--line); margin:24px 0; }
.visually-hidden{
  position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); overflow:hidden; white-space:nowrap;
}
/* Focus-visible */
:where(a,button,[role="button"],input,select,textarea):focus-visible{
  outline:2px solid color-mix(in srgb, var(--accent) 75%, transparent);
  outline-offset:2px; border-radius:8px;
}
/* Менше анімацій */
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* =========================
   LAYOUT / SPACING
========================= */
.container{ max-width:var(--max-width); margin:0 auto; padding:0 var(--px); }
.container1{ margin:0 auto; padding:0 var(--px); }
.container.narrow{ max-width:820px; }
main.container > section{ padding-block:var(--section-y); }
@media (max-width:768px){
  main.container > section{ padding-block:var(--section-y-sm); }
}
.flow > * + *{ margin-top:clamp(10px, 1.6vw, 16px); }

/* =========================
   HEADER & NAV (без конфліктів)
========================= */
header.site-header{
  position:sticky; top:0; z-index:1100;
  background:var(--surface);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  backdrop-filter:saturate(1.1) blur(4px);
  overflow:visible;
}
header.site-header .container{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto; /* logo | nav | search */
  align-items:center;
  column-gap:24px;
  padding:14px 24px;
  overflow:visible;
}
header.site-header .container1{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto; /* logo | nav | search */
  align-items:center;
  column-gap:24px;
  padding:14px 24px;
  overflow:visible;
}
/* Лого */
.logo{
  display:flex; align-items:center; gap:12px;
  font-weight:700; font-size:1.2rem; color:inherit; text-decoration:none;
  min-width:0;
}
.logo img{ height:48px; display:block; }

/* Пошук */
.search-inline{
  display:flex; align-items:center; gap:10px;
  background:#f2f2f2; border-radius:999px;
  padding:8px 12px; border:1px solid #e0e0e0;
  transition:box-shadow var(--e2), border-color var(--e2);
  justify-self:end;
  margin-left:auto;
  width:200px; max-width:200px; min-width:180px;
  flex-shrink:0; z-index:1101;
  flex-direction: row;
}
.search-inline:focus-within{ border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent); }
.search-inline input{
  border:none; background:transparent; outline:none;
  font-size:.95rem; width:100%;
}
.search-inline button{
  border:none; background:#f8f8f8; color:#fff;
  border-radius:50%; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background var(--e2), transform var(--e2);
}
.search-inline button:hover{ background:var(--accent-hover); }
.search-inline button:active{ transform:scale(.96); }

/* Навігація — без коричневого, стабільний ховер */
nav.main-nav{ min-width:0; overflow:visible; z-index:1102; }
nav.main-nav ul.menu{
  display:flex; align-items:center; gap:24px;
  list-style:none; margin:0; padding:0;
  white-space:nowrap; flex-wrap:nowrap;
  justify-content: center;
}
nav.main-nav ul.menu > li{ position:relative; }
nav.main-nav a{
  line-height:1; padding:10px 12px; border-radius:10px;
  display: flex; align-items: center;
  color:var(--nav-text); font-weight:500; transition:background var(--e2), color var(--e2);
}
nav.main-nav a:hover{ background:var(--nav-hover-bg); color:var(--nav-active); }
/* Легка адаптація */
@media (max-width:1280px){
  nav.main-nav ul.menu{ gap:16px; }
  nav.main-nav a{ padding:8px 10px; font-size:.95rem; }
}
@media (max-width:1200px){
  .search-inline{ max-width:200px; width:200px; min-width:180px; padding:6px 10px; }
  .search-inline input{ font-size:.9rem; }
}

/* Підменю — плавність, без зсувів */
.has-submenu{ position:relative; }
.has-submenu .menu-row{ display:flex; align-items:center; gap:8px; padding:4px 0; }
.submenu-toggle{
  appearance:none; border:none; background:transparent; cursor:pointer;
  width:28px; height:28px; border-radius:8px; position:relative; flex:0 0 28px;
}
.submenu-toggle::before{
  content:""; position:absolute; inset:0; margin:auto;
  width:8px; height:8px; border-right:2px solid #222; border-bottom:2px solid #222;
  transform:rotate(45deg); transition:transform var(--e2);
}
.submenu-toggle[aria-expanded="true"]::before{ transform:rotate(-135deg); }

/* місток, щоб курсор не «рвав» hover */
.has-submenu::after{ content:""; position:absolute; left:0; top:100%; width:100%; height:12px; }

/* Випадаюча панель */
.submenu{
  position:absolute; left:0; top:calc(100% + 10px);
  display:flex; flex-direction:column; gap:6px;
  min-width:220px; max-width:340px; padding:10px; margin:0;
  background:#fff; border:1px solid #eee; border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  z-index:1300;

  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity var(--e3), transform var(--e3);
  will-change:opacity, transform;
}
.submenu a{ padding:10px 12px; border-radius:8px; color:#222; }
.submenu a:hover{ background:#f6f6f6; }

/* Показ по hover/focus на десктопі */
@media (hover:hover){
  nav.main-nav ul.menu > li.has-submenu:hover > .submenu,
  nav.main-nav ul.menu > li.has-submenu:focus-within > .submenu{
    opacity:1; transform:none; pointer-events:auto;
  }
}

/* Бургер */
.nav-toggle{
  display:none; background:transparent; border:none; cursor:pointer;
  flex-direction:column; gap:4px; padding:6px; position:relative; z-index:1600;
}
.nav-toggle span{
  width:24px; height:2px; background:#222; display:block; border-radius:1px; transition:transform var(--e2), opacity var(--e2);
}
.nav-toggle.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* Бекдроп (на випадок використання) */
.nav-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transition:opacity var(--e2), visibility var(--e2);
  z-index:1498; pointer-events:none;
}
.nav-backdrop.show{ opacity:1; visibility:visible; pointer-events:auto; }

/* === MOBILE (базова типографіка меню; сам дровер у секції PORTAL нижче) === */
@media (max-width:1100px){

  header.site-header{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .nav-toggle{ display:flex; }

  header.site-header .container,
  header.site-header .container1{
    grid-template-columns:auto auto 1fr;
    row-gap:10px;
  }

  nav.main-nav ul.menu{
    flex-direction:column; align-items:stretch; gap:8px; white-space:normal;
  }
  nav.main-nav a{ padding:12px 12px; border-radius:10px; background:#fff; border:1px solid #eef1f6; }
  nav.main-nav a:hover{ background:#f8faff; }

  .has-submenu .menu-row{
    justify-content:space-between; padding:8px 10px; border-radius:10px;
    background:#fff; border:1px solid #eee;
  }
  .has-submenu .menu-row:hover{ background:#fafbfc; }

  .submenu{
    position:static; border:0; box-shadow:none; padding:6px 4px; gap:6px;
    display:none; opacity:1; transform:none; pointer-events:auto;
  }
  .submenu.open{ display:flex; }
  .submenu a{ padding:10px 12px; border-radius:8px; background:#fff; border:1px solid #f0f0f0; }
  .submenu a + a{ margin-top:6px; }

  .search-inline{
    grid-column:1/-1; justify-self:stretch; width:auto; max-width:none; min-width:0;
    margin-left:0; order:3;
  }
}

/* =========================
   HERO VIDEO
========================= */
.hero-video{ position:relative; width:100%; height:100vh; overflow:hidden; }
.hero-video video{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  min-width:100%; min-height:100%; object-fit:cover; z-index:1;
}
.hero-overlay{
  position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; text-align:center; color:#fff; background:rgba(0,0,0,.35); padding:24px;
}
.hero-overlay h1{ margin-bottom:.4em; letter-spacing:2px; text-transform:uppercase; }
.hero-overlay .lead{ max-width:720px; }
@media (prefers-reduced-motion:reduce){
  .hero-video video{ transform:none; object-fit:cover; top:0; left:0; }
}

/* =========================
   PAGE HEADER
========================= */
.page-header{ text-align:center; margin:0 0 10px; }
.page-header .lead{ color:var(--muted); max-width:760px; margin:8px auto 0; }

/* =========================
   GRIDS & CARDS
========================= */
.grid{ display:grid; gap:24px; }
.intro-grid{ display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.cards-grid{ display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.gallery-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.videos-grid{ display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.projects-grid,.partners-grid,.philosophy-grid,.vacancies{
  display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}

.card,.intro-grid article,.project-card,.blog-item,.vacancy,.contact-card{
  display:flex; flex-direction:column; justify-content:space-between;
  background:var(--surface); border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px; transition:transform .28s ease, box-shadow .28s ease;
}
.card:hover,.intro-grid article:hover,.project-card:hover,.blog-item:hover,.vacancy:hover,.contact-card:hover{
  transform:translateY(-6px); box-shadow:var(--shadow-hover);
}
.card img,.project-card img{
  width:50%; object-fit:cover; border-radius:10px; margin-bottom:12px; margin-left:26%;
}
.card > * + *, .project-card > * + *, .intro-grid article > * + *, .blog-item > * + *{ margin-top:12px; }
.intro-grid a{
  display:inline-block; margin-top:.6rem; font-weight:600; color:#0a48c8; position:relative;
}
.intro-grid a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:100%; height:2px; background:#0a48c8;
  transform:scaleX(0); transform-origin:left; transition:transform var(--e3);
}
.intro-grid a:hover::after{ transform:scaleX(1); }

/* =========================
   BLOG
========================= */
.blog-item{ display:flex; gap:18px; }
.blog-item img{ width:20%;  object-fit:cover; border-radius:10px; }
.blog-item .muted{ color:#888; font-size:.92rem; }
@media (max-width:768px){ .blog-item{ flex-direction:column; } }

/* =========================
   TIMELINE
========================= */
.timeline{ display:grid; gap:18px; border-left:3px solid #90744b; padding-left:20px; }
.timeline-item{ position:relative; background:var(--surface); border-radius:12px; box-shadow:var(--shadow); padding:18px; }
.timeline-item::before{
  content:""; position:absolute; left:-11px; top:18px; width:16px; height:16px; border-radius:50%; background:#90744b;
}
.timeline-item .year{ font-weight:700; color:#ae813f; margin-bottom:.2em; }

/* =========================
   FORMS & BUTTONS
========================= */
form{ display:flex; flex-direction:column; gap:12px; }
form input, form textarea{
  padding:12px 14px; border:1px solid #dcdcdc; border-radius:12px; font:inherit; background:#fff;
}
form textarea{ min-height:120px; resize:vertical; }
.btn, button.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:#543e1e; color:#fff; border:none; border-radius:12px;
  padding:10px 16px; cursor:pointer; font-weight:600; transition:background var(--e2), transform var(--e2);
}
.btn:hover, button.btn:hover{ background:#936827; }
.btn:active, button.btn:active{ transform:translateY(1px); }
.btn.small{ padding:8px 12px; font-size:.92rem; }
.btn.outline{ background:transparent; color:#fff; border:1px solid #fff; }
.btn.outline:hover{ background:#fff; color:#fff; }

/* =========================
   FOOTER
========================= */
.footer{
  background:#111; color:#ddd; padding:40px 24px 20px;
  font-family:'Inter',sans-serif; margin-top:var(--section-y);
}
.footer .container{ display:grid; gap:32px; grid-template-columns:2fr 1fr 1fr; }
.footer h4{ font-family:'Montserrat',sans-serif; font-size:1.1rem; font-weight:600; margin:0 0 10px; color:#fff; }
.footer p{ margin:0 0 .6em; color:#bbb; }
.footer a{ color:#cfd8ff; }
.footer a:hover{ color:#fff; }
.footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.footer .policy-links{ display:flex; gap:12px; flex-wrap:wrap; }
.footer-bottom{
  border-top:1px solid #333; margin-top:18px; padding-top:16px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:.92rem; color:#888;
}
@media (max-width:1024px){ .footer .container{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .footer .container{ grid-template-columns:1fr; } }

/* =========================
   MODALS
========================= */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center; padding:20px;
  z-index:1200;
}
.modal{
  background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-hover);
  width:min(900px, 100%); padding:24px; color:#222;
}
.modal .actions{ display:flex; gap:10px; justify-content:flex-end; }

/* =========================
   WARNING (alcohol banner)
========================= */
.alcohol-warning{ z-index: 2000; }          /* базово вище контенту */
.nav-backdrop{ z-index: 1498; }             /* бекдроп */
nav.main-nav{ z-index: 1499; }              /* меню */

.alcohol-warning{
  position:fixed; left:0; bottom:env(safe-area-inset-bottom, 0px); width:100%;
  background:#fff; color:#000; z-index:1300;
  text-align:center; font-family:'Montserrat',sans-serif;
  font-weight:700; letter-spacing:1px; text-transform:uppercase;
  box-shadow:0 -2px 8px rgba(0,0,0,.25);
  font-size:35px; padding:12px max(12px, env(safe-area-inset-left, 0px)) 12px max(12px, env(safe-area-inset-right, 0px));
}
/* запас під банер; якщо його немає — не заважає */
body{ padding-bottom:calc(60px + env(safe-area-inset-bottom, 0px)); }

/* ====== HEADER LAYOUT via GRID AREAS ====== */
header.site-header .container1{
  display:grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-areas: "logo nav search burger";
  align-items:center;
  column-gap:24px;
}
.logo{ grid-area:logo; }
nav.main-nav{ grid-area:nav; }
.search-inline{ grid-area:search; }
.nav-toggle{
  grid-area:burger;
  justify-self:end;
  margin-left:0;
}

/* МОБІЛЬНИЙ: logo | search | burger (навігація виїжджає оффканвасом) */
@media (max-width:1100px){
  header.site-header .container1{
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "logo search burger";
    row-gap:10px;
  }
  .nav-toggle{ display:flex; justify-self:end; z-index:1600; }
  .search-inline{ justify-self:stretch; width:auto; max-width:none; }
}

/* === OFFCANVAS ЧЕРЕЗ ПОРТАЛ ============================ */
:root{ --z-backdrop: 1195; --z-drawer: 1200; } /* пріоритети над банером */

@media (max-width:1100px){
  /* Глушимо старі fixed-стилі для самого nav у мобільному */

  /* Контейнер порталу */
  .nav-portal{
    position: fixed; inset: 0; z-index: var(--z-drawer);
    pointer-events: none; /* увімкнемо у .open */
  }
  /* Затемнення для кліку поза меню */
  .nav-portal .overlay{
    position:absolute; inset:0;
    background:rgba(0,0,0,.45);
    opacity:0; transition:opacity .25s ease;
    pointer-events:none;
  }
  /* Сам дровер */
  .nav-portal .main-nav{
    position: absolute; top:0; right:0; height:100dvh;
    width: min(88vw, 360px);
    background:#fff; box-shadow:-10px 0 30px rgba(0,0,0,.15);
    overflow:auto; padding:16px;
    transform: translateX(100%); transition: transform .25s ease;
    pointer-events:auto;
  }

  /* Стан відкриття (узгоджено з JS: portal.classList.toggle('open')) */
  .nav-portal.open{ pointer-events:auto; }
  .nav-portal.open .overlay{ opacity:1; pointer-events:auto; }
  .nav-portal.open .main-nav{ transform: translateX(0); }

  /* Вміст дровера */
  .nav-portal .main-nav a {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 14px;
    border-radius:10px;
    background:#fff;
    border:1px solid #eee;
    margin:4px 0;
    color:#111;
    font-weight:500;
  }
  .nav-portal .main-nav a:hover { background:#f5f6f8; }
  .nav-portal .main-nav .submenu a {
    border:1px solid #ddd;
    background:#fafafa;
  }

  /* Пошук у самому низу меню */
  .nav-portal .main-nav .search-inline{
    order:99;
    position:sticky; bottom:0;
    margin:12px 0 0;
    padding:10px 12px;
    background:#fff;
    border:1px solid #e6e8ee;
    border-radius:12px;
    box-shadow:0 -6px 16px rgba(0,0,0,.06);
  }
  .nav-portal .main-nav .search-inline input{ min-width:0; width:100%; }

  /* Компенсація скролбару коли body заблоковано */
  body.nav-open{ padding-right:var(--sbw); }

  /* трішки відступу від краю екрана на девайсах із "чолкою" */
  .nav-portal .main-nav{ padding-bottom: calc(16px + env(safe-area-inset-bottom,0px)); }
}

/* десктоп – без трансформацій */
@media (min-width:1101px){
  nav.main-nav{ transform:none !important; }
  .nav-portal{ display:none; }
}

/* ===== ДОДАТКОВИЙ ПРІОРИТЕТ НА ВИПАДОК СТОСУВАННЯ БАНЕРА ПОВЕРХ ===== */
.alcohol-warning{ z-index: 900 !important; } /* нижче за дровер/бекдроп */
.nav-toggle{
  z-index: 2001 !important; /* вище ніж .nav-portal і .nav-backdrop */
  position: relative;
}
/* --- Fix: burger above drawer/overlay --- */
header.site-header{
  z-index: 2005 !important; /* вище за .nav-portal (1200) і .nav-backdrop (1498) */
}

.nav-toggle{
  position: relative; /* створює власний контекст для внутрішніх span */
  z-index: 2010;      /* достатньо, але не критично — головне підняти header */
}

/* (опційно) зробити клікабельну зону помітнішою на мобільних */
@media (max-width:1100px){
  .nav-toggle{
    background: #fff;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
  }
}
/* Якщо все ж хочеш бачити затемнення, але без блокування кліків по меню */
.nav-backdrop{ z-index: 1 !important; }            /* нижче за портал */
.nav-backdrop.show{ pointer-events: none !important; }
.nav-toggle { z-index: 51000 !important; }     
/* Дровер починається нижче шапки і займає залишок висоти */
@media (max-width:1100px){
  /* висота хедера прилітає у --header-h з JS */
  .nav-portal .overlay{
    top: var(--header-h, 0px);      /* не накриває хедер */
  }
  .nav-portal .main-nav{
    top: var(--header-h, 0px) !important;
    height: calc(100dvh - var(--header-h, 0px)) !important;
  }
}
@media (max-width:1100px){
  .nav-backdrop{ display:none !important; }
}
/* ===== BLOG — нові контролі ===== */
.blog-controls { margin-bottom: 12px; }
.blog-controls-row{
  display:flex; gap:16px; align-items:center; flex-wrap:wrap;
  background: #fff; border:1px solid #e9e9ee; border-radius:14px; padding:12px;
  box-shadow: var(--shadow);
}
.chipbar{ display:flex; gap:8px; flex-wrap:wrap; }

.chip{
  --b:#e5e7ef;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px; border:1px solid var(--b);
  background:#fff; color:#222; font-weight:600; cursor:pointer; user-select:none;
  transition: background var(--e2), border-color var(--e2), transform var(--e2);
}
.chip:hover{ background:#f6f8ff; border-color:#d8dcf5; }
.chip:active{ transform: translateY(1px); }
.chip .count{
  background:#eef1ff; color:#2b3a8f; font-weight:700; font-size:.86rem;
  padding:2px 8px; border-radius:999px;
}
.chip.active{
  background:#e9eeff; border-color:#cfd9ff; color:#21307a;
}
.chip[role="tab"]{ outline:none; }
.chip:focus-visible{ outline:2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset:2px; }

.search-group{
  margin-left:auto; display:flex; align-items:center; gap:8px;
  background:#f6f6f8; border:1px solid #e3e6ef; border-radius:12px; padding:8px 12px;
  min-width:240px; flex:1 1 280px; max-width:520px;
}
.search-group input{
  border:none; background:transparent; outline:none; width:100%; font:inherit;
}
.search-group .search-ico{ opacity:.7; }
.search-group .clear-btn{
  border:none; background:#fff; border:1px solid #e5e7ef; color:#444; width:28px; height:28px; border-radius:999px;
  cursor:pointer; transition: background var(--e2);
}
.search-group .clear-btn:hover{ background:#f0f2ff; }

.blog-status{
  margin-top:10px; display:flex; align-items:center; justify-content:space-between; gap:12px; color:#666;
}
.blog-sort select{
  border:1px solid #e3e6ef; background:#fff; border-radius:10px; padding:6px 10px; font:inherit;
}

/* Список постів — картки дві в ряд на великих екранах */
.blog-list{
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.blog-card{
  background:#fff; border:1px solid #ececf3; border-radius:14px; overflow:hidden; box-shadow:var(--shadow);
  display:flex; flex-direction:column; transition: transform .22s ease, box-shadow .22s ease;
}
.blog-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.blog-card .thumb{ aspect-ratio: 16/9; width:100%; object-fit:cover; }
.blog-card .pad{ padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
.blog-card .meta{ color:#7a7a85; font-size:.9rem; }
.blog-card h3{ margin:0; font-size:1.12rem; }
.blog-card .excerpt{ color:#444; }
.blog-card .tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.blog-card .tag{
  font-size:.82rem; padding:4px 8px; border-radius:999px; background:#f3f5ff; color:#2b3a8f; border:1px solid #e2e6ff;
}

/* Пагінація */
.pagination{
  margin-top:16px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
}
.pagination .btn{
  background:#fff; color:#222; border:1px solid #e3e6ef; padding:8px 12px; border-radius:10px;
}
.pagination .btn.active{ background:#2e58c0; color:#fff; border-color:#2e58c0; }
.pagination .btn:disabled{ opacity:.55; pointer-events:none; }

/* Підсвітка збігів у пошуку */
mark{ background:#fff2a8; color:inherit; padding:0 .15em; border-radius:4px; }
@media (max-width:1100px){
/* =========================
   WARNING (alcohol banner)
========================= */
.alcohol-warning{ z-index: 2000; }          /* базово вище контенту */
.nav-backdrop{ z-index: 1498; }             /* бекдроп */
nav.main-nav{ z-index: 1499; }              /* меню */

.alcohol-warning{
  position:fixed; left:0; bottom:env(safe-area-inset-bottom, 0px); width:100%;
  background:#fff; color:#000; z-index:1300;
  text-align:center; font-family:'Montserrat',sans-serif;
  font-weight:700; letter-spacing:1px; text-transform:uppercase;
  box-shadow:0 -2px 8px rgba(0,0,0,.25);
  font-size:18px; padding:12px max(12px, env(safe-area-inset-left, 0px)) 12px max(12px, env(safe-area-inset-right, 0px));
  }
  }

  @media (max-width:1100px){
  .hero-video{
    height: auto;           /* прибираємо жорстке 100vh */
  }
  .hero-video video{
    position: relative;
    top: 0; left: 0;
    transform: none;        /* прибираємо translate */
    width: 100%;            /* розтягується на всю ширину */
    height: auto;           /* висота за пропорцією відео */
    object-fit: contain;    /* нічого не обрізає */
  }
  .hero-overlay{
    position: absolute;     /* залишається поверх */
    top: 0; left: 0; right: 0; bottom: 0;
    padding: 16px;
  }
}
/* Модалки завжди поверх усього (хедер/портал/банер) */
.modal-backdrop{
  position: fixed !important;
  inset: 0 !important;
  z-index: 50000 !important;   /* вище за header(2005), портал(1200), банер */
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45);
}
.modal{ position: relative; pointer-events: auto; }