/*
  Images ("behind the scenes") gallery section — matches
  references/home/5, images/Képernyőfotó 2026-09-01 - 22.57.32.jpg, a
  screenshot of jglobe.hu's own "Betekintés a kulisszák mögé" section.
  Like the hero/header reference, this is a sibling NAVIGATOR Group site
  screenshot, not a bespoke Brunnbauer mockup — the shared template
  (full-bleed 4x2 photo grid with one dark text cell) is reskinned with
  Brunnbauer content: eyebrow location swapped Győrújbarát -> Budapest,
  title kept verbatim (generic template phrase, not a sibling-specific
  fact), lead paragraph keeps its generic "what these photos show"
  phrasing with only the location word changed.

  Photos are shown flat, no gradient/color-treatment overlay — a
  deliberate deviation from the Anti-Generic Guardrails' usual image
  treatment, since the Reference Images hard rule (match, don't improve)
  takes precedence when a reference is provided.
*/

.images {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.images__text,
.images__photo {
  aspect-ratio: 1 / 1;
}

.images__text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: var(--space-7) var(--space-6);
  background: var(--color-navy-900);
  text-align: right;
}

.images__eyebrow {
  color: var(--color-slate-400);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.images__title {
  margin-top: var(--space-3);
  color: var(--color-white);
  font-size: var(--fs-h3);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-heading);
}

/* Neutral slate-blue, not brand red — the reference's own divider here
   reads as plain template chrome (like about-us's neutral eyebrow color),
   not one of the sibling's own brand colors, so it's matched literally
   rather than reskinned to the brand red used by every other divider on
   this page (about/mindset). */
.images__divider {
  width: 56px;
  height: 2px;
  margin-top: var(--space-4);
  background: var(--color-slate-400);
}

.images__lead {
  margin-top: var(--space-4);
  max-width: 32ch;
  color: var(--color-slate-200);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.images__photo {
  overflow: hidden;
}

.images__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Tablet / mobile (<= 768px) ---- */
@media (max-width: 768px) {
  .images {
    grid-template-columns: repeat(2, 1fr);
  }

  .images__text {
    grid-column: 1 / -1;
    aspect-ratio: auto;
    padding: var(--space-6) var(--content-padding);
  }

  .images__lead {
    max-width: none;
  }
}

/* ---- Mobile (<= 480px) ---- */
@media (max-width: 480px) {
  .images {
    grid-template-columns: 1fr;
  }
}