/* Style_Tourist.css — Styling specifically for the Tourist Information page
   This file defines the visual design for tourist attractions and travel tips,
   including hero section, attraction cards, and practical information grid. */

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

/* ===== PAGE ACCENT COLOR ===== */
/* Override the default accent color for this page - using green theme for Tourist */
:root {
  --accent: #10b981;  /* Vibrant green - used for headings, borders, tags throughout this page */
}

/* ===== HERO SECTION ===== */
/* The prominent top section with welcome message and description */
.hero-section {
  padding: 4rem 2rem;  /* Generous vertical 4rem, horizontal 2rem padding */
  /* Gradient background with green tint and natural radial overlays */
  background: 
    radial-gradient(circle at 25% 75%, rgba(16, 185, 129, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 25%, rgba(110, 231, 183, 0.15) 0%, transparent 50%),
    linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-radius: 20px;  /* More rounded corners for modern card appearance */
  margin-bottom: 3rem;  /* Large space below hero before attractions section */
  border: 2px solid rgba(16, 185, 129, 0.2);  /* Subtle green border */
  text-align: center;  /* Center all text horizontally */
  box-shadow: var(--shadow-sm);  /* Theme shadow */
}

/* Main hero heading */
.hero-content h2 {
  font-size: 3rem;  /* Larger heading (~48px) for strong visual hierarchy */
  margin: 0 0 1.25rem 0;  /* No top margin, 1.25rem bottom margin */
  color: var(--accent);  /* Green color matching page theme */
  font-weight: 800;  /* Extra bold weight for emphasis */
  letter-spacing: -0.03em;  /* Tighter letter spacing */
}

/* Hero description paragraph */
.hero-description {
  font-size: 1.25rem;  /* Larger size (~20px) - larger than body text */
  line-height: 1.7;  /* Generous line spacing */
  color: #475569;  /* Slate color for readability */
  max-width: 800px;  /* Constrain width for readability (prevents overly long lines) */
  margin: 0 auto;  /* Center the paragraph block horizontally */
  font-weight: 500;  /* Medium weight */
}

/* ===== VISITOR INFORMATION SECTION ===== */
/* Detailed text section for tourists with multiple paragraphs */
.visitor-info-section {
  background: var(--card-bg);  /* Use theme card background (white in light mode, dark in dark mode) */
  border-radius: 20px;  /* Rounded corners for modern appearance */
  padding: 3rem 2.5rem;  /* Generous padding: vertical 3rem, horizontal 2.5rem */
  margin-bottom: 3rem;  /* Large space below section */
  border: 2px solid rgba(16, 185, 129, 0.15);  /* Subtle green border */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);  /* Soft shadow for depth */
  /* Gradient border effect using pseudo-element */
  position: relative;  /* Enable positioning for decorative elements */
}

/* Decorative corner accent */
.visitor-info-section::before {
  content: '';  /* Empty content for decorative element */
  position: absolute;  /* Position relative to parent section */
  top: 0;  /* Align to top edge */
  left: 0;  /* Align to left edge */
  width: 80px;  /* Width of accent */
  height: 80px;  /* Height of accent */
  /* Green gradient in top-left corner */
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), transparent);
  border-radius: 20px 0 0 0;  /* Round only top-left corner */
  pointer-events: none;  /* Don't interfere with mouse events */
}

/* Section heading */
.visitor-info-section h3 {
  font-size: 2.5rem;  /* Large heading (~40px) */
  color: var(--accent);  /* Green color matching page theme */
  margin: 0 0 2rem 0;  /* No top margin, 2rem bottom margin */
  text-align: center;  /* Center heading horizontally */
  font-weight: 800;  /* Extra bold weight */
  letter-spacing: -0.02em;  /* Slightly tighter letter spacing */
  position: relative;  /* For decorative underline */
  padding-bottom: 1rem;  /* Space for underline */
}

