/* ═══════════════════════════════════════════════════════════════════
   AnimArts — Mobile-only fixes
   ═══════════════════════════════════════════════════════════════════
   STRICT RULE: every selector in this file is wrapped in a max-width
   media query. Desktop styles are NEVER touched — what you see on
   1280px+ is identical to before this file existed.

   Loaded LAST (after responsive.css) so it wins the cascade for
   genuine mobile-specific overrides without needing !important spam.

   Breakpoints used:
     ≤ 1024px  tablet portrait + below
     ≤ 768px   most phones (default mobile)
     ≤ 600px   large phones (Plus/Pro/Max)
     ≤ 480px   medium phones (standard iPhone, Android)
     ≤ 360px   small phones (iPhone SE, older Android)

   Index of fixes (matches the audit punch-list):
     1. Hero stats 320–480px sizing
     2. Shop product 880px → 768px standard
     3. Calculator service nav 480px coverage
     4. Comparison table mobile padding + touch scroll
     5. Shop sticky gallery offset
     6. Quote modal width on small phones
     7. Page-blocks gallery cols-3/4 collapse
     8. Hero stats 320px collapse to 1-col
     9. Long-text overflow-wrap on titles
    10. Calculator addon grid 1-col
    11. Footer breakpoint smoothing
    12. Mobile menu max-height fix
    13. Touch target sizes (44px min)
    14. Blog featured card internal grid
    15. Service detail flex-direction reverse
    16. Lightbox mobile sizing
    17. iOS input zoom prevention (16px min)
    18. Universal horizontal-overflow guard
   ═══════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────────
   #18  Universal horizontal-overflow guard (top of file so other
   rules can re-enable scroll where genuinely needed, e.g. tables)
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  /* Anything trying to be wider than viewport → clamp it */
  body * {
    max-width: 100vw;
  }
  /* Grid + flex parents must NOT add their own max-width: 100vw
     because their children need to lay out beyond the viewport
     in the parent's natural dimensions — this only catches loose
     elements that escaped responsive design (long URLs, tables,
     iframe embeds). */
  .container,
  .container-narrow,
  .grid,
  .flex,
  [class*="grid-"],
  [class*="flex-"] {
    max-width: 100%;
  }
}


/* ──────────────────────────────────────────────────────────────────
   Container + section padding — keep reading width comfortable
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .container,
  .container-narrow {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    width: 100%;
    box-sizing: border-box;
  }
  /* Tighter section vertical rhythm on mobile so we don't waste
     half the screen on empty padding */
  section, .section {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
  }
}
@media (max-width: 480px) {
  .container,
  .container-narrow {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }
}


/* ──────────────────────────────────────────────────────────────────
   #17  iOS input-zoom prevention — fonts must be ≥ 16px on focus
   to stop iOS from zooming in on input. Most form inputs already
   inherit body font (16px) but admin / calc / quote inputs sometimes
   shrink — force them back up on mobile.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  input[type="date"],
  textarea,
  select {
    font-size: 16px !important;     /* override any var(--fs-sm) etc */
    /* Without this, iOS Safari zooms the entire page when input is
       focused — disorienting and ugly. 16px is the magic threshold. */
  }
}


/* ──────────────────────────────────────────────────────────────────
   #13  Touch targets — 44px minimum (Apple HIG) / 48dp (Material)
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .btn,
  .button,
  button:not(.btn-icon-only):not(.shop-slider-arrow):not(.faq-chevron),
  .nav-link,
  a.btn-primary,
  a.btn-secondary {
    min-height: 44px;
    padding-top: 12px;
    padding-bottom: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Block buttons (full-width on mobile) for primary actions */
  .btn.btn-block,
  .btn-cta-mobile,
  .quote-modal .btn-primary {
    width: 100%;
    min-height: 48px;
  }
  /* Icon-only buttons still get a tappable hit area */
  .btn-icon,
  .shop-slider-arrow,
  .modal-close,
  [aria-label*="close" i],
  [aria-label*="menu" i] {
    min-width: 44px;
    min-height: 44px;
  }
}


