/* Homepage promo cards under the hero carousel (index.ejs .hero-promos).
   Deliberately not the gold/yellow style used elsewhere so they stand out.
   .hero-promo is also the base of the offer card on the service page
   (service.ejs .svc-offer) - hover/motion below is limited to a.hero-promo. */
.hero-right { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.hero-promos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.hero-promo {
  --promo-glow: 47,125,225;
  --promo-bg: radial-gradient(120% 140% at 100% 0%, #2f7de1 0%, #123a73 45%, #0a1630 100%);
  --promo-scrim: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 60%, rgba(0,0,0,0) 100%);
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  justify-content: flex-start; align-items: flex-start; gap: 10px;
  padding: 1.1rem 1.2rem; border-radius: 14px;
  text-decoration: none; color: #fff; isolation: isolate; background-color: #0a1630;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 24px rgba(0,0,0,.4), 0 22px 54px -14px rgba(var(--promo-glow), .5);
  transition: translate .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
}
/* Colour layer: dark scrim (keeps text readable) over the card colour. */
.hero-promo::before {
  content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--promo-scrim), var(--promo-bg);
  background-size: 100% 100%, 150% 150%; background-position: 0 0, 100% 0;
  transition: background-position .7s ease;
}
.hero-promo-badge {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; background: rgba(255,255,255,.95); box-shadow: 0 6px 16px rgba(0,0,0,.3);
}
.hero-promo-badge svg { width: 24px; height: 24px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-promo--service .hero-promo-badge svg { stroke: #1f5fbf; }

/* ── Home cards: heading + short text + arrow chip over a faint photo ───── */
.hero-promos > .hero-promo {
  /* Faint background photo (.hero-promo-bg), tinted by the semi-transparent colour layer above it.
     Stock photos, Pexels License (free for commercial use, no attribution required),
     resized to 800px webp with sharp:
     - promo-service.webp:  https://www.pexels.com/photo/car-in-an-auto-repair-shop-12185933/ (Hyundai Motor Group)
     - promo-vignette.webp: https://www.pexels.com/photo/cars-on-highway-viaduct-18505652/ (photographer: see source page) */
  --promo-photo: url("/images/promo/promo-service.webp");
  --promo-bg: radial-gradient(120% 140% at 100% 0%, rgba(47,125,225,.8) 0%, rgba(18,58,115,.86) 45%, rgba(10,22,48,.94) 100%);
  --promo-scrim: linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.28) 60%, rgba(0,0,0,.1) 100%);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: start; align-content: start;
  padding: .95rem 1.1rem 1rem;
}
.hero-promos > .hero-promo--vignette {
  --promo-glow: 24,180,123; --promo-photo: url("/images/promo/promo-vignette.webp");
  --promo-bg: radial-gradient(120% 140% at 100% 0%, rgba(24,180,123,.78) 0%, rgba(13,91,68,.86) 45%, rgba(7,38,29,.94) 100%);
  background-color: #07261d;
}
.hero-promo-bg {
  position: absolute; inset: 0; z-index: -3; background: var(--promo-photo) center / cover no-repeat;
  filter: grayscale(1) contrast(1.15) brightness(1.45); transition: scale 1.6s cubic-bezier(.22,1,.36,1);
}
.hero-promo-text { display: contents; }
.hero-promo-text strong { grid-column: 1; font-size: 1.02rem; line-height: 1.2; text-transform: uppercase; letter-spacing: .02em; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.hero-promo-text > span { grid-column: 1; font-size: .86rem; line-height: 1.4; color: rgba(255,255,255,.94); text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.hero-promo-arrow {
  grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.34);
  transition: transform .3s cubic-bezier(.22,1,.36,1), background-color .3s ease;
}
.hero-promo-arrow svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Arrow sits bottom-right: the card's only control. */
.hero-promos > .hero-promo > .hero-promo-arrow { align-self: end; }

/* Decorative watermark icon: large, faint line drawing bleeding off the top-right
   corner, behind the text. No chip, takes no layout space. */
.hero-promo-icon {
  position: absolute; top: -14px; right: -12px; width: 96px; height: 96px; z-index: -1;
  pointer-events: none; opacity: .32; transition: opacity .4s ease;
}
.hero-promo-icon svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-12deg); transition: transform .6s cubic-bezier(.34,1.56,.64,1); }
.hero-promo-icon-dash { stroke-dasharray: 3 3.5; }
/* Shield: upright and fully inside the corner (the wrench keeps its tilted bleed). */
.hero-promo-icon--road { top: 8px; right: 8px; width: 72px; height: 72px; }
.hero-promo-icon--road svg { transform: none; }
a.hero-promo:hover .hero-promo-icon, a.hero-promo:focus-visible .hero-promo-icon { opacity: .5; }
a.hero-promo:hover .hero-promo-icon--wrench svg, a.hero-promo:focus-visible .hero-promo-icon--wrench svg { transform: rotate(-36deg); }
a.hero-promo:hover .hero-promo-icon--road svg, a.hero-promo:focus-visible .hero-promo-icon--road svg { transform: scale(1.08); }
a.hero-promo:hover .hero-promo-icon-dash, a.hero-promo:focus-visible .hero-promo-icon-dash { animation: hero-promo-road .5s linear infinite; }
@keyframes hero-promo-road { to { stroke-dashoffset: -6.5; } }

