/*
 * Responsive Stylesheet — Maxvidel Theme
 *
 * Mobile-first media query overrides for all breakpoints.
 * Base styles (mobile, 375px+) are written in main.css and components.css.
 * This file adds min-width breakpoints for tablet and desktop layouts.
 *
 * Breakpoints:
 *   576px  (--bp-sm)  — Large phones
 *   768px  (--bp-md)  — Tablets (Task 2.13: footer stacks to 2-col here)
 *   992px  (--bp-lg)  — Small desktops (desktop nav shown, hamburger hidden)
 *   1200px (--bp-xl)  — Standard desktops (4-column footer)
 *   1400px (--bp-xxl) — Large screens
 *
 * Rule: NO max-width queries ever. Mobile-first min-width only.
 *
 * @package Maxvidel
 * @since 1.0.0
 */

/* ========================================
   576px — Large phones
   ======================================== */

@media (min-width: 576px) {

    /* Top bar — keep on one line at this size */
    .header__topbar-inner {
        flex-wrap: nowrap;
    }

    /* Footer bottom bar — single row */
    .footer__bottom-inner {
        flex-wrap: nowrap;
    }

}

/* ========================================
   768px — Tablets (Task 2.13 — footer)
   ======================================== */

@media (min-width: 768px) {

    /* Footer — 2 columns */
    .footer__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-8) var(--space-6);
    }

    /* Footer column headings — stop being accordion toggles at tablet
       The JS still works but we enforce expanded state via CSS  */
    .footer__heading--toggle {
        cursor: default;
        pointer-events: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .footer__toggle-icon {
        display: none;
    }

    .footer__col-body {
        max-height: none !important;
        overflow: visible;
    }

    .footer__col-body.is-collapsed {
        max-height: none !important;
    }

    /* Footer bottom bar — align items on one row */
    .footer__bottom-inner {
        align-items: center;
    }

}

/* ========================================
   992px — Small desktops
   Desktop nav shown; hamburger hidden.
   ======================================== */

@media (min-width: 992px) {

    /* Show desktop nav menu */
    .nav__menu {
        display: flex;
    }

    /* Hide hamburger toggle */
    .nav__toggle {
        display: none;
    }

    /* Hide mobile navigation panel (always hidden on desktop regardless of state) */
    .nav__mobile,
    .nav__overlay {
        display: none;
    }

    /* Wider nav inner padding */
    .site-nav__inner {
        padding-top: var(--space-2);
        padding-bottom: var(--space-2);
    }

    /* Top bar — full contact info visible */
    .header__topbar-contact {
        gap: var(--space-4);
    }

    /* Section padding — slightly reduced for mid-size screens */
    .section {
        padding-top: var(--space-12);
        padding-bottom: var(--space-12);
    }

}

/* ========================================
   1200px — Standard desktops
   ======================================== */

@media (min-width: 1200px) {

    /* Footer — 4-column grid (Task 2.13 desktop) */
    .footer__grid {
        grid-template-columns: 2fr 1fr 1fr 1.5fr;
        gap: var(--space-8);
    }

    /* Larger nav gap between items */
    .nav__menu {
        gap: var(--space-1);
    }

    .nav__menu > li > a {
        padding: 0.5rem var(--space-2);
    }

}

/* ========================================
   1400px — Large screens
   ======================================== */

@media (min-width: 1400px) {

    /* Slightly increased nav item spacing at very wide screens */
    .nav__menu {
        gap: var(--space-2);
    }

    /* Footer column 1 can use more space */
    .footer__grid {
        grid-template-columns: 2.5fr 1fr 1fr 1.5fr;
    }

}

/* ========================================
   PHASE 3 — HOMEPAGE SECTION BREAKPOINTS
   Tasks 3.3–3.17
   ======================================== */

/* ---- 576px — Large phones ---- */

@media (min-width: 576px) {

    /* Hero: slightly taller on large phones */
    .hero-slider {
        height: 65vh;
    }

    /* Stats: keep 2-col on large phones */
    .stats-grid {
        gap: var(--space-8);
    }

}

/* ---- 768px — Tablets ---- */

@media (min-width: 768px) {

    /* Hero: grow toward desktop height */
    .hero-slider {
        height: 70vh;
    }

    /* Hero title bigger */
    .hero-slider__title,
    .hero-slider__headline {
        font-size: 2.25rem;
    }

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

    /* Vision & Mission: 2 columns */
    .vision-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Core Values: 2 columns */
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    /* Latest Posts: 2 columns */
    .posts-grid--latest {
        grid-template-columns: repeat(2, 1fr);
    }

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

    /* Stats: still 2 cols at tablet but larger numbers */
    .stat__number {
        font-size: 2.75rem;
    }

    /* CTA title bigger on tablet */
    .cta__title {
        font-size: 2.25rem;
    }

}

