/* ============================================================
   RESPONSIVE STYLES — Mobile-first breakpoints
   ============================================================
   Breakpoints:
     sm:  640px   (large phones, landscape)
     md:  768px   (tablets)
     lg:  1024px  (laptops)
     xl:  1280px  (large screens)
   ============================================================ */


/* ── Navigation ─────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .nav__toggle {
    display: flex;
    z-index: 10;
  }

  .nav__menu {
    position: fixed;
    inset: 0;
    background-color: var(--color-bg);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--sp-2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 5;
  }

  .nav__menu.is-open {
    opacity: 1;
    pointer-events: all;
  }

  .nav__link {
    font-size: var(--text-2xl);
    font-family: var(--font-heading);
    font-weight: 300;
    color: var(--color-text);
    padding: var(--sp-2) var(--sp-4);
  }

  .nav__link--cta {
    font-size: var(--text-sm);
    margin-top: var(--sp-2);
  }

  /* Force dark toggle spans when menu is open */
  .nav__toggle[aria-expanded="true"] span {
    background-color: var(--color-text) !important;
  }
}


/* ── Hero ────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .hero__heading {
    font-size: clamp(2.4rem, 10vw, 4rem);
  }

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

  .hero__cta .btn {
    width: 100%;
    max-width: 320px;
  }

  .lightbox__prev { left: var(--sp-1); }
  .lightbox__next { right: var(--sp-1); }
}


/* ── Portfolio Grid ──────────────────────────────────────────── */

@media (max-width: 1023px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .portfolio-item--featured {
    grid-column: span 2;
  }
}

@media (max-width: 639px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-item--featured {
    grid-column: span 1;
  }
}


/* ── About Section ───────────────────────────────────────────── */

@media (max-width: 1023px) {
  .about__layout {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .about__text {
    padding-left: 0;
  }

  .about__images--two {
    grid-template-columns: 1fr 1fr;
  }

  .about__images--two .about__image-item:first-child {
    grid-row: auto;
  }
}

@media (max-width: 639px) {
  .about__images--two,
  .about__images--three {
    grid-template-columns: 1fr;
  }

  .about__images--three .about__image-item:first-child {
    grid-column: auto;
  }
}


/* ── Services Grid ───────────────────────────────────────────── */

@media (max-width: 1023px) {
  .services-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-inline: auto;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }

  .services-grid .service-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 520px;
    margin-inline: auto;
  }
}


/* ── Process Steps ───────────────────────────────────────────── */

@media (max-width: 767px) {
  .process-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-6);
  }

  .process-steps::before {
    display: none;
  }
}

@media (max-width: 479px) {
  .process-steps {
    grid-template-columns: 1fr;
  }
}


/* ── Pricing Cards ───────────────────────────────────────────── */

@media (max-width: 1023px) {
  .pricing-cards {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .pricing-cards {
    grid-template-columns: repeat(3, 1fr);
    max-width: 100%;
  }
}


/* ── Testimonials ────────────────────────────────────────────── */

@media (max-width: 767px) {
  .testimonial-item {
    padding-inline: var(--sp-2);
  }

  .testimonial-item__text {
    font-size: var(--text-xl);
  }
}


/* ── FAQ ─────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .faq-answer {
    padding-right: 0;
  }
}


/* ── Footer ──────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
  }

  .footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 639px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--sp-2);
  }
}


/* ── Form Grid ───────────────────────────────────────────────── */

@media (max-width: 639px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-group--full {
    grid-column: 1;
  }

  .form-section-title {
    grid-column: 1;
  }
}


/* ── Booking page layout ─────────────────────────────────────── */

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

  .booking-sidebar {
    order: -1;
  }
}


/* ── Pricing page layout ─────────────────────────────────────── */

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

  .pricing-tier--featured {
    order: -1;
  }

  .addons-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ── Grid utilities ──────────────────────────────────────────── */

@media (max-width: 1023px) {
  .grid-2 {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

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

@media (max-width: 639px) {
  .grid-3 {
    grid-template-columns: 1fr;
  }
}


/* ── CTA Banner ──────────────────────────────────────────────── */

@media (max-width: 767px) {
  .cta-banner__actions {
    flex-direction: column;
    align-items: center;
  }

  .cta-banner__actions .btn {
    width: 100%;
    max-width: 320px;
  }
}


/* ── Lightbox ────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .lightbox {
    padding: var(--sp-2);
    align-items: flex-end;
  }

  .lightbox__inner {
    max-height: 90svh;
  }

  .lightbox__caption {
    padding-inline: var(--sp-2);
  }

  .lightbox__nav {
    width: 40px;
    height: 40px;
  }
}


/* ── Recent Works & Kind Words — responsive ──────────────────── */

@media (max-width: 1023px) {
  .work-card {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
    padding-block: var(--sp-10);
  }

  /* Reset alternating order on mobile — image always on top */
  .work-card:nth-child(even) .work-card__image { order: 0; }
  .work-card:nth-child(even) .work-card__quote  { order: 0; }

  .work-card__quote {
    padding: var(--sp-2) 0;
  }
}

/* ── Hero tags — responsive ──────────────────────────────────── */

@media (max-width: 639px) {
  .hero__tags {
    gap: var(--sp-1);
  }

  .hero__tag {
    font-size: 0.6rem;
    padding: 3px 8px;
  }

  .press-bar__logos {
    gap: var(--sp-5);
  }

  .press-bar__divider {
    display: none;
  }
}


/* ── Quote Builder responsive ────────────────────────────────── */

/* Stack layout on tablet and below */
@media (max-width: 1023px) {
  .qb-layout {
    grid-template-columns: 1fr;
  }

  .qb-estimate {
    position: static;
    order: -1; /* panel sits above form on mobile */
  }

  .qb-estimate__inner {
    padding: var(--sp-4);
  }

  .qb-estimate__summary {
    min-height: auto;
  }
}

/* Single-column options on small phones */
@media (max-width: 639px) {
  .qb-options--2col {
    grid-template-columns: 1fr;
  }

  .qb-step__heading {
    font-size: 1.3rem;
  }

  .qb-nav {
    flex-direction: column-reverse;
  }

  .qb-nav .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}