/* === Travelomore base === */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; }
h1, h2, h3, h4, .font-headline, .brand-logo { font-family: 'Plus Jakarta Sans', sans-serif; }

/* === Material Icons === */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

/* === No scrollbar === */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* === Form validation states === */
.field-invalid { border: 2px solid #E60023 !important; background-color: #fff5f5 !important; }
.field-valid   { border: 2px solid #16a34a !important; background-color: #f0fdf4 !important; }
.field-error   { color: #dc2626; font-size: 0.75rem; margin-top: 0.25rem; margin-left: 0.5rem; display: none; }
.field-error.show { display: block; }

/* === Hero-mask used by destination landing pages === */
.hero-mask { clip-path: polygon(0 0, 100% 0, 100% 92%, 75% 92%, 72% 100%, 0 100%); border-radius: 3rem; }
@media (max-width: 768px) { .hero-mask { clip-path: none; border-radius: 1rem; } }

/* === Shorts strip animation (Storefront + destination pages) === */
.shorts-track { display: flex; gap: 1.5rem; animation: shorts-scroll 40s linear infinite; width: max-content; }
.shorts-track:hover { animation-play-state: paused; }
@keyframes shorts-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-50% - 0.75rem)); } }

/* === Carousel (Home) === */
@keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.carousel-track { display: flex; width: max-content; animation: scroll-left 40s linear infinite; }
.carousel-track:hover { animation-play-state: paused; }

/* === Hero deck cards (Home) === */
.hero-deck-card:nth-child(1) { transform: rotate(-15deg) translateX(-60px) translateY(20px); z-index: 10; }
.hero-deck-card:nth-child(2) { transform: rotate(-5deg)  translateX(-20px) translateY( 5px); z-index: 20; }
.hero-deck-card:nth-child(3) { transform: rotate( 5deg)  translateX( 20px) translateY(-10px); z-index: 30; }
.hero-deck-card:nth-child(4) { transform: rotate(12deg)  translateX( 50px) translateY( 15px); z-index: 40; }

/* === Storefront shorts grid === */
#page-content .shorts-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
@media (max-width: 1024px) { #page-content .shorts-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { #page-content .shorts-grid { grid-template-columns: repeat(2, 1fr); } }

/* === Spiti detail page card-shuffle animations === */
@keyframes shuffle-top    { 0%,100%{transform:translate(0,0)rotate(-6deg)scale(1);z-index:30;opacity:1} 33%{transform:translate(25%,-10%)rotate(10deg)scale(.95);z-index:30;opacity:1} 35%{transform:translate(25%,-10%)rotate(10deg)scale(.95);z-index:10;opacity:.8} 66%{transform:translate(0,0)rotate(6deg)scale(.9);z-index:10;opacity:.8} 85%{transform:translate(0,0)rotate(2deg)scale(.95);z-index:20;opacity:.9} }
@keyframes shuffle-mid    { 0%,100%{transform:translate(0,0)rotate(2deg)scale(.95);z-index:20} 33%{transform:translate(0,0)rotate(-6deg)scale(1);z-index:30} 66%{transform:translate(25%,-10%)rotate(10deg)scale(.95);z-index:30} 68%{transform:translate(25%,-10%)rotate(10deg)scale(.95);z-index:10} }
@keyframes shuffle-bottom { 0%,100%{transform:translate(0,0)rotate(6deg)scale(.9);z-index:10} 33%{transform:translate(0,0)rotate(2deg)scale(.95);z-index:20} 66%{transform:translate(0,0)rotate(-6deg)scale(1);z-index:30} }
.animate-card-top    { animation: shuffle-top    9s infinite ease-in-out; }
.animate-card-mid    { animation: shuffle-mid    9s infinite ease-in-out; }
.animate-card-bottom { animation: shuffle-bottom 9s infinite ease-in-out; }
.paused              { animation-play-state: paused !important; }

/* === Editorial grid (Home) === */
.editorial-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; }

/* === Boxed section (Itinerary builder) === */
.boxed-section {
  background-color: #ffffff;
  border: 1px solid #efeded;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
  border-radius: 1.5rem;
}

