/* ============================================
   PEACEFUL PAWS - RESPONSIVE STYLES
   Breakpoints: 1200px, 992px, 768px, 576px
   ============================================ */

/* ---------- Large Desktop (1400px+) ---------- */
@media (min-width: 1400px) {
    .hero {
        gap: var(--space-4xl);
    }
}

/* ---------- Desktop (max 1200px) ---------- */
@media (max-width: 1200px) {
    :root {
        --container-padding: clamp(1.5rem, 3vw, 3rem);
    }

    .hero {
        gap: var(--space-2xl);
    }

    .service-card {
        flex: 0 0 350px;
    }

    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
        gap: var(--space-2xl);
    }
}

/* ---------- Tablet Landscape (max 992px) ---------- */
@media (max-width: 992px) {
    /* Navigation */
    .nav-menu {
        display: none;
    }

    .nav-cta {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }

    /* Hero */
    .hero {
        min-height: auto;
        padding-top: 140px;
        padding-bottom: var(--space-3xl);
    }

    .hero-container {
        grid-template-columns: 1fr;
        gap: var(--space-3xl);
    }

    .hero-content {
        text-align: center;
    }

    .hero-label {
        justify-content: center;
    }

    .hero-subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-ctas {
        justify-content: center;
    }

    .hero-stats {
        justify-content: center;
    }

    .hero-visual {
        padding: 0 var(--container-padding);
        order: -1;
    }

    .hero-image-wrapper {
        aspect-ratio: 16/10;
        max-height: 400px;
    }

    .hero-float-1 {
        display: none;
    }

    .hero-float-2 {
        display: none;
    }

    .scroll-indicator {
        display: none;
    }

    /* Philosophy */
    .philosophy-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3xl);
    }

    .philosophy-image-col {
        max-width: 500px;
        margin: 0 auto;
    }

    .philosophy-accent {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }

    .philosophy-values {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Services */
    .service-card {
        flex: 0 0 320px;
    }

    /* Experience */
    .timeline-item {
        gap: var(--space-lg);
    }

    .marker-number {
        width: 44px;
        height: 44px;
    }

    /* About */
    .about-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3xl);
    }

    .about-image-col {
        order: -1;
        max-width: 500px;
        margin: 0 auto;
    }

    .about-accent-card {
        left: auto;
        right: -20px;
    }

    /* Gallery */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-item-large {
        grid-column: span 2;
        grid-row: span 1;
    }

    .gallery-item-tall {
        grid-row: span 1;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2xl);
    }

    .footer-brand {
        grid-column: span 2;
        text-align: center;
    }

    .footer-social {
        justify-content: center;
    }
}

