/* ===========================================================================
   References map (reference.php)
   ---------------------------------------------------------------------------
   New visual language based on the design prototype provided by the client:
     - sector filter chips with horizontal scroll
     - D3 map with mask-faded edges
     - pins rendered as "halo + core + number" and size-scaled by count
     - side panel with per-country list and per-project photo thumbnails
     - photo thumbs open through the existing Fancybox v3 instance

   Uses the project's existing CSS custom properties (--color-*, --size-*).
   New map-only tokens are declared below so the shades live inside the design
   system without touching the generated main.css.
   =========================================================================== */

:root {
  /* Soft tint of the brand green, used for row hover / tab highlight bg */
  --color-primaryGreen-light: #e6f3e7;

  /* Country shape colours - cool neutral grey for inactive, pale brand green
     for countries with references, brand green for the selected country. */
  --color-land:         #eceeec;
  --color-landOn:       #cfe8d2;
}

/* ---------- Section ---------- */

.refmap {
  position: relative;
  z-index: 4;
  padding: var(--size-30) 0 var(--size-50);
  background: var(--color-white);
  color: var(--color-font);
  font-family: var(--font-stack);
}

.refmap :focus,
.refmap :focus-visible {
  outline: none;
}

.refmap h2,
.refmap h3,
.refmap p {
  width: auto;
  margin: 0;
  padding: 0;
}

/* ---------- Sector filter chips ---------- */

.refmap__tabs {
  position: relative;
  border-bottom: 1px solid var(--color-gray);
}

.refmap__filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 0 var(--size-30);
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.refmap__filters::-webkit-scrollbar {
  display: none;
}

.refmap__chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--size-15) 0;
  margin: 0;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--color-gray-6);
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transTime-fast), border-color var(--transTime-fast);
}

/* Count badge - circular pill, brand green bg, white font.
   NB: we use <span class="refmap__chip-count"> (not <i>) because the
   project-wide SCSS rule `i { font-family: 'rIcon' !important }` would
   force the icon font and fallback digits to a serif typeface. */
.refmap__chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  background: var(--color-green-3);
  border-radius: 999px;
  color: var(--color-white);
  font-family: var(--font-stack);
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  transition: background-color var(--transTime-fast);
}

.refmap__chip:hover {
  color: var(--color-primaryDark);
}

.refmap__chip.is-on {
  color: var(--color-primaryDark);
  border-bottom-color: var(--color-green-3);
}

.refmap__chip.is-on .refmap__chip-count {
  background: var(--color-green-6);
}

.refmap__arr {
  position: absolute;
  top: 0;
  bottom: 3px;
  width: 72px;
  padding: 0;
  background: linear-gradient(90deg, var(--color-white) 45%, rgba(255, 255, 255, 0));
  border: 0;
  color: var(--color-primaryDark);
  cursor: pointer;
  display: flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.refmap__arr.is-on {
  opacity: 1;
  pointer-events: auto;
}

.refmap__arr--l {
  left: 0;
  justify-content: flex-start;
}

.refmap__arr--r {
  right: 0;
  justify-content: flex-end;
  background: linear-gradient(270deg, var(--color-white) 45%, rgba(255, 255, 255, 0));
}

.refmap__arr svg {
  width: 34px;
  height: 34px;
  padding: 8px;
  background: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: 50%;
  transition: border-color var(--transTime-fast), color var(--transTime-fast);
}

.refmap__arr:hover svg {
  border-color: var(--color-green-3);
  color: var(--color-green-6);
}

/* ---------- Stage: map + side panel ----------
   1:1 columns so neither side visually dominates on wide screens.
   BOTH columns share the exact same aspect-ratio (1000:780, matching the map
   SVG viewBox) so they are always the same height regardless of viewport.
   align-items: start to keep columns at their intrinsic aspect-ratio size
   rather than being stretched by content. */

.refmap__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--size-50);
  align-items: start;
  margin-top: var(--size-40);
}

/* ---------- Map ---------- */

.refmap__map {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 780;
}

.refmap__map svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 60%, transparent 98%);
          mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 60%, transparent 98%);
}