/* ──────────────────────────────────────────────────────────────────
   Typography scaling — keep headings readable but not overwhelming
   on small screens.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  h1, .h1 {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    line-height: 1.2;
  }
  h2, .h2 {
    font-size: clamp(1.5rem, 5vw, 2rem);
    line-height: 1.25;
  }
  h3, .h3 {
    font-size: clamp(1.25rem, 4.5vw, 1.625rem);
    line-height: 1.3;
  }
  h4, .h4 { font-size: 1.125rem; line-height: 1.35; }
  .section-title { font-size: clamp(1.5rem, 6vw, 2.25rem); }
  .section-subtitle { font-size: 1rem; line-height: 1.5; }
  .hero-title { font-size: clamp(2rem, 8vw, 3rem); }
  .hero-subtitle { font-size: clamp(0.95rem, 3.5vw, 1.125rem); }
}
@media (max-width: 480px) {
  h1, .h1, .hero-title { font-size: clamp(1.625rem, 7vw, 2.25rem); }
  h2, .h2 { font-size: clamp(1.375rem, 6vw, 1.875rem); }
  h3, .h3 { font-size: 1.25rem; }
  .section-title { font-size: 1.625rem; }
}


/* ──────────────────────────────────────────────────────────────────
   #9  Long-text overflow on cards + titles
   CRITICAL: use `overflow-wrap: anywhere` instead of `word-break:
   break-word`. The latter is non-standard and some browsers treat it
   like `break-all` — splitting "7 of 10 slots" into one character per
   line when the parent column is narrow. `overflow-wrap: anywhere`
   only breaks when a word genuinely can't fit, never mid-word for
   short text with spaces.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .shop-card-title,
  .shop-card-subtitle,
  .blog-card-title,
  .blog-card h2,
  .pricing-tier-title,
  .pricing-tier-name,
  .portfolio-card-title,
  .service-card-title,
  .service-title {
    overflow-wrap: anywhere;
    word-break: normal;             /* let browser default handle words */
    hyphens: auto;
  }
  /* Long URLs in body text */
  p, li, dd, .pb-text-body {
    overflow-wrap: anywhere;
    word-break: normal;
  }
  /* Code blocks need horizontal scroll, not break */
  pre, code {
    word-break: normal;
    overflow-wrap: normal;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ──────────────────────────────────────────────────────────────────
   #1, #8  Hero stats grid — 320px to 480px coverage
   Pichli responsive.css 480px pe 2-col rakhi thi, 320px phones
   pe (iPhone SE, Galaxy S8) numbers unreadable ho jate the.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }
  .hero-stats .stat-value,
  .hero-stats .stat-number {
    font-size: 1.5rem;
  }
  .hero-stats .stat-label {
    font-size: 0.75rem;
    line-height: 1.3;
  }
}
@media (max-width: 360px) {
  .hero-stats {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }
  .hero-stats .stat-value,
  .hero-stats .stat-number {
    font-size: 1.625rem;
  }
}


/* ──────────────────────────────────────────────────────────────────
   #2, #5  Shop product detail — fix 880px breakpoint + sticky
   gallery overlap with navbar on mobile.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .shop-detail-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .shop-detail-gallery {
    /* Was: position:sticky; top:100px → overlapped 72px navbar +
       40px banner = 112px total. On mobile we drop sticky entirely
       (gallery goes full-width above info, no need to stick). */
    position: static;
    top: auto;
  }
}
@media (max-width: 768px) {
  .shop-detail-gallery img,
  .shop-detail-gallery video {
    max-height: 60vh;
    object-fit: contain;
  }
  .shop-slider-counter {
    bottom: var(--space-sm);
    right: var(--space-sm);
    font-size: 0.75rem;
    padding: 4px 10px;
  }
  .shop-slider-arrow {
    width: 40px;
    height: 40px;
  }
}


