/* ==========================================================================
   ER Auto Service — Riverview concept (web2)
   Tires page. Loaded alongside home.css: the hero/financing/visit machinery
   is genuinely shared (same classes, same markup shape) so it lives there —
   this file only adds the sections that are new to this page. Anything here
   scoped under .tires-hero overrides a home.css rule on purpose (higher
   selector specificity wins regardless of load order).
   ========================================================================== */

/* ---------- Hero — same .hero mechanics as home.css, new photo. The eyebrow,
   hero-split/hero-features and btn--white/--ink components this page needs
   turned out to be generic enough that the Financing page needed them too —
   they now live in styles.css as shared primitives; this file only keeps
   what's genuinely specific to Tires. ------------------------------------ */

.tires-hero .hero-media::before {
  background-image: url('../assets/img/bannertires.jpeg');
  background-position: 55% 40%;
  background-size: cover;
  left: 0;
}

/* The shared .hero-scrim (home.css) is a dark gradient meant for white text.
   Desktop's photo crop shows open sky behind the black text, so it reads
   fine with no scrim at all there — turned off (rather than left dark and
   invisible, or white and unnecessarily washing out the photo). Mobile's
   much taller crop shows the dark wheel right behind the text instead, so
   it still needs a real backing — that white version lives in the mobile
   media query below. */
.tires-hero .hero-scrim { background: none; }

/* This page's hero photo is light enough that the shared white eyebrow/title
   read poorly — darken them here only. The accent span keeps its own color
   rule, so "Riverview, FL" stays ember. */
