/* ================================================================
   DIAMOND ICE — Responsive Breakpoints
   Bootstrap breakpoints: xl(1200), lg(992), md(768), sm(576)
   ================================================================ */

/* ----------------------------------------------------------------
   1. LARGE DESKTOPS — max-width: 1400px
   ---------------------------------------------------------------- */
@media (max-width: 1400px) {
    .di-hero-title {
        font-size: 3.8rem;
    }
}

/* ----------------------------------------------------------------
   2. DESKTOPS — max-width: 1200px
   ---------------------------------------------------------------- */
@media (max-width: 1200px) {
    :root {
        --di-section-py: 5.5rem;
    }

    .di-hero-title {
        font-size: 3.2rem;
    }
    .di-section-title {
        font-size: 2.2rem;
    }

    .di-process-timeline {
        flex-wrap: wrap;
        gap: 1.5rem;
        justify-content: center;
    }
    .di-process-timeline::before,
    .di-process-timeline::after {
        display: none;
    }
    .di-process-step {
        max-width: none;
        width: calc(25% - 1.5rem);
    }
}

/* ----------------------------------------------------------------
   3. TABLETS — max-width: 992px
   ---------------------------------------------------------------- */
@media (max-width: 992px) {
    :root {
        --di-section-py: 4.5rem;
    }

    /* Hero */
    .di-hero {
        padding-top: 120px;
        padding-bottom: 3rem;
        min-height: auto;
    }
    .di-hero .row {
        flex-direction: column-reverse;
    }
    .di-hero-content {
        text-align: center;
    }
    .di-hero-title {
        font-size: 2.8rem;
    }
    .di-hero-subtitle {
        margin-left: auto;
        margin-right: auto;
        max-width: 500px;
    }
    .di-hero-actions {
        justify-content: center;
    }
    .di-hero-stats {
        justify-content: center;
    }
    .di-hero-visual {
        min-height: 280px;
        margin-bottom: 2rem;
    }
    .di-hero-ice-wrapper {
        max-width: 320px;
    }

    /* Section titles */
    .di-section-title {
        font-size: 2rem;
    }

    /* About */
    .di-about-image-wrapper {
        margin-bottom: 2rem;
    }
    .di-about-image {
        min-height: 300px;
    }

    /* Process */
    .di-process-step {
        width: calc(25% - 1rem);
    }

    /* Gallery */
    .di-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .di-gallery-item.tall {
        grid-row: span 1;
        aspect-ratio: 4/3;
    }
    .di-gallery-item.wide {
        grid-column: span 1;
    }

    /* Map */
    .di-map-wrapper {
        max-width: 400px;
        margin-bottom: 2rem;
    }

    /* Contact */
    .di-contact-form-card {
        margin-bottom: 2rem;
    }

    /* Footer */
    .di-footer-heading::after {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* ----------------------------------------------------------------
   4. LARGE PHONES — max-width: 768px
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    :root {
        --di-section-py: 3.5rem;
    }

    /* Typography */
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
    h3 { font-size: 1.3rem; }

    .di-hero-title {
        font-size: 2.3rem;
        letter-spacing: -0.03em;
    }
    .di-hero-subtitle {
        font-size: 1rem;
    }
    .di-section-title {
        font-size: 1.75rem;
    }
    .di-section-subtitle {
        font-size: 1rem;
    }

    /* Navbar */
    .di-navbar {
        padding: 0.8rem 0;
    }
    .di-navbar.scrolled {
        padding: 0.5rem 0;
    }

    /* Hero */
    .di-hero-stats {
        flex-wrap: wrap;
        gap: 1.5rem;
    }
    .di-hero-stat {
        text-align: center;
        flex: 1;
        min-width: 80px;
    }
    .di-ice-cube {
        width: 140px;
        height: 140px;
    }
    .di-ice-face {
        width: 140px;
        height: 140px;
    }
    .di-ice-face.front  { transform: translateZ(70px); }
    .di-ice-face.back   { transform: rotateY(180deg) translateZ(70px); }
    .di-ice-face.right  { transform: rotateY(90deg) translateZ(70px); }
    .di-ice-face.left   { transform: rotateY(-90deg) translateZ(70px); }
    .di-ice-face.top    { transform: rotateX(90deg) translateZ(70px); }
    .di-ice-face.bottom { transform: rotateX(-90deg) translateZ(70px); }

    /* About */
    .di-about-features {
        grid-template-columns: 1fr;
    }
    .di-about-accent {
        display: none;
    }

    /* Stats */
    .di-stat-card::after {
        display: none;
    }
    .di-stat-value {
        font-size: 2rem;
    }

    /* Process */
    .di-process-step {
        width: calc(50% - 1rem);
    }

    /* Product cards */
    .di-product-img-wrapper {
        height: 180px;
    }
    .di-product-body {
        padding: 1.3rem;
    }

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

    /* Testimonials */
    .di-testimonial-card {
        padding: 1.8rem;
    }
    .di-testimonial-text {
        font-size: 1rem;
    }

    /* Contact */
    .di-contact-form-card {
        padding: 1.8rem;
    }
    .di-contact-info-card {
        padding: 1.8rem;
    }

    /* Page hero */
    .di-page-hero {
        padding: 8rem 0 3rem;
    }
    .di-page-hero-title {
        font-size: 2.2rem;
    }

    /* Back to top & WhatsApp */
    .di-back-to-top {
        right: 16px;
        bottom: 85px;
        width: 42px;
        height: 42px;
    }
    .di-whatsapp-fab {
        right: 16px;
        bottom: 20px;
        width: 50px;
        height: 50px;
        font-size: 1.4rem;
    }
}

/* ----------------------------------------------------------------
   5. SMALL PHONES — max-width: 576px
   ---------------------------------------------------------------- */
@media (max-width: 576px) {
    :root {
        --di-section-py: 3rem;
    }

    .di-hero {
        padding-top: 100px;
    }
    .di-hero-title {
        font-size: 1.9rem;
    }
    .di-hero-eyebrow {
        font-size: 0.75rem;
    }
    .di-hero-ice-wrapper {
        max-width: 240px;
    }
    .di-hero-visual {
        min-height: 220px;
    }

    .di-section-title {
        font-size: 1.5rem;
    }
    .di-section-subtitle {
        font-size: 0.9rem;
    }
    .di-section-header {
        margin-bottom: 2rem;
    }

    /* Buttons */
    .di-btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.8rem;
    }
    .di-hero-actions {
        flex-direction: column;
        align-items: center;
    }
    .di-hero-actions .di-btn {
        width: 100%;
        max-width: 280px;
    }

    /* Stats */
    .di-stat-card {
        padding: 1rem 0.5rem;
    }
    .di-stat-value {
        font-size: 1.6rem;
    }
    .di-stat-label {
        font-size: 0.7rem;
    }

    /* Process */
    .di-process-step {
        width: calc(50% - 1rem);
    }
    .di-process-icon {
        width: 48px;
        height: 48px;
        font-size: 1.1rem;
    }
    .di-process-step-title {
        font-size: 0.7rem;
    }

    /* Feature cards */
    .di-feature-card {
        padding: 1.8rem 1.2rem;
    }
    .di-feature-icon {
        width: 56px;
        height: 56px;
        font-size: 1.3rem;
    }

    /* Gallery */
    .di-gallery-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
    }

    /* FAQ */
    .di-faq .accordion-button {
        font-size: 0.9rem;
        padding: 1rem 1.2rem;
    }

    /* Footer */
    .di-footer-bottom .row {
        text-align: center;
    }
    .di-footer .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .di-footer-heading {
        margin-top: 0.5rem;
    }
    .di-footer-heading::after {
        left: 0;
        transform: none;
    }

    /* Lightbox */
    .di-lightbox-close {
        top: 10px;
        right: 10px;
    }
    .di-lightbox-prev,
    .di-lightbox-next {
        width: 40px;
        height: 40px;
    }
    .di-lightbox-prev { left: 8px; }
    .di-lightbox-next { right: 8px; }
}

/* ----------------------------------------------------------------
   6. VERY SMALL PHONES — max-width: 400px
   ---------------------------------------------------------------- */
@media (max-width: 400px) {
    .di-hero-title {
        font-size: 1.6rem;
    }
    .di-hero-stat-value {
        font-size: 1.2rem;
    }
    .di-ice-cube {
        width: 110px;
        height: 110px;
    }
    .di-ice-face {
        width: 110px;
        height: 110px;
    }
    .di-ice-face.front  { transform: translateZ(55px); }
    .di-ice-face.back   { transform: rotateY(180deg) translateZ(55px); }
    .di-ice-face.right  { transform: rotateY(90deg) translateZ(55px); }
    .di-ice-face.left   { transform: rotateY(-90deg) translateZ(55px); }
    .di-ice-face.top    { transform: rotateX(90deg) translateZ(55px); }
    .di-ice-face.bottom { transform: rotateX(-90deg) translateZ(55px); }
}

/* ----------------------------------------------------------------
   7. REDUCED MOTION
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    [data-anim] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    .di-ice-cube {
        animation: none;
    }
}