/* =========================================
   RESPONSIVE STYLES - All media queries consolidated
   
   ORGANIZATION:
   1. MIN-WIDTH queries (mobile-first, smallest to largest)
   2. MAX-WIDTH queries (desktop-first, largest to smallest)
   3. Range queries (min AND max)
   4. Orientation queries
   5. Accessibility preferences
   ========================================= */


/* =========================================
   SECTION 1: MIN-WIDTH QUERIES
   Mobile-first: from smallest to largest
   ========================================= */

/* 600px+ : Hero buttons row */
@media (min-width: 600px) {
    .hero__buttons {
        flex-direction: row;
    }
}

/* 768px+ : Footer 2x2 grid */
@media (min-width: 768px) {
    .footer__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 3rem;
    }

    .footer__brand {
        grid-column: 1 / -1;
        margin-bottom: 0.5rem;
    }
}

/* 960px+ : About section two-column layout */
@media (min-width: 960px) {
    .about__shell {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    }
}

/* 1024px+ : Footer full 4-column layout */
@media (min-width: 1024px) {
    .footer__grid {
        grid-template-columns: 2fr repeat(3, 1fr);
        align-items: start;
        gap: 2.5rem;
    }

    .footer__brand {
        grid-column: auto;
        margin-bottom: 0;
    }
}


/* =========================================
   SECTION 2: MAX-WIDTH QUERIES  
   Desktop-first: from largest to smallest
   ========================================= */

/* 1440px and below: Background images 1200w */
@media (max-width: 1440px) {
    .section.services.bg-loaded {
        background-image: url("../images/backgrounds/services-bg-1200.avif");
    }

    .section.partners.bg-loaded {
        background-image: url("../images/backgrounds/partners-bg-1200.avif");
    }

    .section.testimonials.bg-loaded {
        background-image: url("../images/backgrounds/testimonials-bg-1200.avif");
    }

    .section.about.bg-loaded {
        background-image: url("../images/backgrounds/about-bg-1200.avif");
    }

    .section.team.bg-loaded {
        background-image: url("../images/backgrounds/team-bg-1200.avif");
    }

    .section.contact.bg-loaded {
        background-image: url("../images/backgrounds/contact-bg-1200.avif");
    }
}

/* 1100px and below: Contact grid single column */
@media (max-width: 1100px) {
    .contact__grid {
        grid-template-columns: 1fr;
        gap: clamp(1.5rem, 4vw, 2rem);
    }
}

/* 1024px and below: Tablet layout & 800w images */
@media (max-width: 1024px) {

    /* Navigation mobile menu */
    .nav__inner {
        flex-wrap: wrap;
        row-gap: 0.75rem;
        justify-content: space-between;
    }

    .nav__brand {
        width: auto;
        flex-shrink: 0;
    }

    .nav__toggle {
        display: inline-flex;
        order: 0;
        margin: 0;
        flex-shrink: 0;
    }

    .nav__collapse {
        width: 100%;
        display: grid;
        gap: 1rem;
        border-radius: calc(var(--radius-lg) + 6px);
        box-shadow: 0 20px 48px var(--shadow-dark-28);
        padding: 0;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transition: max-height 220ms ease, opacity 180ms ease, padding 180ms ease;
        justify-items: center;
        justify-content: center;
        text-align: center;
    }

    .nav.nav--open .nav__collapse {
        padding: 1rem 1rem 1.25rem;
        border: 1px solid var(--dew-white-24);
        max-height: 600px;
        opacity: 1;
        pointer-events: auto;
    }

    .nav__links {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        width: min(260px, 100%);
        margin: 0 auto;
    }

    .nav__links a {
        width: min(260px, 100%);
        justify-content: center;
    }

    .nav__actions {
        margin-left: 0;
        width: min(260px, 100%);
        margin-right: 0;
        margin-top: 0.5rem;
        justify-content: center;
        order: 3;
    }

    .nav__actions sl-button::part(base) {
        width: 100%;
        justify-content: center;
    }

    /* Parallax becomes scroll on tablets */
    .section.partners,
    .section.testimonials,
    .section.about,
    .section.team,
    .section.contact,
    .section.services {
        background-attachment: scroll;
    }

    /* Background images: 800w */
    .section.services.bg-loaded {
        background-image: url("../images/backgrounds/services-bg-800.avif");
    }

    .section.partners.bg-loaded {
        background-image: url("../images/backgrounds/partners-bg-800.avif");
    }

    .section.testimonials.bg-loaded {
        background-image: url("../images/backgrounds/testimonials-bg-800.avif");
    }

    .section.about.bg-loaded {
        background-image: url("../images/backgrounds/about-bg-800.avif");
    }

    .section.team.bg-loaded {
        background-image: url("../images/backgrounds/team-bg-800.avif");
    }

    .section.contact.bg-loaded {
        background-image: url("../images/backgrounds/contact-bg-800.avif");
    }
}