/* === SVG chart (Partner Corner) === */
.area-chart-gradient { fill: url(#chartGradient); }
.area-chart-stroke   { stroke: #E60023; stroke-width: 3; }

/* === About page === */
.active-tab     { color: #E60023; background-color: rgba(230,0,35,0.05); font-weight: 700; }
.brand-gradient { background: linear-gradient(135deg, #E60023 0%, #ff4d6d 100%); }
.glass-nav      { backdrop-filter: blur(20px); background: rgba(255,255,255,0.85); }
.tonal-shift    { transition: background-color 0.3s ease; }
.fill-1         { font-variation-settings: 'FILL' 1; }

/* ════════════════════════════════════════════════════════════════════
   ITINERARY-PAGE TEMPLATE — See/Read toggle + carousels + scroll-aware nav
   Used by /itineraries/*.html. Reusable across all destinations.
   ════════════════════════════════════════════════════════════════════ */

/* Hero gradient */
.hero-gradient { background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.6) 100%); }

/* Hero auto-cycling carousel — 3 slides, 3-second hold each, 1.5s crossfade.
   Total cycle = 3 slides × (3s hold + 1.5s fade) = 13.5s. Never stops. */
.hero-slide { opacity: 0; animation: hero-fade 13.5s infinite; }
.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: 4.5s; }
.hero-slide:nth-child(3) { animation-delay: 9s; }
@keyframes hero-fade {
  0%   { opacity: 0; }
  3%   { opacity: 1; }     /* fade in fast */
  30%  { opacity: 1; }     /* hold ~3s of the 13.5s cycle */
  40%  { opacity: 0; }     /* fade out */
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { animation: none; }
  .hero-slide:not(.active) { display: none; }
}

/* See/Read mode panes — only the active pane is visible */
[data-mode-pane] { display: none; }
body[data-mode="see"]  [data-mode-pane="see"]  { display: block; }
body[data-mode="read"] [data-mode-pane="read"] { display: block; }

/* Toggle pill — slides under the active button */
#mode-pill { transform: translateX(0); }
body[data-mode="read"] #mode-pill { transform: translateX(100%); }
#mode-toggle [data-mode-target] { color: rgb(94 63 60 / 0.7); }
body[data-mode="see"]  #mode-toggle [data-mode-target="see"]  { color: rgb(27 28 28); }
body[data-mode="read"] #mode-toggle [data-mode-target="read"] { color: rgb(27 28 28); }

/* Smooth fade between modes (mode pane content) */
[data-mode-pane] { animation: mode-fade-in 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes mode-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Master nav over hero — transparent on top of the page; site.js toggles .scrolled when scrolled */
body[data-mode="see"]  #master-nav,
body[data-mode="read"] #master-nav {
  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(0px);
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
body[data-mode="see"]  #master-nav:not(.scrolled) .nav-btn,
body[data-mode="read"] #master-nav:not(.scrolled) .nav-btn { color: white; }
body[data-mode="see"]  #master-nav:not(.scrolled) .brand-logo,
body[data-mode="read"] #master-nav:not(.scrolled) .brand-logo { color: white; }
#master-nav.scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  border-bottom-color: rgb(221 221 221);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Airbnb / Medium pattern — slide nav off-screen when scrolling DOWN, reveal on UP */
#master-nav { transform: translateY(0); transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; will-change: transform; }
#master-nav.nav-hidden { transform: translateY(-110%); }

/* Carousels — track scrolls horizontally with snap; nav buttons live in section header */
[data-carousel-track] { scrollbar-width: none; }
[data-carousel-track]::-webkit-scrollbar { display: none; }
[data-carousel-prev]:disabled,
[data-carousel-next]:disabled { opacity: 0.35; cursor: not-allowed; }

/* Floating CTA — drop shadow + safe-area padding for iOS */
@supports (padding: env(safe-area-inset-bottom)) {
  body { padding-bottom: env(safe-area-inset-bottom); }
}

/* Mobile typography tightening for hero */
@media (max-width: 640px) {
  body[data-mode] section.h-\[70vh\] h1 { font-size: clamp(3rem, 14vw, 5rem); line-height: 0.95; }
}