/* Decorative underline for heading */
.visitor-info-section h3::after {
  content: '';  /* Empty content for decorative element */
  position: absolute;  /* Position relative to heading */
  bottom: 0;  /* Align to bottom of heading */
  left: 50%;  /* Start from horizontal center */
  transform: translateX(-50%);  /* Center the line */
  width: 100px;  /* Width of underline */
  height: 4px;  /* Thickness of underline */
  background: linear-gradient(90deg, transparent, var(--accent), transparent);  /* Gradient underline */
  border-radius: 2px;  /* Slightly rounded ends */
}

/* Paragraphs in visitor info section */
.visitor-info-section p {
  font-size: 1.1rem;  /* Slightly larger than body text (~17.6px) */
  line-height: 1.8;  /* Generous line spacing for readability (180% of font size) */
  color: var(--fg);  /* Use theme foreground color */
  margin-bottom: 1.75rem;  /* Space between paragraphs */
  text-align: justify;  /* Justify text for cleaner edges */
  max-width: 100%;  /* Full width within container */
}

/* First paragraph - special styling for opening */
.visitor-info-section p:first-of-type {
  font-size: 1.15rem;  /* Slightly larger for emphasis */
  font-weight: 500;  /* Medium weight */
}

/* First letter of first paragraph - drop cap effect */
.visitor-info-section p:first-of-type::first-letter {
  font-size: 3.5rem;  /* Large first letter (~56px) */
  font-weight: 700;  /* Bold weight */
  color: var(--accent);  /* Green color matching theme */
  float: left;  /* Float to left of text */
  line-height: 1;  /* Tight line height */
  margin: 0.1rem 0.5rem 0 0;  /* Small spacing around letter */
  font-family: Georgia, serif;  /* Classic serif font for elegance */
}

/* Last paragraph - no bottom margin */
.visitor-info-section p:last-of-type {
  margin-bottom: 0;  /* Remove bottom margin from last paragraph */
}

/* Add reading indicator stripe on left side */
.visitor-info-section {
  border-left: 5px solid var(--accent);  /* Thick green accent stripe on left */
}

/* ===== ATTRACTIONS SECTION ===== */
/* Container for tourist attractions (e.g., museums, parks, landmarks) */
.attractions-section {
  margin-bottom: 3rem;  /* Large space below section before tips */
}

/* Attractions section heading */
.attractions-section h3 {
  font-size: 2rem;  /* Large heading (~32px) */
  color: var(--accent);  /* Green color matching page theme */
  margin: 0 0 2rem 0;  /* No top margin, 2rem bottom margin */
  text-align: center;  /* Center heading horizontally */
}

/* Grid layout for attraction cards */
.attractions-grid {
  display: grid;  /* Use CSS Grid for responsive card layout */
  /* Auto-fit: automatically place cards in rows
     minmax(280px, 1fr): each card minimum 280px, 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(280px, 1fr));
  gap: 1.5rem;  /* 1.5rem (~24px) spacing between cards */
}

/* ===== ATTRACTION CARD ===== */
/* Individual attraction card (e.g., Historic Old Town, Nature Park) */
.attraction-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(11, 138, 95, 0.1);  /* Subtle green 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 */
}

/* Attraction card hover state - lifts card and strengthens shadow/border */
.attraction-card:hover {
  transform: translateY(-8px);  /* Move card up 8 pixels for lift effect */
  box-shadow: 0 12px 24px rgba(11, 138, 95, 0.15);  /* Stronger green-tinted shadow */
  border-color: rgba(11, 138, 95, 0.3);  /* More visible green border (30% opacity) */
}

/* Featured attraction card variant (spans two columns for emphasis) */
.attraction-card.featured {
  grid-column: span 2;  /* Take up 2 column widths instead of 1 (double width) */
  /* Gradient background with very subtle green tint */
  background: linear-gradient(135deg, rgba(11, 138, 95, 0.05), rgba(11, 138, 95, 0.02));
}