/* ──────────────────────────────────────────────────────────────────
   #6  Quote modal — was max-width:720px; on phones overflowed by
   240px because no width:100% rule kicked in below 720px.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .quote-modal {
    width: calc(100vw - var(--space-md) * 2);
    max-width: 100%;
    margin: var(--space-md) var(--space-md);
    max-height: calc(100vh - var(--space-xl) * 2);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .quote-modal-body {
    padding: var(--space-lg) var(--space-md);
  }
  .quote-modal h2,
  .quote-modal .modal-title {
    font-size: 1.25rem;
  }
  .quote-modal label {
    font-size: 0.95rem;
  }
}
@media (max-width: 480px) {
  .quote-modal {
    width: calc(100vw - var(--space-sm) * 2);
    margin: var(--space-sm);
    border-radius: 12px;
  }
  .quote-modal-body {
    padding: var(--space-md) var(--space-sm);
  }
}


/* ──────────────────────────────────────────────────────────────────
   #3, #10  Calculator — service nav, addon grid, comparison table
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Calculator container */
  .calc-shell,
  .calc-container {
    padding: var(--space-md);
    border-radius: 12px;
  }
  /* Service nav: 768px gives 2-col, but on 480px+ icons cramp */
  .calc-service-nav,
  .calc-services {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }
  /* Addon grid: was 2-col with no mobile rule → too cramped */
  .calc-addons-grid,
  .calc-addons {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
  /* Tier / preset cards stack */
  .calc-tier-grid,
  .calc-presets-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  /* Form rows stack */
  .calc-form-row,
  .calc-row {
    flex-direction: column;
    gap: var(--space-sm);
  }
  /* Submit button full-width */
  .calc-submit,
  .calc-cta {
    width: 100%;
  }
  /* Total + price summary larger + sticky-bottom on mobile */
  .calc-summary,
  .calc-total {
    position: sticky;
    bottom: 0;
    background: var(--color-bg, #0b0e1a);
    padding: var(--space-md);
    border-top: 1px solid var(--color-border, rgba(255,255,255,0.1));
    z-index: 10;
    margin-left: calc(var(--space-md) * -1);
    margin-right: calc(var(--space-md) * -1);
    margin-bottom: calc(var(--space-md) * -1);
  }
}
@media (max-width: 480px) {
  .calc-service-nav,
  .calc-services {
    grid-template-columns: 1fr;
  }
  .calc-service-card,
  .calc-service-item {
    padding: var(--space-sm) var(--space-md);
  }
}


/* ──────────────────────────────────────────────────────────────────
   #4  Comparison table — proper mobile scroll experience
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .comparison-table-wrap,
  .pricing-comparison-wrap,
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;     /* smooth iOS scroll */
    /* Visual hint that there's more content to scroll → */
    background:
      linear-gradient(90deg, var(--color-bg, #0b0e1a) 30%, transparent),
      linear-gradient(-90deg, var(--color-bg, #0b0e1a) 30%, transparent) right,
      linear-gradient(90deg, rgba(255,255,255,0.1), transparent),
      linear-gradient(-90deg, rgba(255,255,255,0.1), transparent) right;
    background-repeat: no-repeat;
    background-size: 30px 100%, 30px 100%, 8px 100%, 8px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  .comparison-table,
  .pricing-comparison-table {
    min-width: 600px;       /* trigger horizontal scroll instead of squish */
  }
  .comparison-table th,
  .comparison-table td,
  .pricing-comparison-table th,
  .pricing-comparison-table td {
    padding: var(--space-sm) var(--space-md);
    font-size: 0.875rem;
  }
}


/* ──────────────────────────────────────────────────────────────────
   #7  Page-blocks — gallery + columns at every block size
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pb-gallery-cols-4,
  .pb-gallery-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .pb-gallery-cols-2,
  .pb-gallery-cols-3,
  .pb-gallery-cols-4,
  .pb-gallery-grid[class*="cols-"] {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
  /* image-text block: stack image above text */
  .pb-imgtxt-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-lg);
  }
  .pb-imgtxt-grid.pb-imgtxt-right {
    /* Visual order: image first, then text on mobile */
    direction: ltr;
  }
  .pb-imgtxt-media,
  .pb-imgtxt-content {
    width: 100%;
  }
  /* Hero blocks */
  .pb-hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .pb-hero-content {
    text-align: center;
  }
  .pb-hero-media img,
  .pb-hero-media video {
    max-height: 50vh;
    width: 100%;
    object-fit: cover;
  }
  /* Testimonials grid */
  .pb-testimonials-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .pb-testimonial {
    padding: var(--space-md);
  }
  /* CTA banner */
  .pb-cta-card {
    padding: var(--space-lg) var(--space-md);
    text-align: center;
  }
  .pb-cta-card h2 {
    font-size: 1.5rem;
  }
  /* FAQ block */
  .pb-faq-item summary {
    padding: var(--space-md);
    font-size: 0.95rem;
  }
  .pb-faq-answer {
    padding: 0 var(--space-md) var(--space-md);
    font-size: 0.9rem;
  }
}


/* ──────────────────────────────────────────────────────────────────
   #11  Footer — smooth breakpoint transitions
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) and (min-width: 769px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
  }
}
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    text-align: center;
  }
  .footer-col {
    text-align: center;
  }
  .footer-social {
    justify-content: center;
  }
  .footer-bottom {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }
}


/* ──────────────────────────────────────────────────────────────────
   #12  Mobile menu — fix max-height for landscape phones
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .mobile-menu,
  .nav-mobile-panel {
    /* Use small-viewport-height units (svh) where supported — these
       account for browser UI bars collapsing. Fallback to vh. */
    max-height: calc(100vh - var(--navbar-height) - 24px);
    max-height: calc(100svh - var(--navbar-height) - 24px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Mobile nav links — bigger touch targets */
  .mobile-menu a,
  .mobile-menu .nav-link,
  .nav-mobile-panel a {
    padding: var(--space-md) var(--space-md);
    font-size: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  /* Hamburger icon button */
  .nav-toggle,
  .menu-toggle,
  .hamburger {
    width: 44px;
    height: 44px;
    padding: 10px;
  }
}


/* ──────────────────────────────────────────────────────────────────
   #14  Blog featured card — stack image above text on mobile
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .blog-card.featured {
    grid-template-columns: 1fr !important;
    grid-column: span 1 !important;
  }
  .blog-media {
    aspect-ratio: 16/9;
    overflow: hidden;
  }
  .blog-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .blog-content {
    padding: var(--space-md);
  }
  .blog-meta {
    flex-wrap: wrap;
    gap: var(--space-xs);
    font-size: 0.8125rem;
  }
}


/* ──────────────────────────────────────────────────────────────────
   #15  Service detail — flex order on reverse layouts
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .service-detail,
  .service-detail.reverse {
    grid-template-columns: 1fr !important;
    direction: ltr !important;
  }
  .service-detail.reverse .service-detail-media {
    /* Image always shows first on mobile, regardless of desktop order */
    order: -1;
  }
  .service-detail-media img,
  .service-detail-media video {
    width: 100%;
    height: auto;
    max-height: 50vh;
    object-fit: cover;
  }
}


