/* ===== SPECIAL DETAIL PAGE ===== */

/* ---------- PAGE FADE-IN ---------- */
@keyframes spd-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

body:has(.special-detail-page) #page-wrapper {
  animation: spd-fade-in 0.3s ease both;
}

/* Breadcrumb overlay and mobile title-clearance come from the shared
   `hero-overlay-page` class (components/breadcumb), which this page opts into.
   It replaces a bespoke copy of the same rules that also dimmed the breadcrumb
   links to 80% white. This file just supplies the page background. */
.special-detail-page {
  background: linear-gradient(180deg, #ffffff 0%, #f5f6f7 100%);
}

/* ---------- HERO ---------- */
/* Height, scrim, title scale and the left-align variant all come from .page-hero
   in main.css. Replaces a bespoke gradient band whose title was Inter 800 rather
   than the Bebas .section-title every other page h1 uses. Only the type label is
   local, since .page-hero has no kicker slot. */
.spd-hero__type {
  display: inline-block;
  font-family: Inter, sans-serif;
  font-size: 0.8rem;
  /* 800 to match .section-kicker, the site's standard kicker weight. */
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  /* The bright brand green, not the deeper --brand-secondary-deep that
     .section-kicker uses: that one is tuned for light surfaces and goes muddy on
     a photo. The shadow is what holds it if the photo runs light behind the
     label, since the hero scrim alone is only 20% black at desktop. */
  color: var(--brand-secondary);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  margin-bottom: 6px;
}

/* ---------- MAIN CONTENT LAYOUT ---------- */
/* Single column by default, which is also the whole story at corporate tier:
   there is no store card, so the meta row and image run the full content width.
   Stays a grid rather than flex so the store-tier rules below can span rows. */
.spd-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 40px;
  align-items: start;
}

.spd-main {
  min-width: 0;
}

/* Store tier: the card moves down beside the copy instead of sitting alongside
   the image, so the image gets the full width it has at corporate. The :has()
   keys off the card actually rendering (the aside is v-if'd on store tier), so
   corporate never reserves an empty second column. */
@media (min-width: 769px) {
  .spd-content:has(.spd-store) {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .spd-content:has(.spd-store) .spd-meta,
  .spd-content:has(.spd-store) .spd-image {
    grid-column: 1 / -1;
  }
}

/* ---------- META ROW (brand + dates) ---------- */
.spd-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

/* ImageCard puts a fallthrough class on its wrapper div, not on the <img>, and
   gives that wrapper an inline height of 150px plus overflow: hidden. Capping
   only the wrapper left the image still rendering at its own height inside a
   32px window, so the logo was clipped top and bottom rather than scaled. Both
   the wrapper and the image it holds need constraining. */
.spd-meta__brand-logo {
  max-height: 38px;
  max-width: 160px;
}

.spd-meta__brand-logo img {
  height: auto;
  width: auto;
  max-height: 38px;
  max-width: 100%;
  object-fit: contain;
}

.spd-meta__service-name {
  font-family: Inter, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1D4288;
}

/* Solid brand blue with white text, matching the valid-dates strip on the
   specials cards, rather than the pale blue tint it carried before. */
.spd-meta__dates {
  display: inline-block;
  font-family: Inter, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  background: var(--brand-primary);
  padding: 5px 14px;
  border-radius: 100px;
  letter-spacing: 0.01em;
}

/* ---------- SPECIAL IMAGE ---------- */
.spd-image {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 28px;
  aspect-ratio: 16 / 7;
  background: #e8eaed;
  box-shadow: 0 4px 20px rgba(0,0,0,0.10);
}

.spd-image__img,
.spd-image__img > div,
.spd-image__img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

.spd-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.12);
  pointer-events: none;
  border-radius: 16px;
  z-index: 1;
}

/* Offer value overlay. Sits above the flat ::after tint, hence z-index 2.
   The gradient only darkens the left of the frame: promo photography puts the
   vehicle centre to right, so the left third is sky and road and can carry white
   display type without covering the car. */
.spd-image__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  padding: 0 8% 0 6%;
  /* Stops pulled in so the falloff is steeper: same darkness at the left edge,
     but clear by half the frame instead of 70%, so the wash does not carry
     across the vehicle. */
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.48) 0%,
    rgba(0, 0, 0, 0.22) 22%,
    rgba(0, 0, 0, 0) 50%
  );
  pointer-events: none;
}

