/* ==========================================================================
   Location AC-repair pages — shared page styles
   Used by services/ac-repair-cedar-park.php and services/ac-repair-leander.php.
   Those pages take their design from the AC Repair in Austin page, so they load
   service-page.css and ac-repair.css first; this sheet adds only what neither
   provides — the hero art, the emergency feature row, the AC-system icon grid,
   the five-card layout and the frame spacing for this section order.
   ========================================================================== */

.page-cedar-repair .loc-hero {
  background-image: url("../assets/images/cpr-hero.jpg");
}

.page-leander-repair .loc-hero {
  background-image: url("../assets/images/lnd-hero.jpg");
}

.loc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #213773 0%,
    #203468 10%,
    #1e2f5c 22%,
    #23305a 33%,
    #26355c 14%,
    rgb(38 53 92 / 0.9) 50%,
    rgb(38 53 92 / 0.42) 57%,
    rgb(38 53 92 / 0) 64%
  );
}
/* 1. Shared helpers ======================================================== */

.loc-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--color-red);
  text-align: center;
}

.page-loc-repair .sp-title {
  margin-top: 12px;
}

/* Five cards in a three-then-two layout, with the short row centred. The
   six-column track lets a card span two columns so the pair can be offset. */
.loc-grid-5 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.loc-grid-5 > li {
  grid-column: span 2;
}

.loc-grid-5 > li:nth-child(4) {
  grid-column: 2 / span 2;
}

/* 2. Repair services ======================================================= */

.page-loc-repair .acr-repairs {
  padding-block: 84px;
}

/* 3. Emergency feature row ================================================= */

.loc-emergency {
  padding-block: 84px;
}

.loc-emergency__grid {
  display: grid;
  grid-template-columns: 609fr 567fr;
  gap: 64px;
  align-items: center;
}

.loc-emergency__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 609 / 423;
  border-radius: 8px;
  object-fit: cover;
}

.loc-emergency h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 42px;
  color: var(--color-navy);
}

.loc-emergency p {
  margin-top: 22px;
  font-size: 17px;
  line-height: 29px;
  color: var(--color-text);
}

.loc-emergency__badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  padding: 15px 26px;
  border-radius: 999px;
  background: var(--color-red);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-white);
  transition: background-color var(--speed) var(--ease),
    transform var(--speed) var(--ease);
}

.loc-emergency__badge:hover {
  background: #bf1d24;
}

.loc-emergency__badge:active {
  transform: translateY(1px);
}

.loc-emergency__badge svg {
  width: 18px;
  height: 18px;
  flex: none;
}

/* 4. Warning signs ========================================================= */

.loc-signs {
  padding-block: 84px;
  text-align: center;
}

.loc-signs .acr-heading {
  text-align: center;
}

.loc-signs .acr-sub {
  max-width: 700px;
  margin: 18px auto 0;
}

.loc-signs__grid {
  text-align: left;
}

/* 5. AC system types ======================================================= */

.loc-systems {
  padding-block: 84px;
  text-align: center;
}

.loc-systems .acr-heading {
  text-align: center;
}

.loc-systems .acr-sub {
  max-width: 700px;
  margin: 18px auto 0;
}

.loc-systems__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 44px;
  text-align: left;
}

.loc-systems__grid li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-white);
  box-shadow: 0 1px 2px rgb(18 53 110 / 0.04);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 23px;
  color: var(--color-navy);
}

.loc-systems__grid img {
  width: 44px;
  height: 44px;
  flex: none;
}

/* 6. Process =============================================================== */

.page-loc-repair .acr-steps {
  padding-block: 84px;
  text-align: center;
}

.page-loc-repair .acr-steps .acr-heading {
  max-width: none;
  text-align: center;
}

.page-loc-repair .acr-steps .acr-sub {
  max-width: 720px;
  margin: 18px auto 0;
}

.page-loc-repair .acr-steps__row {
  text-align: center;
}

.loc-steps__cta {
  margin-top: 54px;
}

.loc-steps__cta .btn {
  padding: 15px 30px;
  border-radius: 4px;
  font-size: 16px;
}

/* 7. Why choose ============================================================ */

.page-loc-repair .acr-promise {
  padding-block: 84px;
}

/* 8. Reviews =============================================================== */

/* This page carries the full set of Google reviews rather than a curated
   three, so they ride the carousel below instead of a static grid. */
.page-loc-repair .sp-reviews {
  padding-block: 84px;
}

.page-loc-repair .sp-review blockquote {
  font-size: 16px;
  line-height: 26px;
}

.loc-review__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.loc-review__date {
  font-size: 13.5px;
  color: var(--color-text-muted);
}

/* 8a. Review carousel =====================================================
   These two pages carry the full set of published reviews, which is far too
   many for a static grid, so the cards ride a scroll-snap track. The track is
   a plain horizontal scroller: it swipes on touch and stays usable without
   JavaScript, and the arrows and dots below only drive scrollLeft. */

.loc-revs {
  margin-top: 34px;
}

