/**
 * layout.css - Page scaffolding: containers, section rhythm, structural grids
 */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--margin-inline);
}

.container--narrow {
  max-width: var(--container-content);
}

.section {
  position: relative;
  padding-block: var(--space-3xl);
}

.section--tight {
  padding-block: var(--space-2xl);
}

.section--surface {
  background-color: var(--color-surface-container-low);
}

.section--dark {
  background-color: var(--color-deep-forest);
  color: var(--color-background);
}

.section-head {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.section-head--left {
  margin-inline: 0;
  text-align: left;
}

/* ---- Hero ---- */
.hero {
  position: relative;
  /* height: 100vh; */
  min-height: 640px;
  width: 100%;
  display: grid;
  justify-items: center;
  align-items: center;
  padding-top: clamp(85px, 10vh, 110px);
  padding-bottom: var(--space-md);
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.15);
}

.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--color-background) 0%, rgba(18, 37, 28, 0.15) 30%, rgba(10, 15, 12, 0.35) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 1800px;
  max-height: 100%;
  overflow: hidden;
  padding-inline: var(--margin-inline);
  padding-top: 20px;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}

/* ---- Location ---- */
.location {
  position: relative;
  overflow: hidden;
}

.location-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.location-media {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-sm);
  height: clamp(420px, 60vw, 620px);
}

.location-media-primary {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.location-media-secondary {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-sm);
  height: 100%;
}

.location-media-secondary > div {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.location-media img,
.location-media-secondary img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.location-topo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    repeating-radial-gradient(circle at 15% 25%, transparent 0, transparent 34px, rgba(18, 82, 56, 0.05) 35px, rgba(18, 82, 56, 0.05) 36px),
    repeating-radial-gradient(circle at 85% 75%, transparent 0, transparent 46px, rgba(18, 82, 56, 0.04) 47px, rgba(18, 82, 56, 0.04) 48px);
}

.location-grid {
  position: relative;
  z-index: 1;
}

/* ---- Photo grid (reusable 2x2 collage, e.g. Highland Market) ---- */
.photo-grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

.photo-grid-2x2 > div {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1;
  box-shadow: var(--shadow-sm);
}

.photo-grid-2x2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Destinations ---- */
.destinations-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

.destination {
  position: relative;
}

/* Layout 1: Immersive full-bleed banner (Săn Mây) */
.destination--immersive {
  height: 100vh;
  min-height: 640px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-radius: 0;
}

.destination--immersive .destination-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.destination--immersive .destination-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);
}

.destination--immersive .destination-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 14, 10, 0.9) 0%, rgba(8, 14, 10, 0.15) 55%, transparent 100%);
}

.destination--immersive .destination-content {
  position: relative;
  z-index: 1;
  color: var(--color-on-primary);
  padding: var(--space-2xl) var(--margin-inline);
  max-width: 780px;
}

/* Layout 2: Alternating split (Thác Nước) */
.destination--alternating {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: center;
  /* Centered like .container so ultrawide screens don't leave it hugging the left edge */
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--margin-inline);
}

.destination--alternating .destination-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: clamp(320px, 55vw, 560px);
}

.destination--alternating .destination-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.destination--alternating.is-reversed .destination-content {
  order: -1;
}

/* Waterfall media as a 4-image collage: hero shot on top, three below */
.destination--alternating .destination-media.waterfall-collage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: clamp(220px, 32vw, 360px) clamp(110px, 15vw, 180px);
  gap: var(--space-2xs);
  height: auto;
  border-radius: 0;
  overflow: visible;
}

.waterfall-item {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.waterfall-item--main {
  grid-column: 1 / -1;
  border-radius: var(--radius-lg);
}

.waterfall-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Overscan headroom for the scroll-driven parallax drift (see initDestinationAlternating) */
  transform: scale(1.15);
}

/* Layout 3: Horizontal scrolling gallery (Rừng Trekking) */
.destination--horizontal {
  padding-block: var(--space-xl) 0;
}

.horizontal-track {
  display: flex;
  gap: var(--space-md);
  width: max-content;
  will-change: transform;
}

