/* ===================================================
   Stretton's MOT Station - MOT page
   =================================================== */

/* ---------- PAGE HERO (lighter than home hero, breadcrumb sits above) ---------- */
.pb-smot-page-hero {
  background: linear-gradient(135deg, var(--pb-smot-navy) 0%, var(--pb-smot-navy-light) 100%);
  color: var(--pb-smot-white);
  padding: var(--pb-smot-space-xl) 0;
}
.pb-smot-page-hero__inner {
  max-width: var(--pb-smot-maxwidth);
  margin: 0 auto;
  padding: 0 var(--pb-smot-space-md);
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--pb-smot-space-xl);
  align-items: center;
}
.pb-smot-page-hero h1 { color: var(--pb-smot-white); margin-bottom: 0.4em; }
.pb-smot-page-hero p { color: rgba(255,255,255,0.8); font-size: 1.05rem; max-width: 520px; margin-bottom: 0; }
/* Page hero eyebrow - matches .pb-smot-hero__eyebrow on Home exactly (same pill,
   same font-size/weight/letter-spacing throughout) so every page hero reads
   uniformly. The price portion after the dot is white via .pb-smot-eyebrow__price,
   everything else stays gold like Home's plain eyebrow text. */
.pb-smot-page-hero__price {
  display: inline-block;
  background: rgba(232, 163, 61, 0.15);
  color: var(--pb-smot-gold);
  padding: 0.4em 1em;
  border-radius: var(--pb-smot-radius);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--pb-smot-space-sm);
}
.pb-smot-page-hero__price .pb-smot-eyebrow__price {
  color: var(--pb-smot-white);
}
.pb-smot-page-hero__actions { display: flex; gap: var(--pb-smot-space-sm); flex-wrap: wrap; margin-top: var(--pb-smot-space-md); }

/* Small "Follow us" row - contact page hero, sits under the intro
   paragraph in place of the usual call-to-action buttons (the whole
   page below is already the CTA). */
.pb-smot-page-hero__follow {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-top: var(--pb-smot-space-md);
}
.pb-smot-page-hero__follow span {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pb-smot-page-hero__follow a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pb-smot-page-hero__follow a:hover {
  background: var(--pb-smot-gold);
  border-color: var(--pb-smot-gold);
}
.pb-smot-page-hero__follow a svg { width: 17px; height: 17px; color: var(--pb-smot-white); }
.pb-smot-page-hero__follow a:hover svg { color: var(--pb-smot-navy); }

.pb-smot-page-hero__badges {
  display: flex;
  flex-direction: column;
  gap: var(--pb-smot-space-sm);
}
.pb-smot-hero-badge {
  display: flex;
  align-items: center;
  gap: 0.8em;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--pb-smot-radius);
  padding: 0.9em 1.1em;
}
.pb-smot-hero-badge svg { width: 26px; height: 26px; color: var(--pb-smot-gold); flex-shrink: 0; }
.pb-smot-hero-badge strong { display: block; font-size: 0.92rem; color: var(--pb-smot-white); }
.pb-smot-hero-badge span { font-size: 0.8rem; color: rgba(255,255,255,0.65); }

@media (max-width: 880px) {
  .pb-smot-page-hero__inner { grid-template-columns: 1fr; }
}

/* Compact single-column hero variant - Contact page doesn't need the
   badges column, just a short intro above the sidebar/form below. */
.pb-smot-page-hero--compact {
  padding: var(--pb-smot-space-lg) 0;
}
.pb-smot-page-hero__inner--single {
  grid-template-columns: 1fr;
  max-width: 720px;
}

/* Centred single-column hero variant - full page width like every other
   hero (not narrowed/left-stuck like --single), just centred text
   instead of the usual two-column text+badges layout, for pages like
   Sitemap that don't have badge content to fill a second column. */
.pb-smot-page-hero__inner--centered {
  grid-template-columns: 1fr;
  text-align: center;
}
.pb-smot-page-hero__inner--centered .pb-smot-page-hero__price {
  font-size: 0.95rem;
}
.pb-smot-page-hero__inner--centered h1 {
  font-size: clamp(2.2rem, 4vw, 2.8rem);
}
.pb-smot-page-hero__inner--centered p {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.1rem;
}

