/* ============================================================
   WOODLEY COLLISION — ABOUT PAGE
   Reuses the breadcrumb, review cards, CTA banner, and
   header/footer. Adds: the hero photo block (image + reviews
   badge + stats card), the Our Journey timeline, the Why
   Choose feature rows, and the shop section.
   ============================================================ */

/* ---- Shared section heading row (heading left, optional CTA right) ---- */
.about-section {
  max-width: var(--container-outer);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.about-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-24);
}
.about-head__text { display: flex; flex-direction: column; gap: var(--sp-12); max-width: 600px; }
.about-head__title {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem);   /* 28 -> 36px */
  font-weight: 600;
  line-height: 1.22;
  color: var(--gray-900);
}
.about-head__subtitle {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  color: #555;
}
.about-head__cta { flex-shrink: 0; }
.about-head__cta--mobile { display: none; }

/* ============================================================
   HERO
   ============================================================ */
.about-hero {
  max-width: var(--container-outer);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-top: var(--sp-16);
  padding-bottom: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-32);
}
.about-hero__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
  text-align: center;
  max-width: 960px;
}
.about-hero__title {
  font-size: clamp(2.5rem, 1.6rem + 2.8vw, 3.875rem);   /* 40 -> 62px */
  font-weight: 600;
  line-height: 1.06;
  color: var(--gray-900);
}
.about-hero__subtitle {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  color: #555;
  max-width: 600px;
}

/* Photo block: left column (image + reviews badge) + right big image */
.about-hero__photos {
  display: flex;
  gap: var(--sp-24);
  align-items: stretch;
  width: 100%;
}
.about-hero__left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 0 0 397px;
}
.about-hero__img-sm {
  height: 300px;
  border-radius: 32px;
  overflow: hidden;
  background: var(--gray-100);
}
.about-hero__img-sm img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Reviews badge (avatars + google rating) */
.reviews-badge { display: flex; flex-direction: column; gap: var(--sp-12); }
.reviews-badge__avatars { display: flex; align-items: center; }
.reviews-badge__avatars img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--white);
  object-fit: cover;
}
.reviews-badge__avatars img:not(:last-child) { margin-right: -6px; }
.reviews-badge__rating-wrap { display: flex; flex-direction: column; gap: var(--sp-4); }
.reviews-badge__rating { display: flex; align-items: center; gap: var(--sp-4); }
.reviews-badge__google { width: 28px; height: 28px; flex-shrink: 0; }
.reviews-badge__stars { display: flex; align-items: center; gap: 2px; }
.reviews-badge__star { width: 20px; height: 20px; color: #fbbc05; }
.reviews-badge__score {
  font-size: 1.25rem;     /* 20px */
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--gray-900);
}
.reviews-badge__caption {
  font-size: var(--fs-body-s);
  font-style: italic;
  font-weight: 500;
  line-height: 1.286;
  color: #555;
}

/* Big image + floating stats card */
.about-hero__right {
  position: relative;
  flex: 1 1 auto;
  height: 460px;
  border-radius: 32px;
  overflow: hidden;
  background: var(--gray-100);
}
.about-hero__img-lg { width: 100%; height: 100%; object-fit: cover; display: block; }
.stats-card {
  position: absolute;
  right: 24px;
  bottom: 24px;
  background: var(--white);
  border: 1px solid var(--gray-50);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.01);
  padding: var(--sp-16) var(--sp-24);
  display: flex;
  gap: var(--sp-24);
  align-items: stretch;
}
.stats-card__item { display: flex; flex-direction: column; gap: var(--sp-4); }
.stats-card__num {
  font-size: 1.125rem;     /* 18px */
  font-weight: 600;
  line-height: 1.222;
  color: var(--gray-900);
  text-transform: uppercase;
}
.stats-card__label {
  font-size: var(--fs-body-s);
  font-weight: 400;
  line-height: 1.571;
  color: var(--gray-500);
}
.stats-card__divider { width: 1px; background: var(--gray-100); align-self: center; height: 48px; }

/* ============================================================
   OUR JOURNEY (timeline)
   ============================================================ */
.journey {
  max-width: var(--container-outer);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-bottom: 60px;
}
.journey__card {
  background: var(--white);
  border: 1px solid var(--gray-50);
  border-radius: 32px;
  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.01);
  padding: 64px 52px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-36);
}
.journey__steps {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
}
.journey__step { display: flex; flex-direction: column; gap: var(--sp-20); width: 320px; flex-shrink: 0; }
.journey__year {
  font-family: 'Oswald', 'Poppins', sans-serif;
  font-size: 1.75rem;     /* 28px */
  font-weight: 700;
  line-height: 0.857;
  letter-spacing: 0.02em;
  color: var(--gray-900);
}
.journey__text {
  font-size: var(--fs-body-s);
  font-weight: 300;
  line-height: 1.571;
  color: #555;
}
.journey__divider { width: 1px; align-self: center; height: 154px; background: var(--gray-100); flex-shrink: 0; }

