/* ==========================================================================
   ER Auto Service — Riverview concept (web2)
   Financing page. Loaded alongside home.css (hero/financing/visit machinery)
   and shares .eyebrow / .hero-split / .hero-features / .btn--white / .btn--ink
   from styles.css. This file only holds what's new to this page.
   ========================================================================== */

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

.financing-hero .hero-media::before {
  background-image:
    linear-gradient(115deg, #000 0%, rgba(0, 0, 0, 0) 32%),
    url('../assets/img/finance/banner.jpeg');
  background-position: 66% center;
}

.financing-hero .hero-lede { max-width: 48ch; }

/* Side by side like Tires' hero-features, instead of the shared component's
   default stacked-rows mobile layout (styles.css, @media max-width:600px).
   financing-hero keeps the default dark scrim + white text (unlike Tires'
   light-panel mobile treatment), so no color override needed here — just
   the 3-column layout. */
@media (max-width: 600px) {
  .financing-hero .hero-features {
    grid-auto-flow: unset;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    width: 100%;
  }
  .financing-hero .hero-feature { flex-direction: column; text-align: center; gap: 0.35rem; }
  .financing-hero .hero-feature i { font-size: 1.2rem; width: auto; }
  .financing-hero .hero-feature span { font-size: 0.56rem; max-width: 9ch; }
}

/* Logo row sits directly on the dark hero photo — the source logo files
   have dark/colored text, not a white reversed lockup, so a small white
   backing keeps them legible instead of guessing at a white variant. */
.hero-fin-logos {
  display: flex; align-items: center; gap: 1.1rem;
  background: #fff; border-radius: 12px;
  padding: 0.8rem 1.25rem;
  width: fit-content;
  margin-top: 1.5rem;
}
.hero-fin-logos .fin-logo-img { height: 46px; }
.hero-fin-logos .fin-logo-img--acima { height: 34px; }
.hero-fin-logos .fin-divider { width: 1px; height: 38px; background: var(--paper-dim); }

/* Decorative diagonal accent at the hero's right edge, full viewport height —
   a second brand moment (like the Tires page's script overlay) rather than
   scattering motion everywhere. */
.hero-accent {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 1;
  width: clamp(90px, 14vw, 170px);
  background: linear-gradient(165deg, var(--ember-hi), var(--ember-dark));
  clip-path: polygon(45% 0, 100% 0, 100% 100%, 0% 100%);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 2rem 0.75rem 2.25rem;
}
.hero-accent-quote {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: clamp(1.1rem, 0.85rem + 1vw, 1.5rem);
  color: #fff;
  text-align: center;
  line-height: 1.25;
  margin: 0;
}
@media (max-width: 900px) { .hero-accent { display: none; } }

/* ---------- Get the service you need today -------------------------------- */

.get-started-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (max-width: 860px) { .get-started-grid { grid-template-columns: 1fr; } }

.get-started-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.get-started-item { text-align: center; padding-inline: 0.75rem; border-right: 1px solid var(--paper-dim); }
.get-started-item:last-child { border-right: none; }
.get-started-badge {
  width: 80px; height: 80px; margin: 0 auto 0.9rem;
  border-radius: 50%;
  background: rgba(216, 31, 38, 0.1);
  color: var(--ember);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem;
}
.get-started-item span:not(.get-started-badge) {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.35;
}
@media (max-width: 560px) {
  .get-started-row { grid-template-columns: 1fr; gap: 1.5rem; }
  .get-started-item { border-right: none; border-bottom: 1px solid var(--paper-dim); padding-bottom: 1.25rem; }
  .get-started-item:last-child { border-bottom: none; padding-bottom: 0; }
}

/* ---------- Two financing options ------------------------------------------ */

.providers-head { position: relative; }
.providers-quote {
  position: absolute; top: 0; right: 0;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
  color: #fff;
  text-align: right;
  line-height: 1.25;
  max-width: 20ch;
}
.providers-quote::after {
  content: '';
  display: block;
  width: 60%; height: 2px;
  margin: 0.4rem 0 0 auto;
  background: var(--ember);
}
@media (max-width: 760px) { .providers-quote { display: none; } }

.provider-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2rem);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
@media (max-width: 760px) { .provider-grid { grid-template-columns: 1fr; } }

.provider-card { background: #fff; }
.provider-card-top { display: grid; grid-template-columns: 38% 62%; }
.provider-card--reverse .provider-card-top { grid-template-columns: 62% 38%; }
.provider-card--reverse .provider-photo { order: 2; }

.provider-photo {
  background-size: cover; background-position: center;
  clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%);
}
.provider-card--reverse .provider-photo { clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); }

.provider-body { padding: clamp(1.5rem, 3vw, 2rem); }
.provider-logo { height: 64px; margin-bottom: 1rem; }
.provider-logo--acima { height: 48px; }
.provider-name {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: 1.15rem; margin: 0 0 0.75rem;
  color: var(--ink);
}
.provider-body p { margin: 0 0 0.6rem; color: #4B4F57; font-size: 0.9rem; }
.provider-body p:last-of-type { margin-bottom: 1.3rem; }

.provider-facts {
  display: flex; border-top: 1px solid var(--paper-dim);
  padding: 1.1rem clamp(1.5rem, 3vw, 2rem);
}
.provider-fact {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
  text-align: center;
}
.provider-fact i { color: var(--ember); font-size: 1.25rem; }
.provider-fact span {
  font-family: var(--font-mono); font-weight: 700; font-size: 0.6rem;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); line-height: 1.3;
}
@media (max-width: 480px) {
  .provider-card-top,
  .provider-card--reverse .provider-card-top { grid-template-columns: 1fr; }
  .provider-photo,
  .provider-card--reverse .provider-photo { clip-path: none; aspect-ratio: 16 / 9; order: initial; }
}

/* ---------- Financing for the services you need ---------------------------- */

#services-financing .display--lg { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); }

.services-financing-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (max-width: 860px) { .services-financing-grid { grid-template-columns: 1fr; } }

/* Tiles + CTA buttons stacked together as the grid's second column, so the
   buttons sit under the tiles instead of trailing the copy on the left. */
.services-financing-media { display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.25rem); }
.services-financing-actions .btn { flex: 1; text-align: center; }
@media (max-width: 560px) {
  .services-financing-actions { flex-direction: column; }
}

.fin-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.fin-tile {
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 4;
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end;
}
.fin-tile::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,11,0.88) 0%, rgba(10,10,11,0.3) 55%, rgba(10,10,11,0) 80%);
}
.fin-tile span {
  position: relative; z-index: 1; padding: 0.55rem;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: 0.6rem; line-height: 1.25; color: #fff;
}
@media (max-width: 560px) { .fin-tiles { grid-template-columns: 1fr 1fr; } }

/* ---------- Ready to get started — compact hero variant ---------------------
   .hero--cta's structural rules (min-height/padding) live in styles.css now —
   About's own closing CTA needed the same compact-hero shape. This page's
   background stays here since it's specific to not having a real photo yet. */

/* No photo asset for a road/dusk shot yet — an honest gradient placeholder
   instead of reusing a mismatched shop-interior photo. TODO: swap in a real
   photo once supplied. */
.hero--cta .hero-media { background: linear-gradient(175deg, #0A0A0B 0%, #2A1113 55%, var(--ember-dark) 100%); }
.hero--cta .hero-media::before { content: none; }
.hero--cta .hero-scrim { background: linear-gradient(100deg, rgba(10,10,11,0.55) 0%, rgba(10,10,11,0.25) 60%, rgba(10,10,11,0) 100%); }