/* Wingate's Air Conditioning — location-page section furniture:
   stat strip, feature cards, and the services icon grid.

   Everything is scoped under .wg-loc-* so it cannot clash with Duda's
   generated CSS. Palette and type match wg-reviews.css:
     navy   rgb(0, 50, 153)   --color_2
     maroon rgb(105, 13, 17)  --color_3
     sand   #f6f4ef
   Headings are Amiri (serif), body copy is Lato, same as the rest of
   the site. */

/* ---------------------------------------------------------------- *
 * Shared
 * ---------------------------------------------------------------- */

.wg-loc-inner {
  max-width: 1180px;
  margin: 0 auto;
}
.wg-loc-inner * { box-sizing: border-box; }

/* Long centred paragraphs are hard to read at full row width. Cap the
   measure on the full-width content sections without touching the
   two-column hero/contact rows. */
.wg-loc-section .dmNewParagraph p,
.wg-loc-section .dmNewParagraph ul {
  max-width: 880px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------------------------------------------------------------- *
 * Stat strip — the concrete numbers from the page copy
 * ---------------------------------------------------------------- */

/* Duda sets 75px row padding at a specificity a bare class cannot beat, which
   makes this read as a full section rather than a connector strip. Match its
   selector shape to win. */
#dm .dmBody div.dmRespRow.wg-loc-stats {
  background: #f6f4ef;
  padding: 52px 16px !important;
}
.wg-loc-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.wg-loc-stat {
  position: relative;
  text-align: center;
  padding: 6px 14px;
}
/* Hairline separators between tiles rather than boxes — lighter touch. */
.wg-loc-stat + .wg-loc-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  height: 76%;
  border-left: 1px solid #ded8cc;
}
.wg-loc-stat-num {
  display: block;
  font-family: Amiri, Georgia, serif;
  font-weight: 700;
  color: rgb(0, 50, 153);
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1.05;
  margin-bottom: 10px;
}
.wg-loc-stat-label {
  display: block;
  font-family: Lato, Arial, sans-serif;
  color: #55565b;
  font-size: 14px;
  line-height: 1.45;
}

/* ---------------------------------------------------------------- *
 * Feature cards — replaces stacked H3 + paragraph blocks
 * ---------------------------------------------------------------- */

.wg-loc-cards {
  display: grid;
  grid-template-columns: repeat(var(--wg-cols, 3), 1fr);
  gap: 22px;
  margin: 38px auto 6px;
  text-align: left;
}
.wg-loc-card {
  background: #ffffff;
  border: 1px solid #ece9e2;
  border-radius: 16px;
  padding: 30px 28px 28px;
  box-shadow: 0 24px 48px -30px rgba(0, 20, 70, 0.4);
}
.wg-loc-card-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(105, 13, 17, 0.08);
  color: rgb(105, 13, 17);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
/* The page ships a global `svg[viewBox]:not([width]):not([height])` clamp at
   24px (see the #wga-svg-fix-v23 block). It outranks a plain `.class svg`
   selector, so match on the id to win. */
#dm .wg-loc-card-icon svg[viewBox] {
  width: 28px !important;
  height: 28px !important;
  max-width: none !important;
  max-height: none !important;
  display: block;
}
/* Beat the site-wide h3 { text-align } and colour rules from Duda. */
.wg-loc-card h3.wg-loc-card-title {
  font-family: Amiri, Georgia, serif;
  font-weight: 700;
  color: rgb(0, 50, 153) !important;
  font-size: 22px !important;
  line-height: 1.25;
  text-align: left !important;
  border-bottom: 0 !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}
.wg-loc-card p.wg-loc-card-text {
  font-family: Lato, Arial, sans-serif;
  color: #33343a !important;
  font-size: 15.5px !important;
  line-height: 1.62;
  text-align: left !important;
  max-width: none !important;
  margin: 0 !important;
}

/* ---------------------------------------------------------------- *
 * Services grid
 * ---------------------------------------------------------------- */

.wg-loc-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 34px auto 8px;
  text-align: left;
}
.wg-loc-service {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #f6f4ef;
  border: 1px solid #ece9e2;
  border-radius: 14px;
  padding: 20px 22px;
}
.wg-loc-service-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgb(0, 50, 153);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
#dm .wg-loc-service-icon svg[viewBox] {
  width: 21px !important;
  height: 21px !important;
  max-width: none !important;
  max-height: none !important;
  display: block;
}
.wg-loc-service span.wg-loc-service-text {
  font-family: Lato, Arial, sans-serif;
  color: #26272c;
  font-size: 15.5px;
  line-height: 1.45;
  font-weight: 600;
}

/* ---------------------------------------------------------------- *
 * Responsive
 * ---------------------------------------------------------------- */

@media (max-width: 1024px) {
  .wg-loc-cards { grid-template-columns: repeat(2, 1fr); }
  .wg-loc-services { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .wg-loc-stats { padding: 34px 14px 36px; }
  .wg-loc-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 12px; }
  /* Separators only make sense between tiles on the same row. */
  .wg-loc-stat + .wg-loc-stat::before { display: none; }
  .wg-loc-cards,
  .wg-loc-services { grid-template-columns: 1fr; }
  .wg-loc-cards { gap: 18px; margin-top: 28px; }
  .wg-loc-card { padding: 26px 22px 24px; }
  .wg-loc-card h3.wg-loc-card-title { font-size: 20px !important; }
}