/* Style_Lunch.css — Styling specifically for the Lunch (restaurants) page
   This file defines the visual design for the restaurant recommendations,
   including restaurant cards with images/badges/features and dining tips section. */

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

/* ===== PAGE ACCENT COLOR ===== */
/* Override the default accent color for this page - using warm orange theme for Lunch */
:root {
  --accent: #f59e0b;  /* Vibrant orange - used for headings, badges, tags 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 */
  /* Warm gradient with subtle radial overlays for texture */
  background: 
    radial-gradient(circle at 30% 70%, rgba(245, 158, 11, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(251, 191, 36, 0.12) 0%, transparent 50%),
    linear-gradient(135deg, #fffbeb 0%, #fef3c7 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);  /* Orange 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 */
}

/* ===== RESTAURANTS GRID ===== */
/* Container for restaurant cards */
.restaurants-grid {
  display: grid;  /* Use CSS Grid for stacking */
  gap: 2rem;  /* 2rem (~32px) spacing between cards */
  margin-bottom: 3rem;  /* Large space below grid before next section */
}

/* ===== RESTAURANT CARD ===== */
/* Individual restaurant card with two-column layout (image + content) */
.restaurant-card {
  background: var(--card-bg);  /* Use theme card background (white in light mode, dark in dark mode) */
  border-radius: 20px;  /* More rounded corners for modern card appearance */
  overflow: hidden;  /* Clip children to rounded corners (important for image area) */
  border: 2px solid rgba(245, 158, 11, 0.12);  /* Subtle orange border */
  /* Smooth transitions for all animatable properties: */
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);  /* Smooth easing */
  box-shadow: var(--shadow-sm);  /* Theme shadow */
  display: grid;  /* Use CSS Grid for two-column layout */
  grid-template-columns: 200px 1fr;  /* Left column (image) fixed 200px, right column (content) flexible */
  gap: 0;  /* No gap between columns (they're touching) */
}

/* Restaurant card hover state - lifts slightly and strengthens shadow/border */
.restaurant-card:hover {
  transform: translateY(-8px);  /* Lift effect */
  box-shadow: var(--shadow-lg);  /* Enhanced shadow */
  border-color: rgba(245, 158, 11, 0.3);  /* Brighter border */
}
.restaurant-card:hover {
  transform: translateY(-4px);  /* Move card up 4 pixels for subtle lift effect */
  box-shadow: 0 12px 24px rgba(217, 119, 6, 0.15);  /* Stronger orange-tinted shadow */
  border-color: rgba(217, 119, 6, 0.3);  /* More visible orange border (30% opacity) */
}

/* ===== RESTAURANT IMAGE AREA ===== */
/* Left side of card - contains emoji placeholder or image */
.restaurant-image {
  position: relative;  /* Position context for absolutely positioned badge */
  /* Gradient background with subtle orange tint */
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.1), rgba(217, 119, 6, 0.05));
  display: flex;  /* Use flexbox to center emoji */
  align-items: center;  /* Center emoji vertically */
  justify-content: center;  /* Center emoji horizontally */
}

/* Placeholder emoji image (shows when no real photo available) */
.placeholder-image {
  font-size: 5rem;  /* Very large emoji (~80px) to fill image area */
}

/* Badge overlay on restaurant image (e.g., "Popular", "New") */
.restaurant-badge {
  position: absolute;  /* Position relative to restaurant-image container */
  top: 1rem;  /* 1rem from top edge */
  left: 0;  /* Flush with left edge of card */
  background: var(--accent);  /* Solid orange background */
  color: white;  /* White text for contrast */
  padding: 0.35rem 0.75rem;  /* Vertical 0.35rem, horizontal 0.75rem padding */
  font-size: 0.8rem;  /* Small text (~12.8px) */
  font-weight: 600;  /* Semi-bold for readability */
  border-radius: 0 4px 4px 0;  /* Rounded right corners only (left is flush with edge) */
}

/* ===== RESTAURANT CONTENT AREA ===== */
/* Right side of card - contains restaurant information */
.restaurant-content {
  padding: 1.5rem;  /* Padding around content */
}

