/* Style_Index.css — Styling specifically for the Index (homepage) page
   This file defines the visual design for the hero banner, feature cards grid,
   and informational facts section on the landing page. */

/* Import base.css for foundational styles (header, nav, cards, etc.) */
@import url('base.css');

/* ===== PAGE ACCENT COLOR ===== */
/* Override the default accent color for this page - using blue theme for Index */
:root {
  --accent: #3b82f6;  /* Bright blue matching base.css theme */
}

/* ===== HERO BANNER ===== */
/* The prominent top section with headline, description, and image */
.hero-banner {
  display: grid;  /* Use CSS Grid for two-column layout */
  grid-template-columns: 1.5fr 1fr;  /* Left column (content) is 1.5x wider than right column (image) */
  gap: 3rem;  /* 3rem (~48px) spacing between columns */
  padding: 3rem;  /* 3rem padding around entire banner */
  /* Modern gradient background matching header theme with subtle dot pattern overlay */
  background: 
    radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(147, 197, 253, 0.15) 0%, transparent 50%),
    linear-gradient(135deg, #eff6ff 0%, #dbeafe 50%, #bfdbfe 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%;  /* Control background layers */
  border-radius: 20px;  /* More rounded corners for modern appearance */
  margin-bottom: 3rem;  /* Space below banner before next section */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);  /* Enhanced shadow for depth */
  position: relative;  /* For potential decorative elements */
  overflow: hidden;  /* Clip overflow for effects */
}

/* Subtle decorative gradient overlay */
.hero-banner::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.05));
  pointer-events: none;  /* Don't interfere with interactions */
}

/* Main heading in hero banner */
.hero-content h2 {
  font-size: 3rem;  /* Larger heading (~48px) for strong visual hierarchy */
  margin: 0 0 1rem 0;  /* No top margin, 1rem bottom margin */
  color: var(--accent);  /* Blue color matching page theme */
  font-weight: 800;  /* Extra bold for emphasis */
  letter-spacing: -0.03em;  /* Tighter letter spacing for modern look */
  line-height: 1.1;  /* Tight line height for large text */
}

/* Subheading below main hero heading */
.hero-subtitle {
  font-size: 1.35rem;  /* Medium-large size (~21.6px) */
  color: #64748b;  /* Slate gray for secondary text */
  margin-bottom: 1.5rem;  /* Space below subtitle */
  font-weight: 500;  /* Medium weight */
  line-height: 1.5;  /* Comfortable line spacing */
}

/* Paragraph text in hero content area */
.hero-content p {
  line-height: 1.7;  /* Generous line spacing for readability */
  color: #475569;  /* Slate for good contrast */
  font-size: 1.05rem;  /* Slightly larger body text */
}

/* Hero image container and image */
.hero-image img {
  width: 100%;  /* Fill container width */
  height: 100%;  /* Fill container height */
  object-fit: cover;  /* Crop image to fill space while maintaining aspect ratio */
  border-radius: 16px;  /* More rounded corners */
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);  /* Enhanced shadow for depth */
  transition: transform 0.3s ease;  /* Smooth animation */
}

.hero-image img:hover {
  transform: scale(1.02);  /* Subtle zoom effect on hover */
}

/* ===== FEATURES GRID ===== */
/* Grid layout for the four feature cards (Companies, Lunch, Sports, Tourist) */
.features-grid {
  display: grid;  /* Use CSS Grid for responsive card layout */
  /* Auto-fit: automatically place cards in rows
     minmax(240px, 1fr): each card minimum 240px, 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(240px, 1fr));
  gap: 1.5rem;  /* 1.5rem (~24px) spacing between cards */
  margin-bottom: 2rem;  /* Space below grid before next section */
}

/* Individual feature card styling */
.feature-card {
  background: var(--card-bg);  /* Use theme card background (white in light mode, dark in dark mode) */
  padding: 2rem;  /* Generous padding around card content */
  border-radius: 16px;  /* More rounded corners */
  border: 1px solid var(--border);  /* Use theme border color */
  /* Smooth transitions for hover effects: */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),  /* Smooth easing */
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);  /* Smooth shadow animation */
  text-align: center;  /* Center all text and icons inside card */
  box-shadow: var(--shadow-sm);  /* Use theme shadow variable */
  position: relative;  /* For decorative elements */
  overflow: hidden;  /* Clip overflow */
}

/* Decorative accent line at top of card */
.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.feature-card:hover::before {
  opacity: 1;  /* Show accent line on hover */
}

/* Feature card hover state - lifts card and adds shadow */
.feature-card:hover {
  transform: translateY(-8px);  /* Move card up 8 pixels for lift effect */
  box-shadow: var(--shadow-lg);  /* Use theme large shadow variable */
}

/* Emoji icon at top of each feature card */
.feature-icon {
  font-size: 3.5rem;  /* Larger emoji size (~56px) for strong visual impact */
  margin-bottom: 1.25rem;  /* Space below icon before heading */
  display: inline-block;  /* Allow transform */
  transition: transform 0.3s ease;  /* Smooth animation */
}

.feature-card:hover .feature-icon {
  transform: scale(1.1);  /* Slightly enlarge icon on card hover */
}

/* Feature card heading */
.feature-card h3 {
  color: var(--fg);  /* Use theme foreground color */
  margin: 0 0 0.75rem 0;  /* No top margin, increased bottom margin */
  font-size: 1.35rem;  /* Larger size (~21.6px) */
  font-weight: 700;  /* Bold weight */
}

