/* ==========================================================================
   The Leo's Voyage — Responsive Styles & Media Queries
   ========================================================================== */

/* --------------------------------------------------------------------------
   Large Tablets & Small Laptops (<= 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .site-nav {
    display: none;
  }

  .mobile-toggle {
    display: flex;
  }

  .dest-card-large,
  .dest-card-medium,
  .dest-card-third {
    grid-column: span 6;
  }

  .ticketing-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .package-detail-layout {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .package-sidebar-card {
    position: static;
    top: auto;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }

  .footer-brand {
    grid-column: span 2;
  }

  .process-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .styles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-grid { grid-template-columns: 1fr; }

  .inclusions-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

/* Keep the seven-link desktop navigation composed at common laptop widths. */
@media (min-width: 1025px) and (max-width: 1320px) {
  .header-inner { gap: var(--space-md); }
  .nav-list { gap: clamp(0.65rem, 1.5vw, 1.15rem); }
  .nav-link { font-size: 0.8rem; }
  .header-actions .btn { padding-inline: 0.85rem; }
}

/* --------------------------------------------------------------------------
   Tablets & Mobile Landscape (<= 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --space-4xl: 4rem;
    --space-5xl: 5rem;
  }

  .header-inner {
    height: 70px;
  }

  .brand-logo-img {
    height: 44px;
  }

  .hero-section {
    min-height: 85vh;
    padding-top: 100px;
  }

  .destinations-grid {
    grid-template-columns: 1fr;
  }

  .dest-card-large,
  .dest-card-medium,
  .dest-card-third {
    grid-column: span 1;
    min-height: 320px;
  }

  .packages-grid {
    grid-template-columns: 1fr;
  }

  .flight-form-card {
    padding: var(--space-lg);
  }

  .flight-form-grid {
    grid-template-columns: 1fr;
  }

  .form-group.full-width {
    grid-column: span 1;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .footer-brand {
    grid-column: span 1;
  }

  .floating-whatsapp {
    bottom: var(--space-md);
    right: var(--space-md);
    padding: 0.65rem 1rem;
    font-size: var(--font-size-xs);
  }

  .floating-whatsapp span {
    display: none;
  }

  .package-card-actions {
    grid-template-columns: 1fr;
  }

  .section-header-split { display: block; margin-bottom: var(--space-2xl); }
  .section-header-split .btn { margin-top: var(--space-lg); }
  .features-grid, .styles-grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .feature-card { padding: var(--space-lg) 0; }
  .style-card { min-height: 280px; }
  .article-card { grid-template-columns: 1fr; }
  .article-card-img { min-height: 220px; max-height: 280px; }
  .filter-bar { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: var(--space-xs); }
  .filter-btn { flex: 0 0 auto; }
}

/* --------------------------------------------------------------------------
   Small Mobile Devices (<= 480px / 375px / 320px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-badge-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .destination-card {
    min-height: 290px;
    padding: var(--space-lg);
  }

  .destination-card-title {
    font-size: 1.6rem;
  }

  .destination-card-desc {
    max-width: 100%;
  }

  .package-card-body {
    padding: var(--space-lg);
  }

  .footer-bottom-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }
}

/* Final design-system refinement: shared by every static page. */
@media (min-width: 769px) {
  .section { padding-top: clamp(5.5rem, 8vw, 7.5rem); padding-bottom: clamp(5.5rem, 8vw, 7.5rem); }
  .section-sm { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .section-header { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
}

.form-group { gap: 0.45rem; }
.form-label { font-size: 0.72rem; letter-spacing: 0.08em; }
.form-input::placeholder { color: var(--color-muted-light); opacity: 1; }
.flight-form-card, .package-sidebar-card { box-shadow: var(--shadow-md); }
.package-card-img-wrap { height: clamp(210px, 19vw, 250px); }
.article-card-img { aspect-ratio: 3 / 2; object-fit: cover; }
.page-hero, .destination-hero, .package-hero { min-height: min(68vh, 680px); }

/* One aligned page-title system for listings and service pages. Inline padding
   remains for header clearance; every title block uses the same visual rhythm. */
body > .section.bg-cream[style*="padding-top: 130px"] { padding-bottom: clamp(3.5rem, 6vw, 5.5rem) !important; }
body > .section.bg-cream[style*="padding-top: 130px"] > :is(.container, .container-narrow) { max-width: 880px; text-align: center; }
body > .section.bg-cream[style*="padding-top: 130px"] .breadcrumb { justify-content: center !important; }
body > .section.bg-cream[style*="padding-top: 130px"] .section-desc,
body > .section.bg-cream[style*="padding-top: 130px"] p { margin-inline: auto !important; }
body > .section.bg-cream[style*="padding-top: 130px"] h1 { max-width: 760px; margin-inline: auto; }

/* Consistent readable measure in editorial/detail content despite legacy inline styles. */
.package-detail-layout > :first-child > p { max-width: 72ch; }
.package-detail-layout h2, .package-detail-layout h3 { letter-spacing: -0.015em; }

@media (hover: hover) and (pointer: fine) {
  .brand-logo:hover .brand-logo-img { transform: scale(1.01); }
  .nav-link:hover::after { width: 100%; }
}

@media (max-width: 768px) {
  .section { padding-top: 4rem; padding-bottom: 4rem; }
  .section-header { margin-bottom: 2.5rem; }
  .btn-lg { min-height: 54px; padding: 0.85rem 1.25rem; }
}

@media (max-width: 1024px) {
  [style*="grid-template-columns: 1fr 1.25fr"], [style*="grid-template-columns: 1.25fr 1fr"] { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* --------------------------------------------------------------------------
   Small-screen layout pass — shared page shell and ticketing conversion flow
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --container-padding: 1rem;
    --space-3xl: 3rem;
  }

  html, body { max-width: 100%; overflow-x: clip; }
  body { font-size: 0.975rem; }
  .container, .container-narrow, .container-wide { padding-inline: var(--container-padding); }
  .section { padding-block: 3.75rem; }
  .section-sm { padding-block: 2.5rem; }

  /* All legacy inline desktop grids become genuine single-column mobile flows. */
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }

  body > .section.bg-cream[style*="padding-top: 130px"] {
    padding-top: 6.75rem !important;
    padding-bottom: 3.5rem !important;
  }

  body > .section.bg-cream[style*="padding-top: 130px"] h1 {
    max-width: 15ch;
    font-size: clamp(2.45rem, 11vw, 3.35rem);
    line-height: 1.02;
  }

  .header-inner { height: 64px; }
  .brand-logo-img { height: 40px; }
  .header-actions .btn { display: none; }
  .mobile-toggle { width: 42px; height: 42px; }
  .mobile-nav-drawer { width: min(88vw, 360px); padding: 88px var(--space-lg) var(--space-lg); }

  .hero-section { min-height: auto; padding-top: 8rem; padding-bottom: 4.5rem; }
  .hero-title { font-size: clamp(2.65rem, 13vw, 4rem); line-height: 0.98; }
  .hero-subtitle { margin-bottom: var(--space-xl); }
  .hero-badge-strip { margin-top: var(--space-2xl); padding-top: var(--space-lg); }

  /* Ticketing is intentionally spacious and single-column on a phone. */
  .ticketing-section::before { display: none; }
  .ticketing-grid { gap: var(--space-xl); }
  .ticketing-grid, .flight-form-card, .flight-form-grid, .form-group { min-width: 0; }
  .ticketing-info h2 { font-size: clamp(2.15rem, 10vw, 3rem); line-height: 1.05; }
  .ticketing-info p { margin-bottom: var(--space-lg); }
  .ticketing-checklist { gap: 0.65rem; margin-bottom: 0; }
  .ticketing-check-item { align-items: flex-start; gap: 0.65rem; font-size: 0.9rem; line-height: 1.45; }
  .ticketing-check-item svg { flex: 0 0 18px; margin-top: 0.15rem; }
  .flight-form-card { padding: 1.25rem; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
  .flight-form-card h3 { font-size: 1.75rem; }
  .flight-form-card p.form-sub { font-size: 0.78rem; line-height: 1.5; }
  .flight-form-grid { gap: 0.9rem; }
  .form-group { gap: 0.45rem; }
  .form-label { font-size: 0.72rem; }
  .form-input, .form-select { min-height: 52px; padding-inline: 0.9rem; font-size: 16px; }
  .form-checkbox-label { align-items: flex-start; padding: 0.25rem 0; font-size: 0.8rem; line-height: 1.45; }
  .form-checkbox-label input { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 0.1rem; }
  .flight-form-card .btn[type="submit"] { min-height: 56px; font-size: 0.95rem; white-space: normal; }

  .package-detail-layout { gap: var(--space-xl); }
  .package-sidebar-card { padding: var(--space-lg); }
  .itinerary-timeline { padding-left: 1.75rem; gap: var(--space-lg); }
  .itinerary-day-title { align-items: flex-start; gap: var(--space-sm); font-size: 1rem; }
  .inclusions-box { padding: var(--space-lg); }
  .package-card-actions { grid-template-columns: 1fr; }
  .package-card-actions .btn { width: 100%; }

  .floating-whatsapp { width: 48px; height: 48px; padding: 0; justify-content: center; bottom: 1rem; right: 1rem; box-shadow: var(--shadow-md); }
  .floating-whatsapp svg { width: 22px; height: 22px; }
  .site-footer { padding-top: 3.5rem; }
  .footer-top { gap: 2.25rem; }
  .footer-bottom-row p { line-height: 1.6; }
}

@media (max-width: 374px) {
  .hero-title { font-size: 2.55rem; }
  .flight-form-card { padding: 1rem; }
  .btn { padding-inline: 1rem; }
}