/* ---- 992px — Small desktops ---- */

@media (min-width: 992px) {

    /* Hero: full desktop height */
    .hero-slider {
        height: 80vh;
    }

    /* Hero title: full desktop size */
    .hero-slider__title,
    .hero-slider__headline {
        font-size: 3rem;
    }

    /* Hero subtitle slightly larger */
    .hero-slider__subtitle {
        font-size: 1.125rem;
    }

    /* Services: 3 columns */
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Core Values: 3 columns */
    .values-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Projects: 3 columns */
    .projects-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Latest Posts: 3 columns */
    .posts-grid--latest {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Stats: 4 columns (single row) */
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Stats number: full desktop size */
    .stat__number {
        font-size: 3rem;
    }

    /* About: 1fr 1fr at 992+ */
    .about-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-12);
    }

    /* CTA: full desktop title */
    .cta__title {
        font-size: 2.5rem;
    }

    /* Hero arrows: larger offset on desktop */
    .hero-slider__arrow--prev {
        left: var(--space-4);
    }

    .hero-slider__arrow--next {
        right: var(--space-4);
    }

}

/* ---- 1200px — Standard desktops ---- */

@media (min-width: 1200px) {

    /* Hero: full desktop height, larger text */
    .hero-slider__title,
    .hero-slider__headline {
        font-size: 3.5rem;
    }

    /* About: slightly more breathing room */
    .about-grid {
        gap: var(--space-16);
    }

    /* Stats: wider gaps */
    .stats-grid {
        gap: var(--space-8);
    }

    /* Increase section grid gaps */
    .services-grid,
    .values-grid,
    .projects-grid,
    .posts-grid--latest {
        gap: var(--space-6);
    }

}

/* ========================================
   MOBILE FOOTER STYLES — Task 2.13
   Base (mobile) overrides — these apply at 0px+.
   They are overridden at 768px above.
   ======================================== */

/* Mobile: center text in footer columns */
.footer__col {
    text-align: center;
}

.footer__social {
    justify-content: center;
}

.footer__contact-item {
    justify-content: center;
    text-align: left; /* Keep address text left-aligned */
}

.footer__bottom-inner {
    text-align: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--space-1);
}

.footer__logo {
    display: flex;
    justify-content: center;
}

/* Undo center alignment at 768px+ */
@media (min-width: 768px) {

    .footer__col {
        text-align: left;
    }

    .footer__social {
        justify-content: flex-start;
    }

    .footer__contact-item {
        justify-content: flex-start;
    }

    .footer__bottom-inner {
        text-align: left;
        justify-content: space-between;
        flex-direction: row;
    }

    .footer__logo {
        display: block;
        justify-content: unset;
    }

    /* ========================================
       PHASE 4 PAGES — TABLET (768px+)
       ======================================== */

    /* Page Hero */
    .page-hero {
        padding: var(--space-14) 0 var(--space-12);
    }

    .page-hero__title {
        font-size: 2.75rem;
    }

    /* About Overview Grid */
    .overview-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-10);
    }

    .overview__text .section__title {
        font-size: 2rem;
    }

    /* Approach Grid */
    .approach-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-10);
        align-items: start;
    }

    .approach__content .section__title {
        font-size: 2rem;
    }

    /* Why Choose Us — side-by-side layout on tablet */
    .why-grid--split {
        flex-direction: row;
        gap: var(--space-8);
        align-items: flex-start;
    }

    .why__image-col {
        flex: 0 0 40%;
        max-width: 40%;
    }

    .why__content-col {
        flex: 1 1 60%;
    }

    .why__content .section__title {
        font-size: 2rem;
    }

    /* Vision Grid Expanded */
    .vision-grid--expanded {
        grid-template-columns: 1fr 1fr;
    }

    /* Team Grid — 2 columns */
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Contact Grid */
    .contact-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-12);
    }

    /* Contact Form Row — 2 columns */
    .contact-form__row {
        grid-template-columns: 1fr 1fr;
    }

    /* Contact Map taller */
    .contact-map {
        height: 450px;
    }

}

/* ========================================
   PHASE 4 PAGES — DESKTOP (992px+)
   ======================================== */