/* ===== ATTRACTION ICON ===== */
/* Circular icon container at top of each card */
.attraction-icon {
  font-size: 3rem;  /* Large emoji (~48px) for visual impact */
  margin-bottom: 1rem;  /* Space below icon before heading */
  /* Gradient background with subtle green tint */
  background: linear-gradient(135deg, rgba(11, 138, 95, 0.1), rgba(11, 138, 95, 0.05));
  width: 70px;  /* Fixed width for circular container */
  height: 70px;  /* 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) */
}

/* Attraction name heading */
.attraction-card h4 {
  color: var(--accent);  /* Green color matching page theme */
  margin: 0 0 0.75rem 0;  /* No top margin, 0.75rem bottom margin */
  font-size: 1.35rem;  /* Medium-large heading (~21.6px) */
}

/* Attraction description paragraph */
.attraction-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: 1rem;  /* Space below description before tags */
}

/* ===== ATTRACTION TAGS ===== */
/* Container for category/feature tags (e.g., "Free Entry", "Family-Friendly") */
.attraction-tags {
  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 */
}

/* Individual tag pill */
.tag {
  background: rgba(11, 138, 95, 0.1);  /* Light green background (10% opacity) */
  color: var(--accent);  /* Green 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 */
}

/* ===== TIPS SECTION ===== */
/* Container for practical travel tips at bottom of page */
.tips-section {
  /* Gradient background with very subtle green tint */
  background: linear-gradient(135deg, rgba(11, 138, 95, 0.05), rgba(11, 138, 95, 0.02));
  border: 2px solid rgba(11, 138, 95, 0.15);  /* Subtle green border (15% opacity) */
  border-radius: 16px;  /* Rounded corners */
  padding: 2rem;  /* Generous padding around content */
  margin-bottom: 2rem;  /* Space below section */
}

/* Tips section heading */
.tips-section h3 {
  font-size: 2rem;  /* Large heading (~32px) */
  color: var(--accent);  /* Green color matching page theme */
  margin: 0 0 2rem 0;  /* No top margin, 2rem bottom margin */
  text-align: center;  /* Center heading horizontally */
}

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

/* Individual tip card */
.tip-card {
  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 */
  transition: transform 0.2s ease;  /* Smooth 200ms animation for vertical movement */
}

/* Tip card hover state - subtle lift effect */
.tip-card:hover {
  transform: translateY(-4px);  /* Move card up 4 pixels for subtle lift */
}

/* Icon at top of tip card */
.tip-icon {
  font-size: 2.5rem;  /* Large emoji (~40px) */
  margin-bottom: 1rem;  /* Space below icon before heading */
}

/* Tip card heading */
.tip-card h4 {
  color: var(--accent);  /* Green color matching page theme */
  margin: 0 0 0.75rem 0;  /* No top margin, 0.75rem bottom margin */
  font-size: 1.2rem;  /* Medium heading (~19.2px) */
}

/* Tip card description paragraph */
.tip-card p {
  margin: 0;  /* No margins (card padding provides spacing) */
  color: var(--muted);  /* Muted gray color for secondary text */
  line-height: 1.6;  /* Comfortable line spacing (160% 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 */
  .attraction-card.featured {
    grid-column: span 1;  /* Only span 1 column instead of 2 (normal card width) */
  }
}

/* Small screens (mobile) - single column layout and reduced padding */
@media (max-width: 800px) {
  /* Reduce hero section padding on mobile */
  .hero-section {
    padding: 2rem 1.5rem;  /* Reduced from 3rem 2rem to save space */
  }
  
  /* Smaller hero heading on mobile */
  .hero-content h2 {
    font-size: 2rem;  /* Reduce from 2.5rem to 2rem (~32px) */
  }
  
  /* Attractions grid switches to single column */
  .attractions-grid {
    grid-template-columns: 1fr;  /* Stack cards vertically instead of side-by-side */
  }
  
  /* Tips grid switches to single column */
  .tips-grid {
    grid-template-columns: 1fr;  /* Stack tip cards vertically */
  }
}