@import 'base.css';
@import 'header.css';
@import 'hero.css';
@import 'sections.css';
@import 'form.css';

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
    .hero-inner   { grid-template-columns: 1fr 340px; gap: 40px }
    .hero-photo   { height: 420px }
    .about-wrap   { grid-template-columns: 1fr 360px; gap: 48px }
    .about-photo  { height: 380px }
    .atty-grid    { grid-template-columns: repeat(2,1fr) }
    .svc-layout   { grid-template-columns: 1fr }
    .svc-list     { border-right: none; border-bottom: 1px solid var(--border) }
    .svc-panel    { position: static; border-top: 1px solid var(--border) }
    .footer-top   { grid-template-columns: 1fr; gap: 48px }
    .footer-nav   { grid-template-columns: repeat(3,1fr); justify-self: start }
}

@media (max-width: 900px) {
    .section        { padding: 80px 0 }
    .hero-inner     { grid-template-columns: 1fr; padding-bottom: 40px }
    .hero-right     { display: none }
    .about-wrap     { grid-template-columns: 1fr; gap: 40px }
    .about-photo    { height: 280px }
    .pillars        { grid-template-columns: 1fr }
    .form-layout    { grid-template-columns: 1fr; gap: 48px }
    .hero-bottom    { flex-direction: column; align-items: flex-start; gap: 32px }
    .timeline::before{ left: 50px }
    .timeline       { max-width: 100% }
}

@media (max-width: 768px) {
    .container { padding: 0 20px }
    /* Solid header on mobile: no backdrop-filter, so the fixed nav panel
       nested inside #header isn't clipped by the iOS containing-block bug,
       and hero content behind never bleeds through. */
    #header { background: #0F0F0D }
    #header.scrolled { backdrop-filter: none }
    #nav {
        display: none;
        flex-direction: column;
        position: fixed;
        top: 0; right: 0; bottom: 0;
        width: 280px;
        background: var(--bg-dark);
        opacity: 1;
        padding: calc(100px + env(safe-area-inset-top)) 28px 32px;
        gap: 0;
        border-left: 1px solid var(--border);
        box-shadow: -16px 0 50px rgba(0,0,0,.45);
        transform: translateX(100%);
        transition: transform .4s var(--ease);
        z-index: 999;
        -webkit-backface-visibility: hidden;
        will-change: transform;
    }
    #nav.open  { display: flex; transform: translateX(0) }
    #nav .nav-link {
        width: 100%;
        padding: 16px 0;
        border-bottom: 1px solid var(--border);
        font-size: .92rem;
        letter-spacing: .06em;
        text-transform: uppercase;
    }
    #nav .btn { width: 100%; text-align: center; margin-top: 28px }
    .nav-backdrop {
        position: fixed; inset: 0;
        background: rgba(8,8,6,.75);
        opacity: 0; pointer-events: none;
        transition: opacity .35s var(--ease);
        z-index: 998;
    }
    .nav-backdrop.open { opacity: 1; pointer-events: all }
    .burger    { display: flex }
    .hero-inner { padding-top: calc(150px + env(safe-area-inset-top)) }
    .page-decorated { padding-top: calc(160px + env(safe-area-inset-top)) !important }
    .hero-title{ font-size: clamp(3rem,12vw,4.5rem) }
    /* Длинные заголовки услуг ("Административные дела" и т.п.) на узких экранах
       переносились так, что одна буква оставалась одна на строке — уменьшаем
       кегль конкретно для заголовка с иконкой, чтобы слово помещалось целиком. */
    .svc-title-row .sec-title,
    .svc-title-row { font-size: clamp(1.6rem, 7.5vw, 2.2rem) }
    .hero-cta  { flex-direction: column; align-items: flex-start; gap: 16px }
    .stats-row { display: grid; grid-template-columns: 1fr 1fr; row-gap: 28px; column-gap: 12px }
    .hstat     { width: auto; padding: 0 }
    .hstat-sep { display: none }
    .atty-grid { grid-template-columns: 1fr 1fr }
    .footer-nav{ grid-template-columns: 1fr 1fr; gap: 32px }
    .svc-layout{ grid-template-columns: 1fr }
    .svc-panel { display: none }
    .svc-list  { border-bottom: none }
}

/* ===== PULSE ANIMATION (CTA button) ===== */
@keyframes pulse-gold {
    0%   { box-shadow: 0 0 0 0 rgba(201,168,76,.55) }
    70%  { box-shadow: 0 0 0 12px rgba(201,168,76,0) }
    100% { box-shadow: 0 0 0 0 rgba(201,168,76,0) }
}
.btn.pulse { animation: pulse-gold 2.2s ease infinite }

/* ===== HEADER CONTACTS MOBILE ===== */
@media (max-width: 768px) {
    .header-contacts { display: none }
}

@media (max-width: 480px) {
    .atty-grid { grid-template-columns: 1fr 1fr; gap: 12px }
    .atty-info { padding: 14px 14px 16px }
    .footer-nav{ grid-template-columns: 1fr }
    .app-form  { padding: 28px 20px }
    .hero-title{ font-size: 2.8rem }
    .stats-row { grid-template-columns: 1fr; row-gap: 20px }
}