/* ==========================================================================
   Maple Car Broker — Responsive Overrides
   Mobile-first breakpoints layered on top of style.css
   ========================================================================== */

/* Laptop / small desktop */
@media (max-width: 1080px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .testimonial-v2-card:last-child {
    grid-column: 1 / -1;
    max-width: 50%;
    margin-inline: auto;
  }

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

/* Tablet */
@media (max-width: 860px) {
  .logo img {
    height: 30px;
  }

  .brand-logo {
    width: 128px;
    height: 68px;
  }

  .brand-logo img {
    max-height: 26px;
  }

  .hero .container {
    grid-template-columns: 1fr;
    /* .hero .container's gap: var(--space-xl) (64px) is a column-gap on
       desktop's 2-column grid, meant to insert space just once between the
       copy block and the testimonial. Once .hero-copy below is promoted to
       display: contents, that single gap becomes a REPEATING 64px row-gap
       between every one of the six now-separate grid items (h1, paragraph,
       testimonial, CTA buttons, trust note, trust list) — stacking on top
       of each element's own margin and producing far more vertical space
       than intended. Zeroing it here lets each element's own margin (already
       sized correctly: h1's 24px margin-bottom, and the paragraph's 16px
       margin-bottom + .hero-media's 16px margin-top below) be the only
       source of spacing again. */
    gap: 0;
  }

  /* display: contents removes .hero-copy's own box so its children (h1,
     intro paragraph, CTA buttons, "No hidden fees" note, trust list) become
     direct items of .hero .container, right alongside .hero-media — which
     is what makes it possible to place the testimonial carousel between the
     intro paragraph and the CTA buttons using nothing but `order`, with
     zero duplicated markup. display: contents only affects box
     generation/layout, not the DOM tree these rules match against, so the
     selectors below (which target .hero-copy's real DOM children) still
     work normally. */
  .hero-copy {
    display: contents;
  }

  .hero-copy h1 {
    order: 1;
  }

  .hero-copy p {
    order: 2;
  }

  .hero-media {
    order: 3;
    /* Pairs with the intro paragraph's own space-sm bottom margin for ~32px
       of total separation above the carousel, without hardcoding a value
       outside the existing spacing scale. */
    margin-top: var(--space-sm);
  }

  .hero-actions {
    order: 4;
  }

  /* Higher specificity than the plain ".hero-copy p" rule above (class +
     element vs. class + descendant element), so this reliably wins and
     moves just the trust note after the CTA buttons instead of leaving it
     grouped with the intro paragraph at order: 2. */
  .hero-copy p.hero-trust-note {
    order: 5;
  }

  .hero-trust-list {
    order: 6;
  }

  .about-v2-grid {
    grid-template-columns: 1fr;
    /* The 96px desktop gap is meant to separate the two big columns, not
       every individual item once .about-v2-copy's children are promoted
       below — spacing between those items instead comes from their own
       margins (existing ones for eyebrow/title/paragraphs/stat/CTA, new
       ones added below just for the photo group). */
    gap: 0;
  }

  /* display: contents removes .about-v2-copy's own box so its children
     (eyebrow, h2, both paragraphs, stat row, CTA) become direct items of
     .about-v2-grid, right alongside .about-v2-media — which is what makes
     it possible to interleave the photo group between the title and the
     paragraphs using nothing but `order`, with zero duplicated markup.
     Their existing margins (h2/p's own margin-bottom, etc.) still apply
     normally, since display: contents only affects box generation, not the
     DOM tree these rules match against. */
  .about-v2-copy {
    display: contents;
  }

  /* IMPORTANT: these target .about-v2-copy (the element's REAL DOM parent),
     not .about-v2-grid. display: contents only changes how .about-v2-copy's
     children are rendered/laid out (promoting them into .about-v2-grid's
     box tree) — it does NOT change the actual DOM tree, and CSS child
     combinators like `>` are matched against real DOM ancestry, not the
     rendered box tree. `.about-v2-grid > h2` therefore never matches
     anything (h2's real parent is still .about-v2-copy), which silently
     left every one of these at the default order: 0 — only .about-v2-media
     (a genuine direct child of .about-v2-grid) ever got its order applied,
     which is why the image was landing dead last instead of moving. */
  .about-v2-copy > .eyebrow-star {
    order: 1;
  }

  .about-v2-copy > h2 {
    order: 2;
    /* ~24px gap from title to the photo group below it. */
    margin-bottom: var(--space-md);
  }

  .about-v2-media {
    order: 3;
    /* ~40px gap from the photo group to the first paragraph below it. */
    margin-bottom: var(--space-lg);
  }

  .about-v2-copy > p:nth-of-type(1) {
    order: 4;
  }

  .about-v2-copy > p:nth-of-type(2) {
    order: 5;
  }

  .about-v2-copy > .about-v2-stat-row {
    order: 6;
  }

  .about-v2-copy > .about-v2-cta {
    order: 7;
  }

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

  .consult-options {
    grid-template-columns: 1fr;
  }

  .consult-scheduler {
    grid-template-columns: 1fr;
  }

  .pricing-cards {
    grid-template-columns: 1fr;
  }

  .pricing-support-row {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .drawer {
    width: 65vw;
    min-width: 380px;
    max-width: none;
  }
}

/* Mobile navigation breakpoint — full-screen overlay, not a panel below the
   header. top: 0 (not var(--header-height)) so this covers the header's own
   screen area too; its own .mobile-nav-header (logo + close) replaces it
   visually while open. */
@media (max-width: 760px) {
  .mobile-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .nav-toggle {
    display: flex;
  }

  .main-nav {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh; /* dynamic viewport height where supported — the line above is the fallback for browsers that don't understand dvh */
    z-index: 9999;
    background-color: var(--color-background);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    gap: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--transition-base), transform var(--transition-base), visibility 0s linear var(--transition-base);
  }

  .main-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--transition-base), transform var(--transition-base);
  }

  .mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: var(--space-sm) var(--space-md);
    padding-top: max(var(--space-sm), env(safe-area-inset-top));
    border-bottom: 1px solid var(--color-border);
  }

  .mobile-nav-logo img {
    height: 40px;
  }

  .nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    font-size: 2rem;
    line-height: 1;
    transition: background-color var(--transition-fast);
  }

  .nav-close:hover {
    background-color: var(--color-background-secondary);
  }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-md) 0;
  }

  .nav-links a {
    font-size: 1.6rem;
    font-weight: 600;
    padding: var(--space-xs) 0;
    border-bottom: none;
  }

  .nav-cta {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
    margin-top: auto;
    padding: var(--space-lg) var(--space-md);
    padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom));
  }

  .nav-cta .btn {
    width: 100%;
  }
}

