/* ═══════════════════════════════════════════════════════════
   RESPONSIVE.CSS — Global Responsive Overrides
   Bu fayl ümumi layout, komponent və utility responsive
   qaydalarını saxlayır. Hər səhifə CSS-ində öz responsive
   bölmələri də var.
   ═══════════════════════════════════════════════════════════ */

/* ── Container ── */
@media (max-width: 1200px) {
    .container { max-width: 960px; }
}
@media (max-width: 992px) {
    .container { max-width: 720px; }
}
@media (max-width: 768px) {
    .container { max-width: 540px; padding: 0 16px; }
}
@media (max-width: 576px) {
    .container { max-width: 100%; padding: 0 16px; }
}

/* ── Typography Scale ── */
@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.625rem; }
    h3 { font-size: 1.25rem; }
}
@media (max-width: 480px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.375rem; }
}

/* ── Buttons — Full width on small screens ── */
@media (max-width: 480px) {
    .btn-primary, .btn-secondary, .btn-outline {
        width: 100%;
        justify-content: center;
    }
}

/* ── Grid Helpers ── */
@media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Form Elements ── */
@media (max-width: 768px) {
    .form-group { margin-bottom: 16px; }
    .form-input, .form-textarea, .form-select {
        font-size: 16px; /* Prevent iOS zoom on focus */
    }
}

/* ── WhatsApp Widget ── */
@media (max-width: 768px) {
    .whatsapp-widget {
        bottom: 16px;
        right: 16px;
    }
    .whatsapp-text { display: none; }
    .whatsapp-btn {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        padding: 0;
        justify-content: center;
    }
}

/* ── Hide / Show Utilities ── */
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
    .hide-desktop { display: none !important; }
}

/* ── Spacing adjustments ── */
@media (max-width: 768px) {
    section { padding: 60px 0; }
}
@media (max-width: 480px) {
    section { padding: 48px 0; }
}

/* ── Images ── */
img {
    max-width: 100%;
    height: auto;
}

/* ── Table scroll on mobile ── */
@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Print styles ── */
@media print {
    .navbar, .footer, .whatsapp-widget, .mobile-menu-overlay {
        display: none !important;
    }
    body {
        color: #000;
        background: #fff;
    }
    a { color: #000; text-decoration: underline; }
}