/* ===============================
   Map Section
   =============================== */

#map-section,
.map-section {
  /* Outer band that fills the screen width */
  margin: 0;
  background: #3c3b31; /* dark charcoal background */
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 80px 0 40px 0;  /* top right bottom left */
  box-sizing: border-box;
}

/* Inner container: centers content and clamps to desktop width */
#map-section .map-layout,
.map-section .map-layout {
  width: 100%;
  max-width: 1340px;        /* desktop barrier */
  margin: 0 auto;
  padding: 0 60px;          /* side inset */
  box-sizing: border-box;

  /* Two-column grid: text | map */
  grid-template-columns: 0.27fr 0.73fr; /* narrower text, wider map */
  display: grid;
  gap: 48px;
  align-items: center;      /* keeps map vertically centered to text */
}

/* Text column base size */
#map-section .map-info,
.map-section .map-info {
  /* stays 15px ≥1340px, shrinks with 1.1vw below that, never smaller than 12px */
  font-size: clamp(12px, 1.1vw, 15px);
}

#map-section .map-info .kicker,
.map-section .map-info .kicker {
  font-family: 'Playfair Display', serif;
  font-size: 1.8em;         /* ~30px at 1340px (2.05 x 14.7) */
  letter-spacing: 0.2em;
  line-height: 2;
  text-transform: uppercase;
  color: #F4F3EE;
  margin: 0 0 30px 0;
}

#map-section .map-info .service-intro,
.map-section .map-info .service-intro {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9em;         /* follows .map-info baseline */
  letter-spacing: 0.08em;
  color: #F4F3EE;
  line-height: 2;
  margin: 0 0 30px 0;
}

#map-section .map-info .service-areas,
.map-section .map-info .service-areas {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9em;         /* follows .map-info baseline */
  letter-spacing: 0.08em;
  line-height: 2;
  color: #F4F3EE;
  list-style: none;         /* no bullets */
  padding-left: 0;
  margin: 0;
}

#map-section .map-info .service-areas li,
.map-section .map-info .service-areas li {
  margin: 6px 0;
}

/* Map column — aspect-ratio container so height tracks width at all sizes */
#service-area {
  width: 100%;
  position: relative;
  aspect-ratio: 16 / 9;   /* change to 2/1 or 21/9 to be shorter */
}

#map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
}

/* Tooltip injected by map.js */
.map-section .gm-tooltip {
  position: fixed;
  pointer-events: none;
  padding: 6px 10px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  border-radius: 4px;
  transform: translate(8px, 8px);
  z-index: 10;
}

/* Remove padding from Google's error overlay so it doesn't fake side gutters */
#map .gm-err-content,
#map .gm-err-container {
  padding: 0 !important;
}

/* ===============================
   Responsive
   =============================== */

/* Make text scale a bit slower as the viewport narrows (like masthead) */
@media (max-width: 1200px) {
  #map-section .map-layout,
  .map-section .map-layout {
    grid-template-columns: 0.30fr 0.70fr; /* slightly rebalance */
    gap: 40px;
    padding: 0 60px;
  }
  #map-section .map-info,
  .map-section .map-info {
    max-width: 500px;
    font-size: 1.25vw;      /* keep text from shrinking too fast */
  }
}

@media (max-width: 1024px) {
  #map-section .map-layout,
  .map-section .map-layout {
    grid-template-columns: 0.30fr 0.70fr;
    padding: 0 60px;
    gap: 36px;
  }
  #map-section .map-info,
  .map-section .map-info {
    font-size: 1.25vw;      /* keep readability as width drops */
  }
}

@media (max-width: 820px) {
  /* Stack: text above map (tablet/mobile) */
  #map-section .map-layout,
  .map-section .map-layout {
    grid-template-columns: 1fr;
    padding: 0 40px;
    gap: 28px;
  }

  #map-section .map-info,
  .map-section .map-info {
    text-align: left;
    max-width: 100%;
    font-size: 1.9vw;  /* base size — adjust to scale everything together */
    min-width: 0;      /* prevents right-edge overflow in CSS grid */
  }

  /* Optional separate size controls (keep or remove as you prefer) */
  #map-section .map-info .kicker,
  .map-section .map-info .kicker { font-size: 2em; }
  #map-section .map-info .service-intro,
  .map-section .map-info .service-intro { font-size: 1em; }
  #map-section .map-info .service-areas,
  .map-section .map-info .service-areas { font-size: 0.8em; }

  /* Cities side-by-side as text, wrapping to new lines if needed (no scroll) */
  #map-section .map-info .service-areas,
  .map-section .map-info .service-areas {
    display: flex;
    flex-wrap: wrap;        /* allow multiple rows */
    gap: 6px 16px;          /* row-gap | column-gap between city names */
    padding: 0;
    margin: 0;
    list-style: none;
    overflow: visible;      /* ensure no scrollbar/underline */
  }

  #map-section .map-info .service-areas li,
  .map-section .map-info .service-areas li {
    margin: 0;
    white-space: normal;    /* allow natural wrapping between items */
  }
}

/* ===============================
   Full-bleed map on very small screens (kept)
   =============================== */
@media (max-width: 480px) {
  /* keep comfortable padding for the text/content */
  #map-section .map-layout,
  .map-section .map-layout {
    --mobile-pad: 30px;
    padding: 0 var(--mobile-pad);
    gap: 45px;
  }

  /* make the map span BOTH sides, regardless of container padding */
  #map-section #service-area,
  .map-section #service-area {
    grid-column: 1 / -1;
    width: calc(100% + (2 * var(--mobile-pad)));
    margin-left: calc(-1 * var(--mobile-pad));
    margin-right: calc(-1 * var(--mobile-pad));
    aspect-ratio: 16 / 9;
  }

  /* Base size for all text in this column at ≤480px */
  #map-section .map-info,
  .map-section .map-info {
    font-size: 3.4vw;
  }

  /* Kicker + intro centered */
  #map-section .map-info .kicker,
  .map-section .map-info .kicker {
    font-size: 1.9em;
    line-height: 1.25;
    text-align: center;
  }
  #map-section .map-info .service-intro,
  .map-section .map-info .service-intro {
    font-size: 0.9em;
    line-height: 1.6;
    text-align: center;
  }

  /* Cities centered horizontally */
  #map-section .map-info .service-areas,
  .map-section .map-info .service-areas {
    font-size: 0.8em;
    line-height: 1.6;
    display: flex;
    flex-wrap: wrap;          /* side-by-side, wrap as needed */
    justify-content: center;  /* centers the row(s) */
    gap: 6px 16px;            /* spacing between city names */
    padding: 0;
    margin: 0 auto;
    list-style: none;
  }
  #map-section .map-info .service-areas li,
  .map-section .map-info .service-areas li {
    margin: 0;
    text-align: center;       /* center text inside each item */
    white-space: normal;
  }

  #map-section #map,
  .map-section #map {
    border-radius: 0; /* clean edge-to-edge */
  }
}

/* prevent horizontal scrollbars caused by the full-bleed element */
#map-section,
.map-section {
  overflow-x: hidden;
}

.gm-cursor-pointer { cursor: pointer; }


/* remove grey line */

@media (max-width: 1024px) {
  .contact-section { margin-top: -1px; }
}