/* ═══════════════════════════════════════════
   RESPONSIVE — Galeria Fotográfica
   CSS Columns — mobile-first.
   ═══════════════════════════════════════════ */

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ══════════════════════════════════════════
   GRELHA — CSS Columns (contentor principal)
   Slots fractais usam CSS Grid internamente.
   ══════════════════════════════════════════ */

#gallery {
  columns: 1;
  column-gap: var(--gallery-gap, 1px);
  width: 100%;
  padding: 0;
  display: block;
}

.card {
  break-inside: avoid;
  display: block;
  width: 100%;
  margin-bottom: var(--gallery-gap, 1px);
  overflow: hidden;
  cursor: pointer;
  background: var(--color-surface);
}

.card__face--front img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.card:hover .card__face--front img {
  transform: scale(1.02);
}

/* ── Slot fractal — CSS Grid interno ─────── */

.slot-fractal {
  break-inside: avoid;
  display: grid;
  gap: var(--gallery-gap, 1px);
  width: 100%;
  margin-bottom: var(--gallery-gap, 1px);
  overflow: hidden;
}

/* landscape: 2 fotos lado a lado */
.slot-fractal--landscape {
  grid-template-columns: 1fr 1fr;
  aspect-ratio: 4 / 3;
}

/* portrait: 2 fotos empilhadas */
.slot-fractal--portrait {
  grid-template-columns: 1fr;
  aspect-ratio: 3 / 4;
}

/* square: 4 fotos 2x2 */
.slot-fractal--square {
  grid-template-columns: 1fr 1fr;
  aspect-ratio: 1 / 1;
}

/* Cartões dentro do slot fractal: altura controlada pelo Grid, sem margin */
.slot-fractal .card {
  margin-bottom: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.slot-fractal .card__face--front {
  width: 100%;
  height: 100%;
}

.slot-fractal .card__face--front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 480px) {
  #gallery { columns: 2; }
}

@media (min-width: 768px) {
  #gallery { columns: 3; }
}

@media (min-width: 1200px) {
  #gallery { columns: 3; }
}

@media (min-width: 1600px) {
  #gallery { columns: 4; }
}

/* ══════════════════════════════════════════
   MODAL — responsividade
   ══════════════════════════════════════════ */

/* Desktop: modo ◫ lado a lado */
@media (min-width: 768px) {
  .modal__corpo--com-foto { flex-direction: row; }

  .modal__foto-wrap--crop {
    width: 50%;
    height: 100%;
    flex-shrink: 0;
  }

  .modal__foto-wrap--full {
    width: 100%;
    height: 100%;
  }

  .modal__texto-wrap {
    width: 50%;
    height: 100%;
    overflow-y: auto;
  }

  .modal__texto-colunas {
    flex-direction: row;
    align-items: flex-start;
  }

  .modal__coluna--original   { flex: 1.4; }
  .modal__coluna--secundaria { flex: 1; }
}

/* Mobile */
@media (max-width: 767px) {
  .modal__corpo--com-foto { flex-direction: column; }

  .modal__foto-wrap--full {
    width: 100%;
    height: 100%;
  }

  .modal__foto-wrap--crop {
    width: 100%;
    height: 45vh;
    flex-shrink: 0;
  }

  .modal__texto-wrap {
    width: 100%;
    flex: 1;
    overflow-y: auto;
  }

  .modal__texto-colunas { flex-direction: column; }

  /* Mobile: barra em duas linhas — título em cima, controlos em baixo */
  .modal__barra {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    padding: 0.5rem 1rem;
    gap: 0.3rem;
  }

  .modal__barra-titulo {
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--color-border);
  }

  .modal__barra-controlos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 0;
  }

  .modal__barra-sep { display: none; }
}

/* ══════════════════════════════════════════
   PREFERÊNCIA DE MOVIMENTO REDUZIDO
   ══════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .modal { transition: none; }
  #loader { animation: none; border-top-color: var(--loader-color); }
}