.refmap__pins {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Pins layer must NOT be masked, otherwise edge pins fade too */
.refmap__pins svg {
  -webkit-mask-image: none;
          mask-image: none;
}

.refmap__land {
  fill: var(--color-land);
  stroke: var(--color-white);
  stroke-width: 1.1;
  transition: fill var(--transTime);
}

.refmap__land.is-on {
  fill: var(--color-landOn);
  cursor: pointer;
}

/* No hover recoloring - selection is driven purely by click. */

.refmap__land.is-sel {
  fill: var(--color-green-3);
}

.refmap__pin {
  cursor: pointer;
  pointer-events: all;
}

.refmap__pin-halo {
  fill: var(--color-green-3);
  opacity: 0.28;
  transition: opacity var(--transTime-fast), r var(--transTime);
}

.refmap__pin-core {
  fill: var(--color-primaryDark);
  transition: fill var(--transTime-fast), r var(--transTime);
}

/* SVG text font-size is interpreted in viewBox units, so bumping to 22
   keeps the number legible even when the map renders at a smaller width */
.refmap__pin-num {
  fill: var(--color-white);
  font-family: var(--font-stack);
  font-size: 22px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

.refmap__pin:hover .refmap__pin-core,
.refmap__pin.is-sel .refmap__pin-core {
  fill: var(--color-green-6);
}

.refmap__pin.is-sel .refmap__pin-halo {
  opacity: 0.35;
}

.refmap__pin.is-dim {
  opacity: 0.35;
}

.refmap__pin.is-zero {
  display: none;
}

/* ---------- Loading ---------- */

.refmap__loading {
  position: absolute;
  top: 50%;
  left: 50%;
  color: var(--color-gray-6);
  font-size: 1.5rem;
  transform: translate(-50%, -50%);
}

/* ---------- Side panel ---------- */

.refmap__side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  aspect-ratio: 1000 / 780; /* same shape as the map column */
}

.refmap__side-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--size-15);
  padding-bottom: var(--size-15);
  border-bottom: 2px solid var(--color-primaryDark);
}

.refmap__side-h h3 {
  color: var(--color-primaryDark);
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  overflow-wrap: break-word;
}

.refmap .refmap__side-sub {
  color: var(--color-gray-6);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}

.refmap__back {
  align-self: flex-start;
  padding: 0 0 var(--size-15);
  background: none;
  border: 0;
  color: var(--color-green-6);
  font-family: inherit;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.refmap__back:hover {
  color: var(--color-primaryDark);
}

.refmap__back[hidden] {
  display: none;
}

.refmap__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Rows flow edge-to-edge so the zebra background fills the full panel
     width. The scrollbar sits in its own reserved gutter (scrollbar-gutter:
     stable) and never collides with content. */
  padding: 0;
  scrollbar-gutter: stable;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--color-green-3) transparent;
}

.refmap__list::-webkit-scrollbar {
  width: 6px;
}

.refmap__list::-webkit-scrollbar-track {
  background: transparent;
  margin: 2px 0;
}

.refmap__list::-webkit-scrollbar-thumb {
  background: var(--color-green-3);
  border-radius: 999px;
}

/* ---------- Row (country overview) ---------- */

/* Row = single horizontal line:
     [ name (auto) ][ gap ][ progress track (1fr, shrinks) ][ gap ][ count (auto) ]
   The track flexes with the available width - on wide panels it visually
   connects the name to the count; on narrow viewports it compresses but
   never below its 40px floor.

   Visual separation uses zebra striping (.is-striped on every other row)
   instead of a border-bottom - this gives the list a lighter, more scannable
   rhythm. Hover/active state replaces the stripe with a subtle green tint. */
.refmap__row {
  display: grid;
  grid-template-columns: auto minmax(40px, 1fr) auto;
  gap: var(--size-20);
  align-items: center;
  width: 100%;
  padding: var(--size-15);
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transTime-fast);
}

/* Zebra band - every 2nd row visually (idx%2===1 from JS). */
.refmap__row.is-striped {
  background: var(--color-gray-5);
}

/* Hover/active - overrides zebra, source order ensures this wins. */
.refmap__row:hover,
.refmap__row.is-active {
  background: var(--color-primaryGreen-light);
}

.refmap__row:hover .refmap__row-name,
.refmap__row.is-active .refmap__row-name {
  color: var(--color-green-6);
}

.refmap__row-name {
  color: var(--color-primaryDark);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  transition: color var(--transTime-fast);
}