/* Decorative accent above the value. Gives the overlay a second element so a
   short label like "Rebate" does not sit alone in the frame. */
.spd-image__rule {
  width: 52px;
  height: 4px;
  border-radius: 2px;
  background: var(--brand-secondary);
}

.spd-image__value {
  font-family: var(--font-primary);
  font-size: clamp(1.75rem, 4.4vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
  /* Caps the measure so a longer label wraps to two lines against the gradient
     rather than running across the vehicle. */
  max-width: 58%;
  text-wrap: balance;
}

@media (max-width: 768px) {
  /* Full-bleed and flat, the same treatment the newer image components use: the
     photo runs to the viewport edges while every sibling keeps the container's
     20px gutter, and it gets taller so it does not read as a thin strip on a
     phone. The negative margins exactly cancel that gutter, so nothing overflows.

     This is what negative margins are for, unlike the specials card footer,
     which needed lifting out of its parent instead: there the element had no
     reason to leave the padding, here it genuinely has to escape a gutter its
     siblings still want. */
  .spd-image {
    margin-left: -20px;
    margin-right: -20px;
    border-radius: 0;
    box-shadow: none;
    aspect-ratio: 16 / 10;
    /* Desktop's 28px bottom margin stacked on the grid's 20px row gap for 48px
       under the image. 8px leaves 28px, which is enough under a full-bleed photo
       without pushing the special name down the page. */
    margin-bottom: 8px;
  }

  /* Same stacking above the image: this margin plus the row gap made 40px between
     the logo row and the photo. The row gap alone carries it now. */
  .spd-meta {
    margin-bottom: 0;
  }

  .spd-image::after {
    border-radius: 0;
  }

  /* The gradient runs further across because the vehicle fills more of the frame
     at this width. */
  .spd-image__overlay {
    gap: 10px;
    padding: 0 12% 0 7%;
    /* Steeper here too, but not as steep as desktop: the copy runs to 78% of a
       narrow frame, so it still needs cover further across. */
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.56) 0%,
      rgba(0, 0, 0, 0.3) 38%,
      rgba(0, 0, 0, 0) 74%
    );
  }

  .spd-image__rule {
    width: 40px;
    height: 3px;
  }

  .spd-image__value {
    max-width: 78%;
  }
}

/* ---------- TITLE & DESCRIPTION ---------- */
/* Matches the specials card title: brand blue at 700 rather than near-black
   at 800. */
.spd-title {
  font-family: Inter, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--brand-primary);
  line-height: 1.25;
  margin: 0 0 12px;
}

.spd-desc {
  font-family: Inter, sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  color: #555;
  line-height: 1.7;
  margin: 0 0 28px;
}

/* The Promise plan list that sat above the CTA is gone; the green perks band
   under the hero carries those four perks now. */

/* ---------- CTA BUTTON ---------- */
.spd-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  /* Green, the site's conversion CTA colour. This is the page's single shop /
     schedule action, so it uses the same fill as .btn-cta-green rather than the
     blue it carried before. */
  background: var(--brand-secondary-cta);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: Inter, sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 24px;
}

.spd-cta:hover {
  background: var(--brand-secondary-cta-hover);
}

/* White ring, matching the shared .btn-cta-* classes, but drawn just inside the
   fill instead of 2px outside it. Those classes sit on dark surfaces where an
   outside white ring reads; both buttons here sit on white, where it would
   disappear. Inset keeps the ring on the fill, so it has contrast on the green
   CTA and the blue rebate button alike. */
.spd-cta:focus-visible,
.spd-rebate__btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -3px;
}

.spd-cta--secondary {
  background: transparent;
  color: #1D4288;
  border: 1.5px solid rgba(29,66,136,0.25);
}

.spd-cta--secondary:hover {
  background: rgba(29,66,136,0.06);
  border-color: rgba(29,66,136,0.4);
}

/* The secondary is an outline button on white, so an inset white ring would be
   invisible on it. It keeps a dark ring on the outside. Placed after the rule
   above, which it ties with on specificity. */
.spd-cta--secondary:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* ---------- REBATE SECTION ---------- */
/* One panel holding the rebate row and the terms row, divided by a hairline.
   The border and fill live here rather than on the rows, so a panel with only
   one row still reads as a deliberate block. */
.spd-details {
  background: #fff;
  border: 1.5px solid rgba(29,66,136,0.15);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 32px;
}

