/* Style_Sports.css — Styling specifically for the Sports & Leisure page
   This file defines the visual design for sports activities and fitness options,
   including activity cards with icons/highlights and events section with tips. */

/* Import base.css for foundational styles */
@import url('base.css');

/* ===== PAGE ACCENT COLOR ===== */
/* Override the default accent color for this page - using red theme for Sports */
:root {
  --accent: #ef4444;  /* Vibrant red - used for headings, borders, highlights throughout this page */
}

/* ===== PAGE HEADER ===== */
/* The top section with page title and subtitle */
.page-header {
  text-align: center;  /* Center all text horizontally */
  margin-bottom: 3rem;  /* Large space below header before content */
  padding: 3rem 1rem;  /* Vertical 3rem, horizontal 1rem padding */
  /* Red gradient with energetic radial overlays for dynamic appearance */
  background: 
    radial-gradient(circle at 20% 80%, rgba(239, 68, 68, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(252, 165, 165, 0.12) 0%, transparent 50%),
    linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border-radius: 20px;  /* Rounded corners */
  box-shadow: var(--shadow-sm);  /* Theme shadow */
}

/* Main page heading */
.page-header h2 {
  font-size: 2.75rem;  /* Larger heading (~44px) */
  color: var(--accent);  /* Red color matching page theme */
  margin: 0 0 1rem 0;  /* No top margin, 1rem bottom margin */
  font-weight: 800;  /* Extra bold weight for emphasis */
  letter-spacing: -0.03em;  /* Tighter letter spacing */
}

/* Subtitle below main heading */
.subtitle {
  font-size: 1.25rem;  /* Larger size (~20px) */
  color: #64748b;  /* Slate gray color for secondary text */
  margin: 0;  /* No margins (page-header provides spacing) */
  font-weight: 500;  /* Medium weight */
}

/* ===== ACTIVITIES GRID ===== */
/* Grid layout for activity cards */
.activities-grid {
  display: grid;  /* Use CSS Grid for responsive card layout */
  /* Auto-fit: automatically place cards in rows
     minmax(300px, 1fr): each card minimum 300px, maximum equal fraction of space
     Result: cards wrap to new row when space is tight, expand equally when space available */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;  /* 1.5rem (~24px) spacing between cards */
  margin-bottom: 3rem;  /* Large space below grid before next section */
}

/* ===== ACTIVITY CARD ===== */
/* Individual activity card (e.g., Swimming, Cycling, Gym) */
.activity-card {
  background: var(--card-bg);  /* Use theme card background (white in light mode, dark in dark mode) */
  border-radius: 16px;  /* Rounded corners for modern card appearance */
  padding: 2rem;  /* Generous padding around card content */
  border: 2px solid rgba(209, 52, 42, 0.1);  /* Subtle red border (10% opacity) */
  /* Smooth transitions for all animatable properties: */
  transition: all 0.3s ease;  /* 300ms animation with ease timing */
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);  /* Subtle shadow: 4px down, 6px blur, 5% opacity */
  display: flex;  /* Use flexbox for vertical stacking */
  flex-direction: column;  /* Stack children vertically (icon, heading, text, highlights) */
  align-items: center;  /* Center all children horizontally */
  text-align: center;  /* Center text content */
}

/* Activity card hover state - lifts card and strengthens shadow/border */
.activity-card:hover {
  transform: translateY(-8px);  /* Move card up 8 pixels for lift effect */
  box-shadow: 0 12px 24px rgba(209, 52, 42, 0.15);  /* Stronger red-tinted shadow */
  border-color: rgba(209, 52, 42, 0.3);  /* More visible red border (30% opacity) */
}

/* Featured activity card variant (spans two columns for emphasis) */
.activity-card.featured {
  grid-column: span 2;  /* Take up 2 column widths instead of 1 (double width) */
  /* Gradient background with very subtle red tint */
  background: linear-gradient(135deg, rgba(209, 52, 42, 0.05), rgba(209, 52, 42, 0.02));
  border: 2px solid rgba(209, 52, 42, 0.2);  /* Thicker, more visible red border (20% opacity) */
}

/* ===== ACTIVITY ICON ===== */
/* Circular icon container at top of each card */
.activity-icon {
  font-size: 3.5rem;  /* Very large emoji (~56px) for visual impact */
  margin-bottom: 1rem;  /* Space below icon before heading */
  /* Gradient background with subtle red tint */
  background: linear-gradient(135deg, rgba(209, 52, 42, 0.1), rgba(209, 52, 42, 0.05));
  width: 80px;  /* Fixed width for circular container */
  height: 80px;  /* Same as width = perfect circle */
  display: flex;  /* Use flexbox to center emoji */
  align-items: center;  /* Center emoji vertically */
  justify-content: center;  /* Center emoji horizontally */
  border-radius: 50%;  /* Make it circular (50% = perfect circle on square element) */
}