/* ---------- Tablet Portrait (max 768px) ---------- */
@media (max-width: 768px) {
    :root {
        --space-section: clamp(4rem, 8vw, 8rem);
    }

    /* Typography adjustments */
    .hero-title {
        font-size: var(--text-4xl);
    }

    .philosophy-title,
    .about-title {
        font-size: var(--text-3xl);
    }

    .services-title,
    .experience-title,
    .testimonials-title,
    .gallery-title,
    .booking-title {
        font-size: var(--text-4xl);
    }

    /* Hero */
    .hero-ctas {
        flex-direction: column;
        align-items: center;
        gap: var(--space-md);
    }

    .hero-ctas .btn {
        width: 100%;
        max-width: 280px;
    }

    .hero-stats {
        flex-direction: column;
        gap: var(--space-lg);
    }

    .stat-divider {
        width: 40px;
        height: 1px;
    }

    .stat {
        text-align: center;
    }

    /* Services Carousel */
    .services-carousel {
        padding: 0;
    }

    .services-track {
        padding: 0 var(--container-padding);
    }

    .service-card {
        flex: 0 0 85vw;
        max-width: 350px;
    }

    .services-nav {
        flex-wrap: wrap;
        gap: var(--space-md);
    }

    .services-progress {
        width: 150px;
    }

    /* Experience Timeline */
    .timeline-title {
        font-size: var(--text-xl);
    }

    /* Testimonials */
    .testimonial-quote p {
        font-size: var(--text-lg);
    }

    /* Booking */
    .booking-ctas {
        flex-direction: column;
        align-items: center;
        gap: var(--space-md);
    }

    .booking-ctas .btn {
        width: 100%;
        max-width: 300px;
    }

    .booking-details {
        flex-direction: column;
        gap: var(--space-md);
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-brand {
        grid-column: span 1;
    }

    .footer-contact-list li {
        justify-content: center;
    }

    .footer-bottom {
        flex-direction: column;
        gap: var(--space-md);
        text-align: center;
    }
}

/* ---------- Mobile (max 576px) ---------- */
@media (max-width: 576px) {
    :root {
        --container-padding: 1.25rem;
        --space-section: clamp(3rem, 6vw, 6rem);
    }

    .booking-modal {
        padding: 1.5rem;
        border-radius: var(--radius-lg);
    }

    .booking-send-buttons {
        flex-direction: column;
    }

    /* Header */
    .header {
        padding: var(--space-md) 0;
    }

    .header.is-scrolled {
        padding: var(--space-sm) 0;
    }

    .logo-text {
        font-size: var(--text-lg);
    }

    /* Mobile Menu */
    .mobile-link {
        font-size: var(--text-2xl);
    }

    /* Hero */
    .hero {
        padding-top: 100px;
    }

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

    .hero-image-wrapper {
        max-height: 300px;
    }

    /* Philosophy */
    .philosophy-quote {
        padding: var(--space-lg);
    }

    .quote-mark {
        font-size: 60px;
        top: 5px;
        left: 10px;
    }

    .quote-text {
        font-size: var(--text-base);
        padding-left: var(--space-xl);
    }

    .quote-author {
        padding-left: var(--space-xl);
    }

    .philosophy-values {
        flex-direction: column;
        align-items: center;
    }

    /* Services */
    .service-card {
        flex: 0 0 calc(100vw - 2.5rem);
    }

    .service-content {
        padding: var(--space-lg);
    }

    .service-footer {
        flex-direction: column;
        gap: var(--space-md);
        align-items: flex-start;
    }

    .service-cta {
        width: 100%;
        text-align: center;
    }

    .services-nav-btn {
        width: 44px;
        height: 44px;
    }

    /* Experience */
    .timeline-item {
        gap: var(--space-md);
    }

    .marker-number {
        width: 40px;
        height: 40px;
        font-size: var(--text-sm);
    }

    /* About */
    .credentials {
        padding: var(--space-lg);
    }

    .about-signature {
        flex-direction: column;
        text-align: center;
    }

    .about-accent-card {
        right: 10px;
        bottom: -20px;
        padding: var(--space-md);
    }

    .accent-number {
        font-size: var(--text-2xl);
    }

    /* Testimonials */
    .testimonial-card {
        padding: var(--space-lg);
    }

    /* Gallery */
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .gallery-item-large,
    .gallery-item-tall {
        grid-column: span 1;
        grid-row: span 1;
    }

    .gallery-image-wrapper {
        min-height: 200px;
    }

    /* Booking */
    .booking-title {
        font-size: var(--text-3xl);
    }

    /* Footer */
    .footer {
        padding: var(--space-3xl) 0 var(--space-lg);
    }

    .footer-nav,
    .footer-contact {
        text-align: left;
    }

    .footer-contact-list li {
        justify-content: flex-start;
    }
}

/* ---------- Extra Small (max 400px) ---------- */
@media (max-width: 400px) {
    :root {
        --container-padding: 1rem;
    }

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

    .philosophy-title,
    .about-title,
    .services-title,
    .experience-title,
    .testimonials-title,
    .gallery-title,
    .booking-title {
        font-size: var(--text-2xl);
    }

    .btn {
        padding: var(--space-sm) var(--space-lg);
        font-size: var(--text-xs);
    }

    .btn-large {
        padding: var(--space-md) var(--space-lg);
        font-size: var(--text-sm);
    }
}

/* ---------- Landscape Mobile ---------- */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding-top: 100px;
        padding-bottom: var(--space-2xl);
    }

    .mobile-menu-inner {
        padding-top: 80px;
    }

    .mobile-link {
        font-size: var(--text-xl);
    }

    .mobile-nav {
        gap: var(--space-md);
    }
}

/* ---------- High DPI / Retina ---------- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero-noise,
    .hero-image-grain,
    .image-grain {
        opacity: 0.03;
    }
}

/* ---------- Hover Media Query ---------- */
@media (hover: none) {
    /* Disable hover effects on touch devices */
    .service-card:hover .service-card-inner {
        transform: none;
        box-shadow: none;
    }

    .service-card:hover .service-image {
        transform: none;
    }

    .gallery-item:hover .gallery-image {
        transform: none;
    }

    .gallery-overlay {
        opacity: 1;
        background: linear-gradient(to top, rgba(26, 58, 74, 0.6), transparent);
    }

    .card-hover:hover {
        transform: none;
        box-shadow: var(--shadow-md);
    }
}

/* ---------- Print Styles ---------- */
@media print {
    .preloader,
    .cursor,
    .bg-canvas,
    .header,
    .mobile-menu,
    .scroll-indicator,
    .services-nav,
    .testimonials-nav {
        display: none !important;
    }

    body {
        color: #000;
        background: #fff;
    }

    .hero,
    .philosophy-grid,
    .about-grid {
        display: block;
    }

    .section {
        padding: 2rem 0;
        page-break-inside: avoid;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}