/* ──────────────────────────────────────────────────────────────────
   #16  Lightbox + modals — proper mobile sizing
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #lightbox,
  .lightbox,
  .modal-overlay {
    padding: var(--space-sm);
  }
  .lightbox-content,
  .lightbox img,
  .lightbox video,
  .modal-content {
    max-width: 100%;
    max-height: calc(100vh - 80px);
    width: auto;
    height: auto;
    object-fit: contain;
  }
  .lightbox-caption {
    font-size: 0.875rem;
    padding: var(--space-sm);
  }
  .lightbox-close,
  .modal-close {
    width: 44px;
    height: 44px;
    top: var(--space-sm);
    right: var(--space-sm);
  }
}


/* ──────────────────────────────────────────────────────────────────
   Image responsiveness — final safety net
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  img, video, picture, canvas, iframe {
    max-width: 100%;
    height: auto;
  }
  /* iframes (YouTube embeds etc.) should keep aspect ratio */
  iframe[src*="youtube"],
  iframe[src*="vimeo"] {
    aspect-ratio: 16/9;
    height: auto;
  }
}


/* ──────────────────────────────────────────────────────────────────
   Page-specific fine-tuning
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Home — showcase + floating cards */
  .showcase-grid,
  .showcase-section {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .floating-card {
    position: static;
    transform: none !important;
    margin: var(--space-sm) auto;
  }
  .trust-grid,
  .trust-items {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
  /* Before/after slider */
  .before-after,
  .before-after-slider {
    width: 100%;
    max-width: 100%;
  }

  /* Services page */
  .service-grid,
  .services-list {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  /* Portfolio page */
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }
  .portfolio-filter {
    flex-wrap: wrap;
    gap: var(--space-xs);
    justify-content: center;
  }
  .portfolio-filter button {
    font-size: 0.8125rem;
    padding: 8px 14px;
  }

  /* Shop grid */
  .shop-grid,
  .shop-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }
  .shop-card-content {
    padding: var(--space-sm);
  }
  .shop-card-title {
    font-size: 0.95rem;
    line-height: 1.3;
  }
  .shop-card-price {
    font-size: 1rem;
  }

  /* Pricing tier cards */
  .pricing-tiers,
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .pricing-tier {
    padding: var(--space-lg) var(--space-md);
  }
  .pricing-tier-features li {
    font-size: 0.9rem;
  }

  /* Blog feed */
  .blog-grid,
  .blog-posts {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  /* About — team grid */
  .team-grid,
  .members-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  /* FAQ */
  .faq-item summary {
    padding: var(--space-md);
    font-size: 0.95rem;
  }
}
@media (max-width: 480px) {
  /* Portfolio + shop go single-column on small phones */
  .portfolio-grid,
  .shop-grid,
  .shop-products-grid {
    grid-template-columns: 1fr;
  }
  /* Trust grid 1-col */
  .trust-grid,
  .trust-items {
    grid-template-columns: 1fr;
  }
  /* Team grid 1-col */
  .team-grid,
  .members-grid {
    grid-template-columns: 1fr;
  }
}


/* ──────────────────────────────────────────────────────────────────
   Forms — better mobile input UX
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .form-row,
  .form-grid {
    grid-template-columns: 1fr !important;
    flex-direction: column;
    gap: var(--space-sm);
  }
  input, textarea, select {
    width: 100%;
    box-sizing: border-box;
  }
  textarea {
    min-height: 100px;
  }
  /* Date / time inputs — native pickers on mobile */
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"] {
    -webkit-appearance: none;
  }
  /* Form CTA button block — but NOT inside the chat-form (which has
     input + send button on the SAME row). Without this exclusion the
     send button stole full width and squeezed the input to ~1 char. */
  form:not(.chat-form) .btn-submit,
  form:not(.chat-form) button[type="submit"] {
    width: 100%;
  }
}


