/* Nordic clarity — the About hero. Scoped to preserve the rest of the site. */
.about-location-hero {
  --map-paper: #edf1f2;
  --map-ink: #142c3a;
  --map-muted: #4e6570;
  position: relative;
  isolation: isolate;
  min-height: 680px;
  overflow: hidden;
  background: var(--map-paper);
  color: var(--map-ink);
}
.about-map-canvas, .about-map-fallback, .about-map-wash { position: absolute; inset: 0; }
.about-map-fallback {
  background: url('./about-aarhus.svg') center 74% / auto 100% no-repeat;
  opacity: .95;
}
.about-map-canvas { opacity: 0; transition: opacity .5s ease; }
.about-location-hero[data-map-state='flying'] .about-map-canvas,
.about-location-hero[data-map-state='arrived'] .about-map-canvas { opacity: 1; }
.about-location-hero[data-map-state='flying'] .about-map-fallback,
.about-location-hero[data-map-state='arrived'] .about-map-fallback { opacity: 0; }
.about-map-wash {
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, var(--map-paper) 0%, rgba(237,241,242,.98) 23%, rgba(237,241,242,.8) 38%, rgba(237,241,242,.08) 69%, rgba(237,241,242,.25) 100%);
}
.about-location-copy { position: relative; z-index: 2; text-align: center; padding: 52px 24px 0; }
.about-location-copy h1 {
  font-family: var(--font-serif);
  font-weight: var(--display-weight, 400);
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.06;
  letter-spacing: -.025em;
  color: var(--map-ink);
  max-width: 19ch;
  margin: 0 auto;
  text-wrap: balance;
}
.about-location-copy .lead { max-width: 52ch; margin: 22px auto 0; font-size: 16px; line-height: 1.65; color: var(--map-muted); text-wrap: pretty; }
.about-location-pin {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 74%;
  transform: translate(-50%, -100%);
  display: flex;
  align-items: center;
  gap: 15px;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 20px 28px;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 999px;
  background: rgba(249,251,250,.93);
  box-shadow: 0 12px 40px rgba(23,52,65,.13), inset 0 1px 0 #fff;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: var(--map-ink);
  text-decoration: none;
  transition: opacity .45s ease, visibility .45s;
}
.about-location-pin::after { content: ''; position: absolute; left: 50%; top: 100%; height: 28px; width: 1px; background: #01b5f8; }
.about-location-pin::before { content: ''; position: absolute; left: calc(50% - 5px); top: calc(100% + 24px); width: 10px; height: 10px; border-radius: 50%; background: #01b5f8; box-shadow: 0 0 0 7px rgba(1,181,248,.12), 0 0 0 1px #fff; }
.about-location-pin:hover { background: #fff; }
.about-location-pin:focus-visible { outline: 3px solid #0072a8; outline-offset: 5px; }
.about-location-pin img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.about-location-pin strong { display: block; font-size: 21px; font-weight: 500; line-height: 1.25; margin-bottom: 8px; letter-spacing: -.025em; }
.about-location-pin .location-campus { display: block; font-size: 10px; font-weight: 500; letter-spacing: .09em; line-height: 1.4; }
.about-location-pin .location-address { display: block; font-size: 12px; line-height: 1.5; color: var(--map-muted); margin-top: 3px; }
.about-location-hero[data-map-state='flying'] .about-location-pin { opacity: 0; visibility: hidden; }
.about-map-replay { position: absolute; z-index: 4; left: 24px; bottom: 15px; border: 0; border-radius: 20px; padding: 9px 13px; background: rgba(255,255,255,.85); color: #264451; font: inherit; font-size: 12px; cursor: pointer; }
.about-map-replay[hidden] { display: none; }
.about-map-replay:hover { background: #fff; }
.about-map-credit { position: absolute; right: 16px; bottom: 15px; z-index: 4; font-size: 11px; line-height: 1.5; color: #435962; }
.about-map-credit summary { display: flex; align-items: center; gap: 7px; min-height: 36px; padding: 8px 12px; list-style: none; cursor: pointer; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; background: rgba(249,251,250,.88); box-shadow: 0 2px 12px rgba(23,52,65,.06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.about-map-credit summary::-webkit-details-marker { display: none; }
.about-map-credit summary span { font-size: 14px; line-height: 1; }
.about-map-credit summary:hover, .about-map-credit[open] summary { background: #fff; }
.about-map-credit summary:focus-visible { outline: 2px solid #0072a8; outline-offset: 3px; }
.about-map-credit-links { position: absolute; right: 0; bottom: calc(100% + 8px); width: max-content; max-width: calc(100vw - 32px); padding: 8px; border: 1px solid rgba(255,255,255,.8); border-radius: 16px; background: rgba(249,251,250,.96); box-shadow: 0 8px 28px rgba(23,52,65,.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.about-map-credit a { display: block; padding: 8px 10px; color: inherit; text-decoration: underline; text-underline-offset: 2px; border-radius: 8px; }
.about-map-credit a:hover { background: rgba(23,52,65,.06); }
.about-location-hero .maplibregl-canvas:focus { outline: none; }
:root[data-theme='dark'] .about-location-hero { --map-paper: #15262e; --map-ink: #ecf3f5; --map-muted: #b1c4ce; }
:root[data-theme='dark'] .about-map-wash { background: linear-gradient(180deg,#15262e 0%,rgba(21,38,46,.98) 23%,rgba(21,38,46,.8) 38%,rgba(21,38,46,.08) 69%,rgba(21,38,46,.25) 100%); }
:root[data-theme='dark'] .about-map-fallback { filter: brightness(.3) saturate(.6); }
:root[data-theme='dark'] .about-location-pin { background: rgba(27,48,58,.95); border-color: rgba(255,255,255,.2); box-shadow: 0 12px 40px #06101740; }
:root[data-theme='dark'] .about-location-pin:hover { background: #223e4a; }
:root[data-theme='dark'] .about-map-credit { color: #b1c4ce; }
:root[data-theme='dark'] .about-map-credit summary, :root[data-theme='dark'] .about-map-credit-links { background: rgba(27,48,58,.95); border-color: rgba(255,255,255,.2); }
:root[data-theme='dark'] .about-map-credit summary:hover, :root[data-theme='dark'] .about-map-credit[open] summary { background: #223e4a; }
@media (max-width: 600px) {
  .about-location-hero { min-height: 720px; }
  .about-location-copy { padding: 38px 22px 0; }
  .about-location-copy h1 { font-size: clamp(36px, 9vw, 48px); max-width: 18ch; }
  .about-location-copy .lead { font-size: 14px; margin-top: 20px; max-width: 35ch; }
  .about-location-pin { padding: 18px 21px; gap: 12px; }
  .about-location-pin strong { font-size: 19px; }
  .about-location-pin img { width: 34px; height: 34px; }
  .about-location-pin .location-address { font-size: 11px; }
  .about-map-replay { left: 12px; bottom: 14px; min-height: 44px; }
  .about-map-credit { right: 12px; bottom: 14px; }
  .about-map-credit summary { min-height: 44px; }
  .about-map-credit a { min-height: 44px; display: flex; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .about-map-canvas, .about-location-pin { transition: none; }
}
