/**
 * Hero Image Tiles Section - Mobile First Layout
 * Mobile: Header → Gallery → Footer (flex-col)
 * Desktop: Header+Footer (left) | Gallery (right) (grid)
 */

/* Mobile: ordem natural usando flex order */
.hero-image-tiles-container {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.hero-content-header {
  order: 1;
}

.hero-gallery-wrapper {
  order: 2;
}

.hero-content-footer {
  order: 3;
}

/* Desktop: reorganizar usando grid */
@media (min-width: 1024px) {
  .hero-image-tiles-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
  }

  /* Coluna esquerda: Header + Footer */
  .hero-content-header {
    grid-column: 1;
    grid-row: 1;
    order: initial; /* Reset order no grid */
  }

  .hero-content-footer {
    grid-column: 1;
    grid-row: 2;
    order: initial; /* Reset order no grid */
    margin-top: -2.5rem; /* Reduz espaçamento após texto descritivo */
  }

  /* Coluna direita: Gallery */
  .hero-gallery-wrapper {
    grid-column: 2;
    grid-row: 1 / 3; /* Ocupa ambas as linhas para alinhar verticalmente */
    align-self: center;
    order: initial; /* Reset order no grid */
  }
}