/* Home page specific styles (kept minimal, leveraging base.css) */
.hero {
  padding: var(--space-15) 0 var(--space-12);
  background:
    radial-gradient(1000px 600px at 10% -10%, rgba(224,177,92,0.07), transparent 60%),
    radial-gradient(900px 500px at 110% 0%, rgba(142,34,48,0.06), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,0.2), transparent 30%);
  max-width: 100%;
  overflow: hidden;
}
.hero__inner { display: grid; gap: var(--space-8); max-width: 100%; }
.hero__content {
  display: flex;
  flex-direction: row;
  gap: var(--space-8);
  align-items: center;
  max-width: 100%;
  overflow: hidden;
}
.hero__image { 
  width: 100%; 
  max-width: 400px; 
  height: auto; 
  aspect-ratio: 3/2; 
  object-fit: cover; 
  border-radius: var(--radius-lg); 
  box-shadow: var(--shadow-xl);
  flex-shrink: 0;
}
.hero__lead { 
  color: var(--color-muted); 
  max-width: var(--measure);
  flex: 1;
  min-width: 0;
}
.hero__cta { flex-wrap: wrap; max-width: 100%; }
.hero__search { margin-top: var(--space-6); max-width: 100%; }
.search__group { display: grid; grid-template-columns: 1fr auto; gap: var(--space-4); max-width: 100%; }
.search__hint { color: var(--gray-400); margin-top: var(--space-3); font-size: var(--fs-sm); max-width: 100%; }

.section { padding-block: var(--space-12); max-width: 100%; overflow: hidden; }
.meta { color: var(--gray-300); font-size: var(--fs-sm); }

@media (max-width: 900px) {
  .section {
    padding-block: var(--space-8);
  }
}

/* Subtle reveal animation for sections */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--motion-slow), transform var(--motion-slow); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Fine tune cards in grids */
#gallery .card img { border-radius: var(--radius-md); box-shadow: var(--shadow-md); }

@media (max-width: 900px) {
  .hero { 
    padding-top: var(--space-12);
    padding-inline: var(--space-5);
  }
  .hero__content {
    flex-direction: column;
    gap: var(--space-6);
  }
  .hero__image {
    max-width: 100%;
  }
  .search__group {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .hero__cta {
    flex-direction: column;
    width: 100%;
  }
  .hero__cta .btn {
    width: 100%;
  }
}