.loc-revs__viewport {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.loc-revs__viewport::-webkit-scrollbar {
  display: none;
}

.loc-revs__track {
  --revs-gap: 22px;
  --revs-per-view: 3;
  display: flex;
  gap: var(--revs-gap);
  align-items: stretch;
}

.loc-revs__slide {
  flex: 0 0
    calc(
      (100% - (var(--revs-per-view) - 1) * var(--revs-gap)) /
        var(--revs-per-view)
    );
  scroll-snap-align: start;
}

.loc-revs__slide > .sp-review {
  height: 100%;
}

/* Controls ---------------------------------------------------------------- */

.loc-revs__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.loc-revs__arrow {
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex: none;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-navy);
  transition: background-color var(--speed) var(--ease),
    border-color var(--speed) var(--ease), color var(--speed) var(--ease),
    opacity var(--speed) var(--ease);
}

.loc-revs__arrow svg {
  width: 17px;
  height: 17px;
}

.loc-revs__arrow:hover:not(:disabled) {
  border-color: var(--color-navy);
  background: var(--color-navy);
  color: var(--color-white);
}

.loc-revs__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.loc-revs__dots {
  display: flex;
  align-items: center;
  gap: 9px;
}

.loc-revs__dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c9d3e2;
  transition: background-color var(--speed) var(--ease),
    width var(--speed) var(--ease);
}

.loc-revs__dots button[aria-selected="true"] {
  width: 26px;
  border-radius: 999px;
  background: var(--color-red);
}

/* One card per view gives one page per review, which is far too many dots for
   a phone, so the script swaps them for a count. */
.loc-revs__dots[data-compact] {
  min-width: 74px;
  justify-content: center;
}

.loc-revs__count {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--color-navy);
}

/* Without JavaScript there are no dots and no page count, so the row would
   sit empty; the scroller itself still works. */
.loc-revs__nav:not([data-ready]) {
  display: none;
}

/* 8b. Band colours ========================================================
   The two pages run their sections in a different order, so each states its
   own alternation rather than inheriting one that only suits the other. */

/* Cedar Park: promise → services → emergency → signs → systems */
.page-cedar-repair .acr-repairs {
  background: var(--color-white);
}

.page-cedar-repair .loc-emergency {
  background: var(--color-surface);
}

.page-cedar-repair .loc-signs {
  background: var(--color-white);
}

.page-cedar-repair .loc-systems {
  background: var(--color-surface);
}

/* Leander: promise → emergency → services → process → signs → systems */
.page-leander-repair .loc-emergency {
  background: var(--color-white);
}

.page-leander-repair .acr-repairs {
  background: var(--color-surface);
}

.page-leander-repair .loc-signs {
  background: var(--color-surface);
}

.page-leander-repair .loc-systems {
  background: var(--color-white);
}

/* 9. Responsive ============================================================ */

@media (max-width: 1279px) {
  .loc-systems__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .loc-emergency__grid {
    gap: 44px;
  }
}

@media (max-width: 1023px) {
  .loc-grid-5 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .loc-grid-5 > li,
  .loc-grid-5 > li:nth-child(4) {
    grid-column: span 2;
  }

  /* Keep the odd card out of a lonely left-hand slot. */
  .loc-grid-5 > li:nth-child(5) {
    grid-column: 2 / span 2;
  }

  /* Four process steps read better as two rows of two than three-plus-one. */
  .page-loc-repair .acr-steps__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .loc-systems__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .loc-revs__track {
    --revs-per-view: 2;
  }

  .loc-emergency__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .loc-emergency__figure {
    order: -1;
  }
}

@media (max-width: 767px) {
  .loc-emergency,
  .loc-signs,
  .loc-systems,
  .page-loc-repair .acr-repairs,
  .page-loc-repair .acr-steps,
  .page-loc-repair .acr-promise,
  .page-loc-repair .sp-reviews {
    padding-block: 56px;
  }

  .loc-grid-5 {
    grid-template-columns: minmax(0, 1fr);
  }

  .loc-grid-5 > li,
  .loc-grid-5 > li:nth-child(4),
  .loc-grid-5 > li:nth-child(5) {
    grid-column: auto;
  }

  .loc-systems__grid {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 32px;
  }

  .loc-revs__track {
    --revs-per-view: 1;
    --revs-gap: 16px;
  }

  .loc-revs__nav {
    gap: 14px;
    margin-top: 24px;
  }

  .loc-emergency h2 {
    font-size: 26px;
    line-height: 34px;
  }

  .loc-emergency__badge {
    width: 100%;
    justify-content: center;
  }

  .loc-steps__cta {
    margin-top: 36px;
  }

  .loc-steps__cta .btn {
    width: 100%;
  }
}

@media (max-width: 479px) {
  /* The two-up step layout above is a tablet arrangement; on phones the steps
     go back to one per row, matching ac-repair.css. Without this the rule from
     the tablet block wins on specificity and squeezes each step to ~128px. */
  .page-loc-repair .acr-steps__row {
    grid-template-columns: minmax(0, 1fr);
  }
}