/* ==========================================================================
   gallery — mosaic: 4 columns, every group of 5 = one 2×2 tile + four small
   (EXALCO-Istoria / -Egkatastaseis / -ESG). Captions are the ESG tile labels.
   ========================================================================== */
/* Head → mosaic: 26px in the three mockups (the base gap is 30px). */
.ex-gallery { --ex-head-gap: 26px; }
/* Directly under the intro the gallery is tinted, so two white blocks do not run together (EXALCO-ESG). The layout has no
   background field: the rule follows the section order. */
.ex-intro + .ex-gallery { background: var(--ex-tint); border-top: .5px solid var(--ex-hairline); border-bottom: .5px solid var(--ex-hairline); }

.ex-gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(140px, 15vw, 210px);
  grid-auto-flow: dense;
  gap: var(--ex-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ex-gallery__item { position: relative; min-width: 0; overflow: hidden; background: var(--ex-grey-img); }
.ex-gallery__item:nth-child(5n + 1) { grid-column: span 2; grid-row: span 2; }
/* Second, fourth … group: the large tile moves to the right half */
.ex-gallery__item:nth-child(10n + 6) { grid-column: 3 / span 2; }

/* Fewer than five photos: fill the row instead of leaving holes */
.ex-gallery__grid--count-1 { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
.ex-gallery__grid--count-1 .ex-gallery__item { grid-column: auto; grid-row: auto; aspect-ratio: 16 / 9; }
.ex-gallery__grid--count-2 .ex-gallery__item { grid-column: span 2; grid-row: span 2; }
.ex-gallery__grid--count-3 .ex-gallery__item:not(:first-child),
.ex-gallery__grid--count-4 .ex-gallery__item:nth-child(2) { grid-column: span 2; }

.ex-gallery__link { position: absolute; inset: 0; display: block; color: var(--ex-white); cursor: zoom-in; }
.ex-gallery__link:hover { color: var(--ex-white); }
.ex-gallery__link:focus-visible { outline-offset: -4px; }
.ex-gallery__link > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .6s var(--ex-ease-out); }
.ex-gallery__link:hover > img,
.ex-gallery__link:focus-visible > img { transform: scale(1.04); }

.ex-gallery__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: var(--ex-z-raised);
  max-width: 100%;
  padding: 7px 12px;
  background: rgba(32, 35, 43, .85);
  font-size: 10px;
  font-weight: 700;
  line-height: normal; /* rendered: 11px line (25px label), 12px on the large tile (28px) */
  letter-spacing: .08em;
  color: var(--ex-white);
}
.ex-gallery__item:nth-child(5n + 1) .ex-gallery__caption { padding: 8px 14px; font-size: 11px; letter-spacing: .1em; }

@media (max-width: 899px) {
  .ex-gallery__grid,
  .ex-gallery__grid--count-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(130px, 30vw, 240px); }
  .ex-gallery__grid .ex-gallery__item { grid-column: auto; grid-row: auto; aspect-ratio: auto; }
  .ex-gallery__grid .ex-gallery__item:nth-child(5n + 1) { grid-column: 1 / -1; grid-row: span 2; }
  .ex-gallery__grid--count-2 .ex-gallery__item:last-child,
  .ex-gallery__grid--count-4 .ex-gallery__item:last-child { grid-column: 1 / -1; }
  .ex-gallery__caption,
  .ex-gallery__item:nth-child(5n + 1) .ex-gallery__caption { padding: 8px 12px; font-size: 11px; }
}

@media (max-width: 599px) {
  .ex-gallery__grid { gap: var(--ex-space-2); }
}

@media (prefers-reduced-motion: reduce) {
  .ex-gallery__link > img { transition: none; }
  .ex-gallery__link:hover > img,
  .ex-gallery__link:focus-visible > img { transform: none; }
}