/* ============================================================
   WHY CHOOSE US (image + feature rows)
   ============================================================ */
.why {
  max-width: var(--container-outer);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: 60px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-36);
}
.why__body {
  display: flex;
  gap: var(--sp-36);
  align-items: stretch;
}
.why__media {
  flex: 0 0 560px;
  border-radius: 32px;
  overflow: hidden;
  background: var(--gray-100);
}
.why__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.why__list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-8);
}
.feature-row {
  display: flex;
  gap: var(--sp-12);
  align-items: center;
  background: var(--white);
  border: 1px solid var(--gray-50);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.01);
  padding: var(--sp-16) var(--sp-20);
}
.feature-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-round);
  border: 1px solid var(--gray-200);
  color: var(--gray-900);
  flex-shrink: 0;
}
.feature-row__icon svg { width: 20px; height: 20px; }
.feature-row__text { display: flex; flex-direction: column; gap: var(--sp-4); }
.feature-row__title {
  font-size: 1.25rem;     /* 20px */
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--gray-900);
}
.feature-row__desc {
  font-size: var(--fs-body-s);
  font-weight: 400;
  line-height: 1.571;
  color: #555;
}

/* ============================================================
   A SHOP BUILT FOR QUALITY (image + paragraph | image)
   ============================================================ */
.shop {
  max-width: var(--container-outer);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: 60px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-36);
}
.shop__body { display: flex; gap: var(--sp-36); align-items: flex-start; }
.shop__left {
  flex: 0 0 560px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-36);
  padding-top: var(--sp-24);
}
.shop__img {
  height: 280px;
  border-radius: 32px;
  overflow: hidden;
  background: var(--gray-100);
}
.shop__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop__text {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  color: #555;
}
.shop__right {
  flex: 1 1 auto;
  height: 480px;
  border-radius: 32px;
  overflow: hidden;
  background: var(--gray-100);
}
.shop__right img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   REVIEWS (reuses review-card grid)
   ============================================================ */
.about-reviews {
  max-width: var(--container-outer);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-top: 60px;
  padding-bottom: 120px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-36);
}
.about-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-24);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .about-hero__photos { flex-direction: column; }
  .about-hero__left { flex: 1 1 auto; width: 100%; gap: var(--sp-24); }
  .about-hero__right { width: 100%; }
  .journey__steps { flex-direction: column; gap: var(--sp-24); }
  .journey__step { width: 100%; }
  .journey__divider { width: 100%; height: 1px; }
  .why__body { flex-direction: column; }
  .why__media { flex: 1 1 auto; height: 280px; }
  .shop__body { flex-direction: column; }
  .shop__left { flex: 1 1 auto; width: 100%; padding-top: 0; }
  .shop__right { width: 100%; height: 360px; }
  .about-reviews__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .about-hero { padding-bottom: 60px; }
  .about-hero__title { font-size: clamp(2.125rem, 1.75rem + 1.6vw, 2.25rem); line-height: 1.1; }
  .about-hero__img-sm { height: 220px; border-radius: 24px; }
  .about-hero__right { height: 380px; border-radius: 24px; }

  /* stats card centers below the image */
  .stats-card {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border-radius: var(--radius-md);
    gap: var(--sp-20);
  }

  .about-head { align-items: flex-start; }
  .about-head__title { font-size: 1.75rem; line-height: 1.143; }   /* 28px */
  .about-head__cta { display: none; }
  .about-head__cta--mobile { display: block; width: 100%; }
  .about-head__cta--mobile .btn { width: 100%; justify-content: space-between; }

  .journey { padding-bottom: 60px; }
  .journey__card { padding: 36px 24px; border-radius: 24px; gap: var(--sp-32); }
  .journey__year { font-size: 1.5rem; }   /* 24px */

  .why { padding-block: 60px; gap: var(--sp-32); }
  .why__media { height: 280px; border-radius: 24px; }
  .feature-row__title { font-size: 1.125rem; }   /* 18px */

  .shop { padding-block: 60px; gap: var(--sp-32); }
  .shop__left { gap: var(--sp-16); }
  .shop__img { height: 160px; border-radius: 24px; }
  .shop__right { height: 260px; border-radius: 24px; }
  /* on mobile the shop shows two stacked images then the paragraph */

  .about-reviews { padding-bottom: 60px; gap: var(--sp-32); }
  .about-reviews__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-16);
    grid-auto-flow: column;
    grid-auto-columns: 88%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
  }
  .about-reviews__grid::-webkit-scrollbar { display: none; }
}