/**
 * Site-Specific Custom Styles (Layer 5)
 * =====================================
 *
 * Layout: compact-grid
 *
 * Compact multi-column grid with small, dense cards.
 * Categories show as tight 4-column tiles (icon + title).
 * Subcategories appear as horizontal tag pills.
 * Professional, space-efficient — like an app launcher or dashboard.
 */

/* ==========================================================
   LAYOUT: Compact-Grid — Dense Dashboard Tiles
   ========================================================== */

/* ── Homepage: Hero — Narrower, Left-Aligned ── */
.hero {
  text-align: left;
  padding: 3.5rem 0 2.5rem;
  margin-bottom: 1.5rem;
}

.hero h1 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}

.hero .subtitle {
  text-align: left;
  margin-left: 0;
  max-width: 560px;
  font-size: 1rem;
  opacity: 0.75;
}

/* ── Homepage: Categories — 4-Column Dense Grid ── */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.category-card {
  padding: 1.25rem 1rem;
  text-align: center;
  border-radius: 10px;
}

.category-card::before {
  display: none;
}

.category-card:hover {
  transform: translateY(-2px);
}

.category-icon {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
  display: block;
}

.category-card h3 {
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.3;
}

/* Hide description to keep cards compact */
.category-card p {
  display: none;
}

.category-meta {
  display: none;
}

/* ── Intro Section ── */
.intro-section {
  max-width: 720px;
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}

/* ── List Page: Subcategories — Horizontal Tag Pills ── */
.subcategories {
  margin-bottom: 2rem;
}

.subcategories h2 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.5;
  margin-bottom: 0.75rem;
}

.category-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.category-list li a {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1.5px solid var(--site-border, #e5e7eb);
  text-decoration: none;
  font-size: 0.875rem;
  transition: all var(--dur-fast, 150ms) ease;
  background: var(--site-surface, #fff);
}

.category-list li a:hover {
  border-color: var(--site-primary, #3b82f6);
  background: var(--site-primary, #3b82f6);
  color: #fff;
}

.category-list li a .name {
  font-weight: 500;
}

.category-list li a .description {
  display: none;
}

/* ── SEO Components — 2-Column Compact Cards ── */
.seo-components--primary {
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.seo-card {
  padding: 1.25rem 1.5rem;
}

.seo-more-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .categories-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .seo-components--primary {
    grid-template-columns: 1fr;
  }
  .seo-more-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .category-card {
    padding: 1rem 0.75rem;
  }
}

/* ============================================
   YOUR SITE-SPECIFIC STYLES GO BELOW
   ============================================ */