/* =========================================================
   responsive.css — Tablet & mobile polish for all pages
   Breakpoints:
     991px  = tablet (≤ iPad landscape)
     767px  = tablet portrait / large phone
     479px  = small phone
   ========================================================= */

/* ── Global touch/viewport safety ── */
html {
  -webkit-text-size-adjust: 100%;
}

img, video {
  max-width: 100%;
}

/* Prevent any horizontal scroll from overflow */
body {
  overflow-x: hidden;
}

/* ── Typography scaling ── */
@media (max-width: 767px) {
  .h1 {
    font-size: clamp(2rem, 8vw, 2.6rem);
  }
  .h2 {
    font-size: clamp(1.6rem, 6vw, 2.1rem);
  }
  .h3 {
    font-size: clamp(1.05rem, 4vw, 1.3rem);
  }
  .paragraph,
  .paragraph-lg {
    font-size: 1rem;
  }
}

/* ── Section padding reduction on mobile ── */
@media (max-width: 767px) {
  :root {
    --section-pad: clamp(48px, 10vw, 72px);
    --section-pad-x: 20px;
  }
}

@media (max-width: 479px) {
  :root {
    --section-pad: 48px;
    --section-pad-x: 16px;
  }
}

/* ── Hero: inner-page (bg-image) ── */
@media (max-width: 767px) {
  .hero-section-wrapper:not(:has(.hero-grid)) {
    min-height: 55vh;
  }

  .hero-section-wrapper .hero-content,
  .hero-section-wrapper .about-hero-content {
    padding: 48px 20px;
  }

  .hero-section-wrapper .h1 {
    font-size: clamp(1.85rem, 7vw, 2.5rem);
  }

  .hero-section-wrapper .hero-content .hero-para,
  .hero-section-wrapper .hero-content .hero-sub,
  .hero-section-wrapper .about-hero-content .hero-para {
    font-size: 0.97rem;
    max-width: 100%;
  }

  .hero-btn {
    margin-top: 20px;
  }
}

/* ── Hero: home split layout ── */
@media (max-width: 991px) {
  .hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-content-wrapper {
    order: 2;
    justify-content: center;
    padding: 40px 24px 48px;
  }

  .hero-content-div {
    align-items: center;
    text-align: center;
    max-width: 100%;
  }

  /* Keep paragraph centered on tablet/mobile for home */
  .hero-section-wrapper .hero-content-div .hero-para {
    text-align: center;
    max-width: 52ch;
  }

  .hero-img {
    order: 1;
    min-height: 300px;
    max-height: 480px;
  }
}

@media (max-width: 479px) {
  .hero-content-wrapper {
    padding: 32px 16px 40px;
  }

  .hero-img {
    min-height: 240px;
    max-height: 320px;
  }
}

/* ── Home: About split ── */
@media (max-width: 991px) {
  .home-about .div-block {
    flex-flow: column;
    gap: 28px;
  }

  .image-2 {
    width: 100%;
    max-height: 360px;
    object-fit: cover;
  }

  .div-block-2 {
    max-width: 100%;
    gap: 20px;
  }
}