.tires-hero .eyebrow--light { color: #000; }
.tires-hero .hero-title-line { color: #000; }
.tires-hero .hero-lede { color: #000; }
.tires-hero .hero-actions .btn--outline { background: rgba(255, 255, 255, 0.35); border-color: #000; color: #000; }
.tires-hero .hero-lang { color: #000; }

.tires-hero .hero-lede { max-width: 46ch; }

/* Side by side instead of the shared mobile default (stacked rows) — smaller
   icon/text so 3 columns fit, label wraps to ~2 short lines instead of one
   unconstrained one. */
@media (max-width: 600px) {
  /* White backing restored here only — see the .tires-hero .hero-scrim
     comment above for why desktop has none. */
  .tires-hero .hero-scrim {
    background:
      linear-gradient(100deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.78) 36%, rgba(255,255,255,0.35) 66%, rgba(255,255,255,0.05) 100%);
  }

  .tires-hero .hero-features {
    grid-auto-flow: unset;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    width: 100%;
  }
  .tires-hero .hero-feature { flex-direction: column; text-align: center; gap: 0.35rem; }
  .tires-hero .hero-feature i { font-size: 1.2rem; width: auto; color: #000; }
  .tires-hero .hero-feature span { font-size: 0.56rem; max-width: 9ch; color: #000; }
}

/* ---------- New tires ---------------------------------------------------- */

#new-tires { background: #fff; }
#new-tires .wrap { max-width: none; }

.new-tires-copy .display--lg { font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.1rem); font-style: italic; }
.new-tires-copy .lede { max-width: 30ch; }
/* Base .display-line forces nowrap so the phrase never breaks mid-word — but
   that also forces this column to stay as wide as the longest phrase. Let it
   wrap here so the fixed fr width below actually takes effect. */
.new-tires-copy .display-line { white-space: normal; }

.new-tires-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr auto;
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (max-width: 1000px) {
  .new-tires-grid { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}

.new-tires-photo {
  width: 100%;
  height: 415px;
  background-image: url('../assets/img/llantas2.jpeg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 600px) {
  .new-tires-photo { height: 182px; }
}

.new-tires-note {
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 1.5rem;
  max-width: 40ch;
}
@media (max-width: 1000px) { .new-tires-note { max-width: none; } }

/* Real brand logo lockups — same fixed-height/auto-width pattern as
   .fin-logo-img (styles.css) so mixed-aspect-ratio marks line up. */
.brand-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.1rem;
  justify-items: start;
}
.brand-list img {
  height: 24px; width: auto; max-width: 100px;
  object-fit: contain; flex: none;
}
@media (max-width: 1000px) {
  .brand-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; }
}

/* ---------- Used tires — full-bleed like .auto-repair, mirrored the other
   way: photo on the LEFT, scrim/copy on the RIGHT. ------------------------ */

.used-tires { position: relative; overflow: hidden; min-height: 30rem; display: flex; align-items: center; background: var(--ink); }

.used-tires-media {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  background: #000;
}
.used-tires-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: -20% center;
  transform: scale(1.15);
}
.used-tires-scrim {
  position: absolute; inset: 0;
  /* Mirror of .auto-repair-scrim: the flat black stop sits on the RIGHT
     this time, cut away on a diagonal toward the left so the photo reads
     on its own there instead. */
  background:
    linear-gradient(245deg, rgba(10,10,11,0.97) 0%, rgba(10,10,11,0.97) 50%, rgba(10,10,11,0) 82%),
    rgba(10,10,11,0.3);
}
.used-tires-inner { position: relative; z-index: 1; width: 100%; padding-inline: var(--gutter); display: flex; justify-content: flex-end; }
.used-tires-copy { max-width: 520px; }
.used-tires-copy .display { color: #fff; }
.used-tires-copy .lede { color: #fff; }

.used-tires-quote {
  position: absolute; z-index: 1;
  left: clamp(1.5rem, 5vw, 4rem); bottom: clamp(1.5rem, 5vw, 3rem);
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: clamp(1.8rem, 1.2rem + 2.5vw, 2.8rem);
  color: #fff;
  line-height: 1.15;
  transform: rotate(-4deg);
  max-width: 12ch;
}
/* .quote-highlight (the hand-drawn marker-stroke underline) moved to
   styles.css — Auto Repair's hero quote needs it too now. */

@media (max-width: 860px) {
  .used-tires { min-height: 0; flex-direction: column; }
  .used-tires-media { position: relative; inset: auto; width: 100%; height: 16rem; }
  .used-tires-video { transform: scale(1); object-position: center; }
  .used-tires-scrim { background: linear-gradient(to top, rgba(10,10,11,0.85), rgba(10,10,11,0.1) 60%); }
  .used-tires-quote { left: 1.25rem; bottom: 1rem; font-size: 1.8rem; }
  .used-tires-inner { position: static; padding-block: clamp(2rem, 6vw, 3rem); justify-content: center; }
  .used-tires-copy { max-width: none; text-align: center; }
  .used-tires-copy .btn { display: block; width: 100%; }
  .used-tires-copy .btn-face { justify-content: center; }
}

/* ---------- Financing CTA — light band instead of the solid-red banner
   home.css defines for this section; only tires.php loads this file, so
   overriding the bare .financing/.financing-* selectors here is safe. ----- */

#financing .wrap { max-width: none; }

.financing {
  position: relative;
  overflow: hidden;
  background: linear-gradient(100deg, #fff 0%, var(--paper) 100%);
  color: var(--ink);
}

.financing-decor {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: flex-end;
  overflow: hidden;
  pointer-events: none;
}
.financing-tread {
  position: absolute;
  right: clamp(8rem, 22vw, 20rem); top: 50%;
  width: clamp(220px, 24vw, 380px); aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 26px solid var(--paper-dim);
  box-shadow: 0 0 0 8px #fff, 0 0 0 40px var(--paper-dim);
}
.financing-photo {
  position: relative;
  height: 100%; width: 42vw; min-width: 320px;
  object-fit: cover; object-position: 70% center;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%);
  mask-image: linear-gradient(to right, transparent, #000 18%);
}

.financing-inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.financing-copy .display--lg { font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.1rem); color: var(--ink); font-style: italic; }
.financing-title-lead { font-size: clamp(2rem, 1.5rem + 2.2vw, 2.7rem); }
.financing-title { max-width: 22ch; }

.financing-logos {
  background: none; border-radius: 0; padding: 0;
  justify-content: flex-start;
  margin-top: 1.25rem;
}
.financing-logos .fin-logo-img { height: 76px; }
.financing-logos .fin-logo-img--acima { height: 50px; }
.financing-cta {
  flex: none;
  align-self: flex-end;
  margin-top: 2rem;
  /* home.css's .financing-cta sets background:var(--ink) for the old
     outline-on-red button — same specificity, this file loads after, so
     restore the solid ember fill the reference design calls for. */
  background: var(--ember); border-color: var(--ember);
}
.financing-cta:hover { background: var(--ember-hi); border-color: var(--ember-hi); }

@media (max-width: 860px) {
  .financing-decor { display: none; }
  .financing-inner { justify-content: center; text-align: center; }
  .financing-logos { justify-content: center; flex-wrap: wrap; }
  .financing-copy { display: flex; flex-direction: column; align-items: center; }

  /* The 76px/50px sizes above are desktop-only — they're set on a
     .financing-logos .fin-logo-img selector, which out-specifies (and so
     overrides) home.css's own bare .fin-logo-img mobile shrink even inside
     this same breakpoint. Re-shrink here or the Acima mark runs off the
     right edge of narrow screens. */
  .financing-logos .fin-logo-img { height: 44px; }
  .financing-logos .fin-logo-img--acima { height: 29px; }

  .financing-cta { width: 100%; align-self: stretch; text-align: center; }
}

/* ---------- Complete tire services ---------------------------------------- */

#tire-services .sec-head .display--lg { font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.1rem); font-style: italic; margin-bottom: 0.15em; }
#tire-services .sec-head { margin-bottom: 0; }

.tire-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 2.5rem);
}
@media (max-width: 760px) {
  .tire-services-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}

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

/* ---------- Why buy your tires here — dark 4-column divided row ---------- */

#why-tires .sec-head .display--lg { font-size: clamp(1.1rem, 0.95rem + 0.9vw, 1.35rem); }
#why-tires .wrap { max-width: none; }

.why-tires-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.why-tires-item {
  text-align: center;
  padding-inline: 1rem;
  border-right: 1px solid var(--iron-hi);
}
.why-tires-item:last-child { border-right: none; }
.why-tires-badge {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--ember); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.45rem;
  margin: 0 auto 1.1rem;
}
.why-tires-title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: 0.9rem; color: #fff; margin: 0 0 0.4rem;
}
.why-tires-desc { margin: 0; color: var(--chrome); font-size: 0.85rem; }

@media (max-width: 760px) {
  .why-tires-row { grid-template-columns: 1fr 1fr; row-gap: 2rem; }
  .why-tires-item { border-right: none; border-bottom: 1px solid var(--iron-hi); padding-bottom: 1.75rem; }
  .why-tires-item:nth-child(2n) { padding-inline-start: 0; }
  .why-tires-item:nth-child(3), .why-tires-item:nth-child(4) { border-bottom: none; }
}

/* ---------- Tire-size CTA band — solid ember, subtle tread texture ------- */

.tire-cta { position: relative; overflow: hidden; background: var(--ember); color: #fff; }
.tire-cta::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 16px);
  pointer-events: none;
}
.tire-cta-inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 1.5rem;
  padding-block: clamp(1.75rem, 3vw, 2.25rem);
}
.tire-cta-copy { max-width: 40ch; }
.tire-cta-title { color: #fff; margin: 0 0 0.35rem; }
.tire-cta-copy p { margin: 0; color: rgba(255,255,255,0.92); }
.tire-cta-actions { display: flex; gap: 1rem; flex-wrap: wrap; flex: none; }

@media (max-width: 700px) {
  .tire-cta-inner { flex-direction: column; align-items: flex-start; }
  .tire-cta-actions { width: 100%; }
  .tire-cta-actions .btn { flex: 1; text-align: center; }
}