/**
 * Repair Services — shared red checklist band (About, Services), and the
 * About page's "Why Choose Us" band, which is the same component with the
 * `--split` modifier (pages/template-about.php).
 * template-parts/sections/repair-services.php
 *
 * 1. Repair Services
 * 2. Split variant
 * 3. Responsive
 */

/* ============================ REPAIR SERVICES ============================ */
/* Figma node 341:3937. Two overlapping blocks on a white ground, not a split
   row: the photo runs from 852.5/1920 of the frame to its right edge starting
   at the section's top, and the red copy panel is dropped 67.8px below that
   top, reaches 1038.4/1920 across, and covers the photo's left edge. Every
   ratio below is that measurement over the design's 1920 frame. */
.repair-services {
  position: relative;
  /* padding-top: clamp(1.5rem, 3.53vw, 4.25rem); */
  overflow-x: clip;
}
.repair-services__copy {
  position: relative;
  z-index: 1; /* the design paints the red panel over the photo */
  width: 54.08vw; /* sampled: the panel ends at 1038.4 of 1920 */
  background: var(--color-accent-red);
  color: #fff;
  /* Cancel the container's inset so the panel reaches the viewport edge,
	   then put it back as padding so the copy still starts on the same line as
	   every other section on the page. */
  margin-left: calc((100% - 100vw) / 2);
  padding-left: calc((100vw - 100%) / 2);
  padding-right: clamp(1.5rem, 5.6vw, 6.75rem); /* sampled: 107.7px */
}
.repair-services__inner {
  padding-block: clamp(2.5rem, 2.2vw, 2.625rem); /* sampled: 42.9px */
}
.repair-services__inner .section-eyebrow,
.repair-services__inner .section-heading {
  color: #fff;
}
.repair-services__inner .section-eyebrow::before {
  background: #fff; /* the design's dash is white on this red band */
}
.repair-services__inner .section-heading {
  font-weight: var(--font-weight-bold);
  max-width: 87%;
  padding-bottom: 20px;
}
.repair-services__subheading {
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.4;
  max-width: 91%; /* sampled: 600 of 660.7 */
  margin-bottom: 1.5rem; /* sampled: 24px to the body copy */
}
.repair-services__body {
  color: #fff;
  margin-bottom: 1.5rem;
}
.repair-services__list {
  margin-bottom: 2.3125rem; /* sampled: 37px gap before the button */
}
.repair-services__item {
  display: flex;
  align-items: center;
  gap: 1.5rem; /* sampled: 24px */
  margin-bottom: 0.625rem; /* sampled: 10px */
}
.repair-services__item-body {
  display: block;
}
.repair-services__item-heading {
  font-size: 1.125rem;
  line-height: 1.5;
  margin: 0;
  color: #fff;
}
.repair-services__item-text {
  display: block;
  font-size: 1.125rem; /* sampled: 18px / 27px */
  line-height: 1.5;
}
.repair-services__bullet {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
}
/* Icon-square bullet style (Services) — see the `bullet_style` arg. */
.repair-services__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: var(--radius-md);
  background: #fff;
  flex-shrink: 0;
}
/* Each row's own icon, sized to the design's 42px footprint — contain, so a
   non-square upload scales instead of stretching. */
.repair-services__check svg,
.repair-services__check-icon {
  width: 42px;
  height: 42px;
  object-fit: contain;
}
.repair-services__cta {
  background: var(--color-nav-bg);
  color: #fff;
  font-weight: var(--font-weight-semibold);
  font-size: 1.25rem;
  padding: 18px 30px;
  border-radius: var(--radius-btn);
  display: inline-block;
}
.repair-services__cta:hover {
  color: #000;
  background: var(--background-color);
}
.repair-services__media {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  left: 44.4vw;
  bottom: clamp(1.25rem, 2.86vw, 3.4375rem);
  height: 100%;
}
.repair-services__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================ SPLIT VARIANT ============================ */
/* Figma node 346:8 — the About page's "Why Choose Us" band draws the same two
   blocks as a plain split instead of an overlap: no white gap above, and the
   photo starts where the red panel ends (1038.4 of 1920) and runs the panel's
   full height. Only above the stacking breakpoint — below it both variants are
   the panel with a photo band under it. */
@media (min-width: 993px) {
  .repair-services--split {
    padding-top: 0;
  }
  .repair-services--split .repair-services__media {
    left: 53.08vw;
    bottom: 0;
  }
}

/* ============================ RESPONSIVE ============================ */

/* MD / Tablet */
@media (max-width: 992px) {
  .repair-services {
    /* Stacked: the panel is the full width and the photo a band under it,
		   so neither offset applies any more. */
    padding-top: 0;
  }
  .repair-services__copy {
    width: 100vw;
    /* Both sides now get the container's own inset. */
    padding-right: calc((100vw - 100%) / 2);
  }
  .repair-services__media {
    position: relative;
    inset: auto;
    height: 360px;
  }
  .repair-services__inner {
    padding-block: 2.5rem;
  }
}

/* SM / Mobile */
@media (max-width: 768px) {
  .repair-services__check {
    width: 48px;
    height: 48px;
  }
  .repair-services__check svg,
  .repair-services__check-icon {
    width: 32px;
    height: 32px;
  }
  .repair-services__item {
    gap: 1rem;
  }
  .repair-services__media {
    height: 260px;
  }
}