/* ==========================================================================
   ER Auto Service — Riverview concept (web2)
   Auto Repair page. Loaded alongside home.css, same convention as tires.css:
   the .hero/.trust-strip/.financing-logos/.services-tiles/.visit machinery
   is genuinely shared, so only what's new to this page lives here.
   ========================================================================== */

/* ---------- Hero ---------------------------------------------------------- */

.ar-hero .hero-media { background: #fff; }
.ar-hero .hero-media::before {
  background-image: url('../assets/img/heroautorepair.png');
  background-position: 60% 35%;
  background-size: cover;
}

/* Crisp diagonal white panel over the left ~40% of the photo — same
   mechanism as Financing's .hero-accent (a solid fill cut with clip-path,
   not a blurred gradient): a sharp edge, sloping from 56% wide at the top
   down to 36% wide at the bottom. */
.ar-hero .hero-scrim {
  background: #fff;
  clip-path: polygon(0 0, 56% 0, 36% 100%, 0 100%);
}

/* A faint tire-tread ring over the photo — same device as
   .financing-tread on the Tires page. */
.ar-hero .hero-inner::before {
  content: '';
  position: absolute; z-index: -1;
  left: 8%; top: 10%;
  width: clamp(160px, 20vw, 260px); aspect-ratio: 1;
  border-radius: 50%;
  border: 18px solid var(--paper-dim);
  opacity: 0.5;
}

/* Text sits on the light panel now, not a dark scrim — darken it here only.
   .hero-title-accent shares the .hero-title-line element on this page (the
   "Riverview, FL" line), so restore its ember after the black override —
   same specificity, later in the file wins. */
.ar-hero .eyebrow--light { color: #000; }
.ar-hero .hero-title-line { color: #000; }
.ar-hero .hero-title-accent { color: var(--ember); }
.ar-hero .hero-lede { color: #000; }
.ar-hero .hero-actions .btn--outline { border-color: #000; color: #000; }
.ar-hero .hero-lang { color: #000; }

/* Script-style caption over the hero photo, upper right — same device as
   .used-tires-quote on the Tires page (the one deliberate Caveat use per
   page), mirrored to the opposite corner since the photo reads right-heavy
   here instead of left-heavy. */
.ar-hero-quote {
  position: absolute; z-index: 1;
  right: clamp(1.5rem, 5vw, 4rem); top: clamp(5.5rem, 12vw, 8rem);
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: clamp(1.6rem, 1rem + 2.2vw, 2.4rem);
  color: #fff;
  line-height: 1.15;
  text-align: right;
  transform: rotate(3deg);
  max-width: 14ch;
}
@media (max-width: 700px) { .ar-hero-quote { display: none; } }

/* The 3 trust points, now inside the hero over the photo's bottom-right
   instead of a separate strip below it (that strip had the exact same 3
   items — kept once, moved here to match the reference). Reuses
   .hero-feature (styles.css) for each icon+label pair, just in a
   horizontal row instead of hero-split's vertical stack. */
.ar-hero-points {
  position: absolute; z-index: 1;
  right: var(--gutter); bottom: clamp(1.5rem, 4vw, 2.5rem);
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  list-style: none; margin: 0; padding: 0;
}
.ar-hero-points .hero-feature span { max-width: 12ch; }
@media (max-width: 860px) { .ar-hero-points { display: none; } }

/* Mobile: the diagonal panel above is tuned for desktop's narrow, left-
   aligned .hero-copy column — home.css's shared mobile block re-centers
   that column to near full width at this same breakpoint, so the clipped
   panel no longer reaches most of the text and it sits unreadable on the
   photo. Drop the light clipped panel and use the same dark scrim the home
   hero already wears on mobile instead (home.css's base .hero-scrim, which
   this page's desktop rule was overriding) — flip the text/outline-button
   colors from this page's black-on-white back to the white they need
   against a dark scrim, matching home-hero. Also drop the decorative tread
   ring for the same reason .ar-hero-quote/.ar-hero-points already hide
   below their own breakpoints — it only ever worked alongside the desktop
   composition. */
@media (max-width: 600px) {
  .ar-hero .hero-scrim {
    clip-path: none;
    background:
      linear-gradient(100deg, rgb(10 10 11 / 0%) 0%, rgba(10, 10, 11, 0.78) 36%, rgba(10, 10, 11, 0.32) 66%, rgba(10, 10, 11, 0.08) 100%),
      linear-gradient(to top, rgba(10, 10, 11, 0.5), transparent 45%);
  }
  /* Now that the scrim's left edge is transparent instead of near-opaque,
     more of the photo itself shows through — re-center the crop's focal
     point for that newly-visible area instead of keeping desktop's 60% 35%. */
  .ar-hero .hero-media::before { background-position: 76% 35%; }
  .ar-hero .hero-inner::before { display: none; }

  .ar-hero .eyebrow--light { color: #fff; }
  .ar-hero .hero-title-line { color: #fff; }
  /* .hero-title-accent ties with .hero-title-line on specificity (both
     .ar-hero + one class) — restate it after so source order keeps the
     ember accent on "Riverview, FL" instead of losing it to the white
     override right above. */
  .ar-hero .hero-title-accent { color: var(--ember); }
  .ar-hero .hero-lede { color: #fff; }
  .ar-hero .hero-actions .btn--outline { border-color: #fff; color: #fff; }
  .ar-hero .hero-lang { color: #fff; }
}

/* ---------- Services grid -------------------------------------------------- */

/* Full-bleed like .other-services .wrap on the home page: drop the 1280px
   cap, keep only the side gutter. */
#services .wrap { max-width: none; }

/* Smaller than the shared .display--lg default — this heading's phrase is
   long ("Our Auto Repair & Maintenance Services") and reads better a size
   down, especially paired inline with the lede in .sec-head--inline. */
#services .sec-head .display--lg { font-size: clamp(1.3rem, 1.1rem + 1.2vw, 1.7rem); }

/* Push the lede to the far right edge instead of just trailing the title —
   .sec-head--inline packs its two children left by default. A thin left
   divider + centered, narrow-wrapped text reads as its own little column
   next to the heading, not just a trailing sentence. */
#services .sec-head--inline { justify-content: space-between; }
#services .sec-head--inline .lede {
  flex: none;
  max-width: 34ch;
  text-align: center;
  padding-left: 1.75rem;
  border-left: 1px solid var(--paper-dim);
}
@media (max-width: 760px) {
  #services .sec-head--inline .lede {
    /* Base rule above sets flex: none (flex-shrink: 0) so the column never
       yields width to its sibling heading — fine at desktop where max-width:
       34ch also caps it, but dropping only the max-width here left flex: none
       in place with nothing to constrain it, so the item rendered at its full
       one-line text width (measured: 570px at a 390px viewport) and blew out
       the whole page horizontally. Let it behave like a normal block instead. */
    flex: 1 1 100%;
    min-width: 0;
    max-width: none;
    text-align: left;
    padding-left: 0;
    border-left: none;
  }
}

.ar-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.75rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2rem);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
@media (max-width: 980px) {
  .ar-services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ar-services-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}

.ar-service-photo {
  position: relative;
  aspect-ratio: 2 / 1;
  background-color: var(--iron);
  background-size: cover;
  background-position: center;
  margin-bottom: 2rem;
  overflow: visible;
}
.ar-service-icon {
  position: absolute; left: 1.1rem; bottom: -1.4rem;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--ember); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  border: 4px solid var(--paper);
}
.ar-service-title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: 0.92rem; letter-spacing: 0.01em; margin: 0 0 0.4rem;
}
.ar-service-desc { margin: 0; color: #4B4F57; font-size: 0.88rem; max-width: 32ch; }

/* ---------- Additional vehicle services — reuses .ar-service/.ar-services-grid
   from the Services section above; this one just sits on --ink instead of
   --paper, and its header row gets a third child (the CTA button) pinned to
   the far end. .ar-service-title inherits .section--dark's own color (paper)
   automatically; only the desc and the icon badge's ring need a dark-section
   override. ---------------------------------------------------------------- */

.section--dark .ar-service-desc { color: rgba(255, 255, 255, 0.75); }
.section--dark .ar-service-icon { border-color: var(--ink); }

.ar-additional-cta { flex: none; margin-left: auto; white-space: nowrap; }
@media (max-width: 760px) { .ar-additional-cta { margin-left: 0; } }

/* ---------- Service built around you — light 4-column divided row,
   mirrors .why-tires-row's structure but with outline badges instead of
   filled ones (this section sits on --paper, not --ink). ----------------- */

.built-around-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2rem);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
.built-around-item {
  min-width: 0;
  text-align: center;
  padding-inline: 1rem;
  border-right: 1px solid var(--paper-dim);
}
.built-around-item:last-child { border-right: none; }
.built-around-badge {
  color: var(--ember-text);
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem;
  margin: 0 auto 1.1rem;
}
.built-around-title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: 0.9rem; color: var(--ink); margin: 0 0 0.4rem;
  overflow-wrap: break-word;
}
.built-around-desc { margin: 0; color: #4B4F57; font-size: 0.85rem; }

@media (max-width: 760px) {
  .built-around-row { grid-template-columns: 1fr 1fr; row-gap: 2rem; }
  .built-around-item { border-right: none; border-bottom: 1px solid var(--paper-dim); padding-bottom: 1.75rem; }
  .built-around-item:nth-child(3), .built-around-item:nth-child(4) { border-bottom: none; }
  /* 4rem was sized for a 4-wide desktop column; in a 2-up mobile track it's
     oversized relative to the available width and pushes the badge close
     to the edge of the horizontal-overflow risk the min-width:0 fix above
     already guards against. Match .why-tires-badge's more modest mobile scale. */
  .built-around-badge { font-size: 2.75rem; }
}

/* ---------- Financing + Tires cross-promo split --------------------------- */

.promo-split {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  min-height: 24rem;
}
.promo-panel {
  padding: clamp(2.5rem, 5vw, 3.5rem) var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* flex column stretches children to full width by default; the button
   should hug its label, not span the panel. */
.promo-panel .btn { align-self: flex-start; }
.promo-panel .display { margin-bottom: 0.5rem; }
.promo-panel .financing-logos { margin: 1.5rem 0; justify-content: center; }

.promo-panel--financing { background: var(--paper-dim); }
.promo-panel--financing .lede { max-width: 42ch; }

.promo-panel--tires {
  position: relative;
  overflow: hidden;
  color: #fff;
}
.promo-panel-media {
  position: absolute; inset: 0; z-index: 0;
  background-image: url('../assets/img/repair/llantica.jpg');
  background-size: cover;
  background-position: center;
}
.promo-panel-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10, 10, 11, 0.9) 0%, rgba(10, 10, 11, 0.72) 55%, rgba(10, 10, 11, 0.4) 100%);
}
.promo-panel-content { position: relative; z-index: 1; }
.promo-panel-content .display { font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.1rem); }
.promo-panel-content .lede {
  max-width: 40ch;
  color: var(--chrome);   /* .lede's default gray is unreadable over the dark photo/scrim */
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
}

.promo-panel-quote {
  position: absolute; z-index: 1;
  right: clamp(1.25rem, 4vw, 2.5rem); top: clamp(1.5rem, 4vw, 2.5rem);
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.2rem);
  color: #fff;
  line-height: 1.15;
  text-align: right;
  transform: rotate(-3deg);
  max-width: 12ch;
}

@media (max-width: 860px) {
  .promo-split { grid-template-columns: 1fr; }
  .promo-panel--tires { min-height: 20rem; }
  .promo-panel--financing .btn { display: block; width: 100%; }
  .promo-panel--financing .btn-face { justify-content: center; }
}
@media (max-width: 600px) {
  .promo-panel-quote { display: none; }
}

/* ---------- Service CTA band — solid ink, subtle tread texture, same
   device as .tire-cta on the Tires page but taller with an icon list
   instead of just buttons. ------------------------------------------------- */

.service-cta {
  position: relative;
  overflow: hidden;
  background: var(--ink) url('../assets/img/repair/AutooRepair.png') center/cover no-repeat;
  color: #fff;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.service-cta::before {
  /* dark scrim over the photo so the white copy stays legible */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10, 10, 11, 0.92) 0%, rgba(10, 10, 11, 0.78) 55%, rgba(10, 10, 11, 0.5) 100%);
  pointer-events: none;
}
.service-cta-inner {
  position: relative; z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(2rem, 4vw, 3rem);
}
.service-cta-copy { max-width: 42ch; }
.service-cta-copy .display { color: #fff; }
.service-cta-copy p { margin: 0 0 1.5rem; color: var(--chrome); }

.service-cta-points {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.1rem;
  flex: none;
}
.service-cta-points li {
  display: flex; align-items: center; gap: 0.85rem;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.service-cta-points i { color: var(--ember-hi); font-size: 1.3rem; }

@media (max-width: 700px) {
  .service-cta-inner { flex-direction: column; align-items: flex-start; }
  .service-cta-copy .btn-row .btn { display: block; width: 100%; }
  .service-cta-copy .btn-row .btn-face { justify-content: center; }
  .service-cta-copy .btn-row { width: 100%; }
}