/* =========================================================
   Component — Gallery (Seção 2: grid assimétrico)
   ========================================================= */

/* Stroke superior da seção (1px, #D6D6D8) */
.gallery-section {
  border-block-start: 1px solid #D6D6D8;
}

.gallery {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
}

@media (min-width: 960px) {
  .gallery {
    /* coluna de texto mais estreita + gap maior → mais respiro até o grid */
    grid-template-columns: minmax(14rem, 0.85fr) 1.7fr;
    column-gap: var(--space-9);   /* 64px (era 40px) */
  }
}

.gallery__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 532px;
}

/* A coluna de texto acompanha a rolagem (sticky) e para no pé da coluna
   da direita — o limite natural é o fim do próprio grid da galeria. */
@media (min-width: 960px) {
  .gallery__intro {
    position: sticky;
    /* fica abaixo do nav de seções fixo (não sob ele) + uma folga */
    top: calc(var(--section-nav-h) + var(--space-5));
    align-self: start;
  }
}

.gallery__title {
  font-size: clamp(1.875rem, 6vw, 38px);   /* 30px no mobile → 38px no desktop */
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  letter-spacing: -1px;
  line-height: var(--lh-snug);
  text-wrap: pretty;
}

.gallery__text { color: var(--text-secondary); }

.gallery__features {
  display: grid;
  /* Desktop: dois blocos lado a lado, com a barra de 1px no meio.
     minmax(0,1fr) força metades EXATAMENTE iguais (ignora o tamanho do conteúdo) */
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: stretch;
  column-gap: var(--space-7);              /* 40px de cada lado da barra */
  padding-block-start: var(--space-5);
}

/* barra vertical real entre os dois blocos (ocupa a coluna de 1px) */
.feature-divider {
  align-self: stretch;
  background: var(--border-subtle);
}

/* Mobile: empilha os dois blocos na vertical e oculta a barra divisória */
@media (max-width: 720px) {
  .gallery__features {
    grid-template-columns: 1fr;
    row-gap: var(--space-5);
  }
  .feature-divider { display: none; }
}

.feature-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;          /* permite o texto quebrar dentro da metade */
}

.feature-item__head {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
}

.feature-item__icon { width: 1.125rem; height: 1.125rem; }

.feature-item__text {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  /* Sobrescreve o `text-wrap: pretty` herdado do reset (reset.css): em coluna
     estreita o "pretty" quebra as linhas cedo p/ evitar órfãs, deixando espaço
     vazio à direita. "wrap" preenche cada linha até a borda da coluna. */
  text-wrap: wrap;
}

/* Mosaico assimétrico de 6 imagens — masonry de 2 colunas via grid.
   Imagens "altas" ocupam 2 linhas-unidade; as "menores" ocupam 1.
   Como as duas colunas somam o MESMO total de linhas (5), suas BASES se alinham,
   e a última (f) começa logo abaixo da terceira (c), terminando junto da penúltima (e). */
.gallery__grid {
  display: grid;
  gap: var(--space-2);          /* 8px horizontal e vertical */
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: clamp(10rem, 16vw, 15.5rem);   /* altura da linha-unidade */
}

.gallery__item {
  position: relative;
  overflow: hidden;
}
.gallery__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.gallery__item:hover img { transform: scale(1.04); }

/* Coluna esquerda: a (alta) · d (alta) · e (menor, no pé) */
.gallery__item--a { grid-column: 1; grid-row: 1 / span 2; }
.gallery__item--d { grid-column: 1; grid-row: 3 / span 2; }
.gallery__item--e { grid-column: 1; grid-row: 5 / span 1; }   /* penúltima menor (1 linha) */
/* Coluna direita: b (menor) · c (alta) · f (alta, última) */
.gallery__item--b { grid-column: 2; grid-row: 1 / span 1; }
.gallery__item--c { grid-column: 2; grid-row: 2 / span 2; }
.gallery__item--f { grid-column: 2; grid-row: 4 / span 2; }   /* última: logo abaixo da 3ª (c), base alinhada à penúltima (e) */

.gallery__caption {
  position: absolute;
  inset-block-end: 0.75rem;
  inset-inline-start: 0.75rem;
  color: var(--color-white);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

@media (max-width: 720px) {
  .gallery__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  /* No mobile mostramos só as 2 primeiras imagens (mosaico completo só no desktop) */
  .gallery__item--a,
  .gallery__item--b {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }
  .gallery__item--c,
  .gallery__item--d,
  .gallery__item--e,
  .gallery__item--f {
    display: none;
  }
}