/*
  experience-gallery — Reconecta
  -------------------------------------------------
  Fidelidade 100% à referência (FIRST CLASS EXPERIENCE):
    - Desktop: strip horizontal de 5 imagens iguais (grid 1fr x5)
      max-width 1366px, altura fixa 220px
    - Mobile (≤479px): grid 2x2 (2 colunas), 4 imagens visíveis
      (2 imagens com modifier --desktop-* ficam display:none)
    - object-fit cover + object-position 50% 50% (centered crop)

  Adaptação Reconecta:
    - Tokens de altura/breakpoints expostos via CSS vars (sobrescrevíveis)
    - Sem cor de fundo padrão (componente é estritamente visual)
    - Box-sizing border-box em tudo (anti-overflow mobile)
*/

.experience-gallery,
.experience-gallery *,
.experience-gallery *::before,
.experience-gallery *::after {
  box-sizing: border-box;
}

.experience-gallery {
  /* Tokens (overridable pelo container pai) */
  --eg-max-width: 1366px;
  --eg-height-desktop: 220px;
  --eg-mobile-breakpoint: 479px;
  --eg-tablet-breakpoint: 991px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.experience-gallery__grid {
  display: flex;
  grid-column-gap: 0;
  grid-row-gap: 0;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  justify-content: center;
  width: 100%;
  max-width: var(--eg-max-width);
  height: var(--eg-height-desktop);
}

.experience-gallery__item {
  flex: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  overflow: hidden;
  display: block;
}

/* Modifier: 4ª imagem (palco principal) ancorada à esquerda */
.experience-gallery__item--left {
  object-position: 0% 50%;
  margin-left: -4px;
}

/* Modifier: imagem visível só no desktop (oculta em mobile via media query) */
.experience-gallery__item--desktop {
  display: block;
}

/* Modifier: imagem SEMPRE oculta (sobra do HTML original — mantida pra fidelidade
   estrutural mas display:none global). Pode ser removida do markup se preferir. */
.experience-gallery__item--desktop-extra {
  display: none;
}

/* =========================================
   Desktop largo (≥1920px) — ref tinha shift de object-position
   ========================================= */
@media screen and (min-width: 1920px) {
  .experience-gallery__item {
    object-position: 100% 17%;
  }
}

/* =========================================
   Mobile (≤479px) — grid 2x2, esconde imagens --desktop-*
   ========================================= */
@media screen and (max-width: 479px) {
  .experience-gallery__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    width: 100%;
    height: auto;
    overflow: hidden;
  }

  .experience-gallery__item {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .experience-gallery__item--left {
    max-width: 103%;
    margin-left: -4px;
  }

  .experience-gallery__item--desktop,
  .experience-gallery__item--desktop-extra {
    display: none;
  }
}

/* =========================================
   Tablet (480-991px) — strip horizontal mas com altura reduzida
   ========================================= */
@media screen and (min-width: 480px) and (max-width: 991px) {
  .experience-gallery__grid {
    height: calc(var(--eg-height-desktop) * 0.7);
  }
}