/* Activity name heading */
.activity-card h3 {
  color: var(--accent);  /* Red color matching page theme */
  margin: 0 0 1rem 0;  /* No top margin, 1rem bottom margin */
  font-size: 1.5rem;  /* Large heading (~24px) */
}

/* Activity description paragraph */
.activity-card p {
  color: var(--fg);  /* Use theme foreground color (black in light mode, white in dark mode) */
  line-height: 1.6;  /* Comfortable line spacing (160% of font size) */
  margin-bottom: 1.25rem;  /* Space below paragraph */
  flex-grow: 1;  /* Take up remaining vertical space (pushes highlights to bottom) */
}

/* ===== ACTIVITY HIGHLIGHTS ===== */
/* Container for highlight tags (e.g., "Indoor", "All Levels", "Free Trial") */
.activity-highlights {
  display: flex;  /* Use flexbox for horizontal layout */
  flex-wrap: wrap;  /* Allow tags to wrap to new line if needed */
  gap: 0.5rem;  /* 0.5rem spacing between tags */
  justify-content: center;  /* Center tags horizontally */
}

/* Individual highlight tag pill */
.highlight-item {
  background: rgba(209, 52, 42, 0.1);  /* Light red background (10% opacity) */
  color: var(--accent);  /* Red text matching page theme */
  padding: 0.35rem 0.75rem;  /* Vertical 0.35rem, horizontal 0.75rem padding */
  border-radius: 20px;  /* Fully rounded ends (pill shape) */
  font-size: 0.85rem;  /* Smaller text (~13.6px) */
  font-weight: 500;  /* Medium weight for readability */
}

/* ===== EVENTS SECTION ===== */
/* Container for events and sports tips at bottom of page */
.events-section {
  /* Gradient background with very subtle red tint */
  background: linear-gradient(135deg, rgba(209, 52, 42, 0.05), rgba(209, 52, 42, 0.02));
  border: 2px solid rgba(209, 52, 42, 0.15);  /* Subtle red border (15% opacity) */
  border-radius: 16px;  /* Rounded corners */
  padding: 2rem;  /* Generous padding around content */
  margin-bottom: 2rem;  /* Space below section */
}

/* Events section heading */
.events-section h3 {
  color: var(--accent);  /* Red color matching page theme */
  margin: 0 0 1rem 0;  /* No top margin, 1rem bottom margin */
  font-size: 1.75rem;  /* Large heading (~28px) */
  text-align: center;  /* Center heading horizontally */
}

/* Events section intro paragraph (direct child p) */
.events-section > p {
  text-align: center;  /* Center text horizontally */
  color: var(--muted);  /* Muted gray color for secondary text */
  margin-bottom: 2rem;  /* Space below paragraph before tips grid */
  line-height: 1.6;  /* Comfortable line spacing (160% of font size) */
}

/* ===== EVENT TIPS GRID ===== */
/* Grid layout for event tip cards */
.event-tips {
  display: grid;  /* Use CSS Grid for responsive card layout */
  /* Auto-fit: automatically place cards
     minmax(250px, 1fr): each card minimum 250px, maximum equal fraction */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;  /* 1.5rem spacing between tip cards */
}

/* Individual tip card */
.tip {
  background: var(--card-bg);  /* Use theme card background */
  padding: 1.5rem;  /* Padding around content */
  border-radius: 12px;  /* Rounded corners */
  border: 1px solid rgba(0,0,0,0.06);  /* Subtle border */
}

/* Tip card heading (bold label) */
.tip strong {
  color: var(--accent);  /* Red color matching page theme */
  display: block;  /* Make heading take full width (force line break after) */
  margin-bottom: 0.5rem;  /* Space below heading before description */
  font-size: 1.1rem;  /* Slightly larger than body text (~17.6px) */
}

/* Tip card description paragraph */
.tip p {
  margin: 0;  /* No margins (card padding provides spacing) */
  color: var(--muted);  /* Muted gray color for secondary text */
  line-height: 1.5;  /* Comfortable line spacing (150% of font size) */
}

/* ===== RESPONSIVE DESIGN ===== */
/* Adjustments for different screen sizes */

/* Medium screens (tablets) - adjust featured card */
@media (max-width: 900px) {
  /* Featured card no longer spans 2 columns on medium screens */
  .activity-card.featured {
    grid-column: span 1;  /* Only span 1 column instead of 2 (normal card width) */
  }
}

/* Small screens (mobile) - single column layout */
@media (max-width: 800px) {
  /* Smaller main heading on mobile */
  .page-header h2 {
    font-size: 1.75rem;  /* Reduce from 2.25rem to 1.75rem (~28px) */
  }
  
  /* Activities grid switches to single column */
  .activities-grid {
    grid-template-columns: 1fr;  /* Stack cards vertically instead of side-by-side */
  }
  
  /* Event tips grid switches to single column */
  .event-tips {
    grid-template-columns: 1fr;  /* Stack tip cards vertically */
  }
}