/* Page-local additions for the Engine Repair + Parts inner page.
   Header, buttons, torn-edge, proof-card (01/02/03), section-title-wrap, hours, and footer are
   all inherited unchanged from /v6/styles.css. This file only adds the hero background photo,
   the kicker color treatment (matching mobile-mechanical), and the photo-interrupt component
   (same class names/pattern as mobile-mechanical's, reused here with new copy and a new photo). */

.svc-hero {
  background-image:
    linear-gradient(90deg, rgba(9,10,12,0.9) 0%, rgba(9,10,12,0.74) 32%, rgba(9,10,12,0.32) 62%, rgba(9,10,12,0.12) 100%),
    url("assets/hero.jpg");
  background-position: center 50%;
  background-size: cover;
}

.hero-headline {
  font-size: 56px;
}

.kicker {
  font-family: var(--font-condensed);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7cc3e8;
  margin-bottom: 14px;
}

/* real-photo interrupt section, same pattern as mobile-mechanical's. Now sits AFTER the
   decision section per Darrel's reorder (DM trace 3c0c8335, R-045); still the #teardown
   anchor target, just no longer directly under the hero. */
.photo-interrupt {
  display: grid;
  grid-template-columns: minmax(0, 560px) 1fr;
  background: var(--color-ice-blue);
}

.photo-interrupt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-interrupt-copy {
  padding: 96px var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  color: var(--color-deep-blue);
}

.photo-interrupt-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 3vw, 44px);
  line-height: 1.15;
  font-weight: 700;
  text-transform: uppercase;
}

.photo-interrupt-copy p {
  color: #33454e;
  font-size: 18px;
  line-height: 1.6;
  max-width: 34rem;
}

.photo-interrupt-copy a {
  color: var(--color-diesel-blue);
  font-family: var(--font-condensed);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
}

/* "decision" section, now the hero-adjacent section after the reorder. Redesigned away from
   the shared .proof-card 01/02/03 color-band remix (Darrel wanted a genuinely different layout,
   not homepage copy) into a divided row list, the same shape as the homepage's own
   .service-list/.service-row component, as page-local classes so the homepage's version stays
   untouched. */
.decision {
  padding: 80px var(--gutter) 96px;
  background: #ffffff;
}

/* .decision already provides its own top/side padding (above); the shared .section-title-wrap
   would otherwise double that up with its own 80px top + gutter sides. Per Darrel, DM trace
   6b72b126 (R-046). */
.decision .section-title-wrap {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}

.decision-list {
  border-top: 2px solid #d8e1e6;
  border-bottom: 2px solid #d8e1e6;
}

.decision-row {
  min-height: 124px;
  display: grid;
  grid-template-columns: 68px 380px minmax(280px, 1fr) 200px;
  align-items: center;
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid #d8e1e6;
}

.decision-row:last-child { border-bottom: 0; }

.decision-index {
  color: var(--color-diesel-blue);
  font-family: var(--font-condensed);
  font-size: 30px;
  line-height: 34px;
  font-weight: 300;
}

.decision-row h3 {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-deep-blue);
}

.decision-row p {
  color: #3d5059;
  font-size: 16px;
  line-height: 1.6;
}

.decision-row a {
  color: var(--color-diesel-blue);
  font-family: var(--font-condensed);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .photo-interrupt { grid-template-columns: 1fr; }
  .photo-interrupt img { max-height: 420px; }
  .decision-row { grid-template-columns: 48px 1fr; }
  .decision-row p, .decision-row a { grid-column: 2; text-align: left; }
}

@media (max-width: 760px) {
  .photo-interrupt-copy { padding: 56px 24px; }
  .decision { padding-block: 72px; }
  .decision-row { grid-template-columns: 1fr; gap: 12px; }
  .decision-row p, .decision-row a { grid-column: auto; }
}