/* Galéria page styles — scoped to .galeria-main */
.galeria-main {
  overflow-x: hidden;
  width: 100%;
}

/* Hero section */
.galeria-hero {
  background-color: var(--color-sun-yellow);
  border-block-end: var(--border-retro);
  padding: var(--space-3xl) var(--container-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.galeria-hero__inner {
  max-width: 800px;
  width: 100%;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.galeria-hero__title {
  margin: 0;
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line-height);
  color: var(--color-deep-brown);
}

.galeria-hero__lead {
  margin: 0;
  font-size: var(--text-body-large-size);
  line-height: var(--text-body-large-line-height);
  color: var(--color-deep-brown);
  max-width: 800px;
  margin-inline: auto;
}

.galeria-hero__divider {
  width: 100%;
  max-width: 800px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M0 6 Q 15 0 30 6 T 60 6 T 90 6 T 120 6' fill='none' stroke='%233E2723' stroke-width='3'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 120px 12px;
  margin-inline: auto;
}

/* Main gallery section */
.galeria-main-gallery {
  padding-block: var(--surface-section-spacing);
}

.galeria-main-gallery__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.galeria-main-gallery__title {
  margin: 0;
  text-align: center;
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line-height);
  color: var(--color-deep-brown);
}

.galeria-main-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
  width: 100%;
}

.galeria-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
  background-color: var(--color-cream);
  border: var(--border-retro);
  border-radius: var(--radius-card);
  padding: var(--surface-card-padding);
  box-shadow: var(--shadow-retro);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.galeria-card:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-card-hover);
}

.galeria-card__media {
  width: 100%;
  overflow: hidden;
  border: var(--border-retro);
  background-color: var(--color-cream);
}

.galeria-card__media--oval {
  border-radius: var(--radius-oval);
  aspect-ratio: 4 / 5;
}

.galeria-card__media--arch {
  border-radius: var(--radius-arch);
  aspect-ratio: 3 / 4;
}

.galeria-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.15) saturate(1.1);
  display: block;
}

.galeria-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  text-align: center;
  min-width: 0;
}

.galeria-card__title {
  margin: 0;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
  color: var(--color-deep-brown);
}

.galeria-card__text {
  margin: 0;
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
  color: var(--color-brown-muted);
  max-width: 300px;
  margin-inline: auto;
}

/* Highlight section */
.galeria-highlight {
  padding-block: var(--surface-section-spacing);
}

.galeria-highlight__container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
  align-items: stretch;
}

.galeria-highlight__media {
  min-width: 0;
  border: var(--border-retro);
  border-radius: var(--radius-arch);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background-color: var(--color-cream);
}

.galeria-highlight__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.15) saturate(1.1);
  display: block;
}

.galeria-highlight__content {
  min-width: 0;
  background-color: var(--color-sun-yellow);
  border: var(--border-retro);
  border-radius: var(--radius-card);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md);
}

.galeria-highlight__title {
  margin: 0;
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line-height);
  color: var(--color-deep-brown);
}

.galeria-highlight__text {
  margin: 0;
  font-size: var(--text-body-large-size);
  line-height: var(--text-body-large-line-height);
  color: var(--color-deep-brown);
  max-width: 400px;
}

/* CTA section */
.galeria-cta {
  background-color: var(--color-juicy-orange);
  border-block: var(--border-retro);
  padding: var(--space-3xl) var(--container-padding);
  display: flex;
  justify-content: center;
}

.galeria-cta__inner {
  max-width: 700px;
  width: 100%;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.galeria-cta__title {
  margin: 0;
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line-height);
  color: var(--color-cream);
}

.galeria-cta__text {
  margin: 0;
  font-size: var(--text-body-large-size);
  line-height: var(--text-body-large-line-height);
  color: var(--color-cream);
  max-width: 700px;
  margin-inline: auto;
}

.galeria-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
}

.galeria-cta__button {
  min-width: 180px;
}

/* Closing section */
.galeria-closing {
  padding-block: var(--space-3xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.galeria-closing__divider {
  width: 100%;
  max-width: 800px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M0 6 Q 15 0 30 6 T 60 6 T 90 6 T 120 6' fill='none' stroke='%2387CEEB' stroke-width='3'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 120px 12px;
  margin-inline: auto;
}

.galeria-closing__inner {
  max-width: 800px;
  width: 100%;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-inline: var(--container-padding);
}

.galeria-closing__title {
  margin: 0;
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line-height);
  color: var(--color-deep-brown);
}

.galeria-closing__text {
  margin: 0;
  font-size: var(--text-body-large-size);
  line-height: var(--text-body-large-line-height);
  color: var(--color-deep-brown);
  max-width: 800px;
  margin-inline: auto;
}

/* Tablet breakpoint */
@media (max-width: 900px) {
  .galeria-main-gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .galeria-highlight__container {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .galeria-highlight__media {
    aspect-ratio: 4 / 3;
  }

  .galeria-highlight__content {
    padding: var(--space-lg);
  }

  .galeria-hero {
    padding-block: var(--space-2xl);
  }

  .galeria-cta {
    padding-block: var(--space-2xl);
  }

  .galeria-closing {
    padding-block: var(--space-2xl);
  }
}

/* Mobile breakpoint */
@media (max-width: 600px) {
  .galeria-hero {
    padding-block: var(--space-xl);
    gap: var(--space-md);
  }

  .galeria-hero__title {
    font-size: 2rem;
    line-height: 1.2;
  }

  .galeria-hero__lead {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
  }

  .galeria-main-gallery__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .galeria-card__text {
    max-width: 100%;
  }

  .galeria-highlight__container {
    gap: var(--space-md);
  }

  .galeria-highlight__content {
    padding: var(--surface-card-padding);
  }

  .galeria-highlight__text {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
  }

  .galeria-cta {
    padding-block: var(--space-xl);
  }

  .galeria-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .galeria-cta__button {
    width: 100%;
  }

  .galeria-closing {
    padding-block: var(--space-xl);
  }

  .galeria-closing__text {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
  }
}