/* =====================================================================
   exp-photo.css — HOME · "International experience" (02-09-2026).
   Carregado DEPOIS de v3-patch.css.
   Painel claro (mesmo estilo do painel "More than cameras"): TEXTO + FOTO da
   sala de controlo à ESQUERDA, VÍDEO grande à DIREITA (espelhado a 10-09-2026;
   até aí o vídeo estava à esquerda). O HTML mantém o vídeo primeiro — em
   ecrãs estreitos (empilhado) continua vídeo → texto; em ≥900px a ordem das
   colunas é trocada com `order`. Margens laterais do painel reduzidas ao
   mínimo (--pad-l / --pad-r) para as duas colunas ocuparem a largura toda;
   --gap = espaço entre as duas colunas.
   ===================================================================== */

.exp-box {
  --pad-l: 0.7rem;
  --pad-r: 0.7rem;
  --gap: 1.6rem;
  display: grid;
  gap: 1.6rem;
  margin-top: clamp(2.8rem, 6vw, 3.8rem);
  padding: clamp(1.4rem, 3.2vw, 2.4rem);
  background:
    radial-gradient(120% 160% at 90% -10%, rgba(var(--brand-rgb), 0.16), transparent 55%),
    linear-gradient(rgba(var(--brand-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--brand-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(180deg, #ffffff, var(--bg-0));
  background-size: auto, 42px 42px, 42px 42px, auto;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-card);
}
@media (min-width: 900px) {
  .exp-box {
    /* texto+foto à esquerda (1fr) | vídeo à direita: largura base + o que se
       ganhou ao reduzir a margem direita */
    grid-template-columns: 1fr calc(min(575px, 56%) + (2.4rem - var(--pad-r)));
    gap: var(--gap);
    padding-left: var(--pad-l);
    padding-right: var(--pad-r);
    align-items: center;
  }
  .exp-box .exp-side { order: 1; justify-content: space-between; align-self: stretch; }
  .exp-box .exp-main { order: 2; }
}

/* coluna do vídeo */
.exp-main .video-frame { margin-top: 0; }

/* coluna do texto + foto */
.exp-side {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.exp-side .exp-cols__title { margin: 0 0 0.6rem; color: var(--ink); }
.exp-side .exp-cols__lead  { max-width: none; color: var(--ink-2); }  /* texto a toda a largura */

.exp-photo {
  margin: 0;
  max-width: 100%;                            /* foto segue a largura da coluna */
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #101208;
  box-shadow: 0 26px 60px rgba(24, 26, 16, 0.26);
}
.exp-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 30% 40%;
}
.exp-box .video-frame { border-color: var(--line); box-shadow: 0 26px 60px rgba(24, 26, 16, 0.26); }