/* ---------- CLASS SPLIT (Class IV / Class VII) ---------- */
.pb-smot-class-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pb-smot-space-md);
  margin-top: var(--pb-smot-space-lg);
}
.pb-smot-class-card {
  display: flex;
  flex-direction: column;
}
.pb-smot-class-card__head {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-bottom: var(--pb-smot-space-sm);
}
.pb-smot-class-card__icon {
  width: 52px; height: 52px;
  border-radius: var(--pb-smot-radius);
  background: var(--pb-smot-offwhite);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pb-smot-class-card__icon svg { width: 28px; height: 28px; color: var(--pb-smot-blue); }
.pb-smot-class-card h3 { margin-bottom: 0.15em; }
.pb-smot-class-card__sub {
  display: inline-flex;
  align-items: center;
  margin-top: 0.3em;
  background: rgba(232, 163, 61, 0.14);
  color: var(--pb-smot-gold-dark);
  border: 1px solid rgba(232, 163, 61, 0.35);
  padding: 0.28em 0.75em;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pb-smot-class-card ul {
  list-style: none;
  margin: 0.8em 0 0;
  padding: 0;
  font-size: 0.9rem;
  color: var(--pb-smot-text-muted);
}
.pb-smot-class-card li {
  display: flex;
  gap: 0.6em;
  margin-bottom: 0.5em;
  line-height: 1.4;
}
.pb-smot-class-card li svg { width: 16px; height: 16px; color: var(--pb-smot-blue); flex-shrink: 0; margin-top: 0.2em; }

@media (max-width: 760px) {
  .pb-smot-class-grid { grid-template-columns: 1fr; }
}

/* ---------- BOOKING WINDOW EXPLAINER ---------- */
.pb-smot-window {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pb-smot-space-lg);
  align-items: center;
}
/* Desktop-only visual placement swap. Text always comes FIRST in the
   HTML regardless of which side the image sits on - that's what mobile
   stacks in, and it's the correct reading/accessibility order. This
   class just moves the visual to the left column on wide screens for
   variety (e.g. Tyres' Balancing section), without touching source
   order or affecting the mobile single-column stack at all. */
@media (min-width: 881px) {
  .pb-smot-window--reverse .pb-smot-window__visual {
    order: -1;
  }
}
.pb-smot-window__visual {
  background: var(--pb-smot-white);
  border: 1px solid var(--pb-smot-border);
  border-radius: var(--pb-smot-radius);
  padding: var(--pb-smot-space-lg);
  box-shadow: var(--pb-smot-shadow);
}
.pb-smot-window__bar {
  position: relative;
  height: 22px;
  background: var(--pb-smot-border);
  border-radius: 11px;
  margin: var(--pb-smot-space-md) 0;
  overflow: hidden;
}
.pb-smot-window__bar-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 75%;
  background: var(--pb-smot-blue);
}
.pb-smot-window__bar-highlight {
  position: absolute;
  left: 75%; top: 0; bottom: 0;
  width: 25%;
  background: var(--pb-smot-gold);
}
.pb-smot-window__labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--pb-smot-text-muted);
  font-weight: 600;
}
.pb-smot-window__example {
  margin-top: var(--pb-smot-space-md);
  font-size: 0.9rem;
  color: var(--pb-smot-text-muted);
  background: var(--pb-smot-white);
  border: 1px solid var(--pb-smot-border);
  border-radius: var(--pb-smot-radius);
  padding: 0.9em 1.1em;
}
.pb-smot-window__example strong { color: var(--pb-smot-navy); }

/* Real embedded map - used as the visual side of a .pb-smot-window,
   e.g. About page's "Find Us" section. Fixed height since an iframe
   won't inherit aspect-ratio from its grid cell on its own. */
.pb-smot-window__visual--map {
  padding: 0;
  overflow: hidden;
  min-height: 320px;
}
.pb-smot-window__visual--map iframe {
  display: block;
  min-height: 320px;
}

/* Small gap above a button that follows a bullet list inside a window panel */
.pb-smot-window__address-actions {
  margin-top: var(--pb-smot-space-md);
}

/* Illustrated graphic panel variant of .pb-smot-window__visual, and the icon
   bullet list used alongside it - originally only used on the Tyres page but
   genuinely generic, so it lives here with the rest of the shared window
   pattern rather than being duplicated per page. */