/* Restaurant name heading */
.restaurant-content h3 {
  margin: 0 0 0.75rem 0;  /* No top margin, 0.75rem bottom margin */
  color: var(--accent);  /* Orange color matching page theme */
  font-size: 1.5rem;  /* Large heading (~24px) */
}

/* Restaurant description paragraph */
.restaurant-description {
  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 */
}

/* ===== RESTAURANT FEATURES ===== */
/* Container for feature tags (e.g., "Vegetarian Options", "Outdoor Seating") */
.restaurant-features {
  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 */
  margin-bottom: 1rem;  /* Space below features before info */
}

/* Individual feature tag pill */
.feature-tag {
  background: rgba(217, 119, 6, 0.1);  /* Light orange background (10% opacity) */
  color: var(--accent);  /* Orange 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 */
}

/* ===== RESTAURANT INFO ROW ===== */
/* Container for rating and price info */
.restaurant-info {
  display: flex;  /* Use flexbox for horizontal layout */
  gap: 1.5rem;  /* 1.5rem spacing between info items */
  margin-bottom: 1rem;  /* Space below info before link */
  color: var(--muted);  /* Muted gray color for secondary information */
  font-size: 0.95rem;  /* Slightly smaller than body text (~15.2px) */
}

/* Individual info item (icon + text, e.g., "⭐ 4.5" or "€€") */
.info-item {
  display: flex;  /* Use flexbox for horizontal layout */
  align-items: center;  /* Center icon and text vertically */
  gap: 0.25rem;  /* Small gap between icon and text */
}

/* ===== RESTAURANT LINK ===== */
/* "View Menu" or "Visit Website" link button */
.restaurant-link {
  display: inline-block;  /* Allow padding and behave like button while staying inline */
  color: var(--accent);  /* Orange text matching page theme */
  text-decoration: none;  /* Remove underline */
  font-weight: 600;  /* Semi-bold for emphasis */
  padding: 0.6rem 1.25rem;  /* Vertical 0.6rem, horizontal 1.25rem padding */
  border-radius: 8px;  /* Rounded corners */
  background: rgba(217, 119, 6, 0.1);  /* Light orange background (10% opacity) */
  /* Smooth transitions for hover effects: */
  transition: all 0.2s ease;  /* 200ms animation for all properties */
}

/* Restaurant link hover state - becomes solid orange and slides right */
.restaurant-link:hover {
  background: var(--accent);  /* Solid orange background */
  color: white;  /* White text for contrast */
  transform: translateX(4px);  /* Slide 4 pixels to the right (→ arrow effect) */
}

/* ===== TIPS SECTION ===== */
/* Container for dining tips at bottom of page */
.tips-section {
  /* Gradient background with very subtle orange tint */
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.05), rgba(217, 119, 6, 0.02));
  border: 2px solid rgba(217, 119, 6, 0.15);  /* Subtle orange 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 {
  color: var(--accent);  /* Orange color matching page theme */
  margin: 0 0 1.5rem 0;  /* No top margin, 1.5rem bottom margin */
  font-size: 1.5rem;  /* Large heading (~24px) */
}

/* Grid layout for tip cards */
.tips-grid {
  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-card {
  background: var(--card-bg);  /* Use theme card background */
  padding: 1.25rem;  /* 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-card strong {
  color: var(--accent);  /* Orange 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.05rem;  /* Slightly larger than body text (~16.8px) */
}

/* 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.5;  /* Comfortable line spacing (150% of font size) */
}

/* ===== RESPONSIVE DESIGN ===== */
/* Adjustments for tablet and mobile screens */
@media (max-width: 800px) {
  /* Smaller main heading on mobile */
  .page-header h2 {
    font-size: 1.75rem;  /* Reduce from 2.25rem to 1.75rem (~28px) */
  }
  
  /* Restaurant card switches to single column (stack image on top of content) */
  .restaurant-card {
    grid-template-columns: 1fr;  /* One column instead of two (image + content stack vertically) */
  }
  
  /* Restaurant image area gets minimum height when stacked on top */
  .restaurant-image {
    min-height: 200px;  /* Ensure image area has decent height even when full width */
  }
  
  /* Tips grid switches to single column */
  .tips-grid {
    grid-template-columns: 1fr;  /* Stack tip cards vertically */
  }
}