/*
==========================================================
   MoversPro - Responsive Stylesheet
   Version: 1.1.0
==========================================================
   Every width-based breakpoint in the template lives in
   this one file, so you can retune the layout without
   hunting through the component modules.

   Breakpoints (max-width, largest first)
   --------------------------------------
   1400px   Large desktop / small laptop
   1200px   Laptop
   992px    Tablet landscape  <- primary nav collapses here
   860px    Tablet portrait
   768px    Large phone landscape
   640px    Phone
   480px    Small phone
   380px    Very small phone (iPhone SE, Galaxy Fold outer)

   Plus: pointer/hover queries, reduced motion, print.
==========================================================
*/

/* Content + sidebar layout (blog, contact, quote, service detail).
   Base rule — the breakpoint that collapses it is further down. */
.grid-sidebar {
  display: grid;
  grid-template-columns: var(--grid-sidebar-cols, 2fr 1fr);
  gap: var(--space-10);
}


/* ==========================================================
   1400px — Large desktop
========================================================== */
@media (max-width: 1400px) {
  .hero-grid { gap: var(--space-12); }

  .logo-strip { gap: var(--space-6); }

  .quick-quote { padding: var(--space-6); }
}


/* ==========================================================
   1200px — Laptop
========================================================== */
@media (max-width: 1200px) {
  /* Home: five credentials no longer fit on one line. */
  .credential-list { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
  .credential-list li:nth-child(4) { padding-left: 0; border-left: 0; }

  .header .container { height: 76px; }

  .header-cta .call-info small { display: none; }

  .nav-link { padding-inline: 0.65rem; }

  .hero-grid { gap: var(--space-10); }

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

  .quick-quote form .btn { grid-column: 1 / -1; }

  .logo-strip { grid-template-columns: repeat(4, 1fr); }

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

  .footer-newsletter { grid-column: 1 / -1; }

  .grid-sidebar { gap: var(--space-8); }

  /* Move Planner: inventory grid loses a column before the tablet break */
  .planner-inventory { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .tracking-layout { gap: var(--space-8); }
}


/* ==========================================================
   1100px — the phone CTA no longer fits beside the full nav
========================================================== */
@media (max-width: 1100px) {
  .header-cta { display: none; }
}


/* ==========================================================
   992px — Tablet landscape (primary nav collapses)
========================================================== */
@media (max-width: 992px) {
  /* Home sections */
  .route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .specialty-layout { grid-template-columns: 1fr; }
  .work-strip { grid-template-columns: repeat(3, 1fr); }

  :root {
    --section-y: 4rem;
  }

  .nav,
  .header-cta {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
  }

  /* Hero */
  .hero-grid,
  .hero--estimate .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
    text-align: center;
  }

  /* The estimator reads as a form, so its labels stay left-aligned
     even where the surrounding hero copy centres. */
  .hero-estimate {
    text-align: left;
  }

  .hero-content .lead {
    margin-inline: auto;
  }

  .hero-actions,
  .hero-trust {
    justify-content: center;
  }

  .hero-visual {
    max-width: 500px;
    margin: 0 auto;
  }

  .hero-badge.badge-top { left: 0; }
  .hero-badge.badge-bottom { right: 0; }

  .cinematic-hero {
    min-height: auto;
    padding: 100px 0 84px;
  }

  /* Section grids */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .stat-item {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: var(--space-6);
  }

  .stat-item:nth-last-child(-n + 2) { border-bottom: none; }

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

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

  /* A two-column grid nested inside another two-column grid ends up four
     tracks wide — far too narrow for a feature block with an icon. */
  .grid-2 .grid-2,
  .grid-3 .grid-2 {
    grid-template-columns: 1fr;
  }

  .grid-sidebar {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .footer-newsletter { grid-column: auto; }

  .about-media {
    max-width: 500px;
    margin: 0 auto var(--space-10);
  }

  .topbar-left { display: none; }

  .logo-strip {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }

  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  /* Lightbox controls move below the image once the gutters vanish */
  .lightbox-close {
    top: -50px;
    right: 10px;
    width: 40px;
    height: 40px;
  }

  .lightbox-prev,
  .lightbox-next {
    top: auto;
    bottom: -60px;
    transform: none;
    width: 42px;
    height: 42px;
  }

  .lightbox-prev { left: calc(50% - 55px); }
  .lightbox-next { right: calc(50% - 55px); }

  /* Move Planner */
  .planner-layout {
    grid-template-columns: 1fr;
  }

  .planner-summary {
    position: static;
  }

  .planner-steps {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .planner-steps::-webkit-scrollbar { display: none; }

  /* Tracking */
  .tracking-layout {
    grid-template-columns: 1fr;
  }

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

  /* Careers */
  .job-card {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .job-card .job-apply {
    justify-self: start;
  }
}


/* ==========================================================
   860px — Tablet portrait
========================================================== */
@media (max-width: 860px) {
  .section-head h2 { font-size: clamp(1.75rem, 4.5vw, 2.25rem); }

  .pricing-card.featured { transform: none; }

  .testimonial-card { padding: var(--space-6); }

  .gallery-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .checklist-layout { grid-template-columns: 1fr; }

  .checklist-progress { position: static; }
}


/* ==========================================================
   768px — Large phone landscape
========================================================== */
@media (max-width: 768px) {
  .credential-list { grid-template-columns: repeat(2, 1fr); }
  .credential-list li { padding-left: 0; border-left: 0; }
  .tool-card { padding: var(--space-5); }

  .section-head { margin-bottom: var(--space-10); }

  .process-grid { gap: var(--space-8); }

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

  .blog-meta { gap: var(--space-3); font-size: var(--fs-xs); }

  .planner-inventory { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .planner-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .planner-actions .btn { width: 100%; }

  .tracking-timeline { padding-left: 8px; }

  .job-filters { overflow-x: auto; }

  .legal-layout { grid-template-columns: 1fr; }

  .legal-toc {
    position: static;
    margin-bottom: var(--space-8);
  }
}


/* ==========================================================
   640px — Phone
========================================================== */
@media (max-width: 640px) {
  .credential-list { grid-template-columns: 1fr; gap: var(--space-4); }
  .route-grid { grid-template-columns: 1fr; }
  .specialty-grid { grid-template-columns: 1fr; }
  .work-strip { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }

  .topbar { display: none; }

  .header .container { height: 68px; }

  .logo { font-size: 1.25rem; }

  .logo-mark { width: 36px; height: 36px; font-size: 1rem; }

  .grid-2,
  .grid-3,
  .grid-4,
  .process-grid,
  .stats-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .stat-item:nth-last-child(-n + 2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .stat-item:last-child { border-bottom: none; }

  .hero-content h1 { font-size: 2.25rem; }

  .hero-badge { padding: var(--space-3); }
  .hero-badge strong { font-size: 1rem; }

  /* The badge hangs 20px outside its photo on desktop; on a phone that
     20px lands outside the viewport. Tuck it back in. */
  .about-media .experience-badge {
    right: 0;
    bottom: 0;
    padding: var(--space-4) var(--space-5);
  }

  .about-media .experience-badge .years { font-size: 2.25rem; }

  .cinematic-hero {
    padding: 84px 0 72px;
  }

  .cinematic-hero__badges {
    gap: 12px;
    font-size: 0.85rem;
  }

  .cinematic-hero__lead { font-size: 1.02rem; }

  .quick-quote {
    margin-top: -40px;
    padding: var(--space-5);
  }

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

  .hero-actions .btn {
    flex: 1;
    padding: 0.875rem 1rem;
    font-size: var(--fs-xs);
  }

  .pricing-card,
  .service-card {
    padding: var(--space-6);
  }

  .cta-banner {
    padding: var(--space-8);
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .footer-bottom ul {
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .accordion-trigger {
    padding: var(--space-4);
    font-size: 0.9375rem;
  }

  .accordion-content-inner {
    padding: 0 var(--space-4) var(--space-4);
    font-size: var(--fs-small);
  }

  .back-to-top,
  .chat-bubble {
    right: 16px;
  }

  .chat-bubble {
    bottom: 84px;
    width: 48px;
    height: 48px;
    font-size: 1.125rem;
  }

  .cookie-banner {
    left: 12px;
    right: 12px;
    padding: var(--space-4);
  }

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

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

  /* Testimonial slider: full-bleed slides, no peeking neighbours */
  .testimonial-card { padding: var(--space-6); }
  .testimonial-card p { font-size: 1rem; }
  [data-slider] .slider-track { gap: 16px !important; }
  [data-slider] .slide { padding: 0 !important; }

  .planner-inventory { grid-template-columns: 1fr; }

  .planner-step-head h3 { font-size: 1.25rem; }

  .planner-summary-row { font-size: var(--fs-small); }

  .tracking-event-table thead { display: none; }

  .tracking-event-table tr {
    display: grid;
    gap: 2px;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
  }

  .tracking-event-table td { padding: 0; border: none; }

  .tracking-event-table td::before {
    content: attr(data-label) ': ';
    font-weight: 600;
    color: var(--color-heading);
  }

  .checklist-week-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .countdown-grid { gap: var(--space-3); }
  .countdown-cell { min-width: 66px; padding: var(--space-4) var(--space-2); }
}


/* ==========================================================
   480px — Small phone
========================================================== */
@media (max-width: 480px) {
  :root {
    --section-y: 3.25rem;
  }

  .hero-content h1 { font-size: 2rem; }

  .page-hero h1 { font-size: 1.9rem; }

  .section-head h2 { font-size: 1.6rem; }

  .hero-trust { gap: var(--space-4); }

  .gallery-stats-grid { grid-template-columns: 1fr; }

  .lightbox-content img { max-height: 70vh; }

  .pricing-toggle { width: 100%; justify-content: center; }

  .blog-card .blog-body { padding: var(--space-5); }

  .planner-steps { gap: 6px; }
  .planner-step-tab { font-size: 0.75rem; padding: 8px 10px; }

  .tracking-stage-label { font-size: 0.75rem; }

  .countdown-grid { flex-wrap: wrap; justify-content: center; }
}


/* ==========================================================
   380px — Very small phone
========================================================== */
@media (max-width: 380px) {
  .btn {
    padding: 0.75rem 1.25rem;
    font-size: var(--fs-xs);
  }

  .header-actions .theme-toggle,
  .header-actions .search-toggle {
    display: none;
  }

  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }

  .logo-strip { grid-template-columns: 1fr; }

  .planner-counter { gap: 6px; }
}


/* ==========================================================
   Short viewports (phone in landscape)
========================================================== */
@media (max-height: 520px) and (orientation: landscape) {
  .hero,
  .cinematic-hero {
    min-height: auto;
    padding-block: 3.5rem;
  }

  .mobile-menu { overflow-y: auto; }

  .lightbox-content img { max-height: 68vh; }
}


/* ==========================================================
   Coarse pointers — hover effects would stick on touch
========================================================== */
@media (hover: none) {
  /* Icon-only controls need a finger-sized hit area (WCAG 2.5.5). */
  .topbar-social a {
    width: 40px;
    height: 40px;
  }

  .gallery-item .gallery-caption,
  .gallery-item .gallery-zoom {
    opacity: 1;
    transform: none;
  }

  .gallery-item::after { opacity: 0.55; }

  .team-card .team-social { opacity: 1; transform: none; }
}


/* ==========================================================
   Print — planner summary and checklist are meant to be printed
========================================================== */
@media print {
  .topbar,
  .header,
  .mobile-menu,
  .mobile-overlay,
  .preloader,
  .footer,
  .cta-banner,
  .back-to-top,
  .chat-bubble,
  .cookie-banner,
  .search-overlay,
  .cursor-dot,
  .cursor-ring,
  .no-print {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .section { padding-block: 1rem; }

  a[href^="http"]::after {
    content: ' (' attr(href) ')';
    font-size: 0.75em;
    color: #555;
  }

  .planner-summary,
  .checklist-week {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}