/* Breadcrumb overlay + mobile title-clearance come from the shared
   `hero-overlay-page` class (components/breadcumb). This page just supplies
   its own background. */
.special-list {
  background: linear-gradient(180deg, #ffffff 0%, #f5f6f7 100%);
}

/* Hero styles come from .page-hero in main.css. */
.special-list .page-hero__ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

/* ---------- SPECIALS SECTIONS ---------- */
.special-list .wrap-list-special {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* ---------- SECTION SPACING ---------- */
.special-list .wrap-list-special .section-kicker {
  margin-top: 48px;
}

/* On phones 48px above the kicker leaves a large white gap between the gray tire
   band and the service specials heading. In practice this only affects the
   service section: the tire band zeroes it below, and the empty state does too. */
@media (max-width: 767px) {
  .special-list .wrap-list-special .section-kicker {
    margin-top: 24px;
  }

  .spc-skeleton__header {
    margin-top: 24px;
  }
}

/* Gray band around the tire specials. The fill comes from .section-gray in
   main.css, which is unscoped and shared with the home page bands; this only
   supplies the vertical rhythm.

   The 48px kicker margin above is this page's normal source of section top
   space. Inside the band the padding does that job, so left alone the two would
   stack and push the heading off centre in the band.

   Top is deliberately shorter than bottom. The green perks band sits directly
   above and butts against the band's top edge, so it already carries the break,
   and a symmetric pad read as a gap between two colored bands. */
.special-list .spc-band .wrap-list-special {
  padding-top: 24px;
  padding-bottom: 40px;
}

.special-list .spc-band .wrap-list-special .section-kicker {
  margin-top: 0;
}

@media (min-width: 768px) {
  .special-list .spc-band .wrap-list-special {
    padding-top: 36px;
    padding-bottom: 60px;
  }
}

/* One step under the shared .section-title scale (3.375 / 2.25 / 2rem) so the
   specials cards, not the headers above them, carry the page. Every breakpoint
   is restated: this selector outranks main.css's single-class media rules, so a
   desktop-only override would leak down to mobile. */
.special-list .wrap-list-special .section-title {
  font-size: 3rem;
  margin-bottom: 24px;
}

@media (max-width: 767px) {
  .special-list .wrap-list-special .section-title {
    font-size: 2rem;
  }
}

@media (max-width: 575px) {
  .special-list .wrap-list-special .section-title {
    font-size: 1.75rem;
  }
}

/* ---------- SPECIALS GRID ---------- */
/* Grid layout defined in card_item.css */

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

.spc-shimmer {
  background: linear-gradient(90deg, #eee 25%, #e0e0e0 50%, #eee 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite ease-in-out;
}

.spc-skeleton__header {
  margin-top: 48px;
  margin-bottom: 24px;
}

.spc-skeleton__overline {
  width: 100px;
  height: 12px;
  border-radius: 6px;
  background: #eee;
  margin-bottom: 8px;
}

.spc-skeleton__title {
  width: 260px;
  height: 28px;
  border-radius: 8px;
  background: #e8e8e8;
}

.spc-skeleton-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.spc-skeleton-card__image {
  aspect-ratio: 16 / 8;
  width: 100%;
}

.spc-skeleton-card__body {
  padding: 20px 24px 24px;
}

.spc-skeleton-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

/* Stands in for the valid-dates strip: full width, flush, no radius. */
.spc-skeleton-card__strip {
  height: 34px;
}

.spc-skeleton-card__logo {
  width: 80px;
  height: 24px;
  border-radius: 6px;
}

.spc-skeleton-card__line {
  border-radius: 6px;
  margin-bottom: 10px;
}

.spc-skeleton-card__line--title {
  width: 75%;
  height: 22px;
}

.spc-skeleton-card__line--sub {
  width: 90%;
  height: 16px;
}

.spc-skeleton-card__line--desc {
  width: 60%;
  height: 14px;
  margin-bottom: 20px;
}

.spc-skeleton-card__btns {
  display: flex;
  gap: 10px;
}

.spc-skeleton-card__btn {
  flex: 1;
  height: 44px;
  border-radius: 10px;
}

/* ---------- EMPTY STATE ---------- */
/* Two-column card, copy and actions on the left with the showroom photo on the
   right. Card elevation matches the promo cards and the .spc-why card so the
   three read as one family. */
.special-list .spc-empty {
  display: grid;
  grid-template-columns: 1fr;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  margin-top: 40px;
}

/* Mirrors the .spc-why geometry so the empty card and the section below it share
   one edge at every width. .spc-why is a 1200px layout inside 40px section
   padding, which is 1280px outer; the plain .wrap-list-special is 1200px outer
   with 24px gutters, so it lands 48px narrower. Below 768px the specials gutter
   is kept, since this is a rounded card and .spc-why goes full bleed there. */
@media (min-width: 768px) {
  .special-list .spc-empty-wrap {
    max-width: 1280px;
    padding-left: 40px;
    padding-right: 40px;
  }
}

.special-list .spc-empty__content {
  padding: 26px 22px 30px;
}

/* The 48px kicker margin that spaces the specials sections apart would push this
   kicker off the top of the card. The card padding above does that job here. */
.special-list .spc-empty .section-kicker {
  margin-top: 0;
}

/* Matches the .spc-why card heading rather than the section headers: both sit
   inside a white card, so they read as a pair. Every breakpoint is restated for
   the same reason as the section headers above: this rule and the
   .wrap-list-special media rules are both three classes deep, and this one comes
   later in the file, so a desktop-only value would win on mobile too. */
.special-list .spc-empty .section-title {
  font-size: 2.75rem;
  margin-bottom: 14px;
  text-wrap: balance;
}

@media (max-width: 767px) {
  .special-list .spc-empty .section-title {
    font-size: 2rem;
  }
}

@media (max-width: 575px) {
  .special-list .spc-empty .section-title {
    font-size: 1.75rem;
  }
}

.special-list .spc-empty__text {
  font-family: Inter, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: #555;
  margin: 0 0 14px;
  max-width: 62ch;
}

.special-list .spc-empty__text:last-of-type {
  margin-bottom: 26px;
}

/* Second paragraph is dropped on phones: stacked, it pushed the buttons well
   below the fold, and the first paragraph carries the point on its own. The
   margin is restated because :last-of-type still resolves to the hidden
   paragraph, which would leave the visible one with the tighter 14px gap. */
@media (max-width: 767px) {
  .special-list .spc-empty__text--secondary {
    display: none;
  }

  .special-list .spc-empty__text {
    margin-bottom: 26px;
  }
}

.special-list .spc-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Action buttons use .btn-cta-green / .btn-cta-blue-solid from main.css. */

/* Photo above the copy while the card is stacked, so it reads as a card header. */
.special-list .spc-empty__media {
  order: -1;
}

.special-list .spc-empty__media img {
  display: block;
  width: 100%;
  /* Required, not redundant. The width/height attributes on the tag map to CSS
     width/height as presentational hints, and once both dimensions resolve the
     aspect-ratio below is ignored, leaving the image 788px tall on mobile. */
  height: auto;
  object-fit: cover;
  /* Shifted right of centre. Cover crops the sides on this 2.28:1 source, and the
     team member, the customers, and the tire display all sit right of centre, so
     centring gave up the half of the frame worth showing. This is the dial: lower
     the percentage to bring the front counter and the Point S mark back in. */
  object-position: 70% center;
  aspect-ratio: 16 / 9;
}

@media (max-width: 640px) {
  .special-list .spc-empty__actions .btn-cta-green,
  .special-list .spc-empty__actions .btn-cta-blue-solid {
    width: 100%;
    justify-content: center;
  }
}

@media (min-width: 900px) {
  .special-list .spc-empty {
    grid-template-columns: 1.05fr 0.95fr;
  }

  .special-list .spc-empty__content {
    padding: 44px 40px;
    align-self: center;
  }

  /* Photo back to the right, filling the row height the copy column sets.
     Absolute rather than height:100% so the image never drives the row taller
     than the copy beside it. */
  .special-list .spc-empty__media {
    order: 0;
    position: relative;
  }

  .special-list .spc-empty__media img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }
}

/* ---------- WHY CHOOSE ---------- */
/* Offset-overlap layout: photo on the left, copy card placed over its right
   edge. Third instance of this geometry, after .about-coop--media and .promise
   in main.css, and the values are deliberately kept in step with them. Worth
   extracting into one shared block next time all three can be verified
   together. */
/* No background of its own: it inherits the page gradient. This section used to
   set #f8f9fa, which landed within four points of both the gradient's #f5f6f7
   and the tire band's #f3f4f6, so the page read as three near-identical grays in
   a row. The gray band on the tire specials is now the page's one tint. */
.special-list .spc-why {
  padding: 56px 20px;
}

.special-list .spc-why__layout {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.special-list .spc-why__media {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}

.special-list .spc-why__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Centered: the source is a 2.28:1 panorama, so cover crops the sides, not the
     top and bottom. Centered keeps the technician in the uncovered left strip
     while the card sits over the open hood. This is the dial to turn if you want
     more or less of the engine bay beside the card. */
  object-position: center;
  aspect-ratio: 16 / 9;
}

/* Mobile: stack -- photo on top running full-bleed and flat, card pulled up to
   overlap its bottom edge, matching .promise and .about-coop--media. */
.special-list .spc-why__content {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 24px 20px;
  /* Same elevation as the promo cards, service cards, and the coop card. */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  /* 20px side margin carries the page gutter the mobile block below strips off
     the section, so the card stays inset while the photo runs full-bleed. */
  margin: -48px 20px 0;
}

.special-list .spc-why .section-kicker {
  margin-top: 0;
}

/* Overlay-card heading ladder. The card is narrower than a full-width section,
   so the section default reads oversized inside it. A step under the 3rem the
   .promise / .about-coop--media cards use in main.css, keeping this card one
   step below the specials headers above exactly as it was before both stepped
   down. Mobile holds at the shared card sizes; the disparity this closes is a
   desktop one, and stepping mobile again costs legibility in a 20px-inset card. */
.special-list .spc-why .section-title {
  font-size: 2.75rem;
  text-wrap: balance;
  margin-bottom: 16px;
}

@media (max-width: 767px) {
  .special-list .spc-why .section-title {
    font-size: 2rem;
  }
}

@media (max-width: 575px) {
  .special-list .spc-why .section-title {
    font-size: 1.75rem;
  }
}

.special-list .spc-why__intro {
  font-family: Inter, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: #555;
  margin: 0 0 24px;
}

.special-list .spc-why__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.special-list .spc-why__list li {
  list-style: none !important;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: Inter, sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
  padding: 0;
}

/* Same green as .btn-cta-green rather than the brighter --brand-secondary, so the
   checkmark circles sit in the same family as the green buttons on the page. */
.special-list .spc-why__check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 4px;
  background: var(--brand-secondary-cta);
  border-radius: 50%;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .special-list .spc-why {
    padding-left: 0;
    padding-right: 0;
  }

  .special-list .spc-why__media {
    border-radius: 0;
    box-shadow: none;
  }

  .special-list .spc-why__media img {
    aspect-ratio: 4 / 3;
  }
}

@media (min-width: 768px) {
  .special-list .spc-why {
    padding: 80px 40px;
  }

  /* Photo takes ~70% on the left; card is absolutely placed over its right. */
  .special-list .spc-why__media {
    width: 70%;
    margin-right: auto;
  }

  .special-list .spc-why__content {
    position: absolute;
    right: 0;
    /* Vertical centering is baked into the transform. */
    top: 50%;
    transform: translateY(-50%);
    width: 57%;
    max-width: 640px;
    margin: 0;
    padding: 36px 40px;
  }
}

/* Specials hero: show more of the middle of the photo (global default is 20%). */
.special-list .page-hero img {
  object-position: center 35%;
}

/* Bottom CTA now uses the shared .road-cta band (RoadCta partial). */

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
  .special-list .page-hero__ctas {
    flex-direction: column;
    gap: 8px;
  }

  .special-list .page-hero__ctas .btn-cta-green {
    width: 100%;
    justify-content: center;
    max-width: 240px;
  }

}