/*!
 * GuidedTour Framework v1.0.0
 * A lightweight, static HTML/CSS framework for beautiful city guides
 * https://git.lan.mcharg.org.uk/opencode/GuidedTour
 * 
 * Copyright 2026 opencode
 * Licensed under MIT
 */

/* ============================================================
   CSS CUSTOM PROPERTIES (Theme Variables)
   ============================================================
   These variables should be defined in a theme file (e.g., themes/default.css)
   to enable easy color/font customization without touching structural CSS.
   
   Required theme variables:
   - Color palette (primary, secondary, backgrounds, text, highlights)
   - Font families (serif for headings, sans-serif for body)
   - Optional: spacing, border-radius, transitions
   ============================================================ */

/* ============================================================
   RESET & BASE STYLES
   ============================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--background-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.75; /* Generous line-height for readability in long-form content */
}

/* ============================================================
   TYPOGRAPHY SCALE
   ============================================================ */

/* Headings use serif font for editorial feel */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 300;
}

/* ============================================================
   COMPONENT STYLES
   ============================================================ */

/* ------------------------------------------------------------
   HERO SECTION
   Full-viewport hero with background image, overlay, and centered content
   ------------------------------------------------------------ */

.hero {
  position: relative;
  height: 92vh; /* 92vh leaves room for browser chrome while feeling full-screen */
  min-height: 560px; /* Ensures hero doesn't collapse on very short viewports */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%; /* Slight upward bias to avoid cropping important elements */
  filter: brightness(0.42) saturate(0.8); /* Darkens and desaturates for text legibility */
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(26, 39, 68, 0.25) 0%,
    rgba(26, 39, 68, 0.65) 100%
  ); /* Navy gradient provides additional darkening toward bottom for text contrast */
}

.hero-content {
  position: relative; /* Above overlay and image */
  padding: 0 24px; /* Horizontal padding prevents text touching edges on mobile */
}

.hero-eyebrow {
  font-size: 11px;
  letter-spacing: 0.38em; /* Wide letter-spacing for elegant all-caps treatment */
  text-transform: uppercase;
  color: var(--highlight-color);
  margin-bottom: 20px;
}

.hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(72px, 12vw, 130px); /* Fluid typography: 72px mobile, scales to 130px desktop */
  font-weight: 300;
  line-height: 0.9; /* Tight line-height creates dramatic display type effect */
  color: var(--background-secondary);
  letter-spacing: -0.02em; /* Slight negative tracking for large display type */
}

.hero h1 em {
  font-style: italic;
  color: #e8a87c; /* Warm accent color for italicized city names - could be themeable */
}

.hero-sub {
  margin-top: 28px;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: rgba(245, 240, 232, 0.5); /* Semi-transparent cream for subtle subtitle */
  text-transform: uppercase;
}

.hero-rule {
  width: 50px; /* Small decorative rule */
  height: 1px;
  background: var(--highlight-color);
  margin: 24px auto 0;
}

.hero-credit {
  position: absolute;
  bottom: 16px;
  right: 16px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35); /* Very subtle for photo credits */
  letter-spacing: 0.05em;
}

/* ------------------------------------------------------------
   INTRO SECTION
   Centered introduction text with italic serif for editorial voice
   ------------------------------------------------------------ */

.intro {
  max-width: 680px; /* Optimal line length for readability (60-75 characters) */
  margin: 64px auto 0; /* Large top margin creates breathing room after hero */
  padding: 0 32px;
  text-align: center;
}

.intro p {
  font-family: var(--font-serif);
  font-size: 22px; /* Larger than body text to establish importance */
  font-weight: 300;
  line-height: 1.6;
  color: var(--secondary-accent);
  font-style: italic; /* Italic serif signals editorial introduction */
}

.intro-note {
  margin-top: 20px;
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
}

/* ------------------------------------------------------------
   DIVIDER
   Horizontal rule with centered symbol (Roman numerals, etc.)
   ------------------------------------------------------------ */

.divider {
  display: flex;
  align-items: center;
  gap: 16px; /* Space between lines and central mark */
  max-width: 780px;
  margin: 56px auto; /* Generous vertical spacing separates sections */
  padding: 0 32px;
}

.divider-line {
  flex: 1; /* Lines expand to fill available space */
  height: 1px;
  background: var(--background-tertiary);
}

.divider-mark {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--primary-accent);
  font-style: italic;
}

/* ------------------------------------------------------------
   FULL-BLEED PHOTO BREAK
   Full-width image section with overlay caption
   ------------------------------------------------------------ */

.photo-break {
  width: 100%;
  height: 480px; /* Fixed height creates consistent rhythm; can be overridden inline */
  overflow: hidden;
  position: relative;
}