/* Feature card description paragraph */
.feature-card p {
  color: var(--muted);  /* Muted gray color for secondary text */
  margin-bottom: 1.25rem;  /* Space below paragraph */
  font-size: 1rem;  /* Standard body text size */
  line-height: 1.6;  /* Generous line spacing */
}

/* "Learn More" links inside feature cards */
.feature-link {
  color: var(--accent);  /* Blue color matching page theme */
  text-decoration: none;  /* Remove underline */
  font-weight: 600;  /* Semi-bold for emphasis */
  display: inline-flex;  /* Allow padding and icon alignment */
  align-items: center;  /* Center content vertically */
  gap: 0.5rem;  /* Space between text and icon */
  padding: 0.65rem 1.25rem;  /* Increased padding for button-like appearance */
  border-radius: 10px;  /* More rounded corners */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);  /* Smooth transitions */
  background: rgba(59, 130, 246, 0.08);  /* Subtle background */
  border: 1px solid rgba(59, 130, 246, 0.2);  /* Accent border */
}

/* Feature link hover state - enhanced background and transform */
.feature-link:hover {
  background: rgba(59, 130, 246, 0.15);  /* Stronger background on hover */
  transform: translateX(4px);  /* Slide right slightly */
  border-color: rgba(59, 130, 246, 0.4);  /* Brighter border */
}

/* ===== INFO CARDS ===== */
/* Container for informational cards (used for facts section) */
.info-cards {
  display: grid;  /* Use grid layout for card stacking */
  gap: 1.5rem;  /* 1.5rem spacing between cards */
}

/* Individual info card */
.info-card {
  background: var(--card-bg);  /* Use theme card background */
  padding: 2.5rem;  /* Generous padding around content */
  border-radius: 16px;  /* More rounded corners */
  border: 1px solid var(--border);  /* Theme border */
  box-shadow: var(--shadow-sm);  /* Theme shadow */
  transition: box-shadow 0.3s ease;  /* Smooth shadow transition */
}

.info-card:hover {
  box-shadow: var(--shadow-md);  /* Enhanced shadow on hover */
}

/* Highlighted info card variant (draws extra attention) */
.info-card.highlight {
  /* Gradient background with light blue tint */
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.03) 100%);
  border: 2px solid rgba(59, 130, 246, 0.25);  /* Thicker accent border */
}

/* Heading inside info card */
.info-card h2 {
  margin-top: 0;  /* Remove top margin (card padding provides spacing) */
  color: var(--accent);  /* Blue color matching page theme */
  font-size: 2rem;  /* Larger heading (~32px) */
  margin-bottom: 1.75rem;  /* Space below heading before content */
  font-weight: 700;  /* Bold weight */
  letter-spacing: -0.02em;  /* Tighter spacing */
}

/* ===== FACT LIST ===== */
/* Grid layout for list of facts (label-value pairs) */
.fact-list {
  display: grid;  /* Use grid for stacking fact items */
  gap: 1rem;  /* 1rem spacing between fact items */
}

/* Individual fact item (row with label and value) */
.fact-item {
  display: flex;  /* Use flexbox for horizontal layout */
  justify-content: space-between;  /* Push label to left, value to right */
  padding: 0.75rem;  /* Padding around content */
  background: rgba(255,255,255,0.6);  /* Semi-transparent white background (60% opacity) */
  border-radius: 8px;  /* Rounded corners */
  border-left: 4px solid var(--accent);  /* Thick blue left border for visual accent */
}

/* Fact label (left side - e.g., "Population:") */
.fact-label {
  font-weight: 600;  /* Semi-bold for emphasis */
  color: var(--accent);  /* Blue color matching page theme */
}

/* Fact value (right side - e.g., "170,000") */
.fact-value {
  color: var(--fg);  /* Use theme foreground color (black in light mode, white in dark mode) */
  text-align: right;  /* Right-aligned text */
}

/* ===== RESPONSIVE DESIGN ===== */
/* Adjustments for tablet and mobile screens */
@media (max-width: 800px) {
  /* Hero banner switches to single column on smaller screens */
  .hero-banner {
    grid-template-columns: 1fr;  /* One column instead of two (stack content vertically) */
    padding: 1.5rem;  /* Reduce padding for smaller screens */
  }
  
  /* Smaller main heading on mobile */
  .hero-content h2 {
    font-size: 2rem;  /* Reduce from 2.5rem to 2rem (~32px) */
  }
  
  /* Features grid switches to single column */
  .features-grid {
    grid-template-columns: 1fr;  /* Stack cards vertically instead of side-by-side */
  }
  
  /* Fact items stack vertically instead of horizontally */
  .fact-item {
    flex-direction: column;  /* Stack label and value vertically instead of horizontally */
    gap: 0.5rem;  /* Small gap between label and value */
  }
  
  /* Left-align fact value on mobile (since it's stacked, right-align no longer makes sense) */
  .fact-value {
    text-align: left;  /* Change from right to left alignment */
  }
}

/* ===== MAP CONTAINER STYLES ===== */
/* Styling for the embedded Google Maps iframe section */
.map-container {
  margin: 3rem 0;  /* Vertical spacing around map section */
  padding: 0;  /* No padding needed as iframe fills container */
}

/* Map section heading */
.map-container h2 {
  font-size: 2rem;  /* Large heading size */
  color: var(--accent);  /* Blue theme color */
  margin-bottom: 1.5rem;  /* Space below heading */
  font-weight: 700;  /* Bold font weight */
}

/* Map iframe wrapper - adds subtle background pattern */
.map-container iframe {
  box-shadow: var(--shadow-lg);  /* Deep shadow for depth */
  margin-top: 1rem;  /* Space above iframe */
}