@import url('map.css');
@import url('blocks/text.css');
@import url('blocks/summary.css');
@import url('blocks/image.css');
@import url('blocks/gallery.css');
@import url('blocks/video.css');
@import url('blocks/person.css');
@import url('blocks/event.css');
@import url('blocks/timeline.css');
@import url('blocks/link-preview.css');

:root {
  /* colours */
  --color-text: #000;
  --color-text-muted: #c3c3c3;
  --color-bg: #f0f0f0;
  --color-bg-secondary: #f0f0f0;
  --color-accent: hsl(20, 100%, 50%);
  --color-border: #000;

  /* map overlay */
  --color-map-isobar: var(--color-accent);
  --color-map-front-cold: var(--color-accent);
  --color-map-front-warm: var(--color-accent);
  --color-map-front-occluded: var(--color-accent);
  --color-map-pressure-high: var(--color-accent);
  --color-map-pressure-low: var(--color-accent);
  --color-map-warning: var(--color-accent);
  --color-map-symbol: var(--color-accent);
  --color-map-circumference: var(--color-accent);

  /* map legend colors — sourced from the live Mapbox style
     (river-landscapes/cmq9cx0cl000301s78qz8c49n) paint properties */
  --color-map-eez-boundary: hsl(72, 0%, 0%);
  --color-map-schengen: hsl(70, 0%, 40%);
  --color-map-schengen-special: hsl(70, 0%, 10%);
  --color-map-iom-missing: hsl(302, 0%, 100%);
  --color-map-iom-dead: hsl(20, 100%, 50%);

  /* spacing */
  --space-xxs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --space-xl: 6rem;
  --minimap-width: 1rem;
  --legend-width: 15rem;
  --mobile-menu-toggle-height: 2.5rem;

  /* typography */
  --font-body: 'GT Mechanik Semi', Arial, sans-serif;
  --font-ui: 'GT Mechanik Mono', monospace;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-heavy: 800;
  --weight-mono-medium: 500;
  --weight-mono-heavy: 800;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.5rem;
  --leading-tight: 1;
  --leading-body: 1.4;
}

/* Mobile type scale — every font-size in the project reads from the --text-*
   tokens above, so redefining them here (same names, smaller values) rescales
   the whole site at once. Adjust these five values directly to retune mobile
   typography; --text-sm/--text-base are left equal to their desktop values
   since small/body copy is already comfortable at this width — only the
   heading-scale tokens (lg/xl/2xl) are reduced, since those are what
   overwhelm a narrow screen (e.g. --text-2xl at 2.5rem/40px dominating a
   375px-wide phone). */
@media (max-width: 50rem) {
  :root {
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.875rem;
  }
}


*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

a {
  color: inherit;
  text-decoration: none;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-text);
  background-color: var(--color-bg);
}

.home-content {
  position: relative;
  z-index: 5;
  padding: 0;
  pointer-events: none;
}

.scene-section {
  pointer-events: none;
}

.scene {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 100vh on iOS Safari is the LARGEST possible viewport (address bar
     hidden) — when the address bar is expanded, the scene ends up taller
     than what's actually visible, and the fixed-position mobile menu (which
     tracks the real, current viewport) clips into it. 100dvh tracks the
     real, current viewport instead; 100vh is kept first as a fallback for
     browsers without dvh support. */
  min-height: 100vh;
  min-height: 100dvh;
  padding-block: var(--space-sm);
  background-color: var(--color-bg-secondary);
  pointer-events: none;
}

.scene__panel {
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
  padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-lg);
  pointer-events: auto;
}

.scene--full-bleed {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.scene--panel-width {
  background-color: transparent;
}

.scene--panel-width .scene__panel {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
}

.scene__panel-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  color: var(--color-text);
  margin: 0 0 var(--space-sm);
  scroll-margin-top: var(--space-lg);
}

.scene__panel-eyebrow-link {
  color: inherit;
  text-decoration: none;
}

.scene__panel-eyebrow-link:hover {
  text-decoration: underline;
}

.scene__panel :where(p) {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--color-text);
  margin: 0;
}

