/* === RESPONSIVE.CSS ===
   ПУТЬ: assets/css/responsive.css
   НАЗНАЧЕНИЕ: адаптивные брейкпоинты (tablet 1024px, mobile 768px, small 480px)
   СВЯЗИ: index.php, main.css, sections.css
   РАЗМЕР: ~260 строк
*/

/* ==========================================================================
   TABLET <= 1024px
   ========================================================================== */
@media (max-width: 1024px) {
    .values-grid { grid-template-columns: repeat(2, 1fr); }

    .code-grid { grid-template-columns: 1fr; }

    .format-intro { grid-template-columns: 1fr; gap: 24px; }
    .format-intro p { align-self: auto; }

    .residents-grid { grid-template-columns: repeat(3, 1fr); }

    .ceo-spotlight { grid-template-columns: 1fr; gap: 36px; padding: 36px; }
    .ceo-photo { max-width: 320px; }

    .membership-grid,
    .apply-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* ==========================================================================
   MOBILE <= 768px
   ========================================================================== */
@media (max-width: 768px) {
    :root { --gutter: 20px; }

    .site-header { padding: 20px var(--gutter); }

    .header-cta { display: none; }

    .nav-list a { font-size: clamp(30px, 10vw, 52px); }

    .nav-overlay-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        bottom: 140px;
    }

    .nav-foot {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
        bottom: 32px;
    }

    .hero-content { padding-bottom: 64px; }
    .hero-foot { flex-direction: column; align-items: flex-start; gap: 20px; }

    .mission { padding: 88px 0; }
    .mission-quote { font-size: clamp(24px, 6.4vw, 36px); }

    .values { padding: 80px 0; }
    .values-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 40px; }
    .values-grid { grid-template-columns: 1fr; }

    .code-section { padding: 88px 0; }
    .code-head { margin-bottom: 44px; }
    .code-card { padding: 32px 24px; }

    .format-section { padding: 88px 0; }
    .format-item {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 22px 4px;
    }
    .format-item .format-tag { display: none; }

    .residents { padding: 88px 0 64px; }
    .residents-grid { grid-template-columns: repeat(2, 1fr); }
    .resident-card:nth-child(7n+1),
    .resident-card:nth-child(11n+4) { grid-row: span 1; aspect-ratio: 3/4; }

    .ceo-spotlight { padding: 24px; margin-bottom: 56px; }
    .ceo-name { font-size: 30px; }

    .membership { padding: 88px 0; }
    .criteria-list { grid-template-columns: 1fr; }
    .path-steps { flex-direction: column; gap: 12px; }

    .apply-section { padding: 88px 0; }
    .apply-form { grid-template-columns: 1fr; }
    .form-field.full,
    .apply-submit,
    .form-note,
    .form-success { grid-column: span 1; }

    .footer-top { flex-direction: column; gap: 32px; }
    .footer-nav { gap: 40px; }
    .footer-bottom { flex-direction: column; }
}

/* ==========================================================================
   SMALL MOBILE <= 480px
   ========================================================================== */
@media (max-width: 480px) {
    .hero-manifest { font-size: clamp(28px, 8vw, 40px); }

    .residents-grid { grid-template-columns: repeat(2, 1fr); gap: 1px; }

    .value-card { padding: 32px 22px; }

    .code-card .code-idx { font-size: 34px; }

    .criteria-item .crit-value { font-size: 28px; }
}

/* ==========================================================================
   TOUCH DEVICES (no hover)
   ========================================================================== */
@media (hover: none), (pointer: coarse) {
    .resident-overlay {
        opacity: 1;
        transform: translateY(0);
        background: linear-gradient(0deg, oklch(10% 0.01 90 / 0.85) 0%, transparent 70%);
    }

    .resident-photo { filter: grayscale(0.4) brightness(0.85); }
}