.photo-break img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.photo-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px 40px 20px; /* Generous top padding creates gradient fade area */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7) 0%,
    transparent 100%
  ); /* Gradient ensures text legibility over any image */
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.photo-caption-text {
  font-family: var(--font-serif);
  font-size: 19px;
  font-style: italic;
  color: rgba(245, 240, 232, 0.92);
}

.photo-credit-small {
  font-size: 10px;
  color: rgba(245, 240, 232, 0.38);
  letter-spacing: 0.08em;
  text-align: right;
  flex-shrink: 0; /* Prevents credit from wrapping */
  margin-left: 16px;
}

/* ------------------------------------------------------------
   INLINE STOP PHOTO
   Image within stop content, with subtle hover zoom effect
   ------------------------------------------------------------ */

.stop-photo {
  width: 100%;
  height: 290px; /* Consistent aspect ratio across stop photos */
  overflow: hidden;
  border-radius: 2px; /* Subtle rounding softens edges */
  position: relative;
  margin: 18px 0 6px;
}

.stop-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.7s ease; /* Slow, smooth zoom creates quality feel */
}

.stop-photo:hover img {
  transform: scale(1.04); /* Subtle zoom on hover (4% larger) */
}

.sp-credit {
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.08em;
}

/* ------------------------------------------------------------
   2-UP PHOTO PAIR
   Two side-by-side images (stacks on mobile)
   ------------------------------------------------------------ */

.photo-pair {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Equal width columns */
  gap: 8px; /* Small gap creates breathing room without excessive separation */
  margin: 18px 0 6px;
}

.photo-pair .stop-photo {
  margin: 0; /* Removes default stop-photo margin in pair context */
  height: 250px; /* Slightly shorter than solo photos for better proportion */
}

/* ------------------------------------------------------------
   DAY SECTION
   Container for a full day's itinerary
   ------------------------------------------------------------ */

.day-section {
  max-width: 820px; /* Slightly wider than intro for itinerary content */
  margin: 0 auto 72px; /* Large bottom margin separates days */
  padding: 0 32px;
}

.day-header {
  margin-bottom: 40px; /* Space before first stop */
  border-left: 3px solid var(--primary-accent); /* Vertical accent bar */
  padding-left: 24px;
}

.day-label {
  font-size: 10px;
  letter-spacing: 0.4em; /* Extra-wide tracking for small caps effect */
  text-transform: uppercase;
  color: var(--primary-accent);
  margin-bottom: 6px;
}

.day-title {
  font-family: var(--font-serif);
  font-size: clamp(34px, 5vw, 50px); /* Fluid: 34px mobile to 50px desktop */
  font-weight: 300;
  line-height: 1.1;
  color: var(--secondary-accent);
}

.day-subtitle {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   STOP (Itinerary Item)
   Two-column grid: numbered circle + content, with connecting line
   ------------------------------------------------------------ */

.stop {
  margin-bottom: 48px; /* Generous spacing between stops */
  display: grid;
  grid-template-columns: 80px 1fr; /* Fixed width for number column, fluid for content */
  gap: 0 28px; /* Horizontal gap only */
  position: relative;
}

.stop::after {
  content: '';
  position: absolute;
  left: 39px; /* Centers line under 40px circle (39px = center of 80px column minus 1px line) */
  top: 44px; /* Starts just below circle */
  bottom: -24px; /* Extends into gap between stops */
  width: 1px;
  background: var(--background-tertiary);
}

.stop:last-child::after {
  display: none; /* No connecting line after final stop */
}

.stop-number {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2px; /* Subtle vertical alignment with content baseline */
}

.stop-circle {
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--primary-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--primary-accent);
  background: var(--background-primary); /* Solid background prevents line showing through */
  flex-shrink: 0;
}

.stop-content h3 {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 400;
  color: var(--secondary-accent);
  line-height: 1.2;
  margin-bottom: 6px;
}

.stop-meta {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.stop-content p {
  font-size: 15px;
  line-height: 1.8; /* Generous line-height for comfortable reading */
  color: #3D3630; /* Slightly warmer than pure black for softer feel */
  margin-bottom: 12px;
}

/* ------------------------------------------------------------
   ATLAS CARD
   Highlighted deep-dive content with dark background
   ------------------------------------------------------------ */

.atlas-card {
  margin: 16px 0 4px;
  background: var(--secondary-accent);
  border-radius: 2px;
  padding: 20px 24px;
  color: var(--background-secondary);
  display: grid;
  grid-template-columns: auto 1fr; /* Icon column auto-sizes, content column fills */
  gap: 14px;
  align-items: start;
}

.atlas-icon {
  width: 36px;
  height: 36px;
  background: var(--primary-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px; /* Slight vertical adjustment for optical alignment */
}

.atlas-label {
  font-size: 9px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--highlight-color);
  margin-bottom: 4px;
}

.atlas-card h4 {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 400;
  color: var(--background-secondary);
  margin-bottom: 6px;
  line-height: 1.3;
}

.atlas-card p {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(245, 240, 232, 0.75); /* Semi-transparent for softer contrast on dark bg */
  margin: 0;
}

/* ------------------------------------------------------------
   TIP BOX
   Light background callout for practical advice
   ------------------------------------------------------------ */

.tip {
  background: var(--background-tertiary);
  border-left: 3px solid var(--highlight-color);
  padding: 14px 18px;
  margin: 16px 0 4px;
  border-radius: 0 2px 2px 0; /* Rounded on right side only */
}

.tip-label {
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--highlight-color);
  font-weight: 600;
  margin-bottom: 4px;
}