/* 960px and below: Hero heading size */
@media (max-width: 960px) {
    .hero__inner h1 {
        font-size: clamp(2.6rem, 9vw, 4rem);
    }
}

/* 768px and below: Small tablet adjustments */
@media (max-width: 768px) {
    .footer__certifications-list img {
        width: 72px;
        height: 72px;
    }
}

/* 640px and below: Mobile layout */
@media (max-width: 640px) {

    /* Layout */
    .container {
        width: min(100%, 100% - 1.75rem);
    }

    .section {
        height: auto !important;
    }

    .section-shell {
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        border-radius: 0;
    }

    /* Navigation */
    .nav__inner {
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
    }

    .nav__brand {
        width: auto;
        flex-shrink: 1;
    }

    .nav__brand img {
        width: clamp(80px, 22vw, 100px);
        height: auto;
    }

    .nav__toggle {
        margin: 0;
        width: 38px;
        height: 38px;
    }

    .nav.nav--open .nav__collapse {
        margin-top: 0.5rem;
    }

    .hide-mobile {
        display: none !important;
    }

    /* Hero */
    .hero__inner {
        padding-top: clamp(4rem, 14vw, 5rem);
    }

    .hero__inner p {
        font-size: 1.05rem;
    }

    /* Services */
    .services__grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(1.5rem, 4vw, 2.25rem);
    }

    .services__grid .service-card {
        width: 100%;
        max-width: 400px;
    }

    /* Testimonials */
    .testimonial-card {
        padding: clamp(1.85rem, 8vw, 2.4rem);
        text-align: center;
    }

    .testimonial-card footer {
        align-items: center;
    }

    .testimonials__carousel::part(navigation-button) {
        display: none;
    }

    /* About */
    .about__shell {
        justify-items: center;
    }

    .about__card {
        padding: 1rem;
        text-align: center;
    }

    /* Partners */
    .partners__grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem;
    }

    .partner-card-link {
        width: 200px;
    }

    /* Contact */
    .contact__info {
        text-align: center;
    }

    .contact__details {
        justify-items: center;
    }

    .contact-detail {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .contact-detail dt {
        justify-content: center;
    }

    .contact-detail dd {
        text-align: center;
    }

    .contact__form {
        padding: clamp(1.75rem, 7vw, 2.2rem);
    }

    /* Footer */
    .footer__certifications-list img {
        width: 64px;
        height: 64px;
    }

    .footer__shell {
        text-align: center;
    }

    .footer__brand {
        justify-items: center;
        align-items: center;
    }

    .footer__brand-mark {
        flex-direction: column;
        text-align: center;
    }

    .footer__column {
        text-align: center;
    }

    .footer__column ul {
        align-items: center;
    }

    .footer__certifications-list {
        justify-content: center;
    }

    /* Background images: 400w */
    .section.services.bg-loaded {
        background-image: url("../images/backgrounds/services-bg-400.avif");
    }

    .section.partners.bg-loaded {
        background-image: url("../images/backgrounds/partners-bg-400.avif");
    }

    .section.testimonials.bg-loaded {
        background-image: url("../images/backgrounds/testimonials-bg-400.avif");
    }

    .section.about.bg-loaded {
        background-image: url("../images/backgrounds/about-bg-400.avif");
    }

    .section.team.bg-loaded {
        background-image: url("../images/backgrounds/team-bg-400.avif");
    }

    .section.contact.bg-loaded {
        background-image: url("../images/backgrounds/contact-bg-400.avif");
    }
}