/* ──────────────────────────────────────────────────────────────────
   Sticky elements on iOS — fix the rubber-band behaviour where
   sticky elements jitter while scrolling.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sticky,
  [class*="sticky"] {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);     /* GPU layer */
  }
}


/* ──────────────────────────────────────────────────────────────────
   Inquiry tracking page (/track) — single column form
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .track-page .container,
  .track-form-wrapper {
    padding: var(--space-md);
  }
  .track-form input {
    font-size: 16px !important;     /* iOS no-zoom */
  }
  .timeline,
  .order-timeline {
    padding-left: var(--space-md);
  }
  .timeline-step {
    padding-left: var(--space-md);
  }
}


/* ──────────────────────────────────────────────────────────────────
   Admin panel — minimal viability on mobile (not full design)
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .admin-shell {
    grid-template-columns: 1fr;
  }
  .admin-sidebar {
    position: relative;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.1));
  }
  .admin-content {
    padding: var(--space-md);
  }
  /* Admin tables get horizontal scroll */
  .admin-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ──────────────────────────────────────────────────────────────────
   Reduce motion preference + small-screen perf — strip heavy
   animations on mobile to stop choppy scrolling.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  /* Disable hover transforms on mobile — they don't trigger via
     touch and cause layout shifts. */
  *:hover {
    transform: none !important;
  }
}
@media (max-width: 480px) {
  /* Strip all animations on tiny phones to keep scroll buttery */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   USER-REPORTED FIXES (round 2) — based on actual phone screenshots
   ═══════════════════════════════════════════════════════════════════
   1. Trust bar (Twitch, YouTube, etc.) showing 1-per-row — needs grid
   2. Mobile menu detached + missing icons — needs better positioning
   3. Quote modal cramped + ugly scrollbar — needs spacing + custom scroll
   4. Contact cards squeezed — Email/Discord/Twitter values cut off,
      "7 of 10 slots" displaying one character per line
   ═══════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────────
   #R2-1  Trust bar logos — was flex-wrap stacking 1-per-row
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .trust-bar {
    padding: var(--space-xl) 0;
  }
  .trust-label {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    margin-bottom: var(--space-md);
    text-align: center;
  }
  .trust-logos {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);   /* 3-col on phones */
    gap: var(--space-md);
    justify-items: center;
    align-items: center;
    max-width: 480px;
    margin: 0 auto;
  }
  .trust-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    gap: 6px;
    text-align: center;
    width: 100%;
    padding: 8px 4px;
    opacity: 0.85;
  }
  .trust-item svg,
  .trust-item i,
  .trust-item .trust-item-logo {
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0;
  }
  .trust-item span {
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
}
@media (max-width: 480px) {
  .trust-logos {
    grid-template-columns: repeat(2, 1fr);  /* 2-col on small phones */
    gap: var(--space-sm);
  }
  .trust-item span {
    font-size: 0.7rem;
  }
}


