/* LXFABRICATIONS site — base + responsive layout rules (shared by every page) */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #0a0a0a; }
body {
  font-family: var(--font-text);
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
::selection { background: #e11900; color: #fff; }

/* Reduce-motion respect handled inline; no decorative loops used. */

/* Service-page filmstrip: thin, on-brand horizontal scrollbar */
.lx-filmstrip { scrollbar-width: thin; scrollbar-color: #2a2a2a transparent; scroll-behavior: smooth; }
.lx-filmstrip::-webkit-scrollbar { height: 8px; }
.lx-filmstrip::-webkit-scrollbar-track { background: transparent; }
.lx-filmstrip::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 999px; }
.lx-filmstrip::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }

/* Service chip row: even single line on desktop, swipeable on mobile */
.lx-chip-row { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.lx-chip-row::-webkit-scrollbar { display: none; }
.lx-acc-strip { scrollbar-width: thin; scrollbar-color: #2a2a2a transparent; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.lx-acc-strip::-webkit-scrollbar { height: 8px; }
.lx-acc-strip::-webkit-scrollbar-track { background: transparent; }
.lx-acc-strip::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 999px; }
.lx-acc-card { scroll-snap-align: start; }
/* Featured-build collage: explicit clamp()-based height (not aspect-ratio — aspect-ratio inside
   CSS Grid is unreliable on Safari/iOS and can let grid children overflow the card).
   Height is driven by the card's own width via container queries, so the crop stays identical
   whether the card is full width (stacked) or half width (side-by-side on wide screens) — with a
   vw-based fallback first for browsers without container query support. */
.lx-build-card { container-type: inline-size; }
.lx-collage { height: max(320px, 42vw); overflow: hidden; }
@supports (container-type: inline-size) {
  .lx-collage { height: max(320px, 42cqw); }
}
.lx-collage > img { min-height: 0; min-width: 0; }
@media (max-width: 760px) {
  /* let chips keep their natural width and slide horizontally */
  .lx-chip-row > a { flex: 0 0 auto !important; scroll-snap-align: start; }
  .lx-chip-row { scroll-snap-type: x proximity; }
}

@media (max-width: 980px) {
  .lx-grid-3 { grid-template-columns: 1fr 1fr !important; }
  .lx-masonry { column-count: 2 !important; }
}
@media (max-width: 900px) {
  .lx-hero-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .lx-promo-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .lx-footer-grid { grid-template-columns: 1fr 1fr !important; }
  .lx-split { grid-template-columns: 1fr !important; gap: 28px !important; }
  .lx-split > * { min-width: 0 !important; }
  .lx-service-row { grid-template-columns: 1fr !important; gap: 24px !important; }
  .lx-service-row .lx-service-img { order: -1 !important; }
  .lx-contact-form { position: static !important; display: flex !important; justify-content: center !important; }
  .lx-contact-form > div { margin-left: auto !important; margin-right: auto !important; }
}
@media (max-width: 760px) {
  .lx-navlinks, .lx-navactions { display: none !important; }
  .lx-hamburger { display: inline-flex !important; }
  /* let the home featured-build spec lines wrap instead of forcing sideways scroll */
  .lx-spec-line { white-space: normal !important; }
  /* hero: photo fills banner, headline wraps + scales, tighter gutters */
  .lx-hero-img { width: 100% !important; object-position: center 28% !important; }
  .lx-hero-wash { background: linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.32) 40%, rgba(10,10,10,0.85) 100%) !important; }
  .lx-hero-content { padding: 0 20px !important; }
  .lx-hero-content p { font-size: 15px !important; line-height: 22px !important; margin: 14px 0 22px !important; }
  .lx-hero-nowrap { white-space: normal !important; }
  .lx-hero-h1 { font-size: 36px !important; line-height: 42px !important; }
  .lx-builds-title { font-size: 26px !important; line-height: 32px !important; white-space: nowrap !important; }
  .lx-hero-banner { min-height: 500px !important; }
  /* collages become a swipeable, linear photo strip */
  .lx-collage { height: auto !important; display: flex !important; overflow-x: auto !important; gap: 8px !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .lx-collage > img { flex: 0 0 86% !important; width: 86% !important; height: auto !important; aspect-ratio: 4 / 3 !important; grid-column: auto !important; grid-row: auto !important; object-position: center !important; border-radius: 8px; scroll-snap-align: center; }
  /* quote band: tighter card, centered full-width form */
  .lx-quoteband { padding: 22px !important; }
  .lx-promo-grid > * { min-width: 0 !important; }
  .lx-quoteband-form { justify-content: center !important; }
  .lx-quoteband-form > div { margin-left: auto !important; margin-right: auto !important; }
  /* stock accessories: hide its social on mobile (moved to hero); heading full width */
  .lx-acc-social { display: none !important; }
  .lx-acc-head { flex-direction: column !important; align-items: flex-start !important; }
  /* show the small social cluster under the hero CTAs on mobile */
  .lx-hero-social { display: flex !important; }
  /* keep the build-CTA buttons side by side on mobile */
  .lx-buildcta-btns { flex-wrap: nowrap !important; }
  .lx-buildcta-btns > a { font-size: 14px !important; padding: 11px 14px !important; white-space: nowrap; }
}
@media (max-width: 640px) {
  .lx-grid-3 { grid-template-columns: 1fr !important; }
  .lx-reviews-grid { grid-template-columns: 1fr !important; }
  .lx-masonry { column-count: 1 !important; }
  .lx-rating-num { border-right: none !important; padding-right: 0 !important; border-bottom: 1px solid #2a2a2a; padding-bottom: 24px; }
  .lx-ig-grid { gap: 4px !important; }
}
@media (max-width: 520px) {
  .lx-footer-grid { grid-template-columns: 1fr !important; }
  .lx-page-h1 { font-size: 34px !important; line-height: 40px !important; }
  .lx-film-tile { width: 250px !important; }
}
@media (max-width: 400px) {
  .lx-hero-h1 { font-size: 32px !important; line-height: 38px !important; }
  .lx-collage > img { flex-basis: 90% !important; width: 90% !important; }
}

/* ---- Wide-screen fill: tablets landscape and up get side-by-side builds + full grid of accessories ---- */
@media (min-width: 1040px) {
  .lx-builds-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; align-items: stretch; }
  .lx-builds-grid > div { display: flex !important; flex-direction: column; height: 100%; }
  .lx-builds-grid > div > div:last-child { flex: 1; display: flex; flex-direction: column; }
  .lx-acc-strip { overflow-x: visible !important; display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: 16px !important; }
  .lx-acc-card { width: 100% !important; }
}