/* 600px and below: Team card adjustments */
@media (max-width: 600px) {
    .team-card__tag::part(base) {
        letter-spacing: 0.12em;
        font-size: 0.7rem;
    }

    .team-card__bio {
        font-size: 0.98rem;
    }
}

/* 400px and below: Extra small mobile */
@media (max-width: 400px) {

    .contact__info,
    .contact__form {
        padding: clamp(1.5rem, 5vw, 2rem);
    }
}


/* =========================================
   SECTION 3: RANGE QUERIES
   For specific viewport ranges only
   ========================================= */

/* Tablet range: 641px - 1024px */
@media (min-width: 641px) and (max-width: 1024px) {
    .partners__grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2rem;
    }

    .partner-card-link {
        width: 200px;
    }

    .services__grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: clamp(1.5rem, 4vw, 2.25rem);
    }

    .services__grid .service-card {
        flex: 0 1 calc(50% - 1.125rem);
        max-width: 400px;
    }
}

/* Wide tablets: 861px - 1024px (Team 2-column) */
@media (min-width: 861px) and (max-width: 1024px) {
    .team__grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2rem;
    }

    .team-card {
        flex: 0 1 calc(50% - 1rem);
        max-width: 500px;
    }
}

/* Narrow tablets: 641px - 860px (Team single column) */
@media (min-width: 641px) and (max-width: 860px) {
    .team__grid {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    .team-card {
        flex: 0 0 auto;
        width: 100%;
        max-width: 500px;
        min-width: 0;
    }
}


/* =========================================
   SECTION 4: ORIENTATION QUERIES
   ========================================= */

/* Tablet landscape: max-width 1024px */
@media (max-width: 1024px) and (orientation: landscape) {
    .partners__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 3rem;
    }
}

/* Wide tablet landscape: 861px - 1024px */
@media (min-width: 861px) and (max-width: 1024px) and (orientation: landscape) {
    .team__grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .team-card {
        flex: 0 1 calc(50% - 1rem);
        max-width: 500px;
    }
}

/* Portrait mobile: 768px and below (mobile background images) */
@media (max-width: 768px) and (orientation: portrait) {
    .section.services.bg-loaded {
        background-image: url("../images/backgrounds/services-bg-m.avif");
    }

    .section.partners.bg-loaded {
        background-image: url("../images/backgrounds/partners-bg-m.avif");
    }

    .section.testimonials.bg-loaded {
        background-image: url("../images/backgrounds/testimonials-bg-m.avif");
    }

    .section.about.bg-loaded {
        background-image: url("../images/backgrounds/about-bg-m.avif");
    }

    .section.team.bg-loaded {
        background-image: url("../images/backgrounds/team-bg-m.avif");
    }

    .section.contact.bg-loaded {
        background-image: url("../images/backgrounds/contact-bg-m.avif");
    }
}


/* =========================================
   SECTION 5: ACCESSIBILITY PREFERENCES
   ========================================= */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .partners-logo {
        animation: none;
    }

    .section.partners::after,
    .section.testimonials::after,
    .section.about::after,
    .section.team::after,
    .section.contact::after,
    .section.services::after {
        animation: none;
    }

    .partner-card,
    .partner-card-link:hover .partner-card,
    .partner-card-link:focus .partner-card,
    .partner-card-link:focus-visible .partner-card {
        transition: none;
        transform: none;
    }
}