/* ──────────────────────────────────────────────────────────────────
   #R2-2  Mobile menu — better positioning + icon visibility
   The menu was floating at top:navbar-height; right:12px which made
   it look detached. Anchor it properly to navbar bottom + add subtle
   connecting border so it looks attached.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .mobile-menu {
    /* Anchor right under navbar with no gap */
    top: var(--navbar-height) !important;
    right: 0 !important;
    left: auto;
    width: 280px;
    max-width: calc(100vw - 16px);
    margin-right: 8px;
    margin-top: 4px;
    /* Subtle visual connection to the toggle button */
    border-top-right-radius: 0;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08);
  }
  /* Each nav item needs visible icon — Lucide renders <i data-lucide>
     as inline SVG. If parent had display:flex with no gap, icon was
     getting pushed out. Force flex with proper gap. */
  .mobile-nav-list a,
  .mobile-menu .nav-link,
  .mobile-menu a[data-lucide],
  .mobile-menu li a {
    display: flex !important;
    align-items: center;
    gap: var(--space-sm);
    padding: 14px var(--space-md) !important;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    color: var(--color-text, #fff);
    text-decoration: none;
    transition: background 0.15s;
  }
  .mobile-nav-list a:hover,
  .mobile-menu a:hover {
    background: rgba(255,255,255,0.05);
  }
  .mobile-nav-list a svg,
  .mobile-nav-list a i,
  .mobile-menu a svg,
  .mobile-menu a i[data-lucide] {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
    opacity: 0.8;
  }
  /* Last item — no border bottom */
  .mobile-nav-list a:last-child,
  .mobile-menu li:last-child a {
    border-bottom: none;
  }
}


