/* ==========================================================================
   REVIEWS HERO — 3D molded dashboard housing
   Created 2026-09-02. Reference (approved):
     Website Media/Website Photos/Graphics/reviews-hero-3d-redesign-reference.png

   SCOPE: every selector is under `.rev-hero3d`, which appears on the first
   section of reviews.html and nowhere else. This file is linked ONLY by
   reviews.html. No shared stylesheet is modified, so Vehicle Makes, Ford,
   Mercedes, Services and every other page are untouched by definition.

   BOUNDARY: hero only. The "Verified Customer Reviews" section below and
   everything after it are not referenced here.

   Same language as the approved Services hero and the frozen Vehicle Makes
   hero: warm cream ground, molded housing, recessed illuminated orange trim,
   four corner fasteners, layered depth.
   ========================================================================== */

.rev-hero3d{
  --rv-cream-1:#FDF8F0;
  --rv-cream-2:#F8F0E3;
  --rv-cream-3:#F1E6D5;
  --rv-edge:#E1D3BC;
  --rv-screw:#B5A88F;
  --rv-ink:#141110;

  position:relative;
  background:
    radial-gradient(120% 70% at 80% 0%, rgba(242,96,12,0.06) 0%, rgba(242,96,12,0) 60%),
    linear-gradient(180deg, #FDFAF4 0%, #FAF4EA 100%);
  padding:26px 0 30px;
  border-bottom:0;
}

/* Chrome, not body copy — the housing runs wider than the 1280px measure, as
   the reference shows. Scoped to this section only. */
.rev-hero3d > .wrap{ max-width:1420px; }

/* --------------------------------------------------------------------------
   HOUSING
   -------------------------------------------------------------------------- */
.rev-hero3d .rvh-housing{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 0.92fr) minmax(0, 1fr);
  align-items:stretch;
  border-radius:30px;
  border:1px solid var(--rv-edge);
  background:
    radial-gradient(80% 60% at 6% 0%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(160deg, var(--rv-cream-1) 0%, var(--rv-cream-2) 52%, var(--rv-cream-3) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.95),
    inset 0 -4px 0 rgba(0,0,0,0.06),
    inset 4px 0 0 rgba(255,255,255,0.5),
    inset -4px 0 0 rgba(0,0,0,0.04),
    0 3px 6px rgba(23,20,18,0.07),
    0 20px 44px rgba(23,20,18,0.14),
    0 44px 88px rgba(23,20,18,0.12);
  overflow:hidden;
}
/* recessed illuminated orange trim */
.rev-hero3d .rvh-housing::before{
  content:"";
  position:absolute; inset:14px;
  border-radius:20px;
  border:2px solid rgba(242,96,12,0.55);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.7),
    0 0 16px rgba(242,96,12,0.26),
    inset 0 0 26px rgba(242,96,12,0.08);
  pointer-events:none;
  z-index:3;
}
/* four corner fasteners */
.rev-hero3d .rvh-housing::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 30px 30px, var(--rv-screw) 0 4px, #EFE6D6 4px 8px, rgba(0,0,0,0) 8.5px),
    radial-gradient(circle at calc(100% - 30px) 30px, var(--rv-screw) 0 4px, #EFE6D6 4px 8px, rgba(0,0,0,0) 8.5px),
    radial-gradient(circle at 30px calc(100% - 30px), var(--rv-screw) 0 4px, #EFE6D6 4px 8px, rgba(0,0,0,0) 8.5px),
    radial-gradient(circle at calc(100% - 30px) calc(100% - 30px), var(--rv-screw) 0 4px, #EFE6D6 4px 8px, rgba(0,0,0,0) 8.5px);
  pointer-events:none;
  z-index:4;
}

/* --------------------------------------------------------------------------
   COPY COLUMN — wording unchanged, sizes raised to the master standard
   -------------------------------------------------------------------------- */
.rev-hero3d .rvh-copy{
  position:relative; z-index:2;
  padding:52px 40px 56px 50px;
  align-self:center;
}

.rev-hero3d .breadcrumb{
  font-size:1rem; gap:10px; margin-bottom:22px; font-weight:700;
}
.rev-hero3d .breadcrumb .current{ color:var(--red); }

.rev-hero3d h1{
  font-family:var(--font-serif);
  font-size:clamp(3rem, 5vw, 4.6rem);
  line-height:1.0; letter-spacing:-0.02em;
  color:var(--rv-ink); max-width:none;
  text-shadow:0 1px 0 rgba(255,255,255,0.9), 0 3px 6px rgba(23,20,18,0.12);
}

/* the short red rule under the H1, as in the reference */
.rev-hero3d .page-hero-accent{
  width:82px; height:6px; margin:20px 0 26px; border-radius:3px;
  background:linear-gradient(90deg, var(--red) 0%, var(--red-dark) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,0.85), 0 3px 8px rgba(210,20,27,0.32);
}

/* supporting heading — 17.6px bold, uppercase, red */
.rev-hero3d .lede{
  font-family:var(--font-sans);
  font-size:1.1rem; font-weight:900;
  text-transform:uppercase; letter-spacing:0.03em;
  line-height:1.35;
  color:var(--red);
  margin:0 0 20px;
  max-width:none;
  text-shadow:0 1px 0 rgba(255,255,255,0.85);
}

/* both existing paragraphs — 19.2px, generous line-height */
.rev-hero3d .rvh-copy p:not(.lede){
  font-size:1.2rem; line-height:1.72;
  color:var(--charcoal); max-width:560px;
  margin:0 0 18px;
}
.rev-hero3d .rvh-copy p:not(.lede):last-child{ margin-bottom:0; }

/* --------------------------------------------------------------------------
   MEDIA — the approved collage, full-bleed inside the housing
   Kept bright: no dark overlay, only a soft cream feather on the left edge so
   it melts into the panel instead of butting against it.
   -------------------------------------------------------------------------- */
.rev-hero3d .rvh-media{
  position:relative; z-index:1;
  min-height:100%;
  overflow:hidden;
}
.rev-hero3d .rvh-media img{
  display:block;
  width:100%; height:100%;
  min-height:540px;
  object-fit:cover; object-position:54% 44%;
  filter:brightness(1.05) saturate(1.03);
}
.rev-hero3d .rvh-media::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    var(--rv-cream-2) 0%, rgba(248,240,227,0.84) 4%,
    rgba(248,240,227,0.3) 12%, rgba(248,240,227,0) 24%);
  pointer-events:none;
  z-index:2;
}