.tip p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}

/* ------------------------------------------------------------
   BRIDGE TEXT
   Transitional paragraph between stops
   ------------------------------------------------------------ */

.bridge {
  margin: -16px 0 40px 108px; /* Negative top pulls closer to previous stop; left aligns with content column */
  font-family: var(--font-serif);
  font-size: 18px;
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.6;
  padding-right: 24px;
}

/* ------------------------------------------------------------
   EVENING BLOCK
   Highlighted suggestion for end-of-day activities
   ------------------------------------------------------------ */

.evening-block {
  background: linear-gradient(
    135deg,
    var(--primary-accent) 0%,
    #8B3218 100%
  ); /* Gradient from primary accent to darker variant */
  color: var(--background-secondary);
  padding: 28px 32px;
  border-radius: 2px;
  margin: 8px 0 0 108px; /* Left aligns with content column */
}

.ev-label {
  font-size: 9px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.6);
  margin-bottom: 8px;
}

.evening-block h4 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 300;
  margin-bottom: 10px;
  color: var(--background-secondary);
}

.evening-block p {
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(245, 240, 232, 0.85);
  margin: 0;
}

/* ------------------------------------------------------------
   QUOTE BLOCK
   Full-width quote section with attribution
   ------------------------------------------------------------ */

.day-quote {
  background: var(--background-tertiary);
  padding: 48px 32px; /* Generous padding creates breathing room */
  text-align: center;
  margin: 0 0 72px; /* Large bottom margin separates from next section */
}

.day-quote blockquote {
  max-width: 600px;
  margin: 0 auto;
  font-family: var(--font-serif);
  font-size: 26px;
  font-style: italic;
  font-weight: 300;
  color: var(--secondary-accent);
  line-height: 1.5;
}

.day-quote cite {
  display: block;
  margin-top: 16px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-style: normal; /* Overrides default italic for <cite> */
}

/* ------------------------------------------------------------
   FOOTER
   Dark footer with centered credits
   ------------------------------------------------------------ */

footer {
  background: var(--secondary-accent);
  color: rgba(245, 240, 232, 0.5);
  text-align: center;
  padding: 48px 32px;
  font-size: 12px;
  letter-spacing: 0.1em;
}

footer span {
  color: var(--highlight-color);
}

.credits {
  margin-top: 16px;
  font-size: 10px;
  line-height: 1.9;
  color: rgba(245, 240, 232, 0.28);
}

/* ============================================================
   RESPONSIVE MEDIA QUERIES
   ============================================================
   Mobile breakpoint at 620px adjusts layout for smaller screens
   ============================================================ */

@media (max-width: 620px) {
  /* Narrower stop grid on mobile */
  .stop {
    grid-template-columns: 56px 1fr; /* Reduced from 80px to save horizontal space */
    gap: 0 16px; /* Reduced gap */
  }

  .stop::after {
    left: 27px; /* Repositions connecting line for narrower column */
  }

  /* Bridge and evening block adjust left margin to match narrower layout */
  .bridge,
  .evening-block {
    margin-left: 72px; /* 56px column + 16px gap = 72px */
  }

  /* Reduced horizontal padding on mobile */
  .day-section {
    padding: 0 20px;
  }

  .intro,
  .divider {
    padding: 0 20px;
  }

  /* Photo components adjust height for mobile viewports */
  .photo-break {
    height: 280px; /* Reduced from 480px */
  }

  .stop-photo {
    height: 210px; /* Reduced from 290px */
  }

  /* Photo pair stacks vertically on mobile */
  .photo-pair {
    grid-template-columns: 1fr;
  }

  .photo-pair .stop-photo {
    height: 210px;
  }

  /* Photo caption adjusts padding for mobile */
  .photo-caption {
    padding: 24px 20px 14px;
  }

  .photo-caption-text {
    font-size: 15px; /* Slightly smaller on mobile */
  }
}