/* ──────────────────────────────────────────────────────────────────
   #R2-3  Quote modal — better spacing + custom scrollbar (ugly
   default scroll bar was visually overflowing the modal frame).
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .quote-modal-overlay {
    padding: 0;
    align-items: flex-end;       /* slide up from bottom on mobile */
  }
  .quote-modal-shell,
  .quote-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh;
    max-height: 92svh;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;   /* bottom-sheet style */
    display: flex;
    flex-direction: column;
  }
  /* Step indicator — compact horizontal pills */
  .quote-modal-steps {
    padding: var(--space-md) var(--space-md) var(--space-sm) !important;
    gap: var(--space-xs) !important;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .quote-modal-steps .step {
    font-size: 0.8125rem;
    padding: 6px 10px;
    flex: 1;
    text-align: center;
    min-width: 0;
  }
  .quote-modal-steps .step .step-num,
  .quote-modal-steps .step span:first-child {
    width: 22px;
    height: 22px;
    font-size: 0.75rem;
    margin-right: 4px;
  }
  /* Step body — proper padding + custom scrollbar */
  .quote-step,
  .quote-modal-body,
  .quote-step-body {
    padding: var(--space-md) !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
  }
  /* Custom scrollbar — slim and subtle */
  .quote-step::-webkit-scrollbar,
  .quote-modal-body::-webkit-scrollbar {
    width: 4px;
  }
  .quote-step::-webkit-scrollbar-thumb,
  .quote-modal-body::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
  }
  .quote-step::-webkit-scrollbar-track,
  .quote-modal-body::-webkit-scrollbar-track {
    background: transparent;
  }
  /* Form rows in quote modal — single column */
  .quote-step .form-row,
  .quote-step .form-grid,
  .quote-step-body .form-row {
    grid-template-columns: 1fr !important;
    gap: var(--space-sm) !important;
  }
  /* Review section — was tabular, force flex column for readability */
  .quote-review,
  .quote-summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }
  .quote-review .row,
  .quote-summary .row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: var(--space-sm);
    align-items: start;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.08);
  }
  .quote-review .row:last-child,
  .quote-summary .row:last-child {
    border-bottom: none;
  }
  .quote-review .label,
  .quote-summary .label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .quote-review .value,
  .quote-summary .value {
    font-size: 0.875rem;
    overflow-wrap: anywhere;
  }
  /* Total row — emphasized */
  .quote-total-row,
  .quote-modal .total-row {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid rgba(255,255,255,0.15);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 1rem;
  }
  .quote-total-row .total-value {
    font-size: 1.5rem;
    font-weight: 700;
  }
  /* Footer with Next/Back buttons — sticky at bottom */
  .quote-modal-footer {
    padding: var(--space-md) !important;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: var(--color-bg, #0b0e1a);
    flex-shrink: 0;
    display: flex;
    gap: var(--space-sm);
  }
  .quote-modal-footer .btn {
    flex: 1;
    min-height: 48px;
  }
}


/* ──────────────────────────────────────────────────────────────────
   #R2-4  Contact cards — biggest bug. The `.info-card` is a flex
   container with 4 SIBLING children: icon + h3 + p + .info-note.
   On desktop they're in a row (icon + 3 stacked text columns squeezed).
   On mobile the column squeeze made each text "column" only ~50px wide,
   forcing "7 of 10 slots" to wrap one word per line — and our overly-
   aggressive word-break (now fixed above) made it one CHARACTER per
   line. Fix: convert .info-card to grid with icon on left, ALL text
   stacked vertically on right.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .info-card {
    display: grid !important;
    grid-template-columns: 48px 1fr;
    gap: var(--space-md);
    align-items: start;
    padding: var(--space-md);
  }
  /* Icon stays in column 1 */
  .info-card .info-icon {
    grid-column: 1;
    grid-row: 1 / span 4;       /* span all rows to align with text */
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }
  .info-card .info-icon svg,
  .info-card .info-icon i {
    width: 22px;
    height: 22px;
  }
  /* All text content in column 2, stacked vertically */
  .info-card h3,
  .info-card p,
  .info-card .info-note,
  .info-card .status-indicator {
    grid-column: 2;
    margin: 0;
    min-width: 0;             /* allow shrink within grid track */
    overflow-wrap: anywhere;
  }
  .info-card h3 {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin-bottom: 2px;
  }
  .info-card p {
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--color-text, #fff);
    margin-bottom: 4px;
  }
  .info-card p a,
  .info-card .info-card-link {
    color: inherit;
    text-decoration: none;
    word-break: normal;
    overflow-wrap: anywhere;
  }
  .info-card .info-note {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.3;
  }
  .info-card .status-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    margin-bottom: 4px;
  }
  .info-card .status-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
  }
  /* Quick links card — also grid for better mobile rhythm */
  .quick-links {
    padding: var(--space-md);
  }
  .quick-links h3 {
    margin-bottom: var(--space-sm);
  }
  .quick-link {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 12px var(--space-sm);
    border-radius: 8px;
    transition: background 0.15s;
  }
  .quick-link:hover,
  .quick-link:active {
    background: rgba(255,255,255,0.05);
  }
  .quick-link svg,
  .quick-link i {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
  .quick-link span,
  .quick-link {
    font-size: 0.9rem;
  }
  /* "Arrow right" icon at end pushes to right */
  .quick-link i:last-child,
  .quick-link svg:last-child {
    margin-left: auto;
    opacity: 0.5;
  }
}
@media (max-width: 480px) {
  .info-card {
    grid-template-columns: 40px 1fr;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-sm);
  }
  .info-card .info-icon {
    width: 36px;
    height: 36px;
  }
  .info-card .info-icon svg,
  .info-card .info-icon i {
    width: 18px;
    height: 18px;
  }
}


