/* light-duty-towing.html ONLY — body section layout + Swiper/lightbox accommodation
   Career body design template port (CAREER_BODY_DESIGN_TEMPLATE.md; affidavit audit §8).
   Glass rules → light-duty-towing-page-body-glass.css
   Scope: html[data-light-duty-towing-page] #light-duty-towing-page-body
   Per-page deltas vs career: no stats band, no application modal,
   Capabilities keeps the existing Swiper carousel + magnific-popup lightbox. */

/* ── Body wrapper ── */
html[data-light-duty-towing-page] #light-duty-towing-page-body {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* ── Section backgrounds + padding ── */
html[data-light-duty-towing-page] #light-duty-towing-page-body .section {
  padding-top: clamp(64px, 8vw, 100px);
  padding-bottom: clamp(56px, 7vw, 90px);
}

html[data-light-duty-towing-page] #light-duty-towing-page-body .ldt-capabilities {
  background: #ffffff;
}

html[data-light-duty-towing-page] #light-duty-towing-page-body .ldt-services {
  background: #f5f0ea;
}

/* ── Container width to match career body ── */
html[data-light-duty-towing-page] #light-duty-towing-page-body .container {
  max-width: 1320px;
}

/* ── Heading spacing ── */
html[data-light-duty-towing-page] #light-duty-towing-page-body .section-heading {
  margin-bottom: clamp(28px, 4vw, 40px);
}

/* ── Equal-height service cards ── */
html[data-light-duty-towing-page] #light-duty-towing-page-body .job-card {
  height: 100%;
}

/* ── Swiper carousel inside the Capabilities media-frame ──
   The career media-frame assumes ONE static image; here the frame holds the
   existing Swiper (shop-single-slide + shop-slider-thumb). Keep all swiper
   markup intact and give swiper images their own sizing (the glass file does
   NOT force a fixed media-frame image height for this page). */
html[data-light-duty-towing-page] #light-duty-towing-page-body .media-frame__visual {
  display: block;
  padding: 0;
}

html[data-light-duty-towing-page] #light-duty-towing-page-body .media-frame__visual .image.img {
  width: 100%;
  margin: 0;
}

html[data-light-duty-towing-page] #light-duty-towing-page-body .media-frame__visual .swiper {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}

html[data-light-duty-towing-page] #light-duty-towing-page-body .media-frame__visual .shop-single-slide .swiper-slide img {
  display: block;
  width: 100%;
  height: 340px;
  object-fit: cover;
  object-position: center center;
}

html[data-light-duty-towing-page] #light-duty-towing-page-body .media-frame__visual .shop-slider-thumb {
  margin-top: 12px;
}

html[data-light-duty-towing-page] #light-duty-towing-page-body .media-frame__visual .shop-slider-thumb .swiper-slide {
  cursor: pointer;
  opacity: 0.78;
  transition: opacity 0.25s ease;
}

html[data-light-duty-towing-page] #light-duty-towing-page-body .media-frame__visual .shop-slider-thumb .swiper-slide-thumb-active,
html[data-light-duty-towing-page] #light-duty-towing-page-body .media-frame__visual .shop-slider-thumb .swiper-slide:hover {
  opacity: 1;
}

html[data-light-duty-towing-page] #light-duty-towing-page-body .media-frame__visual .shop-slider-thumb .swiper-slide img {
  display: block;
  width: 100%;
  height: 66px;
  object-fit: cover;
  border-radius: 10px;
}

/* ── Legacy theme bleed nullify (career template Pass A / M8) ──
   In case any legacy theme/page rule still targets these helpers inside the
   rebuilt body, neutralise the old card chrome so the glass wins. */
html[data-light-duty-towing-page] #light-duty-towing-page-body .service__items,
html[data-light-duty-towing-page] #light-duty-towing-page-body .service__thumb,
html[data-light-duty-towing-page] #light-duty-towing-page-body .service__content,
html[data-light-duty-towing-page] #light-duty-towing-page-body .shop__details .content {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

@media (max-width: 575px) {
  html[data-light-duty-towing-page] #light-duty-towing-page-body .media-frame__visual .shop-single-slide .swiper-slide img {
    height: 250px;
  }
}