.pb-smot-window__visual--graphic {
  background: linear-gradient(160deg, var(--pb-smot-offwhite) 0%, #ECEFF4 100%);
  border-radius: var(--pb-smot-radius);
  overflow: hidden;
  padding: var(--pb-smot-space-md) var(--pb-smot-space-lg) var(--pb-smot-space-lg);
}
.pb-smot-graphic {
  display: block;
  width: 100%;
  height: auto;
  margin: -0.5rem 0 0.5rem;
}
.pb-smot-window__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  color: var(--pb-smot-text-muted);
}
.pb-smot-window__list li {
  display: flex;
  gap: 0.6em;
  margin-bottom: 0.5em;
  line-height: 1.4;
}
.pb-smot-window__list li:last-child { margin-bottom: 0; }
.pb-smot-window__list li svg {
  width: 16px; height: 16px;
  color: var(--pb-smot-blue);
  flex-shrink: 0;
  margin-top: 0.2em;
}

@media (max-width: 880px) {
  .pb-smot-window {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

/* ---------- MOT CHECKLIST GRID ---------- */
.pb-smot-checklist {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--pb-smot-space-sm);
  margin-top: var(--pb-smot-space-lg);
}
.pb-smot-check-item {
  padding: var(--pb-smot-space-sm);
}
.pb-smot-check-item__icon {
  width: 40px; height: 40px;
  border-radius: var(--pb-smot-radius);
  background: var(--pb-smot-offwhite);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.7em;
}
.pb-smot-check-item__icon svg { width: 22px; height: 22px; color: var(--pb-smot-blue); }
.pb-smot-check-item h4 { font-size: 0.95rem; margin-bottom: 0.25em; }
.pb-smot-check-item p { font-size: 0.84rem; color: var(--pb-smot-text-muted); margin: 0; }

@media (max-width: 980px) {
  .pb-smot-checklist { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .pb-smot-checklist { grid-template-columns: 1fr; }
}

/* ---------- GUARANTEE BANNER ---------- */
.pb-smot-guarantee {
  display: flex;
  align-items: center;
  gap: var(--pb-smot-space-md);
  background: var(--pb-smot-offwhite);
  border: 1px solid var(--pb-smot-border);
  border-radius: var(--pb-smot-radius);
  padding: var(--pb-smot-space-md);
}
.pb-smot-guarantee__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--pb-smot-white);
  border: 1px solid var(--pb-smot-border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pb-smot-guarantee__icon svg { width: 28px; height: 28px; color: var(--pb-smot-gold-dark); }
.pb-smot-guarantee h3 { margin-bottom: 0.2em; font-size: 1.05rem; }
.pb-smot-guarantee p { margin: 0; font-size: 0.9rem; color: var(--pb-smot-text-muted); }

@media (max-width: 640px) {
  .pb-smot-guarantee { flex-direction: column; text-align: center; }
}

/* Guarantee-pair - two guarantee boxes side by side rather than one full
   width banner, used on MOT, Servicing, Tyres and Workshop. Originally
   Tyres-only but genuinely generic, so it lives here with the rest of
   the shared guarantee pattern. */
.pb-smot-guarantee-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pb-smot-space-md);
}
.pb-smot-guarantee-pair .pb-smot-guarantee {
  background: var(--pb-smot-white);
}

@media (max-width: 760px) {
  .pb-smot-guarantee-pair {
    grid-template-columns: 1fr;
  }
}

/* ---------- THREE-UP CLASS GRID ---------- */
/* Used on Servicing (3 service types) and Workshop (6 cards, 2 rows of 3).
   Card internals (.pb-smot-class-card, __head, __icon, ul, li) are shared
   and styled identically - this just sets the column count. Originally
   lived in servicing.css only; moved here once Workshop needed it too. */
.pb-smot-class-grid--three {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--pb-smot-space-md);
  margin-top: var(--pb-smot-space-lg);
}

@media (max-width: 980px) {
  .pb-smot-class-grid--three { grid-template-columns: 1fr; }
}

/* Centred CTA button sat under a card grid (MOT class grid, Servicing
   service cards, Tyres tier grid, Workshop services grid). */
.pb-smot-services-cta {
  text-align: center;
  margin-top: var(--pb-smot-space-lg);
}
/* Left-aligned variant - used when this CTA sits inside a text column
   (e.g. About page's "Our Story") rather than centred under a full-width
   card grid. */
.pb-smot-services-cta--left {
  text-align: left;
}

/* ---------- PRICE CAP NOTE ---------- */
.pb-smot-price-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-size: 0.85rem;
  color: var(--pb-smot-text-muted);
  margin: var(--pb-smot-space-sm) auto 0;
}
.pb-smot-price-note svg { width: 18px; height: 18px; color: var(--pb-smot-blue); flex-shrink: 0; }