/* ──────────────────────────────────────────────────────────────────
   #R2-bonus  Floating chat widget toggle button + back-to-top
   On mobile chat-toggle is 52x52 anchored at right:16, bottom:16.
   Back-to-top must clear it so they don't overlap. Math:
     chat top edge = 16 + 52 = 68px from viewport bottom
     back-to-top bottom = 68 + 12px gap = 80px
   Same right offset (16px) so they stack vertically in the margin.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .chat-widget,
  .chat-toggle {
    bottom: 16px !important;
    right: 16px !important;
  }
  .chat-toggle {
    width: 52px !important;
    height: 52px !important;
  }
  /* WARNING: do NOT touch .chat-bubble width here — that's the message
     bubble inside the panel, not the floating button. Earlier wrong
     selector made every bubble 52x52 squashing all message text. */

  .back-to-top {
    bottom: 80px !important;
    right: 16px !important;
    width: 44px !important;
    height: 44px !important;
  }
}


/* ──────────────────────────────────────────────────────────────────
   #R3-1  Chat panel mobile layout — fix input/button squeeze bug
   The chat-form has an input + send button on ONE row. On mobile our
   form-wide rule (form button[type="submit"] { width: 100% }) was
   stealing 100% width for the send button → squeezing the input to
   ~1 char and breaking welcome message text "H/ey/I" character-by-
   character. Now: explicit .chat-form rule keeps input flex:1 and
   button auto-width.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .chat-panel {
    /* Anchor properly to bottom-right with safe padding, full-width
       on small phones so message bubbles have room to breathe. */
    width: calc(100vw - 24px) !important;
    max-width: 380px;
    right: 12px !important;
    bottom: 80px !important;
    max-height: 70vh;
    max-height: 70svh;
    border-radius: 16px;
  }
  .chat-form {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    padding: 10px 12px;
    align-items: center;
  }
  .chat-form input {
    flex: 1 1 auto !important;
    width: auto !important;          /* override our global input width:100% */
    min-width: 0;                    /* allow shrink within flex track */
    font-size: 16px !important;      /* iOS no-zoom */
    padding: 10px 12px;
    border-radius: 10px;
  }
  .chat-form button {
    flex: 0 0 auto !important;       /* don't grow */
    width: 44px !important;          /* fixed icon button width */
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    border-radius: 10px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  .chat-form button svg,
  .chat-form button i {
    width: 20px;
    height: 20px;
  }
  /* Message bubbles — proper width + readable text */
  .chat-messages {
    padding: 14px;
    max-height: calc(70vh - 140px);
    max-height: calc(70svh - 140px);
  }
  .chat-bubble {
    max-width: 88% !important;       /* reset our wrong R2 rule */
    width: auto !important;
    height: auto !important;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.4;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .chat-bubble p {
    margin: 0 0 4px;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .chat-bubble a {
    word-break: normal;
    overflow-wrap: anywhere;
    color: var(--primary-light, #ec4899);
    text-decoration: underline;
  }
  /* Header tightening */
  .chat-header {
    padding: 12px 14px;
  }
  .chat-header-info strong {
    font-size: 14px;
  }
  .chat-header-info span {
    font-size: 11px;
  }
  .chat-avatar {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }
  /* Make sure the toggle button below the panel doesn't overlap
     when the panel is open (chat-toggle has its own bottom:16px) */
  .chat-widget.open .chat-toggle,
  .chat-toggle.active {
    /* visually nudge so it's clearly the close trigger */
    transform: rotate(0);
  }
}