/* gear.css — page-specific styles for /gear/ (Swim Gear Guide)
   Restores component CSS orphaned when the inline <style> block was stripped
   (commit 5ca2f8e). Scoped to .gear-page so nothing leaks to other templates. */

/* Hero */
.gear-page .hero {
  background: linear-gradient(135deg, #075985 0%, #0369a1 100%);
  color: #fff;
  padding: 4rem 2rem;
  text-align: center;
}
.gear-page .hero-content { max-width: 900px; margin: 0 auto; }
.gear-page .hero h1 { font-size: 2.5rem; margin-bottom: 0.5rem; line-height: 1.2; color: #fff; }
.gear-page .hero-subtitle { font-size: 1.1rem; opacity: 0.95; margin: 0; }

/* Content wrapper */
.gear-page main.wwk-local-content { max-width: 1100px; margin: 0 auto; padding: 3rem 2rem; }

/* Section headings */
.gear-page .categories h2,
.gear-page .featured-picks h2,
.gear-page .buying-guides h2 { color: #075985; font-size: 1.8rem; margin-bottom: 2rem; text-align: center; }
.gear-page .categories,
.gear-page .featured-picks,
.gear-page .buying-guides { margin-bottom: 4rem; }

/* Categories grid */
.gear-page .categories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem; }
.gear-page .category-card { background: #fff; padding: 2rem; border-radius: 12px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: transform 0.3s, box-shadow 0.3s; }
.gear-page .category-card:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0,0,0,0.12); }
.gear-page .category-icon { font-size: 3rem; margin-bottom: 1rem; }
.gear-page .category-title { color: #075985; font-size: 1.2rem; font-weight: 700; margin-bottom: 0.5rem; }
.gear-page .category-desc { color: #64748b; font-size: 0.9rem; }

/* Featured picks */
.gear-page .picks-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.gear-page .category-section { background: #fff; padding: 2rem; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.gear-page .category-section h3 { color: #075985; font-size: 1.3rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid #e0f2fe; }
.gear-page .gear-item { padding: 1.5rem 0; border-bottom: 1px solid #e2e8f0; }
.gear-page .gear-item:last-child { border-bottom: none; padding-bottom: 0; }
.gear-page .gear-item-name { color: #075985; font-weight: 700; font-size: 1rem; margin-bottom: 0.5rem; }
.gear-page .gear-item-desc { color: #475569; font-size: 0.9rem; margin-bottom: 0.75rem; line-height: 1.5; }
.gear-page .gear-item-age { display: inline-block; background: #e0f2fe; color: #0369a1; padding: 0.25rem 0.75rem; border-radius: 4px; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.75rem; }
.gear-page .gear-link { display: inline-block; color: #0284c7; text-decoration: none; font-weight: 500; transition: color 0.2s; }
.gear-page .gear-link:hover { color: #075985; text-decoration: underline; }

/* Buying guides */
.gear-page .guides-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.gear-page .guide-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: transform 0.3s, box-shadow 0.3s; }
.gear-page .guide-card:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0,0,0,0.12); }
.gear-page .guide-header { background: linear-gradient(135deg, #075985 0%, #0369a1 100%); color: #fff; padding: 1.5rem; text-align: center; }
.gear-page .guide-header h3 { font-size: 1.1rem; margin: 0; color: #fff; }
.gear-page .guide-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.gear-page .guide-body { padding: 1.5rem; }
.gear-page .guide-body p { color: #475569; font-size: 0.95rem; margin-bottom: 1rem; }
.gear-page .guide-body a { color: #0284c7; text-decoration: none; font-weight: 600; }
.gear-page .guide-body a:hover { text-decoration: underline; }
.gear-page .coming-soon { display: inline-block; background: #f1f5f9; color: #64748b; padding: 0.25rem 0.75rem; border-radius: 4px; font-size: 0.8rem; font-weight: 600; }

/* Mobile */
@media (max-width: 768px) {
  .gear-page .hero h1 { font-size: 2rem; }
  .gear-page main.wwk-local-content { padding: 2rem 1rem; }
  .gear-page .categories-grid,
  .gear-page .picks-container,
  .gear-page .guides-grid { grid-template-columns: 1fr; }
  .gear-page .category-section { padding: 1.5rem; }
}