/* Home page styles (built on base.css) */

.section {
  padding: var(--space-16) 0;
}

.section-alt {
  background: linear-gradient(180deg, var(--color-bg-secondary) 0%, var(--color-bg) 100%);
}

/* Hero */
.hero .hero-content p {
  max-width: 60ch;
}

.hero-figure img {
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  border: 2px solid var(--color-neutral-200);
}

.hero-ctas {
  margin-top: var(--space-6);
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.search { margin-top: var(--space-6); }
.search-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
}
.search-hint { margin-top: var(--space-2); color: var(--color-text-secondary); }

.quick-links { margin-top: var(--space-6); }

/* Lists inside sections */
.list { margin-top: var(--space-4); }
.list li { margin-bottom: var(--space-2); }

/* Gallery */
.gallery { margin-top: var(--space-6); }
.gallery-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 360px);
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-2);
}
.gallery-track:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.gallery-item { scroll-snap-align: start; background: white; border: 2px solid var(--color-neutral-200); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; }
.gallery-item img { display: block; width: 100%; height: auto; }
.gallery-item figcaption { padding: var(--space-3); font-weight: 600; color: var(--color-wood-dark); }
.gallery-controls { margin-top: var(--space-4); display: flex; gap: var(--space-4); }

/* FAQ details styling */
details.card summary { list-style: none; cursor: pointer; }
details.card summary::-webkit-details-marker { display: none; }
details.card[open] { box-shadow: var(--shadow-lg); }

/* Responsive tweaks */
@media (max-width: 1024px) {
  .hero-figure { order: -1; margin-bottom: var(--space-6); }
}