/* Interactive states - links only. */
a.hero-promo::after { /* sheen sweep */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.2) 50%, transparent 62%);
  translate: -110% 0; transition: translate .9s ease;
}
a.hero-promo:hover, a.hero-promo:focus-visible {
  translate: 0 -5px; border-color: rgba(255,255,255,.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 16px 32px rgba(0,0,0,.5), 0 30px 70px -10px rgba(var(--promo-glow), .8);
}
a.hero-promo:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
a.hero-promo:hover::before, a.hero-promo:focus-visible::before { background-position: 0 0, 40% 60%; }
a.hero-promo:hover::after, a.hero-promo:focus-visible::after { translate: 110% 0; }
a.hero-promo:hover .hero-promo-bg, a.hero-promo:focus-visible .hero-promo-bg { scale: 1.12; }
a.hero-promo:hover .hero-promo-arrow, a.hero-promo:focus-visible .hero-promo-arrow { transform: translateX(4px); background-color: rgba(255,255,255,.3); }
a.hero-promo:active { translate: 0 -2px; }
/* Entrance: animations.js staggers .hero-promos children (.stagger-child);
   keep the hover transitions alive next to its opacity/transform ones. */
.js-anim a.hero-promo.stagger-child {
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1),
    translate .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
}

/* Two columns (styles.css: .hero-spotlight is two-up from 1181px): stretch both
   columns to one height. The showcase card takes whatever the promo cards leave,
   so the right column ends level with the search card - no fixed heights. */
@media (min-width: 1181px) {
  .hero-spotlight { align-items: stretch; }
  .hero-right > .hero-carousel { flex: 1 1 0; height: auto; min-height: 300px; }
  .hero-right > .hero-promos { flex: none; }
}
/* Two-up: share rows across both cards so heading and text line up even when
   the headings wrap to a different number of lines. */
@media (min-width: 901px) {
  @supports (grid-template-rows: subgrid) {
    .hero-promos { grid-template-columns: 1.35fr 1fr; grid-template-rows: auto auto; row-gap: 0; } /* blue card has the longer text */
    .hero-promos > .hero-promo { grid-row: span 2; grid-template-rows: subgrid; row-gap: 6px; }
  }
}
@media (max-width: 900px) {
  .hero-promos { grid-template-columns: 1fr; gap: 12px; }
}
/* Phones (styles.css stacks the hero at 768px): heading, car showcase, promo cards, then the search form. */
@media (max-width: 768px) {
  .hero-spotlight > .hero-right { order: 1; }
  .hero-right > .hero-carousel { order: 0; }
}
@media (max-width: 640px) {
  .hero-promos > .hero-promo { padding: 14px 14px 15px 16px; gap: 5px 12px; grid-template-rows: auto 1fr; align-content: stretch; }
  .hero-promo-icon { width: 80px; height: 80px; }
  .hero-promo-icon--road { width: 60px; height: 60px; }
  .hero-promo-text strong { font-size: 1rem; }
  .hero-promo-text > span { font-size: .9rem; line-height: 1.42; }
}
@media (prefers-reduced-motion: reduce) {
  a.hero-promo::after { display: none; }
  a.hero-promo:hover, a.hero-promo:focus-visible { translate: none; }
  a.hero-promo:hover .hero-promo-bg, a.hero-promo:focus-visible .hero-promo-bg { scale: none; }
  a.hero-promo:hover .hero-promo-arrow, a.hero-promo:focus-visible .hero-promo-arrow { transform: none; }
  a.hero-promo:hover .hero-promo-icon--wrench svg, a.hero-promo:focus-visible .hero-promo-icon--wrench svg { transform: rotate(-12deg); }
  a.hero-promo:hover .hero-promo-icon--road svg, a.hero-promo:focus-visible .hero-promo-icon--road svg { transform: none; }
  a.hero-promo:hover .hero-promo-icon-dash, a.hero-promo:focus-visible .hero-promo-icon-dash { animation: none; }
}