/* =========================================================
   DOGGIEWALE - MOBILE & TABLET RESPONSIVE SYSTEM
   ========================================================= */

@media (max-width: 992px) {
    html {
        font-size: 15px;
    }
    body {
        /* clip, not hidden: hidden makes body a scroll container and kills
           the sticky header */
        overflow-x: clip !important;
        -webkit-tap-highlight-color: transparent;
    }
    .container {
        width: calc(100% - 32px);
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
    }
    
    /* Topbar */
    .topbar {
        height: 72px;
    }
    .brand img {
        height: 44px;
        max-height: 46px;
    }

    /* Hero rules intentionally live in home.blade.php (mobile hero rebuild) */

    /* Grids */
    .compact-category-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .pet-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
    .dynamic-blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
    .benefits-grid,
    .how-steps-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Contact Section */
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    .contact-gallery {
        text-align: center;
    }
    .photo-collage {
        margin: 20px auto 0 !important;
    }
}

@media (max-width: 768px) {
    .container {
        width: calc(100% - 24px);
    }
    .topbar {
        height: 66px;
    }
    .brand img {
        height: 40px;
    }

    /* Section Headings */
    .section-heading-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 24px;
    }
    .section-heading-title {
        font-size: 27px;
    }

    /* Categories & Pets */
    .compact-category-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .pet-grid {
        grid-template-columns: 1fr;
    }
    .dynamic-blog-grid {
        grid-template-columns: 1fr;
    }

    /* Benefits & Steps */
    .benefits-grid,
    .how-steps-grid {
        grid-template-columns: 1fr;
    }

    /* Panoramic CTA */
    .panoramic-cta-box {
        grid-template-columns: 1fr;
        padding: 32px 20px;
        text-align: center;
    }
    .panoramic-title {
        font-size: 26px;
    }
    .panoramic-buttons-row {
        justify-content: center;
    }

    /* Available Pets Page */
    .pets-main-layout {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        padding: 0 12px !important;
    }
    .pets-header-section {
        padding: 24px 12px 20px !important;
    }
    .pets-header-title {
        font-size: 27px !important;
    }
    .pets-listing-grid {
        grid-template-columns: 1fr !important;
    }
    .category-nav-list {
        flex-direction: row !important;
        overflow-x: auto !important;
        padding-bottom: 8px !important;
        gap: 10px !important;
        scrollbar-width: none;
    }
    .category-nav-list::-webkit-scrollbar {
        display: none;
    }
    .category-tab-btn {
        min-width: 170px !important;
        flex-shrink: 0 !important;
    }

    /* Pet Detail Page */
    .pet-profile-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .pet-main-image-wrap {
        height: 340px !important;
        border-radius: 18px !important;
    }
    .pet-profile-info h1 {
        font-size: 34px !important;
    }
    .pet-top-inner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    /* Footer */
    .footer-main {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .modern-category-card {
        height: 260px;
    }
    .category-card-title {
        font-size: 22px;
    }
}