/*
 * NEKSOZ V7 — Mobile Responsive Fixes
 * Loaded AFTER style.min.css — contains ONLY @media queries
 * Does NOT change any desktop styles (min-width: 1025px)
 *
 * Breakpoints used:
 *   ≤ 1024px — Tablet / Large Mobile
 *   ≤  768px — Mobile
 *   ≤  480px — Small Mobile
 *   ≤  360px — Very Small (compact phones)
 */

/* ============================================================
   0. GLOBAL — Prevent horizontal overflow (Critical)
   ============================================================ */
@media (max-width: 768px) {
    html,
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Safer box-sizing for all children */
    .container,
    .section,
    .hero,
    .footer-platinum,
    .cta-crystal,
    .editorial-content {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================
   1. CONTAINER — Fix 40px → 16px padding on mobile
      (style.css has 40px !important at 768px — we override here,
       since mobile.css loads AFTER style.min.css)
   ============================================================ */
@media (max-width: 768px) {
    .container {
        padding: 0 16px !important;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 14px !important;
    }
}

/* ============================================================
   2. HEADER — Icons & lang-switcher on small screens
      NOTE: Hamburger slide-in fix is in header.php inline <style>
      (guaranteed to load regardless of enqueue order)
   ============================================================ */
@media (max-width: 768px) {
    .header__actions {
        gap: 6px !important;
        margin-left: 10px !important;
    }

    .header__icon {
        width: 36px !important;
        height: 36px !important;
    }

    .header__icon svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* Lang switcher: shrink on mobile */
    .lang-switcher {
        font-size: 10px !important;
        gap: 2px !important;
    }
}

@media (max-width: 480px) {
    /* Keep icons readable but shrink margin */
    .header__actions {
        gap: 4px !important;
        margin-left: 6px !important;
    }
}

/* ============================================================
   3. HERO SECTION
      NOTE: centering and white-space nowrap fixes are in header.php
      inline <style> for guaranteed load order.
      Here we only handle spacing/sizing not covered there.
   ============================================================ */
@media (max-width: 768px) {
    .hero__badge {
        font-size: 10px !important;
        padding: 5px 12px !important;
    }

    /* Internal pages hero */
    .hero--internal {
        padding: 120px 0 70px !important;
        min-height: unset !important;
    }

    .hero--internal .hero__container {
        text-align: center !important;
    }
}

/* ============================================================
   4. SECTION — Padding & Title display fix
   ============================================================ */
@media (max-width: 768px) {
    .section {
        padding: 64px 0 !important;
    }

    /* Fix display:table on titles — prevents full-width gradient text */
    .section__title,
    .section__title--huge,
    .cta-crystal__title,
    .manuscript-hero__title,
    .cta__title {
        display: block !important;  /* was 'table' — causes narrow width on mobile */
        font-size: clamp(1.7rem, 6.5vw, 2.4rem) !important;
        word-break: break-word !important;
    }

    .section__title--huge {
        font-size: clamp(1.7rem, 6.5vw, 2.4rem) !important;
    }

    .section__header {
        margin-bottom: 40px !important;
    }

    .section__subtitle--free {
        font-size: 1rem !important;
    }
}

/* ============================================================
   5. STATS RIBBON
   ============================================================ */
@media (max-width: 768px) {
    .stats-ribbon__inner {
        grid-template-columns: repeat(2, 1fr) !important;
        height: auto !important;
        padding: 32px 0 !important;
        gap: 0 !important;
    }

    .stats-card {
        border-right: none !important;
        border-bottom: 1px solid var(--nk-gray-100) !important;
        padding: 24px 20px !important;
    }

    .stats-card:nth-child(odd) {
        border-right: 1px solid var(--nk-gray-100) !important;
    }

    .stats-card:last-child,
    .stats-card:nth-last-child(-n+2):nth-child(odd) {
        border-bottom: none !important;
    }
}

@media (max-width: 480px) {
    .stats-ribbon__inner {
        grid-template-columns: 1fr !important;
    }

    .stats-card {
        border-right: none !important;
        border-bottom: 1px solid var(--nk-gray-100) !important;
    }

    .stats-card:last-child {
        border-bottom: none !important;
    }
}

/* ============================================================
   6. SERVICES GRID
      Critical: has inline style="grid-template-columns:repeat(4,1fr)"
      !important beats inline styles
   ============================================================ */
@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
}

@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .service-card {
        padding: 28px 24px !important;
    }

    .service-card__title {
        font-size: 1.25rem !important;
    }
}

