/* Article-width editorial cartography with quiet, linked country callouts. */
.article-map { width: 100%; margin: 52px 0 64px; scroll-margin-top: 110px; }
.article-map-heading h2 { color: #7d6c4d; font: 400 clamp(1.8rem, 3vw, 2.55rem)/1.2 var(--font-serif); margin: 0 0 30px; scroll-margin-top: 110px; }
.article-map-layout { position: relative; isolation: isolate; }
.gulf-map-geography { position: relative; }
.gulf-map-geography picture, .gulf-map-geography img { display: block; width: 100%; height: auto; }
.gulf-country-grid { position: absolute; inset: 0; pointer-events: none; }
.gulf-country { position: absolute; left: var(--card-x); top: var(--card-y); display: flex; flex-direction: column; width: 30%; min-height: 178px; height: var(--gulf-card-height, auto); padding: 14px 14px 10px; background: #fff; border: 0; border-radius: 3px; box-shadow: 0 4px 22px #0c19290b, 0 1px 4px #0c192905; scroll-margin-top: 110px; pointer-events: auto; transition: scale 450ms cubic-bezier(.22,.61,.36,1), box-shadow 450ms ease, opacity 700ms ease, translate 850ms cubic-bezier(.22,.61,.36,1); }
.gulf-country.is-active { scale: 1.035; z-index: 2; box-shadow: 0 9px 30px #0c192915, 0 2px 6px #0c192908; }
.gulf-country:focus-visible { outline: 1px solid var(--accent, #7d6c4d); outline-offset: 4px; }
.gulf-map-regions { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.gulf-region, .gulf-region-pin { fill: transparent; stroke: none; pointer-events: all; cursor: pointer; }
.gulf-region { fill-rule: evenodd; transition: fill 450ms ease; }
.gulf-region:is(.is-active, :focus-visible) { fill: #7d6c4d24; outline: none; }
.insight-article-page .gulf-region:focus-visible { outline: none; stroke: none; }
.gulf-map-connectors { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gulf-connector-line { fill: none; stroke: var(--accent, #7d6c4d); stroke-width: .85; stroke-dasharray: 1; stroke-dashoffset: 0; }
.gulf-connector-dot { fill: var(--accent, #7d6c4d); transform-box: fill-box; transform-origin: center; }
.gulf-country h3 { color: var(--accent, #7d6c4d); font: 400 clamp(1.15rem, 2vw, 1.4rem)/1.2 var(--font-serif); margin: 0 0 13px; }
.gulf-country dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 0 22px; }
.gulf-country dl > div { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding-inline: 8px; text-align: center; }
.gulf-country dl > div + div::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 1px; background: #ded8cf; }
.gulf-country dt { color: #4f6273; font: 300 .68rem/1.4 var(--font-sans); }
.gulf-country dd { order: -1; margin: 0; color: #4f6273; font: 400 1.65rem/1 var(--font-serif); white-space: nowrap; }
.gulf-country dl > div:last-child dd { color: #7d6c4d; }
.gulf-unit { font: 300 .52em/1 var(--font-sans); }
.article-map .gulf-providers { color: #4f6273; font-size: .75rem; font-weight: 300; line-height: 1.55; margin: 0; }
.article-map .article-map-sources { color: #657381; font-size: .7rem; line-height: 1.75; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid #e5e3de; }
.gulf-mobile-labels { display: none; }
@media (min-width: 951px) {
  .article-map-heading { padding-bottom: 28px; }
  .article-map-layout { margin-bottom: 60px; }
  .article-map .gulf-country .gulf-providers { margin-top: auto; }
}
@media (max-width: 950px) {
  .gulf-map-geography { max-width: 520px; margin: 0 auto 24px; }
  .gulf-map-geography img { aspect-ratio: 647.534 / 472.32; }
  .gulf-mobile-labels { display: block; }
  .gulf-map-regions, .gulf-map-connectors { display: none; }
  .gulf-mobile-label { position: absolute; transform: translate(-50%, -50%); background: #fff; padding: 5px 7px; color: #4f6273; font: 400 .7rem/1.2 var(--font-sans); white-space: nowrap; }
  .gulf-country-grid { position: static; display: grid; grid-template-columns: 1fr; gap: 18px; }
  .gulf-country { position: static; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; padding: 22px; }
  .gulf-country.is-active { scale: 1; }
  .gulf-country h3 { font-size: 1.45rem; align-self: start; }
  .gulf-country dl { grid-column: 2; grid-row: 1 / span 2; margin-bottom: 0; align-self: center; }
  .article-map .gulf-providers { grid-column: 1; font-size: .78rem; }
}
@media (max-width: 600px) {
  .article-map { margin-block: 40px 48px; }
  .gulf-country { display: block; padding: 22px 22px 14px; }
  .gulf-country h3 { font-size: 1.5rem; margin-bottom: 18px; }
  .gulf-country dl { margin-bottom: 24px; max-width: 320px; }
  .gulf-country dd { font-size: 1.95rem; }
  .gulf-country dt { font-size: .75rem; }
  .article-map .gulf-providers { font-size: .82rem; line-height: 1.7; }
  .gulf-mobile-label { font-size: .65rem; padding: 5px; }
}
@media (prefers-reduced-motion: no-preference) {
  .editorial-motion :is(.article-map-heading, .article-map-layout, .article-map-sources):not(.is-revealed) { opacity: 0; }
  .map-motion-ready .gulf-country { transition-delay: 0ms, 0ms, var(--card-delay, 0ms), var(--card-delay, 0ms); }
  .map-motion-ready .gulf-country:not(.is-card-visible):not(:focus-within) { opacity: 0; translate: 0 10px; transition: none; }
  .map-motion-ready .gulf-connector-line { transition: stroke-dashoffset 900ms cubic-bezier(.22,.61,.36,1) var(--card-delay, 0ms); }
  .map-motion-ready .gulf-connector-dot { transition: opacity 300ms ease calc(var(--card-delay, 0ms) + 900ms), scale 400ms ease calc(var(--card-delay, 0ms) + 900ms); }
  .map-motion-ready .gulf-connector:not(.is-card-visible) .gulf-connector-line { stroke-dashoffset: 1; transition: none; }
  .map-motion-ready .gulf-connector:not(.is-card-visible) .gulf-connector-dot { opacity: 0; scale: .5; transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gulf-country, .gulf-region { transition: none; }
  .gulf-country.is-active { scale: 1; }
}
@media print {
  .article-map { break-before: page; }
  .gulf-country { break-inside: avoid; }
}