.horizontal-track .h-card {
  position: relative;
  width: min(65vw, 480px);
  height: min(65vw, 480px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  flex-shrink: 0;
}

.horizontal-track .h-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.horizontal-scroll-wrapper {
  height: min(70vh, 620px);
  min-height: 460px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Layout 4: Editorial magazine (Hang Động) */
.destination--magazine {
  padding-inline: var(--margin-inline);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.magazine-media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.magazine-media-grid > *:first-child {
  grid-column: 1 / -1;
  height: clamp(280px, 40vw, 420px);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.magazine-media-grid > *:not(:first-child) {
  height: clamp(160px, 22vw, 240px);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.magazine-media-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.magazine-text .drop-cap::first-letter {
  font-family: var(--font-display);
  font-size: 3.5em;
  float: left;
  line-height: 0.8;
  padding-right: 0.1em;
  padding-top: 0.05em;
  color: var(--color-tertiary);
}
  .destination--bento {
    padding-inline: var(--margin-inline);
  }
.bento-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 160px;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.bento-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.bento-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bento-item--a { grid-column: span 2; grid-row: span 2; }
.bento-item--b,
.bento-item--c,
.bento-item--d,
.bento-item--e { grid-column: span 1; grid-row: span 1; }

/* Layout 6: Pinned scale reveal (Đỉnh Núi Mờ Sương) */
.destination--pinned {
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
}

.pinned-stage {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pinned-stage .destination-media {
  position: absolute;
  inset: 0;
}

.pinned-stage .destination-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pinned-stage .destination-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(8, 14, 10, 0.35), rgba(8, 14, 10, 0.75));
}

.pinned-stage .destination-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--color-on-primary);
  max-width: 720px;
  padding-inline: var(--margin-inline);
}

/* Layout 7: Masonry gallery (Suối Tự Nhiên) */
.destination--masonry {
  padding-inline: var(--margin-inline);
}

.masonry-grid {
  columns: 1;
  column-gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.masonry-grid figure {
  break-inside: avoid;
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.masonry-grid img {
  width: 100%;
  display: block;
}

/* Shared destination content bits */
.destination-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-block: var(--space-md);
}

/* ---- Cuisine ---- */
.cuisine-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.cuisine-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 280px;
  gap: var(--space-md);
}

.food-card--a,
.food-card--b,
.food-card--c,
.food-card--d,
.food-card--e,
.food-card--f,
.food-card--g,
.food-card--h {
  grid-column: span 1;
  grid-row: span 1;
}

/* ---- Cỗ lá (Mường feast) ---- */
.cola-grid {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.cola-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.cola-item {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.cola-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cola-item--a {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 8;
}

.cola-item--b,
.cola-item--c {
  aspect-ratio: 1;
}

@media (min-width: 1024px) {
  .cola-grid {
    grid-template-columns: 1fr 1.15fr;
  }
}

/* ---- Culture ---- */
.culture-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.culture-media {
  position: relative;
  height: clamp(360px, 70vw, 560px);
}

.culture-media-a,
.culture-media-b {
  position: absolute;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 6px solid var(--color-surface);
}

.culture-media-a {
  top: 0;
  left: 0;
  width: 75%;
  height: 65%;
  z-index: 1;
}

.culture-media-b {
  bottom: 0;
  right: 0;
  width: 62%;
  height: 55%;
  z-index: 2;
}

/* 15% taller than the frame so the scroll parallax (±10%) never exposes
   the frame background behind the photo. */
.culture-media img {
  width: 100%;
  height: 115%;
  object-fit: cover;
}

.culture-points {
  list-style: circle;
  padding-left: 1.25em;
  margin-top: var(--space-sm);
  display: grid;
  gap: var(--space-xs);
}

.culture-points li {
  line-height: 1.7;
}

.culture-points li::marker {
  color: var(--color-primary);
}

.culture-points strong {
  color: var(--color-deep-forest);
}

.culture-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.culture-facts .fact-card {
  flex: 1 1 240px;
  max-width: 340px;
}

/* ---- Contact / Facebook ---- */
.contact-wrap {
  display: flex;
  justify-content: center;
}

/* ---- Map ---- */
.map-frame-wrap {
  position: relative;
  height: clamp(400px, 60vw, 560px);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.map-frame-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.map-info-card {
  position: absolute;
  bottom: var(--space-lg);
  left: var(--space-lg);
  max-width: 300px;
  z-index: 1;
}