/* ============================================================
   7. CEO / ABOUT SECTION — Critical padding & sizing fixes
   ============================================================ */
@media (max-width: 1024px) {
    .ceo-editorial {
        padding: 0 0 80px !important;
    }

    .ceo-editorial__quote-card {
        width: 95% !important;
        padding: 60px 40px !important;
        border-radius: 28px !important;
        margin: 0 auto !important;
    }

    .ceo-editorial__quote-text {
        font-size: 1.3rem !important;
        padding: 0 20px !important;
    }
}

@media (max-width: 768px) {
    /* Disable heavy float animation on mobile (performance) */
    .ceo-editorial__quote-card {
        animation: none !important;
        width: 100% !important;
        padding: 40px 24px !important;
        border-radius: 20px !important;
        margin: 0 !important;
        box-shadow: 0 20px 40px rgba(0,0,0,0.3) !important;
    }

    .ceo-editorial__quote-text {
        font-size: 1.1rem !important;
        padding: 0 !important;  /* was 0 60px — causes overflow on mobile */
        line-height: 1.65 !important;
        margin-bottom: 24px !important;
    }

    /* Hide decorative oversized quote marks on mobile */
    .ceo-editorial__quote-text::before,
    .ceo-editorial__quote-text::after {
        display: none !important;
    }

    .ceo-editorial__quote-close {
        font-size: 60px !important;
        margin-bottom: 16px !important;
    }

    .ceo-editorial__signature {
        font-size: 2.5rem !important;
        margin: 24px 0 !important;
    }

    .ceo-editorial__circle-frame {
        width: 140px !important;
        height: 140px !important;
        flex: 0 0 140px !important;
        margin-bottom: 16px !important;
    }

    .ceo-editorial__author-name {
        font-size: 20px !important;
    }

    .ceo-editorial__author-title {
        font-size: 12px !important;
    }

    .ceo-editorial__intro {
        font-size: 1rem !important;
        margin: 0 auto 40px auto !important;
    }

    .ceo-editorial__team-link {
        padding: 14px 28px !important;
        font-size: 11px !important;
        letter-spacing: 0.15em !important;
        margin-top: 32px !important;
    }
}

@media (max-width: 480px) {
    .ceo-editorial__quote-card {
        padding: 32px 18px !important;
    }

    .ceo-editorial__quote-text {
        font-size: 1rem !important;
    }

    .ceo-editorial__circle-frame {
        width: 110px !important;
        height: 110px !important;
        flex: 0 0 110px !important;
    }
}

/* ============================================================
   8. CTA CRYSTAL — Fix form wrapper overflow (Critical bug)
      Form wrapper has: width: calc(100% + 40px); margin-left: -40px
      This causes horizontal scroll on mobile
   ============================================================ */
@media (max-width: 1024px) {
    .cta-crystal__grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .cta-crystal__form-wrapper {
        width: 100% !important;
        margin-left: 0 !important;
    }
}

@media (max-width: 768px) {
    .cta-crystal {
        padding: 80px 0 !important;
    }

    .cta-crystal__form-wrapper {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 32px 20px !important;
        border-radius: 20px !important;
        box-shadow: 0 20px 60px rgba(0,13,51,0.06) !important;
    }

    .cta-crystal__title {
        font-size: clamp(1.7rem, 6vw, 2.2rem) !important;
    }

    .cta-crystal__text {
        font-size: 1rem !important;
    }

    .cta-crystal__field input,
    .cta-crystal__field select,
    .cta-crystal__field textarea {
        padding: 14px 16px !important;
        font-size: 14px !important;
    }
}

/* ============================================================
   9. EDITORIAL CONTENT (Service Pages)
      Already collapses at 1024px but padding stays large
   ============================================================ */