@media (min-width: 992px) {

    /* Page Hero */
    .page-hero__title {
        font-size: 3rem;
    }

    /* About Overview */
    .overview__text .section__title {
        font-size: 2.25rem;
    }

    /* Approach Section */
    .approach__content .section__title {
        font-size: 2.25rem;
    }

    /* Why Choose Us */
    .why-grid--split {
        gap: var(--space-10);
    }

    .why__image-col {
        flex: 0 0 42%;
        max-width: 42%;
    }

    .why__content .section__title {
        font-size: 2.25rem;
    }

    /* Team Grid — 3 columns */
    .team-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Contact Grid — adjust proportions */
    .contact-grid {
        grid-template-columns: 1.2fr 0.8fr;
    }

}

/* ========================================
   PHASE 4 PAGES — LARGE DESKTOP (1200px+)
   ======================================== */

@media (min-width: 1200px) {

    /* Page Hero larger padding */
    .page-hero {
        padding: var(--space-16) 0 var(--space-14);
    }

    .page-hero__title {
        font-size: 3.5rem;
    }

    /* Overview Grid larger gap */
    .overview-grid {
        gap: var(--space-12);
    }

    .overview__text .section__title {
        font-size: 2.5rem;
    }

    /* Approach Grid */
    .approach-grid {
        gap: var(--space-12);
    }

    /* Team Grid — 4 columns for large team */
    .team-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Contact Map taller */
    .contact-map {
        height: 500px;
    }

}

/* ========================================
   PHASE 5: SERVICES PAGES — TABLET (768px+)
   ======================================== */

@media (min-width: 768px) {

    /* Services Landing Grid — 2 columns */
    .services-landing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Why Services Grid — 2 columns */
    .why-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Service Detail Grid — sidebar layout */
    .service-detail-grid {
        grid-template-columns: 1fr 300px;
        gap: var(--space-8);
    }

    /* Service intro side-by-side */
    .service-detail__intro {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-6);
    }

    /* Related projects 2 columns */
    .related-projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* REDESIGNED SERVICE PAGES */

    /* Why Choose Grid - 2 columns */
    .why-choose-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Service Features Grid - 2 columns */
    .service-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Other Services Grid - 2 columns */
    .other-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Service Hero - two column layout */
    .service-hero {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
    }

    .service-hero__content {
        order: 1;
    }

    .service-hero__image {
        order: 2;
    }

}

/* ========================================
   PHASE 5: SERVICES PAGES — DESKTOP (992px+)
   ======================================== */

@media (min-width: 992px) {

    /* Services Landing Grid — 3 columns */
    .services-landing-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Why Services Grid — 4 columns */
    .why-services-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Service Detail Grid — wider sidebar */
    .service-detail-grid {
        grid-template-columns: 1fr 340px;
        gap: var(--space-10);
    }

    /* Service features in 2 columns */
    .service-features-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

    /* Related projects 3 columns */
    .related-projects-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* REDESIGNED SERVICE PAGES */

    /* Service Features Grid - 3 columns */
    .service-features-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-6);
    }

    /* Service Hero - more spacing */
    .service-hero {
        gap: var(--space-10);
    }

    .service-hero__lead {
        font-size: var(--text-2xl);
    }

    /* Related projects in other-services section */
    .section--related-projects .related-projects-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}

/* ========================================
   PHASE 5: SERVICES PAGES — LARGE DESKTOP (1200px+)
   ======================================== */

@media (min-width: 1200px) {

    /* Service Detail larger spacing */
    .section--service-detail {
        padding-top: var(--space-14);
        padding-bottom: var(--space-14);
    }

    .service-detail__icon {
        width: 120px;
        height: 120px;
    }

    .service-detail__icon svg {
        width: 72px;
        height: 72px;
    }

    .service-detail__intro-text .lead {
        font-size: var(--text-2xl);
    }

    /* REDESIGNED SERVICE PAGES */

    /* Service Hero - larger image area */
    .service-hero__image {
        max-height: 450px;
    }

    .service-hero__image img {
        height: 100%;
        object-fit: cover;
    }

    /* Service Card V2 - taller image */
    .service-card-v2__image {
        height: 260px;
    }

}

/* ========================================
   SERVICE CARDS V3 RESPONSIVE
   ======================================== */

@media (min-width: 640px) {
    .services-grid-v3 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }

    .service-card-v3__image img {
        height: 240px;
    }
}

@media (min-width: 992px) {
    .services-grid-v3 {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-8);
    }

    .service-card-v3__image img {
        height: 260px;
    }

    .service-card-v3__title {
        font-size: var(--text-lg);
    }
}

@media (min-width: 1200px) {
    .service-card-v3__image img {
        height: 300px;
    }

    .service-card-v3__title {
        font-size: var(--text-xl);
    }
}

/* ========================================
   PHASE 6: PROJECTS ARCHIVE & SINGLE
   ======================================== */

