/* =========================================================
   DOGGIEWALE - MOBILE POLISH (loaded last)
   Fixes: horizontal overflow, iOS input zoom, tap targets,
   review carousel width, long-word breaks, safe-area padding.
   ========================================================= */

/* ---------- Universal overflow guards ---------- */
html,
body {
    max-width: 100%;
    /* clip keeps position:sticky working; hidden would break it */
    overflow-x: clip;
}

@media (max-width: 992px) {
    /* Break long words / URLs instead of pushing the layout wide */
    h1, h2, h3, h4, p, li, td, span, strong, a {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Media never overflows its box */
    img, video, iframe {
        height: auto;
        max-width: 100%;
    }

    /* Any element with an inline pixel width can't beat the viewport */
    .container,
    section,
    main {
        max-width: 100%;
    }
}

/* ---------- Forms: stop iOS auto-zoom on focus (needs >= 16px) ---------- */
@media (max-width: 768px) {
    input,
    select,
    textarea {
        font-size: 16px !important;
        max-width: 100%;
    }

    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    textarea,
    select {
        min-height: 46px;
    }

    textarea {
        min-height: 110px;
    }
}

/* ---------- Tap targets ---------- */
@media (max-width: 768px) {
    .button,
    .outline-button,
    button[type="submit"],
    .hero-search-btn,
    .pet-view-btn,
    .pet-whatsapp-button,
    .breed-view-link,
    .filter-clear-btn,
    .mode-btn,
    .category-tab-btn {
        min-height: 44px;
    }

    .site-footer a,
    .footer-main a {
        display: inline-block;
        padding: 7px 0;
    }

    .review-arrow {
        width: 42px !important;
        height: 42px !important;
    }
}

/* ---------- Header / announcement bar ---------- */
@media (max-width: 768px) {
    .announcement-inner {
        gap: 8px;
    }
    .announcement-link {
        flex-shrink: 0;
        white-space: nowrap;
    }
    .announcement-left {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Drawer never creates page-level scroll */
    .main-menu {
        max-width: 320px;
    }
}

@media (max-width: 380px) {
    .announcement-left span:first-child {
        font-size: 10.5px;
    }
    .announcement-link {
        font-size: 10.5px;
    }
    .brand img {
        height: 36px;
    }
}

/* ---------- Hero search bar ---------- */
@media (max-width: 480px) {
    /* Icon + field share one row, the CTA gets its own full-width row */
    .hero-search-form {
        flex-wrap: wrap !important;
        flex-direction: row !important;
        align-items: center;
    }
    .hero-search-input {
        flex: 1 1 auto;
        min-width: 0;
    }
    .hero-search-btn {
        flex: 1 0 100%;
    }
}

/* ---------- Review carousel: card must fit the screen ---------- */
@media (max-width: 768px) {
    .review-track {
        gap: 14px !important;
        padding: 8px 2px 18px !important;
        -webkit-overflow-scrolling: touch;
        scroll-padding-left: 2px;
    }
    .modern-review-card {
        min-width: 84vw !important;
        max-width: 84vw !important;
        padding: 18px !important;
    }
    .reviews-section {
        padding: 52px 0 !important;
    }
    .reviews-heading h2 {
        font-size: 27px !important;
    }
    .reviews-heading p[style*="text-align: right"] {
        text-align: left !important;
        max-width: 100% !important;
    }
}

/* ---------- Typography scale ---------- */
@media (max-width: 768px) {
    .pet-contact-note {
        font-size: 11.5px !important;
        line-height: 1.5;
    }
    h1 {
        line-height: 1.18;
    }
    h2 {
        line-height: 1.22;
    }
}

/* ---------- Pet detail page ---------- */
@media (max-width: 768px) {
    .pet-thumbnails {
        display: flex !important;
        gap: 8px !important;
        overflow-x: auto;
        padding-bottom: 6px;
        scrollbar-width: none;
    }
    .pet-thumbnails::-webkit-scrollbar {
        display: none;
    }
    .pet-thumbnail {
        flex: 0 0 74px !important;
        height: 74px !important;
    }
    .pet-quick-details {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .pet-video-wrapper iframe,
    .pet-video-wrapper video {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 420px) {
    .pet-quick-details {
        grid-template-columns: 1fr !important;
    }
}

/* ---------- Sticky WhatsApp CTA on pet detail (thumb-reachable) ---------- */
@media (max-width: 768px) {
    .pet-whatsapp-button {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- Breed / subcategory page ---------- */
@media (max-width: 768px) {
    .breed-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .subcategory-hero {
        padding: 30px 0 26px !important;
        text-align: center;
    }
    .breed-section-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

@media (max-width: 420px) {
    .breed-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ---------- Available pets page ---------- */
@media (max-width: 768px) {
    .content-top-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .filter-active-bar {
        flex-wrap: wrap;
        gap: 8px;
    }
    .pets-header-controls {
        flex-wrap: wrap;
        gap: 8px;
    }
    .breed-pill-card {
        width: 100%;
    }
}

/* ---------- Blog article body ---------- */
@media (max-width: 768px) {
    .article-content-body {
        font-size: 16px;
        line-height: 1.75;
    }
    .article-content-body img {
        border-radius: 12px;
    }
    .article-content-body pre,
    .article-content-body table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }
}

/* ---------- Footer ---------- */
@media (max-width: 768px) {
    .site-footer {
        padding: 44px 0 20px;
    }
    .footer-whatsapp {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- Safe area for notched devices ---------- */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .container {
            padding-left: max(0px, env(safe-area-inset-left));
            padding-right: max(0px, env(safe-area-inset-right));
        }
    }
}

/* ---------- Contact photo collage ----------
   mobile-fix.css pinned this to a fixed height, but the collage has 7
   photos, so the last row spilled out and covered the contact form.
   Rebuild it as an auto-height 2-column grid.                        */
@media (max-width: 760px) {
    .photo-collage {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: none !important;
        grid-auto-rows: 132px !important;
        gap: 10px !important;
        width: min(100%, 360px) !important;
        height: auto !important;
        margin: 20px auto 4px !important;
        transform: none !important;
    }
    .contact-photo {
        grid-row: auto !important;
        grid-column: auto !important;
        width: 100% !important;
        height: 100% !important;
        border: 3px solid #fff;
        border-radius: 12px;
    }
    .contact-photo:nth-child(1) {
        grid-column: span 2 !important;
        grid-row: span 2 !important;
    }
    .contact-form-card {
        position: relative;
        z-index: 2;
        margin-top: 18px !important;
    }
}

@media (max-width: 390px) {
    .photo-collage {
        grid-auto-rows: 118px !important;
        width: 100% !important;
    }
}