.scene--hero {
  background-color: transparent;
  justify-content: flex-end;
  padding-block: 0;
}

.scene--transparent {
  background-color: transparent;
}

.scene__panel--hero {
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
  margin-bottom: var(--space-lg);
  padding: var(--space-lg);
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
}

.scene__panel-tagline {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-xl);
  line-height: 1.3;
  color: var(--color-text);
  max-width: 40rem;
  margin: 0 auto;
}

@media (max-width: 30rem) {
  .scene__panel-tagline {
    font-size: var(--text-lg);
  }
}

/* Centered panels (max-width: 40rem) start overlapping the fixed
   legend-menu (left: var(--space-lg) + var(--legend-width) = 18rem) once the
   viewport is narrower than 40rem + 2 * 18rem = 76rem. Below that, dock the
   panels into the space between the legend-menu and the scroll-minimap
   instead of centering them, and let their width respond to what's left. */
@media (max-width: 77rem) {
  .scene__panel,
  .scene__panel--hero {
    width: auto;
    max-width: none;
    margin-inline: 0;
    margin-left: calc(var(--space-lg) + var(--legend-width) + var(--space-xl));
    margin-right: calc(var(--minimap-width) + var(--space-xl));
  }
}

/* Below the mobile-menu breakpoint (assets/css/components/mobile-menu.css)
   the legend-menu is gone, so there's nothing to clear on the left — but the
   scroll-minimap stays visible at every width, so the right margin still
   needs to clear it. */
@media (max-width: 50rem) {
  .scene__panel,
  .scene__panel--hero {
    margin-left: var(--minimap-width);
    margin-right: calc(var(--minimap-width) + var(--minimap-width));
    padding: var(--space-md) var(--space-md);
  }

  .scene__panel--hero {
    padding: var(--space-md);
  }

  .scene {
    padding-bottom: var(--mobile-menu-toggle-height);
  }

  #map .mapboxgl-ctrl-group {
  display: none;

}

  .map-mobile-card-slot {
    position: fixed;
    /* Inset from the scroll-minimap's own edge (not the raw viewport edge),
       so cards get the same breathing room on the right as they already
       have on the left, regardless of --minimap-width. */
    left: var(--space-md);
    right: calc(var(--minimap-width) + var(--space-md));
    bottom: calc(var(--mobile-menu-toggle-height) + var(--space-md));
    z-index: 18;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    pointer-events: none;
  }

}

.scene-gap {
  height: 100vh;
  height: 100dvh;
  pointer-events: none;
}

#map .mapboxgl-scroll-zoom-blocker,
#map .mapboxgl-touch-pan-blocker {
  inset: auto;
  top: var(--space-sm);
  left: auto;
  right: 4rem; /* clears the ~34px-wide nav control (top-right) plus a gap; the map container itself is already inset from the scroll minimap */
  bottom: auto;
  width: auto;
  height: auto;
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-text);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: var(--text-sm) !important;
  line-height: 1.4;
}

/* On mobile the nav control/minimap this toast normally clears are hidden
   (or, for the minimap, no longer relevant to clear against), so it moves
   to sit just above the mobile-menu bar instead of top-right. */
@media (max-width: 50rem) {
  #map .mapboxgl-scroll-zoom-blocker,
  #map .mapboxgl-touch-pan-blocker {
    top: auto;
    right: auto;
    left: 50%;
    bottom: calc(var(--mobile-menu-toggle-height) + var(--space-md));
    transform: translateX(-50%);
  }
}

#map .mapboxgl-ctrl-top-right {
  right: 0; /* the map container itself is already inset from the scroll minimap */
}

#map .mapboxgl-ctrl-group {
  border-radius: 0;
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-text);
  box-shadow: none;

}

#map .mapboxgl-ctrl-group button + button {
  border-top: 1px solid var(--color-text);
}