@media (max-width: 768px) {
    .editorial-content {
        padding: 48px 16px !important;
        gap: 40px !important;
        grid-template-columns: 1fr !important;
    }

    .editorial-sidebar {
        position: static !important;
        flex: none !important;
        top: auto !important;
    }

    .editorial-main h2 {
        font-size: 1.8rem !important;
    }

    .editorial-main {
        font-size: 1rem !important;
    }

    /* Feature list: 2col → 1col */
    .feature-list {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .manuscript-hero {
        padding: 120px 0 60px !important;
    }

    .manuscript-hero__title {
        font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
    }

    .manuscript-hero__desc {
        font-size: 1rem !important;
    }
}

/* ============================================================
   10. ABOUT PAGE — Inline grid fixes
       Targets divs with inline grid-template-columns styles
       (No class names on these elements)
       !important beats inline styles per CSS cascade rules
   ============================================================ */
@media (max-width: 768px) {
    /* 2-col and 3-col grids on About page */
    div[style*="grid-template-columns:repeat(2,1fr)"],
    div[style*="grid-template-columns: repeat(2,1fr)"],
    div[style*="grid-template-columns: repeat(2, 1fr)"],
    div[style*="grid-template-columns:repeat(3,1fr)"],
    div[style*="grid-template-columns: repeat(3,1fr)"],
    div[style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* About page — value/mission cards */
    .about-card {
        padding: 28px 24px !important;
    }

    .about-card__title {
        font-size: 1.1rem !important;
    }
}

/* ============================================================
   11. NEWS PAGE — Video and news grids + meta overlap fix
   ============================================================ */
@media (max-width: 1024px) {
    .videos-grid,
    div[style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

@media (max-width: 768px) {
    /* News grid with minmax(380px) breaks on narrow screens */
    .news-grid,
    div[style*="minmax(380px"] {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .videos-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-bottom: 48px !important;
    }

    /*
     * NEWS META OVERLAP FIX:
     * .news-meta is the date+category line (e.g. "22 апреля 2024 • Экспертное мнение")
     * .news-card__icon is absolute positioned at top:30px; right:30px
     * On mobile (16px container padding instead of 40px), the long text
     * runs right into the icon. Add right padding to clear the icon.
     */
    .news-meta {
        padding-right: 64px !important;   /* width of icon (48px) + some gap */
        font-size: 10px !important;
        letter-spacing: 0.08em !important;
        line-height: 1.5 !important;
    }

    /* Also shrink the decorative background icon a bit on mobile */
    .news-card__icon svg {
        width: 36px !important;
        height: 36px !important;
    }
}

/* ============================================================
   12. VACANCIES PAGE — Form grid inside accordion
   ============================================================ */
@media (max-width: 768px) {
    /* Inline 2-col form grids in vacancies */
    div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Vacancies application form wrapper */
    div[style*="padding: 60px"][style*="border-radius: 32px"] {
        padding: 32px 20px !important;
        border-radius: 20px !important;
    }

    /* Accordion */
    .nk-accordion__header {
        padding: 20px 16px !important;
        font-size: 0.95rem !important;
    }

    .nk-accordion__body {
        padding: 16px !important;
    }
}

/* ============================================================
   13. CONTACTS PAGE
   ============================================================ */
@media (max-width: 1024px) {
    .contact-card .nk-qr-hub__inner {
        flex-direction: column !important;
        gap: 20px !important;
        text-align: center !important;
    }
}

@media (max-width: 768px) {
    /* CTA grid in contacts stacks already, just fix spacing */
    .contact-item {
        gap: 16px !important;
        padding: 20px 0 !important;
    }

    .contact-icon {
        width: 44px !important;
        height: 44px !important;
        flex-shrink: 0 !important;
    }
}

/* ============================================================
   14. FOOTER PLATINUM
   ============================================================ */
@media (max-width: 1024px) {
    .footer-platinum__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 40px !important;
        margin-bottom: 60px !important;
    }
}

@media (max-width: 768px) {
    .footer-platinum {
        padding: 80px 0 40px !important;
    }

    .footer-platinum__grid {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
        padding-top: 40px !important;
        margin-bottom: 40px !important;
    }

    /* Fix map card: absolute top: -120px overflows on mobile */
    .footer-platinum__map-wrapper {
        height: 280px !important;
        margin-top: 40px !important;
    }

    .footer-platinum__map-card {
        position: static !important;
        top: auto !important;
        right: auto !important;
        margin: 16px !important;
        min-width: unset !important;
        width: calc(100% - 32px) !important;
    }

    .footer-platinum__bottom {
        flex-direction: column !important;
        gap: 16px !important;
        text-align: center !important;
        padding-top: 28px !important;
    }

    .footer-platinum__legal {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px 20px !important;
    }

    /*
     * FOOTER NAV — one row fix:
     * 6 items (Главная, Услуги, Команда, Новости, Связь, Карта)
     * Shrink font, letter-spacing, gap and icon so all fit in ~375px.
     */
    .footer-nav--icons {
        gap: 0 !important;
        margin-bottom: 48px !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        width: 100% !important;
        overflow-x: auto !important;      /* safety valve if content is too wide */
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 4px !important;
    }

    .footer-nav--icons a {
        font-size: 8px !important;
        letter-spacing: 0 !important;
        gap: 5px !important;
        flex-shrink: 0 !important;
        padding: 0 6px !important;
        min-width: 0 !important;
        align-items: center !important;
    }

    .footer-nav--icons a svg {
        width: 14px !important;
        height: 14px !important;
        opacity: 0.5 !important;
        flex-shrink: 0 !important;
    }

    /* Social row */
    .footer-platinum__socials {
        gap: 16px !important;
        padding: 12px 20px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        border-radius: 20px !important;
    }

    /* QR Hub: hide on mobile (already done in style.css at 991px) */
    .nk-qr-hub {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .footer-platinum__grid {
        gap: 28px !important;
    }

    .footer-platinum__heading {
        font-size: 12px !important;
        margin-bottom: 20px !important;
    }

    .footer-platinum__contact-link strong {
        font-size: 15px !important;
    }
}

/* ============================================================
   15. MODAL — Responsive
   ============================================================ */
@media (max-width: 768px) {
    .modal__container {
        width: 98% !important;
        border-radius: 20px !important;
        max-height: 92vh !important;
        overflow-y: auto !important;
    }

    .modal .cta-crystal__grid {
        grid-template-columns: 1fr !important;
        padding: 28px 20px !important;
        gap: 24px !important;
    }

    .modal .cta-crystal__title {
        font-size: 1.6rem !important;
    }

    .modal .cta-crystal__text {
        font-size: 0.9rem !important;
    }
}

/* ============================================================
   16. MAP MODAL
   ============================================================ */
@media (max-width: 768px) {
    .map-modal__container {
        width: 96% !important;
        height: 80vh !important;
        border-radius: 20px !important;
    }

    .map-modal__card {
        bottom: 16px !important;
        left: 16px !important;
        right: 16px !important;
        max-width: unset !important;
        padding: 16px 20px !important;
        border-radius: 16px !important;
    }
}

/* ============================================================
   17. BUTTONS — Touch targets
   ============================================================ */
@media (max-width: 768px) {
    .btn {
        padding: 13px 28px !important;
        font-size: 12px !important;
        min-height: 44px !important; /* Standard touch target */
    }

    .cta-crystal__btn {
        padding: 15px 28px !important;
        min-height: 48px !important;
    }
}

/* ============================================================
   18. TRUST INDICATORS — if present
   ============================================================ */
@media (max-width: 768px) {
    .trust-indicators {
        grid-template-columns: 1fr !important;
    }

    .trust-item {
        border-right: none !important;
        border-bottom: 1px solid var(--nk-gray-100) !important;
    }

    .trust-item:last-child {
        border-bottom: none !important;
    }
}

/* ============================================================
   19. TEAM PAGE
   ============================================================ */
@media (max-width: 768px) {
    /* Team grid (if 3-col or 4-col) → 2-col */
    .team-grid,
    div[style*="grid-template-columns: repeat(3"],
    div[style*="grid-template-columns:repeat(3"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 480px) {
    .team-grid,
    div[style*="grid-template-columns: repeat(3"],
    div[style*="grid-template-columns:repeat(3"] {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   20. SERVICE DETAIL PAGES — Sub-service grids
   ============================================================ */
@media (max-width: 768px) {
    /* service-accounting, service-audit etc. inner grids */
    .services-grid[style*="grid-template-columns: repeat(2"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* ============================================================
   21. TYPOGRAPHY — Cyrillic readability on mobile
   ============================================================ */
@media (max-width: 768px) {
    /* Improve paragraph readability */
    .editorial-main p,
    .service-card__text,
    .section__subtitle,
    .hero__desc,
    .cta-crystal__text,
    .ceo-editorial__intro {
        line-height: 1.7 !important;
        font-size: 0.95rem !important;
    }

    /* Slightly larger body text base */
    body {
        font-size: 15px !important;
    }
}

/* ============================================================
   22. MISC FIXES
   ============================================================ */
@media (max-width: 768px) {
    /* Prevent label overflow in floating-label inputs */
    .cta-crystal__field label {
        font-size: 13px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: calc(100% - 48px) !important;
    }

    /* Section labels (pill badges) */
    .section__label {
        font-size: 11px !important;
        padding: 6px 16px !important;
    }

    /* Status badge in CTA */
    .cta-crystal__status {
        font-size: 11px !important;
        padding: 8px 14px !important;
    }

    /* Simple card paddings */
    .simple-card {
        padding: 24px !important;
    }

    /* Section header gap */
    .section__header--center .section__label {
        margin-bottom: 16px !important;
    }
}