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

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

.contact-hero .hero-media { background: #09090a; }
.contact-hero .hero-media::before {
  background-image:
    linear-gradient(100deg, rgba(10,10,11,0.8) 0%, rgba(10,10,11,0.2) 55%),
    url('../assets/img/contactus/hero.png');
}

/* Shared .hero-scrim (home.css) transitions from dark to transparent between
   36% and 100% of the width — pulled earlier here so the dark coverage ends
   further left and more of the photo's right side reads clearly. */
.contact-hero .hero-scrim {
  background:
    linear-gradient(100deg, rgba(10,10,11,0.95) 0%, rgba(10,10,11,0.78) 20%, rgba(10,10,11,0.32) 42%, rgba(10,10,11,0.08) 65%),
    linear-gradient(to top, rgba(10,10,11,0.5), transparent 45%);
}
.contact-hero .hero-lede { max-width: 46ch; }

.contact-hero-quote {
  position: absolute; z-index: 1;
  right: clamp(1.5rem, 5vw, 4rem); bottom: clamp(1.5rem, 5vw, 3rem);
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.2rem);
  color: #fff;
  line-height: 1.15;
  text-align: right;
  transform: rotate(2deg);
}
@media (max-width: 700px) { .contact-hero-quote { display: none; } }

/* ---------- Visit us in Riverview ------------------------------------------- */

.location-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 860px) { .location-grid { grid-template-columns: 1fr; } }

.location-copy .lede { margin-bottom: 1.5rem; }

.location-card {
  background: var(--paper);
  border: 1px solid var(--paper-dim);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  display: grid;
  gap: 1.25rem;
}
.location-fact { display: flex; gap: 0.9rem; align-items: flex-start; }
.location-fact i {
  flex: none; color: var(--ember); font-size: 1.75rem;
  width: 2rem; text-align: center; margin-top: 0.15rem;
}
.location-fact strong {
  display: block;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: 0.85rem; letter-spacing: 0.01em; margin-bottom: 0.2rem;
}
.location-fact p, .location-fact a { margin: 0; color: #4B4F57; }
.location-fact a:hover { color: var(--ember); }

.location-map { border: 1px solid var(--paper-dim); overflow: hidden; min-height: 538px; }
.location-map iframe { width: 100%; height: 100%; min-height: 538px; border: 0; display: block; }

/* ---------- How can we help? ------------------------------------------------ */

.help-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: stretch;
}
@media (max-width: 900px) { .help-grid { grid-template-columns: 1fr; } }

.help-copy .lede { margin-bottom: 1.5rem; }
.help-form { display: grid; gap: 0.9rem; }
.help-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
@media (max-width: 420px) { .help-form-row { grid-template-columns: 1fr; } }

.contact-field {
  width: 100%;
  background: #fff;
  border: 1px solid var(--paper-dim);
  padding: 0.85rem 1.1rem;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.94rem;
}
.contact-field::placeholder { color: var(--chrome-dim); }
.contact-field:focus { outline: none; border-color: var(--ember); }
textarea.contact-field { resize: vertical; min-height: 120px; }

/* No storefront/exterior photo supplied yet. */
.help-media {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  background: var(--iron);
}
.help-media-photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.help-media-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,11,0.75) 0%, rgba(10,10,11,0.1) 45%);
}
.help-media-tags {
  position: absolute; z-index: 1; right: 1.5rem; top: 1.5rem;
  list-style: none; margin: 0; padding: 0;
  text-align: right;
  font-family: var(--font-mono); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
  display: grid; gap: 0.3rem;
}
.help-media-quote {
  position: absolute; z-index: 1; left: 1.5rem; bottom: 1.5rem;
  font-family: 'Caveat', cursive; font-weight: 700;
  font-size: clamp(1.3rem, 1rem + 1.4vw, 1.8rem);
  color: #fff; line-height: 1.2;
  transform: rotate(-2deg);
}

/* ---------- Looking for a specific service? --------------------------------- */

.explore-band {
  position: relative;
  background-color: var(--paper-dim);
  background-image: url('../assets/img/aboutus/fondollanta.jpg');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}
/* Full-bleed like the other full-width sections on the site: drop the
   1280px .wrap cap, keep only the side gutter. */
#explore .wrap { max-width: none; }

#explore .display--lg { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.1rem); }

.explore-lede { margin-inline: auto; text-align: center; }

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

.explore-card { background: #fff; text-align: center; }
.explore-card-photo {
  position: relative;
  aspect-ratio: 16 / 7;
  background-color: var(--iron);
  background-size: cover;
  background-position: center;
  margin-bottom: 2.6rem;
}
.explore-card-badge {
  position: absolute; left: 50%; bottom: -2.1rem;
  transform: translateX(-50%);
  width: 76px; height: 76px;
  border-radius: 50%;
  background: #fff;
  color: var(--ember);
  border: 3px solid var(--paper);
  box-shadow: 0 4px 16px rgba(10, 10, 11, 0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
}
.explore-card-body { padding: 0 1.5rem 1.75rem; }
.explore-card-title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: 1.05rem; margin: 0 0 0.5rem;
}
.explore-card-desc { margin: 0 0 1.25rem; color: #4B4F57; font-size: 0.9rem; }