/* --------------------------------------------------------------------------
   RESPONSIVE — stack, never shrink the reading sizes
   -------------------------------------------------------------------------- */
@media (max-width: 1180px){
  .rev-hero3d .rvh-copy{ padding:46px 32px 48px 40px; }
  .rev-hero3d .rvh-media img{ min-height:580px; }
}

/* Below 980px the columns become one. The collage moves under the copy so the
   H1 still leads, and keeps a real 16:9 presence rather than a thin strip. */
@media (max-width: 980px){
  .rev-hero3d{ padding:18px 0 22px; }
  .rev-hero3d .rvh-housing{ grid-template-columns:1fr; border-radius:26px; }
  .rev-hero3d .rvh-housing::before{ inset:11px; border-radius:17px; }
  .rev-hero3d .rvh-copy{ padding:44px 32px 30px; }
  .rev-hero3d .rvh-copy p:not(.lede){ max-width:none; }
  .rev-hero3d .rvh-media{ margin:6px 14px 14px; border-radius:14px; }
  .rev-hero3d .rvh-media img{
    min-height:0; aspect-ratio:16/9; height:auto;
    border-radius:14px; object-position:50% 46%;
  }
  .rev-hero3d .rvh-media::before{ display:none; }
}

@media (max-width: 560px){
  .rev-hero3d{ padding:12px 0 18px; }
  .rev-hero3d .rvh-housing{ border-radius:20px; }
  .rev-hero3d .rvh-housing::before{ inset:8px; border-radius:13px; border-width:2px; }
  .rev-hero3d .rvh-housing::after{
    background-image:
      radial-gradient(circle at 20px 20px, var(--rv-screw) 0 3px, #EFE6D6 3px 6px, rgba(0,0,0,0) 6.5px),
      radial-gradient(circle at calc(100% - 20px) 20px, var(--rv-screw) 0 3px, #EFE6D6 3px 6px, rgba(0,0,0,0) 6.5px),
      radial-gradient(circle at 20px calc(100% - 20px), var(--rv-screw) 0 3px, #EFE6D6 3px 6px, rgba(0,0,0,0) 6.5px),
      radial-gradient(circle at calc(100% - 20px) calc(100% - 20px), var(--rv-screw) 0 3px, #EFE6D6 3px 6px, rgba(0,0,0,0) 6.5px);
  }
  .rev-hero3d .rvh-copy{ padding:32px 20px 24px; }
  .rev-hero3d h1{ font-size:2.9rem; }
  /* body copy stays at 18.4px on the phone — deliberately not reduced further */
  .rev-hero3d .rvh-copy p:not(.lede){ font-size:1.15rem; line-height:1.68; }
  .rev-hero3d .lede{ font-size:1.05rem; }
  .rev-hero3d .rvh-media{ margin:4px 10px 10px; }
}