/* === Section + grid === */
/* Section background comes from the `theme` field (data-theme, see
   framework/colors.css). Don't hardcode it here: a plain `.projects-map`
   rule is unlayered and would override the layered data-theme background. */
.projects-map-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--grid-gap);
  align-items: flex-start;
  width: 1600px;
  max-width: 100%;
  border-radius: var(--radius);
}

/* Filter wrapper: top-left cell */
.projcects-map__filter-wrapper {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: var(--space-xs);
  padding: var(--space-s);
  background-color: var(--primary);
  border-radius: var(--radius);
}

.projects-map__filter-reset {
  width: 100%;
}

.projects-map__heading {
  font-size: var(--h4);
  color: var(--white);
}

/* Map wrapper: spans the right columns */
.map-wrapper {
  grid-column: 2 / 4;
  grid-row: 1 / 5;
  position: relative;
  display: flex;
  flex-direction: column;
  row-gap: var(--space-xs);
  width: 100%;
  height: 100%;
  margin-block: 0;
}

/* Slider wrapper: left column, lower rows */
.projects-map__slider-wrapper {
  grid-column: 1 / 2;
  grid-row: 2 / 5;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  row-gap: var(--grid-gap);
}

/* === Filter form === */
.projects-map__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
}

.projects-map__form > :nth-child(1) {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

.projects-map__form > :nth-child(2) {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}

.projects-map__form > :nth-child(3) {
  grid-column: 1 / 4;
  grid-row: 2 / 3;
}

.projects-map__form.form--light select option {
  color: initial;
}

/* === Map ===
   The grid uses align-items:flex-start (so the filter/slider stay top-aligned),
   but the map should fill its whole right-column span — i.e. match the height of
   the left column (filter + slider). align-self:stretch makes this cell take the
   full grid-row span (1/5); the min-height is only a floor for short layouts. */
.map-wrapper {
  align-self: stretch;
  min-height: var(--projects-map-height, 28rem);
}

.projects-map__consent {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  flex: 1 1 auto;
}

.projects-map__map {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: var(--projects-map-height, 28rem);
  margin: 0;
  border: 1px solid var(--primary-dark-trans-10);
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--primary);
}

/* Project-card styling. The Fancyapps Carousel overrides live further down. */
.project-card {
  display: grid;
  grid-template-columns: var(--grid-2-1);
  grid-template-rows: var(--grid-1);
  align-items: center;
  overflow: hidden;
  margin-bottom: 0;
  background-color: var(--primary);
  border-radius: var(--radius);
}

.project-card:hover,
.project-card.highlighted {
  background-color: color-mix(in oklch, var(--primary) 80%, transparent);
}

.project-card__body {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  row-gap: 0.45em;
  padding: var(--space-s);
}

.project-card__heading {
  font-size: var(--h4);
  color: var(--white);
}

.project-card__address {
  font-size: var(--text-s);
  font-style: normal;
  color: var(--white);
}

.project-card__link-wrapper {
  display: flex;
  flex-direction: row;
}