/* Small mobile */
@media (max-width: 640px) {
  .logo img {
    height: 26px;
  }

  /* A bit tighter at very narrow widths (e.g. 320px) so the logo, CTA, and
     hamburger all fit without crowding or wrapping. */
  .mobile-header-cta {
    padding: 0.4rem 0.65rem;
    font-size: 0.7rem;
  }

  /* Hero testimonial carousel: stop relying on the 4:3 aspect box (mobile
     content height varies with quote length) and stack photo above the
     quote, per the preferred mobile structure. Arrows move fully inside the
     card edges instead of overlapping outside them — at this width the
     overlap amount used on desktop could push them past the page's own
     padding and cause horizontal scroll. */
  .hero-media {
    aspect-ratio: auto;
  }

  .hero-testimonial,
  .hero-testimonial-card,
  .hero-testimonial-body {
    height: auto;
  }

  .hero-testimonial-body {
    flex-direction: column;
  }

  .hero-testimonial-photo-wrap {
    order: 1;
    flex: none;
    height: 220px;
  }

  .hero-testimonial-content {
    order: 2;
    flex: none;
    padding: var(--space-md);
    padding-bottom: var(--space-xl);
  }

  .hero-testimonial-arrow--prev {
    left: 8px;
  }

  .hero-testimonial-arrow--next {
    right: 8px;
  }

  .brand-marquee {
    padding-block: var(--space-md);
  }

  .brand-logo {
    width: 104px;
    height: 60px;
    padding-inline: var(--space-sm);
  }

  .brand-logo img {
    max-height: 22px;
  }

  .brand-marquee__viewport {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  }

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

  .testimonials-v2-grid {
    grid-template-columns: 1fr;
  }

  .testimonial-v2-card,
  .testimonial-v2-card:last-child {
    min-height: 0;
    max-width: none;
  }

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

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-actions,
  .final-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .section {
    padding-block: var(--space-xl);
  }

  .final-cta {
    margin-inline: 0;
    border-radius: var(--radius-md);
  }

  .legal-main {
    padding-block: var(--space-xl) var(--space-lg);
  }

  .legal-header {
    margin-bottom: var(--space-lg);
  }

  .consult-main {
    padding-block: var(--space-xl) var(--space-lg);
  }

  .consult-panel {
    padding: var(--space-md);
  }

  .consult-date-grid,
  .consult-time-grid {
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  }

  .consult-trust-list {
    gap: var(--space-md) var(--space-lg);
  }

  .pricing-card {
    padding: var(--space-lg) var(--space-md) var(--space-md);
  }

  .pricing-card__price {
    font-size: 2.25rem;
  }

  .pricing-badge {
    left: var(--space-md);
  }

  .compare-table th,
  .compare-table td {
    padding: 0.75rem 0.85rem;
  }

  .hiw-card-count {
    font-size: 2rem;
  }

  .hiw-step-card {
    padding: var(--space-md);
  }

  .about-v2-image--secondary {
    right: 0;
    bottom: -4%;
    width: 46%;
  }

  .about-v2-stat-row {
    gap: var(--space-lg);
  }

  .about-v2-trust-list {
    padding-left: var(--space-md);
  }

  .drawer {
    width: 100vw;
    min-width: 0;
    max-width: none;
    height: 100dvh;
  }

  .drawer-footer {
    flex-direction: column;
  }

  .drawer-progress-bar {
    width: 20px;
  }

  .drawer-progress-bar.is-active {
    width: 30px;
  }
}