/* Communities 2026-07-17: rectangular location boxes, regional illustration and inline video. */
html:has(.areas-page),
body:has(.areas-page),
.areas-page {
  max-width: 100%;
  overflow-x: clip;
}

.areas-page .areas-county-section > .section-shell {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(480px, 1.28fr);
  grid-template-areas:
    "heading map"
    "list list";
  align-items: center;
  column-gap: clamp(30px, 5vw, 72px);
  row-gap: clamp(28px, 4vw, 52px);
}

.areas-page .areas-county-section .section-head.vertical {
  grid-area: heading;
  width: 100%;
  margin: 0;
  padding: clamp(22px, 3vw, 46px) 0;
  text-align: center;
}

.areas-page .areas-county-section .areas-region-map {
  grid-area: map;
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(191, 147, 42, 0.34);
  border-radius: 0;
  background: #fffaf0;
  box-shadow: 0 24px 54px rgba(7, 35, 58, 0.1);
}

.areas-page .areas-county-section .areas-region-map::after {
  position: absolute;
  inset: 0;
  border: 10px solid rgba(255, 255, 255, 0.26);
  content: "";
  pointer-events: none;
}

.areas-page .areas-county-section .areas-region-map img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.areas-page .areas-county-section .areas-county-list {
  grid-area: list;
  width: 100%;
  margin-top: 0;
}

.areas-page .areas-county-group .area-chip-list button,
.areas-page .community-chip-list button {
  min-height: 44px;
  padding: 10px 17px;
  border-radius: 0 !important;
}

/* Match the large covers to the translucent circular control already approved below. */
.areas-page .large-video-thumb > span {
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  display: grid !important;
  place-items: center;
  width: 58px;
  height: 58px;
  min-width: 58px;
  margin: 0;
  padding: 0 !important;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 50% !important;
  background: rgba(3, 27, 49, 0.62) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
  color: #fff !important;
  font-size: 0 !important;
  backdrop-filter: blur(3px);
}

.areas-page .large-video-thumb > span svg {
  width: 22px;
  height: 22px;
  margin-left: 3px;
}

.areas-page .areas-spotlight-grid {
  align-items: start;
}

.areas-page .areas-spotlight-card {
  align-self: start;
  height: auto;
}

.areas-page .inline-video-player {
  grid-area: media;
  position: relative;
  z-index: 4;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #020b13;
}

.areas-page .inline-video-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #020b13;
}

.areas-page .inline-video-player iframe:focus-visible {
  outline: 3px solid #d2aa3d;
  outline-offset: -3px;
}

.areas-page .inline-video-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 0;
  background: rgba(3, 27, 49, 0.78);
  color: #fff;
  font: 500 28px/1 Arial, sans-serif;
  cursor: pointer;
}

.areas-page .inline-video-close:focus-visible {
  outline: 3px solid #d2aa3d;
  outline-offset: 2px;
}

.areas-page :is(.large-video-thumb, .area-video-card).is-playing::before,
.areas-page :is(.large-video-thumb, .area-video-card).is-playing::after,
.areas-page .large-video-thumb.is-playing > span {
  display: none !important;
}

.areas-page .large-video-thumb.is-playing,
.areas-page .area-video-card.is-playing {
  cursor: default;
}

@media (max-width: 980px) {
  .areas-page .areas-county-section > .section-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "heading"
      "map"
      "list";
    gap: clamp(24px, 5vw, 40px);
  }

  .areas-page .areas-county-section .section-head.vertical {
    width: min(780px, 100%);
    margin: 0 auto;
    padding-bottom: 0;
  }

  .areas-page .areas-county-section .areas-region-map {
    width: min(780px, 100%);
    margin: 0 auto;
  }
}

@media (max-width: 560px) {
  .areas-page .areas-county-section .areas-region-map::after {
    border-width: 6px;
  }

  .areas-page .areas-county-group .area-chip-list {
    gap: 8px;
  }

  .areas-page .areas-county-group .area-chip-list button,
  .areas-page .community-chip-list button {
    min-height: 44px;
    padding: 10px 12px;
  }

  .areas-page .large-video-thumb > span {
    width: 54px;
    height: 54px;
    min-width: 54px;
  }
}