/* Responsive tweaks */

/* Floating header adjustments for mobile */
@media (max-width: 768px) {
  .site-header {
    top: 8px;
    left: 8px;
    right: 8px;
    width: calc(100% - 16px);
    border-radius: 12px;
  }
  
  body {
    padding-top: 76px;
  }
  
  section[id] {
    scroll-margin-top: 92px;
  }
  
  .scroll-top {
    bottom: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
  }
}

@media (max-width:1200px){ 
  .grid-3{ grid-template-columns: repeat(2, 1fr); } 
}

@media (max-width:960px){
  .nav{
    position:fixed;
    inset:0;  /* Занимать весь экран */
    left:100%;  /* Начинаем за пределами экрана (вместо transform для избежания создания нового containing block) */
    background:rgba(10,10,12,.98);  /* Более темный фон */
    padding:80px 24px 40px;
    display:flex;
    flex-direction:column;
    gap:20px;  /* Увеличить отступы */
    transition:left .3s ease;
    backdrop-filter:blur(10px);  /* Усилить размытие */
    z-index:1000;  /* Убедиться, что поверх всего */
    height: 100vh;
  }
  .nav a {
    font-size:1.1rem;
    padding:18px 24px;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.2);
    text-align:center;
    transition:all 0.2s ease;
    position:relative;
    z-index:1;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    backdrop-filter: blur(4px);
  }
  .nav a:hover {
    background: linear-gradient(135deg, rgba(227,39,53,0.3), rgba(227,39,53,0.2));
    border-color:var(--red);
    transform:translateX(5px);
    box-shadow: 0 6px 16px rgba(227,39,53,0.25);
  }
  .nav.open{ left:0 }
  
  /* Кнопка закрытия меню */
  .nav-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nav-close:hover {
    background: rgba(227,39,53,0.3);
    border-color: var(--red);
    transform: rotate(90deg);
  }
  .nav-close::before,
  .nav-close::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
  }
  .nav-close::before {
    transform: rotate(45deg);
  }
  .nav-close::after {
    transform: rotate(-45deg);
  }
  
  /* Бургер-меню */
  .burger{ 
    display:block;
    position: relative;
    z-index: 1002;
  }
  .burger.open span:nth-child(1) {
    transform:rotate(45deg) translate(6px, 6px);
  }
  .burger.open span:nth-child(2) {
    opacity:0;
  }
  .burger.open span:nth-child(3) {
    transform:rotate(-45deg) translate(6px, -6px);
  }
  
  /* Подложка под кнопками меню */
  .nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, rgba(10,10,12,0.9), rgba(10,10,12,0));
    z-index: 0;
  }
  
  .grid-2{ grid-template-columns:1fr }
  .section-reviews .reviews-grid{ grid-template-columns:1fr }
  .yandex-reviews-frame{ height:420px }
}

@media (max-width:900px){ 
  .masonry{ columns: 2 180px } 
}

@media (max-width: 768px) {
  .cookie-notification {
    left: 12px;
    bottom: 12px;
    width: min(420px, calc(100vw - 24px));
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    padding: 14px 16px;
  }
  
  .cookie-notification p {
    min-width: 0;
    margin-bottom: 0;
  }
}

@media (max-width:760px){
  .section{ padding:56px 0 }
  .grid-3{ grid-template-columns:1fr }
}

@media (max-width:560px){
  .masonry{ columns:1 360px; column-gap:10px }
  .yandex-reviews-frame{ height:500px }
  .card{ padding:18px }
}