/* ==========================================================================
   Royal Transportation — responsive.css
   Responsive Breakpoints
   ========================================================================== */

/* --------------------------------------------------------------------------
   Laptop / Large Desktop  (≤ 1200px)
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 32px;
    }
}

/* --------------------------------------------------------------------------
   Tablet / Small Laptop  (≤ 992px)
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    :root {
        --section-py: 60px;
    }

    /* Navbar */
    .navbar-nav,
    .navbar-actions .btn {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    /* Grids → 2 columns */
    .highlights-grid,
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

    /* About preview */
    .about-preview-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-image-wrap img {
        height: 340px;
    }

    /* Callback */
    .callback-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    /* Contact */
    .contact-details-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Mission/Vision */
    .mission-vision-grid {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   Tablet Portrait  (≤ 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    :root {
        --section-py: 48px;
        --gap: 16px;
    }

    /* Hero */
    .hero {
        min-height: 85vh;
    }

    .hero-actions {
        flex-direction: column;
        gap: 12px;
    }

    .hero-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Grids → 1 column */
    .highlights-grid,
    .why-grid,
    .testimonials-grid,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    /* Services grid: 2 col on tablet */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* About preview */
    .about-image-wrap img {
        height: 260px;
    }

    /* Callback form */
    .contact-form-wrap {
        padding: 28px 20px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* Contact cards */
    .contact-details-grid {
        grid-template-columns: 1fr;
    }

    /* Page hero */
    .page-hero {
        padding: 56px 0;
    }
}

/* --------------------------------------------------------------------------
   Mobile  (≤ 576px)
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
    :root {
        --section-py: 40px;
    }

    /* Services grid → 1 col */
    .services-grid {
        grid-template-columns: 1fr;
    }

    /* Section header */
    .section-header {
        margin-bottom: 36px;
    }

    /* Callback info */
    .callback-inner .callback-info {
        text-align: center;
    }

    .callback-contacts {
        align-items: center;
    }

    /* Navbar */
    .navbar-inner {
        height: 64px;
    }

    /* About CTA buttons */
    .about-cta .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    /* Testimonials */
    .testimonial-card {
        padding: 24px;
    }
}

/* --------------------------------------------------------------------------
   Small Mobile  (≤ 320px)
   -------------------------------------------------------------------------- */
@media (max-width: 320px) {
    :root {
        --section-py: 32px;
    }

    html {
        font-size: 14px;
    }

    .btn {
        padding: 11px 22px;
        font-size: 0.875rem;
    }

    .mobile-sidebar {
        width: 100%;
    }

    .contact-form-wrap {
        padding: 20px 14px;
    }
}