/*
  Partner map section.
  Countries with a partner get their own color (see the list below). Override per
  site with custom CSS, e.g.:
    --partner-map-base: #e3e2df;      land without a partner
    --partner-map-fill: #246379;      fallback for a partner country without its own color
    --partner-map-active: #e47301;    border of the highlighted partner card
    --partner-map-nl: #0b6831;        one color per country (nl, fr, de, pl, dk, it, ...)
*/
.partner-map {
  --_base: var(--partner-map-base, #e3e2df);
  --_fill: var(--partner-map-fill, var(--heading-color, #246379));
  --_active: var(--partner-map-active, var(--color-1, #e47301));
  --_stroke: var(--partner-map-stroke, #f0efea);
  position: relative;
  margin-block-start: 3.2rem;
  display: grid;
  gap: 3.2rem;
}

.partner-map-stage {
  position: relative;
}

.partner-map-svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  /* Soften the edges where the map is cut off. */
  -webkit-mask-image: linear-gradient(to right, #000 82%, transparent), linear-gradient(to bottom, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, #000 82%, transparent), linear-gradient(to bottom, #000 86%, transparent);
  mask-composite: intersect;
}

.partner-map-svg path {
  fill: var(--_base);
  stroke: var(--_stroke);
  stroke-width: 1;
  stroke-linejoin: round;
}

.partner-map-svg path.has-partner {
  fill: var(--country-fill, var(--_fill));
  cursor: pointer;
}

/* One color per country, taken from the design. */
.partner-map-svg path[data-code="GB"] { --country-fill: var(--partner-map-gb, #0a2b0a); }
.partner-map-svg path[data-code="NL"] { --country-fill: var(--partner-map-nl, #0b6831); }
.partner-map-svg path[data-code="FR"] { --country-fill: var(--partner-map-fr, #214d33); }
.partner-map-svg path[data-code="DE"] { --country-fill: var(--partner-map-de, #80a391); }
.partner-map-svg path[data-code="AT"] { --country-fill: var(--partner-map-at, #80a391); }
.partner-map-svg path[data-code="PL"] { --country-fill: var(--partner-map-pl, #578375); }
.partner-map-svg path[data-code="DK"] { --country-fill: var(--partner-map-dk, #62845f); }
.partner-map-svg path[data-code="NO"] { --country-fill: var(--partner-map-no, #62845f); }
.partner-map-svg path[data-code="SE"] { --country-fill: var(--partner-map-se, #62845f); }
.partner-map-svg path[data-code="IT"] { --country-fill: var(--partner-map-it, #c47635); }

/* Highlighted country: darker, with a white outline. Works on every color. */
.partner-map-svg path.has-partner.is-active {
  filter: brightness(0.8);
  stroke: #fff;
  stroke-width: 2.5;
}

/* Tooltip (pointer devices) */
.partner-map-tooltip {
  position: absolute;
  z-index: 2;
  inline-size: min(28rem, 80%);
  padding: 1.6rem 1.8rem;
  background: #fff;
  color: var(--copy-color, #474747);
  border-radius: 0.8rem;
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.18);
}

.partner-map-tooltip[hidden] {
  display: none;
}

.partner-map-tooltip .partner-card + .partner-card {
  margin-block-start: 1.6rem;
  padding-block-start: 1.6rem;
  border-block-start: 1px solid rgba(0, 0, 0, 0.1);
}

/* Panel under the map (touch devices and small screens) */
.partner-map-panel {
  padding: 1.6rem 1.8rem;
  background: #fff;
  border-radius: 0.8rem;
  box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.12);
}

.partner-map-panel[hidden] {
  display: none;
}

/* Partner cards (list, tooltip and panel) */
.partner-card {
  display: block;
  list-style: none;
}

.partner-map-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
}

.partner-map-list .partner-card {
  padding: 1.8rem;
  background: #fff;
  border-radius: 0.8rem;
  border: 2px solid transparent;
  transition: border-color 200ms ease;
}

.partner-map-list .partner-card.is-active,
.partner-map-list .partner-card:focus-within {
  border-color: var(--_active);
}

.partner-card-logo {
  max-inline-size: 14rem;
  margin-block-end: 1.2rem;
}

.partner-card-logo img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.partner-card-title {
  margin: 0;
}

.partner-card-address {
  margin: 0.4rem 0 0;
  font-size: 1.4rem;
  opacity: 0.8;
}

.partner-card-text {
  margin-block-start: 0.8rem;
}

.partner-card-link {
  display: inline-flex;
  margin-block-start: 1rem;
}

/* Pointer devices from 992px: tooltip on hover, so the panel is not needed. */
@media (min-width: 992px) and (hover: hover) {
  .partner-map-panel {
    display: none;
  }
}

/* From 1200px with a pointer: map next to a compact list that is exactly as
   tall as the map. Text and link are shown in the tooltip instead. */
@media (min-width: 1200px) and (hover: hover) {
  .partner-map {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .partner-map-list {
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    gap: 0.8rem;
  }

  .partner-map-list .partner-card {
    display: grid;
    grid-template-columns: 9rem 1fr;
    column-gap: 1.6rem;
    align-items: center;
    padding: 1rem 1.6rem;
  }

  .partner-map-list .partner-card-logo {
    grid-column: 1;
    grid-row: 1 / span 3;
    margin: 0;
  }

  .partner-map-list .partner-card-title,
  .partner-map-list .partner-card-address,
  .partner-map-list .partner-card-link {
    grid-column: 2;
  }

  .partner-map-list .partner-card:not(:has(.partner-card-logo)) {
    grid-template-columns: 1fr;
  }

  .partner-map-list .partner-card:not(:has(.partner-card-logo)) > * {
    grid-column: 1;
  }

  .partner-map-list .partner-card-title {
    font-size: 1.7rem;
  }

  .partner-map-list .partner-card-address {
    margin-block-start: 0.2rem;
    font-size: 1.3rem;
  }

  .partner-map-list .partner-card-text {
    display: none;
  }

  .partner-map-list .partner-card-link {
    margin-block-start: 0.4rem;
    font-size: 1.3rem;
  }
}

@media (hover: none), (max-width: 991.98px) {
  .partner-map-tooltip {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .partner-map-list .partner-card {
    transition: none;
  }
}