.project-card__map-link {
  font-size: var(--text-m);
  color: var(--secondary);
  background-color: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.project-card__map-link:hover {
  color: var(--secondary);
  text-decoration: underline;
}

.project-card__media-wrapper {
  height: 100%;
}

.project-card__media,
.project-card__media-img {
  object-fit: cover;
  flex-grow: 1;
  width: 100%;
  height: 100%;
  margin: 0;
}

.project-card__media img {
  object-fit: cover;
  border-radius: 0;
}

/* === Responsive === */
@media (max-width: 991px) {
  .projects-map-grid {
    grid-template-columns: var(--grid-1);
    grid-template-rows: var(--grid-3);
  }

  .projcects-map__filter-wrapper {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }

  .map-wrapper {
    order: -1;
    grid-column: 1 / 3;
    grid-row: 2 / 4;
  }

  .projects-map__slider-wrapper {
    grid-column: 1 / 3;
    grid-row: 4 / 5;
  }

  .project-card {
    grid-template-columns: var(--grid-1);
    grid-template-rows: auto;
  }

  .project-card__media-wrapper {
    order: -1;
  }
}

/* ==========================================================================
   Fancyapps Carousel overrides — UNLAYERED on purpose.
   carousel.css ships unlayered, so these must be unlayered too (a named layer
   can never override an unlayered rule, regardless of specificity).

   The grid uses align-items:flex-start, so the slider column is NOT stretched to
   a definite height; a height:100% / %-based slide height would collapse to zero
   and Fancyapps would measure a 0-height vertical viewport. So the layout is
   driven by a fixed per-card height, with the carousel height derived from it
   (3 cards + 2 gaps).
   ========================================================================== */
.projects-map__slider.f-carousel {
  --card-height: clamp(8rem, 14vw, 11rem);
  --f-carousel-spacing: var(--space-xs);
  --f-carousel-dot-color: var(--primary);
  --f-carousel-dots-width: 24px;
  --f-carousel-dots-height: 24px;
  /* --visible-cards (1–3) is set by script.view.js to match the filtered count,
     so the viewport (which is height:100%) never spreads 1–2 cards over 3 slots. */
  --visible-cards: 3;
  position: relative;
  width: 100%;
  height: calc(var(--visible-cards) * var(--card-height) + (var(--visible-cards) - 1) * var(--f-carousel-spacing));
  /* No padding: cards fill the full column width; the dots sit OUTSIDE the
     carousel, in the gutter to the left (negative offset on .f-carousel__dots). */
}

/* Default adds bottom margin for horizontal dots; we place dots on the right. */
.projects-map__slider.f-carousel.has-dots {
  margin-bottom: 0;
}

/* Fixed slide height → exactly 3 cards visible per page. */
.projects-map__slider .f-carousel__slide {
  --f-carousel-slide-height: var(--card-height);
  height: var(--card-height);
}

/* Pagination dots: vertical, centered, sitting OUTSIDE the cards in the left gutter. */
.projects-map__slider .f-carousel__dots {
  top: 0;
  bottom: 0;
  right: auto;
  left: calc(-1 * (var(--f-carousel-dots-width) + var(--space-xs)));
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  width: var(--f-carousel-dots-width);
}

@media (max-width: 991px) {
  .projects-map__slider.f-carousel {
    /* Stacked cards (image on top) need more height than the desktop column. */
    --card-height: 16rem;
    /* The mobile gutter is too narrow for outside dots; keep them inside-left
       so they never push past the viewport edge. */
    padding-left: calc(var(--f-carousel-dots-width) + var(--space-xs));
  }

  .projects-map__slider .f-carousel__dots {
    left: 0;
  }
}

/* Tablet: horizontal carousel (axis set to "x" in script.view.js), dots below the
   cards. Cards already stack (image on top) from the <=991 rules. */
@media (max-width: 768px) {
  .projects-map__slider.f-carousel {
    height: auto; /* horizontal → height comes from the (stacked) card */
    padding-left: 0; /* dots move below, not into the left gutter */
    --f-carousel-slide-width: min(20rem, 85%);
  }

  .projects-map__slider .f-carousel__slide {
    height: auto;
    --f-carousel-slide-height: auto;
  }

  /* A content-height card needs a defined image height. */
  .projects-map__slider .project-card__media,
  .projects-map__slider .project-card__media-img {
    aspect-ratio: 4 / 3;
    height: auto;
  }

  /* Dots in a centered row below the cards. */
  .projects-map__slider .f-carousel__dots {
    position: static;
    inset: auto;
    width: 100%;
    margin-top: var(--space-s) !important;
    flex-direction: row;
  }
}

/* Mobile: one card at a time. */
@media (max-width: 425px) {
  .projects-map__slider.f-carousel {
    --f-carousel-slide-width: 100%;
  }
}

/* ==========================================================================
   Custom map overlays (OverlayView) — markers, clusters, and the infobox popup.
   These replace Google's classic Marker + InfoWindow, so there are no fragile
   gm-style-iw-* overrides. UNLAYERED to stay clear of @layer ordering.
   ========================================================================== */

/* Marker pin: anchored tip-at-the-coordinate (translate -50% / -100%). */
.map-marker {
  position: absolute;
  width: var(--map-marker-size, 64px);
  height: var(--map-marker-size, 64px);
  transform: translate(-50%, -100%);
  cursor: pointer;
}

.map-marker__img {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
}

.map-marker.is-active {
  z-index: 1000;
}

/* Google Maps tiles are bare <img> elements. A global `img { border-radius }`
   from another loaded stylesheet rounds them, and the map's backgroundColor
   (#001f3d) then shows through the corners as a grid of diamonds over water.
   Force tiles (and our marker images) square. */
.projects-map__map img {
  border-radius: 0;
}

/* Cluster bubble: concentric ripple — circles fill --accent, count fills --primary. */
.map-cluster {
  position: absolute;
  width: 3.75rem;
  height: 3.75rem;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.map-cluster__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: var(--accent);
}

.map-cluster__svg text {
  fill: var(--primary);
  font-family: var(--text-font-family, sans-serif);
}

/* Infobox popup: our own DOM, positioned above the marker (clears the pin). */
.map-popup {
  position: absolute;
  transform: translate(-50%, calc(-100% - var(--map-marker-size, 64px) - 0.5rem));
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
  z-index: 1100;
}

/* === Branded infobox content === */
.map-infobox {
  position: relative;
  width: 300px;
  max-width: 80vw;
  padding: var(--space-s);
  color: var(--primary);
}

.map-infobox__content-wrapper {
  display: flex;
  flex-direction: column;
  row-gap: 0.45em;
}

.map-infobox__taxonomie {
  font-size: var(--text-xs);
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background-color: var(--accent);
  padding: 0.25em 0.75em;
  width: fit-content;
  border-radius: var(--radius-xs);
}

.map-infobox__title {
  font-size: var(--h4);
  margin: 0;
}

.map-infobox__location {
  font-size: var(--text-s);
  font-weight: 500;
  line-height: 1.5;
}

.map-infobox__link {
  display: inline-flex;
  align-items: center;
  column-gap: 0.4em;
  width: 100%;
  margin-top: 0.4em;
}

/* Inline arrow SVG inherits the button text colour (fill: currentColor). */
.map-infobox__link-icon {
  display: inline-flex;
}

.map-infobox__link-icon svg {
  width: 1em;
  height: 1em;
}

.map-infobox__close-btn {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  font-size: var(--text-l);
  line-height: 1;
  color: var(--primary);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.map-infobox__close-btn:hover,
.map-infobox__close-btn:focus {
  color: var(--accent);
}