/* ── Home services cards ── */
@media (max-width: 991px) {
  .home-services-grid-wrapper {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

@media (max-width: 600px) {
  .home-services-grid-wrapper {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── Home: why signify stats tiles ── */
@media (max-width: 991px) {
  .home-work-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

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

/* ── Portfolio marquee slides ── */
@media (max-width: 767px) {
  .work-slide {
    width: min(300px, 72vw);
  }
  .work-slide img {
    height: 200px;
  }
}

@media (max-width: 479px) {
  .work-slide {
    width: min(240px, 80vw);
  }
  .work-slide img {
    height: 168px;
  }
}

/* ── Testimonials / reviews grid ── */
@media (max-width: 900px) {
  .sv-reviews__grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 767px) {
  .sv-reviews__google-badge {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 12px 16px;
  }
}

/* ── How-it-works / process grid ── */
@media (max-width: 900px) {
  .sv-process__grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── Service page: second section grids
   (handled by polish.css !important, but extra mobile fixes) ── */
@media (max-width: 767px) {
  .custom-grid,
  .benefits-grid,
  .why-grid {
    margin-top: 32px !important;
    gap: 24px !important;
  }

  .benefit-grid-2x2 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ── Vehicle wraps: product cards ── */
@media (max-width: 991px) {
  .cards-3 {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .service-section--divider {
    margin-top: 48px;
    padding-top: 48px;
  }
}

@media (max-width: 600px) {
  .cards-3 {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── Building signage: types grid ── */
@media (max-width: 767px) {
  .types-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  .type-card[style*="grid-column"] {
    grid-column: span 1 !important;
  }
}

/* ── Signage types section: center header text ── */
@media (max-width: 767px) {
  .section-signage-types .center-div {
    padding: 0 8px;
  }
}

/* ── Portfolio marquee (service pages) ── */
@media (max-width: 767px) {
  .portfolio-marquee-track .work-slide {
    width: 280px;
  }

  .portfolio-marquee-track .work-slide img {
    height: 200px;
  }
}

@media (max-width: 479px) {
  .portfolio-marquee-track .work-slide {
    width: 220px;
  }

  .portfolio-marquee-track .work-slide img {
    height: 156px;
  }
}

/* ── FAQ ── */
@media (max-width: 767px) {
  .faq-card {
    padding: 16px 0;
  }

  .faq-header .h3.semi-bold {
    font-size: 0.98rem;
  }
}

/* ── CTA section ── */
@media (max-width: 991px) {
  .cta-layout {
    flex-flow: column;
    gap: 40px;
    align-items: stretch;
  }

  .cta-left {
    max-width: 100%;
    align-items: center;
    text-align: center;
  }

  .cta-left .h2 {
    text-align: center;
  }

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

  .cta-form-card {
    max-width: 100%;
  }
}

@media (max-width: 479px) {
  .cta-form-card {
    padding: 28px 20px;
  }

  .footer-name-grid {
    grid-template-columns: 1fr;
  }

  .service-options {
    flex-direction: column;
  }

  .service-option {
    min-width: 100%;
  }
}

/* ── Contact page ── */
@media (max-width: 991px) {
  .contact-layout {
    flex-flow: column;
    align-items: stretch;
    gap: 32px;
  }

  .contact-left {
    max-width: 100%;
  }

  .cta-form-card {
    max-width: 100%;
  }
}

@media (max-width: 479px) {
  .contact-card {
    padding: 16px 18px;
    gap: 12px;
  }
}

/* ── About page ── */
@media (max-width: 991px) {
  .stats-grid {
    max-width: 100%;
  }

  .why-us-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

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

  .why-us-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }

  .vision-image-wrapper img {
    height: clamp(200px, 50vw, 320px);
  }
}

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

  .stat-card::after {
    display: none;
  }

  .stat-card:not(:last-child) {
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 20px;
  }
}

/* ── Footer ── */
@media (max-width: 767px) {
  .wrapper.footer {
    padding: 48px 20px 36px;
  }

  .div-block-15 {
    flex-flow: column;
    gap: 16px;
    align-items: center;
  }
}

/* ── Scroll indicator: hide on tiny screens ── */
@media (max-width: 479px) {
  .hero-scroll-indicator {
    display: none;
  }
}

/* ── Partner logos: scale on mobile ── */
@media (max-width: 767px) {
  .partner-logo-group {
    gap: 28px;
    padding: 0 20px;
  }

  .partner-img {
    max-height: 52px;
    max-width: 160px;
  }
}

/* ── Buttons: full-width on very small screens ── */
@media (max-width: 479px) {
  .button,
  .transparent-button,
  .submit-button {
    width: 100%;
    text-align: center;
  }

  /* But not nav buttons */
  .navbar-contact-button {
    width: auto;
  }
}

/* ── Quote page hub grid ── */
@media (max-width: 767px) {
  .quote-type-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .quote-hero {
    min-height: min(42vh, 320px);
  }

  .quote-hero h1 {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
  }
}

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

  .quote-page-head {
    margin-bottom: 32px;
  }

  .quote-progress {
    flex-direction: column;
  }

  .quote-progress__step {
    border-right: none;
    border-bottom: 1px solid var(--quote-border, rgba(0,0,0,0.1));
    width: 100%;
  }

  .quote-progress__step:last-child {
    border-bottom: none;
  }

  .product-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .cross-nav-links a,
  .cross-nav-links span {
    width: 100%;
    text-align: center;
  }
}

/* ── Home services card: image responsive ── */
@media (max-width: 767px) {
  .home-services-img {
    min-height: 160px;
  }
}

/* ── Eyebrow: ensure it doesn't overflow ── */
@media (max-width: 479px) {
  .sv-eyebrow,
  .sv-label {
    font-size: 0.65rem;
    letter-spacing: 0.15em;
  }
}

/* ── Wrapper padding override for very small screens ── */
@media (max-width: 479px) {
  .wrapper {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Don't override portfolio full-bleed */
  #portfolio.wrapper {
    padding-left: 0;
    padding-right: 0;
  }
}