/* ============================================
   Orvia Hotels - Responsive Overrides
   ============================================ */

/* ── Tablet (max 992px) ── */
@media (max-width: 992px) {
    h1 { font-size: var(--fe-text-4xl); }
    h2 { font-size: var(--fe-text-3xl); }
    h3 { font-size: var(--fe-text-2xl); }

    .section { padding: var(--fe-space-12) 0; }
    .section-lg { padding: var(--fe-space-20) 0; }

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

    .container {
        padding: 0 var(--fe-space-5);
    }

    .section-title {
        font-size: var(--fe-text-3xl);
    }
}

/* ── Mobile (max 768px) ── */
@media (max-width: 768px) {
    h1 { font-size: var(--fe-text-3xl); }
    h2 { font-size: var(--fe-text-2xl); }

    .section { padding: var(--fe-space-10) 0; }

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

    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .btn-lg {
        padding: 14px 28px;
    }

    .modal {
        margin: 16px;
        max-height: calc(100vh - 32px);
    }

    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .section-title {
        font-size: var(--fe-text-2xl);
    }

    .section-subtitle {
        font-size: var(--fe-text-base);
    }
}

/* ── Small Mobile (max 480px) ── */
@media (max-width: 480px) {
    body {
        font-size: 15px;
    }

    h1 { font-size: var(--fe-text-2xl); }

    .container {
        padding: 0 var(--fe-space-4);
    }

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

    .card-body {
        padding: var(--fe-space-4);
    }

    .btn {
        padding: 10px 20px;
    }
}