.refmap__track {
  display: block;
  height: 4px;
  min-width: 0;
  overflow: hidden;
  background: var(--color-gray);
  border-radius: 3px;
}

.refmap__bar {
  display: block;
  height: 100%;
  background: var(--color-green-3);
  transition: width 0.4s;
}

.refmap__count {
  min-width: 24px;
  color: var(--color-primaryDark);
  font-size: 1.6rem;
  font-weight: 500;
  text-align: right;
}

/* ---------- Group label (e.g. "Mimo Evropu") ---------- */

/* Section break between the European and non-European lists. Uses a strong
   full-width top border + dark uppercase title so it reads as a proper new
   section header, not a drop-shadow afterthought. Padding matches .refmap__row
   so the label aligns with the row content below it. */
.refmap .refmap__group {
  margin: var(--size-30) 0 0;
  padding: var(--size-20) var(--size-15) var(--size-10);
  background: transparent;
  border: 0;
  border-top: 2px solid var(--color-primaryDark);
  color: var(--color-primaryDark);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.refmap .refmap__group:first-child {
  margin-top: 0;
  padding-top: var(--size-5);
  border-top: 0;
}

/* ---------- Project card ---------- */

.refmap__proj {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 4px var(--size-15);
  padding: var(--size-20) 0;
  border-bottom: 1px solid var(--color-gray);
}

.refmap__year {
  padding-top: 3px;
  color: var(--color-green-6);
  font-size: 1.3rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

.refmap__sector {
  display: block;
  margin-bottom: 5px;
  color: var(--color-gray-6);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.refmap__proj-title {
  color: var(--color-primaryDark);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.35;
  text-wrap: pretty;
}

/* ---------- Photo thumbs grid ---------- */

.refmap__ph {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: var(--size-15);
}

.refmap__thumb {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--color-gray-5) center/cover no-repeat;
  cursor: zoom-in;
  outline: 0;
  overflow: hidden;
}

.refmap__thumb:hover {
  outline: 2px solid var(--color-green-3);
  outline-offset: -2px;
}

.refmap__thumb--more::after {
  content: attr(data-more);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(23, 127, 120, 0.9); /* color-green-6 at ~90% */
  color: var(--color-white);
  font-size: 1.8rem;
  font-weight: 600;
}

.refmap__thumb[hidden] {
  display: none;
}

/* "No projects in this sector" fallback */
.refmap__empty {
  padding: var(--size-20) 0;
  color: var(--color-gray-6);
  font-size: 1.5rem;
}

/* ---------- Responsive ----------
   Breakpoints:
     > 1123   : map + side side-by-side, same height
     768-1123 : stacked (tablet) with capped list
     < 768    : stacked (mobile) with tighter spacing & capped list */

@media (max-width: 1123px) {
  .refmap__stage {
    grid-template-columns: 1fr;
    gap: var(--size-30);
    align-items: start;
  }

  .refmap__map {
    max-width: 760px;
    margin: 0 auto;
  }

  .refmap__side {
    display: block;
    aspect-ratio: auto; /* drop forced ratio when stacked below map */
  }

  .refmap__list {
    max-height: 520px;
  }
}

@media (max-width: 767px) {
  .refmap {
    padding: var(--size-20) 0 var(--size-40);
  }

  .refmap__filters {
    gap: 0 var(--size-25);
  }

  .refmap__chip {
    padding-top: var(--size-15);
    padding-bottom: var(--size-10);
    font-size: 1.5rem;
  }

  .refmap__chip-count {
    min-width: 22px;
    height: 22px;
    font-size: 1.1rem;
  }

  .refmap__arr {
    width: 56px;
  }

  .refmap__list {
    max-height: 460px;
  }
}

@media (max-width: 575px) {
  .refmap__ph {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- Bottom gallery (unchanged section) ---------- */

.references.hp {
  padding: 0;
  background: var(--color-white);
}

.references.hp .references--gallery {
  position: relative;
  top: auto;
  right: auto;
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  overflow: hidden;
}

.references.hp .references--foto {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  outline: none;
}

@media (max-width: 1123px) {
  .references.hp .references--gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-top: 0;
  }

  .references.hp .references--foto {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 575px) {
  .references.hp .references--gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
  }
}

@media (max-width: 419px) {
  .references.hp .references--foto {
    width: 100%;
    height: auto;
  }
}