/* Editorial chapter selectors for the Infrastructure and Land overview pages. */
.editorial-reader.web-edition #article-content .regional-overview-directory {
  --directory-ink: #203f53;
  --directory-accent: #0f777c;
  --directory-rule: #d7e4e4;
  margin: 0 0 clamp(3.4rem, 7vw, 6rem);
  min-width: 0;
}
.editorial-reader.web-edition #article-content .regional-overview-directory--landscape {
  --directory-ink: #40352c;
  --directory-accent: #a65730;
  --directory-rule: #e4d8c8;
}
.regional-overview-directory-heading {
  display: grid;
  grid-template-columns: minmax(155px, .37fr) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  margin: 0 0 clamp(1.4rem, 2.8vw, 2rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  border-top: 1px solid var(--directory-rule);
}
.regional-overview-directory-heading > span {
  grid-row: span 2;
  display: block;
  width: max-content;
  max-width: 100%;
  padding: .55rem .75rem .55rem 0;
  border-top: 4px solid var(--directory-accent);
  color: var(--directory-accent);
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .12em;
  line-height: 1.5;
  text-transform: uppercase;
}
.editorial-reader.web-edition #article-content .regional-overview-directory-heading h2 {
  max-width: 21ch;
  margin: 0 0 .55rem;
  padding: 0;
  border: 0;
  color: var(--directory-ink);
  font-family: Montserrat, Arial, sans-serif;
  font-size: clamp(1.9rem, 3.4vw, 3.15rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.1;
  text-wrap: balance;
}
.editorial-reader.web-edition #article-content .regional-overview-directory-heading p {
  max-width: 76ch;
  margin: 0;
  color: #45566a;
  font-size: clamp(.97rem, 1.2vw, 1.09rem);
  line-height: 1.65;
}
.editorial-reader.web-edition #article-content .regional-overview-directory--landscape .regional-overview-directory-heading p {
  color: #5a4c40;
}
.regional-overview-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.8rem, 1.55vw, 1.35rem);
}
.regional-overview-card {
  --gallery-accent: #79c1ba;
  position: relative;
  display: block;
  min-width: 0;
  min-height: clamp(340px, 31vw, 430px);
  isolation: isolate;
  overflow: hidden;
  border-bottom: 6px solid var(--gallery-accent);
  border-radius: 1.2rem;
  background: #243e52;
  box-shadow: 0 17px 39px rgba(27, 44, 57, .16);
  color: #fff !important;
  text-decoration: none !important;
  transition: transform .22s ease, box-shadow .22s ease;
}
.regional-overview-directory--infrastructure .regional-overview-card--2 { --gallery-accent: #e5a865; }
.regional-overview-directory--infrastructure .regional-overview-card--3 { --gallery-accent: #9bb4cb; }
.regional-overview-directory--landscape .regional-overview-card--1 { --gallery-accent: #dda05c; }
.regional-overview-directory--landscape .regional-overview-card--2 { --gallery-accent: #a5bc7b; }
.regional-overview-directory--landscape .regional-overview-card--3 { --gallery-accent: #e7bf79; }
.regional-overview-directory--landscape .regional-overview-card--4 { --gallery-accent: #d79278; }
.regional-overview-directory--landscape .regional-overview-card--5 { --gallery-accent: #90b4c2; }
.regional-overview-directory--landscape .regional-overview-card--6 { --gallery-accent: #cfad7b; }
.regional-overview-card:hover,
.regional-overview-card:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 25px 50px rgba(27, 44, 57, .23);
}
.regional-overview-card:focus-visible {
  outline: 3px solid #e69253;
  outline-offset: 4px;
}
.regional-overview-card > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform .38s ease;
}
.regional-overview-card:hover > img,
.regional-overview-card:focus-visible > img { transform: scale(1.045); }
.regional-overview-card--2 > img { object-position: 50% 42%; }
.regional-overview-directory--landscape .regional-overview-card--3 > img { object-position: 57% center; }
.regional-overview-directory--landscape .regional-overview-card--6 > img { object-position: 47% center; }
.regional-overview-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(15, 29, 40, .16) 0%, rgba(15, 29, 40, .24) 30%, rgba(15, 29, 40, .94) 100%);
}
.regional-overview-directory--landscape .regional-overview-card::after {
  background: linear-gradient(180deg, rgba(31, 27, 22, .14) 0%, rgba(31, 27, 22, .27) 30%, rgba(31, 27, 22, .94) 100%);
}
.regional-overview-card-copy {
  position: absolute;
  z-index: 1;
  right: clamp(1.15rem, 2vw, 1.6rem);
  bottom: clamp(1.15rem, 2vw, 1.6rem);
  left: clamp(1.15rem, 2vw, 1.6rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
}
.regional-overview-card-kicker {
  color: #f8d7b9;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .105em;
  line-height: 1.4;
  text-transform: uppercase;
}
.editorial-reader.web-edition #article-content .regional-overview-card-copy > strong {
  max-width: 21ch;
  color: #fff;
  font-family: Montserrat, Arial, sans-serif;
  font-size: clamp(1.3rem, 1.75vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.16;
  text-wrap: balance;
}
.regional-overview-card-description {
  max-width: 34ch;
  color: #f8f8f4;
  font-size: .86rem;
  line-height: 1.52;
}
.regional-overview-card-cta {
  display: inline-flex;
  gap: .4rem;
  align-items: center;
  margin-top: .28rem;
  padding-top: .6rem;
  border-top: 1px solid var(--gallery-accent);
  color: #fff;
  font-size: .79rem;
  font-weight: 850;
  line-height: 1.4;
}
.regional-overview-card-cta > span { color: var(--gallery-accent); font-size: 1.08rem; }
.regional-overview-credits { margin: .75rem 0 0; color: #5a6570; font-size: .73rem; line-height: 1.5; }
.regional-overview-credits summary { width: max-content; cursor: pointer; color: var(--directory-accent); font-weight: 800; }
.regional-overview-credits ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem 1.5rem; margin: .65rem 0 0; padding-left: 1.2rem; }
.regional-overview-credits li { overflow-wrap: anywhere; }
.regional-overview-credits a { color: var(--directory-accent) !important; text-decoration: underline !important; text-underline-offset: 2px; }
@media (max-width: 1040px) {
  .regional-overview-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .regional-overview-card { min-height: 350px; }
}
@media (max-width: 700px) {
  .regional-overview-directory-heading { grid-template-columns: 1fr; }
  .regional-overview-directory-heading > span { grid-row: auto; margin-bottom: 1rem; }
  .regional-overview-gallery,
  .regional-overview-credits ul { grid-template-columns: 1fr; }
  .regional-overview-card { min-height: 315px; }
  .regional-overview-card-description { max-width: 46ch; }
}
@media (prefers-reduced-motion: reduce) {
  .regional-overview-card, .regional-overview-card > img { transition: none; }
}
@media print {
  .regional-overview-card { box-shadow: none; break-inside: avoid; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}