.spd-details__row + .spd-details__row {
  border-top: 1.5px solid rgba(29,66,136,0.12);
}

.spd-rebate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 24px;
}

.spd-rebate__heading {
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 4px;
}

.spd-rebate__desc {
  font-family: Inter, sans-serif;
  font-size: 0.84rem;
  color: #777;
  margin: 0;
}

/* Solid blue, matching the site's paired-action convention: green for the shop /
   schedule CTA above, blue for the secondary utility action. */
.spd-rebate__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: var(--brand-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: Inter, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.spd-rebate__btn:hover {
  background: var(--brand-primary-hover);
}

/* ---------- TERMS ROW ---------- */
/* A full-width disclosure row inside the panel rather than a bare link. Padding
   sits on the button, not the row, so the whole width is the hit target. */
.spd-terms__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 24px;
  background: none;
  border: none;
  font-family: Inter, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brand-primary);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.spd-terms__link:hover {
  background: rgba(29, 66, 136, 0.04);
}

.spd-terms__link:focus-visible {
  outline: 2px solid #1D4288;
  outline-offset: -2px;
}

.spd-terms__chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.spd-terms__link[aria-expanded="true"] .spd-terms__chevron {
  transform: rotate(180deg);
}

/* No fill or radius of its own: it reads as the body of the row above rather
   than a separate card. */
.spd-terms__body {
  padding: 0 24px 18px;
  font-family: Inter, sans-serif;
  font-size: 0.82rem;
  line-height: 1.7;
  color: #555;
}

/* ---------- STORE SIDEBAR ---------- */
/* Width comes from the grid column. No top padding any more: the card starts on
   the same grid row as the copy, so its top already aligns with the title. */
.spd-store {
  padding-top: 0;
}

/* Same white-with-hairline treatment as the .spd-details panel rather than a
   drop shadow, so the two blocks in this row read as one family. */
.spd-store__card {
  background: #fff;
  border: 1.5px solid rgba(29, 66, 136, 0.15);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 0;
}

/* Recipe comes from the shared .section-kicker in main.css, which this used to
   reimplement at a smaller size, lighter weight and wider tracking with the
   green hardcoded. Only the card's slightly wider gap stays local. */
.spd-store__heading {
  margin-bottom: 12px;
}

/* Brand blue at 700, matching the special name and the card titles. */
.spd-store__name {
  font-family: Inter, sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--brand-primary);
  margin: 0 0 20px;
  line-height: 1.3;
}

/* Green to match its icon. Underlines on hover because a colour shift alone left
   these two links with no visible hover state at all. */
.spd-store__phone {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: Inter, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--brand-secondary-cta);
  text-decoration: none;
  cursor: pointer;
  margin-bottom: 10px;
  transition: color 0.15s ease;
}