/* Tablet (768px+) */
@media (min-width: 768px) {

    /* Archive grid — 2 columns */
    .section--projects-archive .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Single project gallery — 3 columns */
    .project__gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .project__gallery-item img {
        height: 180px;
    }

    /* Single project layout — sidebar */
    .project-layout {
        grid-template-columns: 1fr 280px;
    }
}

/* Desktop (992px+) */
@media (min-width: 992px) {

    /* Archive grid — 3 columns */
    .section--projects-archive .projects-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Single project layout — wider sidebar */
    .project-layout {
        grid-template-columns: 1fr 320px;
        gap: var(--space-10);
    }

    /* Gallery — 3 columns, taller */
    .project__gallery-item img {
        height: 220px;
    }
}

/* Large desktop (1200px+) */
@media (min-width: 1200px) {

    /* Single project layout — even wider sidebar */
    .project-layout {
        grid-template-columns: 1fr 360px;
        gap: var(--space-12);
    }

    .project__gallery-item img {
        height: 250px;
    }
}

/* ==========================================================================
   PHASE 7 — BLOG RESPONSIVE
   ========================================================================== */

/* Tablet (768px+) */
@media (min-width: 768px) {

    .blog-layout {
        grid-template-columns: 1fr 280px;
        gap: var(--space-12);
    }

    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .search-results-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .case-studies-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .post__related-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .post__author {
        flex-direction: row;
    }

    .post__share-links {
        gap: var(--space-3);
    }

    .search-form__group {
        display: flex;
        gap: var(--space-2);
    }
}

/* Desktop (992px+) */
@media (min-width: 992px) {

    .blog-layout {
        grid-template-columns: 1fr 320px;
        gap: var(--space-16);
    }

    .case-studies-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .post__related-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Large desktop (1200px+) */
@media (min-width: 1200px) {

    .blog-layout {
        grid-template-columns: 1fr 360px;
    }
}

/* ==========================================================================
   PHASE 8 — PARTNER WITH US (RFP, CAREERS, JOB APPLICATION)
   ========================================================================== */

/* Tablet (768px+) */
@media (min-width: 768px) {

    /* RFP intro title — scale up */
    .rfp-intro__title {
        font-size: 2rem;
    }

    /* RFP form — wider on tablet */
    .rfp-form {
        max-width: 720px;
    }

    /* Careers intro text slightly larger */
    .careers-intro__text {
        font-size: 1.125rem;
    }

    /* Jobs heading — scale up */
    .section--jobs .section__heading--center {
        font-size: 2rem;
    }
}

/* Desktop (992px+) */
@media (min-width: 992px) {

    .rfp-intro__title {
        font-size: 2.25rem;
    }

    .rfp-form {
        max-width: 800px;
    }

    .section--jobs .section__heading--center {
        font-size: 2.25rem;
    }
}

/* Large desktop (1200px+) */
@media (min-width: 1200px) {

    .rfp-intro__title {
        font-size: 2.5rem;
    }
}

/* ==========================================================================
   PHASE 9 — GLOBAL RESPONSIVE POLISH
   ========================================================================== */

/* ---- Horizontal overflow prevention ---- */

html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

/* ---- Touch target minimums (44x44px) ---- */

/* Ensure all interactive elements meet the WCAG 44x44px touch target minimum */
.btn-primary,
.btn-secondary,
.btn-accent,
.btn-outline,
.btn-outline--white {
    min-height: 44px;
    min-width: 44px;
}

.nav__toggle {
    min-width: 44px;
    min-height: 44px;
}

.nav__mobile-close {
    min-width: 44px;
    min-height: 44px;
}

.hero-slider__arrow {
    min-width: 44px;
    min-height: 44px;
}

.hero-slider__dot {
    min-width: 44px;
    min-height: 44px;
}

.testimonials-dot {
    min-width: 44px;
    min-height: 44px;
}

.footer__social-link {
    min-width: 44px;
    min-height: 44px;
}

.header__topbar-social-link {
    min-width: 44px;
    min-height: 44px;
}

.pagination li a,
.pagination li span {
    min-width: 44px;
    min-height: 44px;
}

.filter-bar__btn {
    min-height: 44px;
}

/* ---- Container max-width safeguard at 1440px+ ---- */

@media (min-width: 1400px) {

    .container {
        padding-right: var(--space-6);
        padding-left: var(--space-6);
    }
}

/* ---- Typography scale-up for desktop headings ---- */

@media (min-width: 992px) {

    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.5rem;
    }
}

@media (min-width: 1200px) {

    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 2.25rem;
    }
}