.map-case-study-card {
  width: 21.5rem; /* ~345px from Figma, same width the old in-scene card used */
  max-width: 100%; /* lets it shrink to fit .map-mobile-card-slot's own clamped width instead of overflowing it */
  border: 1px solid var(--color-text);
  background-color: var(--color-bg-secondary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1600ms ease; /* matches the map flyTo duration in scroll-scenes.js, so it dissolves across the whole zoom */
}

@media (max-width: 50rem) {
  .map-case-study-card {
    /* Faster than desktop's flyTo-matched fade — on mobile the cards float
       into a shared stack rather than dissolving in place on their own pin,
       so a long fade reads as sluggish. Must stay in sync with
       CARD_FADE_DURATION in map.js. The transform transition is for the
       FLIP position smoothing in map.js (withFlip) — it's the only thing
       that makes a sibling card's appear/disappear/resize glide instead of
       instantly reflowing the rest of the stack. */
    transition: opacity 500ms ease, transform 300ms ease;
  }

  /* Applied by map.js (pinInSlot) the moment a floating card starts fading
     out, together with the inline left/bottom/width that freeze it exactly
     where it was sitting. Taking it out of the slot's flex flow is what lets
     the cards staying behind settle into their final positions immediately
     — while it was still in flow, it held its row open for the whole fade
     and everything above it dropped into place only once the fade ended.
     It sits behind its siblings so a card growing into the space it used to
     occupy covers it rather than blending through it. */
  .map-case-study-card--leaving {
    position: absolute;
    z-index: -1;
    transition: opacity 300ms ease; /* keep in sync with CARD_LEAVE_DURATION in map.js */
  }
}

.map-case-study-card--visible {
  opacity: 1;
  pointer-events: auto;
}

.case-study-card__title {
  display: block;
  padding: var(--space-sm);
  font-family: var(--font-ui);
  font-weight: var(--weight-mono-heavy);
  font-size: var(--text-base);
  color: var(--color-text);
  margin: 0;
}

/* Rows after the title use border-top (not border-bottom) so the divider
   never doubles up against the card's own outer border on whichever row
   happens to render last. */
.case-study-card__summary {
  padding: var(--space-sm);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-sm);
  color: var(--color-text);
  margin: 0;
}

.case-study-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-top: 1px solid var(--color-border);
}

.case-study-card__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-sm);
  color: var(--color-text);
}

/* Same invert-on-hover treatment as .legend-menu__item, applied to each
   interactive row independently so hovering the title never affects the
   external-link row (or vice versa). */
a.case-study-card__title:hover,
a.case-study-card__link:hover,
a.case-study-list__item:hover {
  background-color: var(--color-text);
  color: var(--color-bg-secondary);
}

/* Medium/Small reuse the same (always fully-built) markup as Large and just
   hide rows via CSS, since which size applies depends on which scene is
   currently active — see setActiveCaseStudy in map.js. */
.map-case-study-card--medium .case-study-card__summary,
.map-case-study-card--medium .case-study-card__image,
.map-case-study-card--medium .case-study-card__link {
  display: none;
}

.map-case-study-card--small {
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: 1px solid var(--color-bg);
  border-radius: 50%;
  background-color: var(--color-accent);
  overflow: hidden;
}

.map-case-study-card--small > * {
  display: none;
}

.map-case-study-card--small.map-case-study-card--in-progress {
  background-color: var(--color-text-muted);
}

.map-case-study-card--in-progress .case-study-card__title,
.case-study-list__item--in-progress .case-study-card__title {
  color: var(--color-text-muted);
}

.case-study-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
  padding: var(--space-lg);
  pointer-events: auto;
}

.case-study-list__item {
  display: block;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-secondary);
  text-decoration: none;
}

.case-study-list__item--in-progress {
  cursor: default;
}

footer {
  position: relative;
  z-index: 5;
  background-color: var(--color-bg-secondary);
}

.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.site-header__title {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-text);
  text-decoration: none;
}

.site-header__nav-list {
  display: flex;
  gap: var(--space-md);
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-header__nav-link {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text);
  text-decoration: none;
}

.site-header__nav-link[aria-current="page"] {
  color: var(--color-text-muted);
}

.map-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: var(--minimap-width);
  z-index: 0;
}

#map {
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--color-bg-secondary);
}