.spd-store__phone:hover {
  color: var(--brand-secondary-cta-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.spd-store__phone--after {
  font-size: 0.88rem;
  color: #555;
  font-weight: 500;
}

.spd-store__phone--after:hover {
  color: #333;
}

.spd-store__phone-label {
  font-size: 0.75rem;
  color: #999;
  font-weight: 500;
}

/* Sized here rather than on the tags: the markup ships width/height="16" on each
   inline SVG, and CSS overrides those so all three stay in step from one place. */
.spd-store__phone svg,
.spd-store__address svg {
  width: 19px;
  height: 19px;
}

.spd-store__phone svg {
  flex-shrink: 0;
}

.spd-store__address {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: Inter, sans-serif;
  font-size: 0.88rem;
  color: #555;
  line-height: 1.5;
}

.spd-store__address svg {
  flex-shrink: 0;
  /* 1px rather than 2: the taller icon needs less nudge to sit on the first
     line's baseline. */
  margin-top: 1px;
}

.spd-store__address a {
  color: #555;
  text-decoration: none;
  transition: color 0.15s ease;
}

.spd-store__address a:hover {
  color: #1D4288;
  text-decoration: underline;
}

/* ---------- MORE SPECIALS ---------- */
/* Fill comes from .section-gray in main.css, unscoped and shared with the home
   and specials page bands. The band's vertical rhythm lives on the container
   below, so the tint reaches the page edges. */
.spd-more {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px 48px;
}

/* The kicker above this section's heading uses the shared .section-kicker in
   main.css. It carried its own near-copy of that rule (smaller, lighter, the
   loosest tracking of any kicker on the site, hardcoded green rather than the
   token), so it never followed changes to the others. */

/* Brand blue at 700, matching the special name, the store name and the card
   titles. Was the last near-black 800 heading on the page. */
.spd-more__title {
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--brand-primary);
  margin: 4px 0 24px;
}

/* ---------- LOADING SKELETON ---------- */
@keyframes spd-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.spd-skeleton__bone {
  background: linear-gradient(90deg, #e8e8e8 25%, #f2f2f2 50%, #e8e8e8 75%);
  background-size: 800px 100%;
  animation: spd-shimmer 1.5s ease infinite;
  border-radius: 8px;
}

/* Stands in for the photo hero: same left-aligned 1400px column and the same
   min-heights as .page-hero__overlay, on a flat dark ground since there is no
   photo yet. Top padding clears the overlaid breadcrumb the way
   .hero-overlay-page does for the real hero. */
.spd-skeleton__header {
  background: var(--brand-primary);
  padding: 84px 24px 40px;
  min-height: 280px;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
}

/* 769px, not 768px, because the mobile override for this element further down
   the file uses max-width: 768px and would otherwise win the tie at exactly
   768px, where the real hero has already stepped up. */
@media (min-width: 769px) {
  .spd-skeleton__header {
    padding-top: 40px;
    min-height: 340px;
  }
}

@media (min-width: 992px) {
  .spd-skeleton__header {
    min-height: 380px;
  }
}

@media (min-width: 1200px) {
  .spd-skeleton__header {
    min-height: 420px;
  }
}

.spd-skeleton__header .spd-skeleton__bone {
  background: linear-gradient(90deg, rgba(255,255,255,0.08) 25%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.08) 75%);
  background-size: 800px 100%;
  animation: spd-shimmer 1.5s ease infinite;
}

.spd-skeleton__type {
  width: 100px;
  height: 14px;
  border-radius: 4px;
}

.spd-skeleton__title {
  width: 320px;
  max-width: 80%;
  height: 32px;
}

.spd-skeleton__body {
  display: flex;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px 64px;
}

.spd-skeleton__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.spd-skeleton__meta {
  width: 240px;
  height: 16px;
}

.spd-skeleton__image {
  width: 100%;
  height: 0;
  padding-bottom: 42%;
  border-radius: 16px;
}

.spd-skeleton__line {
  height: 14px;
}

.spd-skeleton__line--wide {
  width: 90%;
}

.spd-skeleton__line--medium {
  width: 70%;
}

.spd-skeleton__line--narrow {
  width: 45%;
}

.spd-skeleton__btn {
  width: 200px;
  height: 44px;
  border-radius: 10px;
  margin-top: 8px;
}

.spd-skeleton__sidebar {
  flex: 0 0 300px;
  padding-top: 52px;
}

.spd-skeleton__card {
  width: 100%;
  height: 220px;
  border-radius: 16px;
}

@media (max-width: 768px) {
  .spd-skeleton__header {
    /* 84px matches the breadcrumb clearance .hero-overlay-page gives the real
       hero at this width. */
    padding: 84px 20px 32px;
  }

  .spd-skeleton__body {
    flex-direction: column;
    padding: 28px 20px 48px;
    gap: 28px;
  }

  .spd-skeleton__sidebar {
    flex: none;
    padding-top: 0;
  }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
  .spd-hero__type {
    font-size: 0.7rem;
    margin-bottom: 4px;
  }

  /* Already a single column at this width; only the spacing changes.
     Bottom pad is what sits under the store card once the layout stacks, so it
     matches the space above it: the 20px row gap plus the panel's 16px bottom
     margin below. Together they were 52px above the card against 20px below. */
  .spd-content {
    padding: 20px 20px 36px;
    gap: 20px;
  }

  .spd-details {
    margin-bottom: 16px;
  }

  /* Stacked and left-aligned, not centred: the terms row below it stays
     left-aligned either way, and centring one row of the panel but not the other
     read as a mistake. */
  .spd-rebate {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px 20px;
  }

  .spd-rebate__btn {
    justify-content: center;
  }

  .spd-terms__link {
    padding: 14px 20px;
  }

  .spd-terms__body {
    padding: 0 20px 16px;
  }

  .spd-more {
    padding: 32px 20px 40px;
  }
}

/* The hero's height and title ladder now come from .page-hero__overlay in
   main.css, so the per-breakpoint title sizes that lived here are gone. */