/* Regional detail components, consolidated from the existing Atlantic implementation.
   The original shared RegionCarousel controller owns interaction and edge state. */
#power {
  /* Restore the existing regional gradient where a late legacy image-only rule
     had discarded it. The page supplies its own unchanged hero photograph. */
  --em-region-layers-background: linear-gradient(90deg, rgba(18, 28, 24, .56), rgba(18, 28, 24, .40) 48%, rgba(18, 28, 24, .58)), var(--em-region-hero-image);
}
.region-destination-slider,
.region-destination-viewport {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.region-destination-viewport { overflow: hidden; }
.continue .region-destination-slider{margin-top:clamp(28px,3vw,48px)}
.region-destinations {
  display: flex;
  align-items: start;
  gap: clamp(24px, 2.6vw, 44px);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: clamp(26px, 3vw, 46px);
  border-radius: 44px;
  background: rgba(255, 248, 235, .58);
  box-shadow: 0 28px 74px rgba(10, 27, 22, .12);
  backdrop-filter: blur(3px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(26px, 3vw, 46px);
  scrollbar-width: none;
}
.region-destinations::-webkit-scrollbar { display: none; }
.region-destination {
  flex: 0 0 calc((100% - 3 * clamp(24px, 2.6vw, 44px)) / 4);
  min-width: 270px;
  max-width: calc((100% - 3 * clamp(24px, 2.6vw, 44px)) / 4);
  text-align: center;
  scroll-snap-align: start;
}
.region-destination-circle {
  display: block;
  width: min(100%, 410px);
  max-width: 410px;
  aspect-ratio: 1;
  margin: 0 auto;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #ddd;
  box-shadow: 0 34px 78px rgba(10, 27, 22, .24);
}
.region-destination-circle img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.region-destination :is(h4,.region-subhead) {
  margin: 14px 0 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.8rem;
  line-height: 1.1;
  color: #965d17;
  overflow-wrap: anywhere;
}
.region-destination p {
  max-width: 300px;
  margin: 8px auto 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #5b4e3f;
  overflow-wrap: anywhere;
}
.region-destination-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(20px, 2vw, 30px);
}
.region-destination-arrow {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid rgba(255, 248, 235, .58);
  border-radius: 999px;
  background: linear-gradient(135deg, #fff8eb, #f1dfbd);
  color: #0b4a3d;
  box-shadow: 0 16px 34px rgba(10, 27, 22, .16);
  cursor: pointer;
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
  transition: transform .18s ease, box-shadow .18s ease;
}
.region-destination-arrow:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px rgba(10, 27, 22, .2);
}
.region-destination-arrow:focus-visible {
  outline: 3px solid rgba(207, 131, 19, .42);
  outline-offset: 4px;
}
.region-city-layout {
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  align-items: stretch;
  gap: 48px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.region-city-layout--reverse {
  grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
}
.region-city-layout > * { min-width: 0; max-width: 100%; }
.region-city-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 500px;
  padding: 28px;
  border: 0;
  border-radius: 36px;
  background: rgba(255, 248, 235, .94);
  box-shadow: 0 22px 54px rgba(10, 27, 22, .11);
  overflow-wrap: anywhere;
}
.region-city-panel h2 {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.75rem, 3.85vw, 4.25rem);
  line-height: 1.02;
  color: #4b3428;
  text-shadow: none;
}
.region-city-panel p {
  margin-top: .8rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: .92rem;
  line-height: 1.43;
  color: #6a5e4d;
}
.region-city-panel .city-note {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  color: #6d416d;
}
.region-city-panel .eyebrow { color: #c8612d; }
.region-city-panel .key-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.region-city-panel .key { min-width: 0; padding: 12px; border-radius: 18px; }
.region-city-panel .key b { font-size: .9rem; line-height: 1.25; }
.region-city-panel .key span { font-size: .82rem; line-height: 1.3; }
.region-mosaic {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr) minmax(0, .84fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
  min-height: 500px;
}
.region-mosaic-tile {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 28px;
  overflow: hidden;
  background: #ddd;
  box-shadow: 0 24px 58px rgba(10, 27, 22, .16);
}
.region-mosaic-tile--main {
  grid-column: 1;
  grid-row: 1 / span 3;
  border-radius: 34px;
}
.region-mosaic-tile img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.region-mosaic-tile .caption {
  position: absolute;
  left: 14px;
  bottom: 12px;
  max-width: calc(100% - 28px);
  padding: .38rem .62rem;
  border-radius: 999px;
  background: rgba(5, 42, 35, .72);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
@media (max-width: 1220px) {
  .region-destination {
    flex-basis: calc((100% - clamp(24px, 2.6vw, 44px)) / 2);
    max-width: calc((100% - clamp(24px, 2.6vw, 44px)) / 2);
    min-width: 260px;
  }
  .region-city-layout,
  .region-city-layout--reverse { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .region-city-panel { min-height: 0; }
  .region-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    min-height: 0;
  }
  .region-mosaic-tile { height: 230px; }
  .region-mosaic-tile--main { grid-column: 1 / span 2; grid-row: auto; height: 420px; }
}
@media (max-width: 760px) {
  .region-destinations { padding: 24px; scroll-padding-inline: 24px; }
  .region-destination { flex-basis: 100%; max-width: 100%; min-width: 0; }
  .region-destination-circle { width: min(100%, 335px); max-width: 335px; }
  .region-destination :is(h4,.region-subhead) { font-size: 1.65rem; }
  .region-destination-arrow { width: 48px; height: 48px; }
  .region-city-layout { gap: 24px; }
  .region-city-panel { padding: 24px; }
  .region-city-panel .key-row { grid-template-columns: minmax(0, 1fr); }
  .region-mosaic { grid-template-columns: minmax(0, 1fr); }
  .region-mosaic-tile { height: 230px; }
  .region-mosaic-tile--main { grid-column: 1; height: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  .region-destination-arrow { transition: none; }
}

/* Family reading, navigation and accessibility; Imperial geometry is shared. */
.region-circle-link{display:block;color:inherit;text-decoration:none}
.region-hero-shade{position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(5,25,23,.5),rgba(5,25,23,.2) 52%,transparent 85%);pointer-events:none}
.region-circle-link:hover .region-subhead{text-decoration:underline;text-underline-offset:5px}
.em-region-detail main :is(a,button,[tabindex]):focus-visible{outline:3px solid #a94c24;outline-offset:5px}
.region-skip{position:fixed;z-index:100000;top:12px;left:12px;transform:translateY(-200%);padding:16px;background:#fff;color:#203c39}
.region-skip:focus{transform:none}
.region-reading .why-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.region-reading .why-card p{font-size:16px;line-height:1.8}
.region-context-links{display:flex;flex-wrap:wrap;gap:18px 30px;margin-top:35px}
.region-context-links a{display:inline-block;min-height:44px;text-decoration:underline;text-underline-offset:5px;font-weight:700}
.region-sources{margin-top:30px;border-top:1px solid #87705b;padding-top:15px}
.region-sources summary{cursor:pointer;min-height:44px;display:list-item;padding-block:10px;font-weight:700}
.region-sources li{margin-block:12px}
.region-sources a{text-decoration:underline;text-underline-offset:4px}
.region-sources p{font-size:14px;max-width:1000px}
@media(max-width:900px){.region-reading .why-grid{grid-template-columns:1fr}.region-hero-shade{background:linear-gradient(0deg,rgba(5,25,23,.6),rgba(5,25,23,.22))}}

/* Preserve the Imperial master title scale for long regional names. */
@media(max-width:900px){body.em-region-detail .hero h1{hyphens:manual;overflow-wrap:normal}}