/* ==========================================================================
   GolfSimCanada.site — Template Specific Layout Overrides
   SSOT Reference: 13-build-flow.md §1.3
   ========================================================================== */

/* Homepage overrides */
.homepage-hero {
  padding-top: var(--section-gap-lg);
  padding-bottom: var(--section-gap);
  background: radial-gradient(circle at 50% 20%, rgba(27, 94, 58, 0.25) 0%, var(--color-bg-base) 70%);
  position: relative;
}

.homepage-products-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--card-gap);
}

@media (min-width: 768px) {
  .homepage-products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .homepage-products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Blog Post overrides */
.blog-post-header {
  padding: var(--space-12) 0 var(--space-8);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-8);
}

.blog-post-body {
  margin-bottom: var(--section-gap);
}

/* Product Single overrides */
.product-single-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-bottom: var(--section-gap);
}

@media (min-width: 1024px) {
  .product-single-hero {
    grid-template-columns: 1fr 1fr;
  }
}

/* Collection Page overrides */
.collection-page-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .collection-page-layout {
    grid-template-columns: 280px 1fr;
  }
}

/* Venue City overrides */
.venue-city-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--card-gap);
}

@media (min-width: 768px) {
  .venue-city-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Glossary Term overrides */
.glossary-term-single {
  max-width: var(--container-narrow);
  margin: 0 auto;
}

/* Pillar Page overrides */
.pillar-page-hero {
  padding: var(--section-gap-lg) 0;
  text-align: center;
}

/* Compare Page overrides */
.compare-page-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .compare-page-grid {
    grid-template-columns: 1fr 1fr;
  }
}