/* 04-layout.css */
/* ============================================================
   4. LAYOUT
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

@media (min-width: 640px)  { .container { padding-inline: var(--sp-6); } }
@media (min-width: 1024px) { .container { padding-inline: var(--sp-8); } }

.section {
  padding-block: var(--sp-16);
}



.section__header {
  text-align: center;
  margin-bottom: var(--sp-12);
}

.section__title {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-extrabold);
  color: var(--text);
  position: relative;
  display: inline-block;
}

.section__title::after {
  content: '';
  display: block;
  width: 48px;
  height: 4px;
  background: var(--secondary);
  border-radius: var(--radius-full);
  margin: var(--sp-3) auto 0;
}

.section__subtitle {
  margin-top: var(--sp-4);
  font-size: var(--fs-lg);
  color: var(--text-muted);
  font-weight: var(--fw-regular);
}









/* -----------------------------------------------------------------------------
   2. LAYOUT PRIMITIVES
   --------------------------------------------------------------------------- */
.ds-container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

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

.ds-section {
  padding-block: var(--section-pad-y);
  background: var(--bg);
  color: var(--text);
}
.ds-section--tight   { padding-block: var(--section-pad-y-tight); }
.ds-section--surface { background: var(--surface); }
.ds-section--muted   { background: var(--surface-2); }
.ds-section--invert  { background: var(--text); color: #ffffff; }

.ds-section__head {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.ds-section__head--center { text-align: center; align-items: center; }

/* -----------------------------------------------------------------------------
   10. BENTO GRID — asymmetric featured layout
   --------------------------------------------------------------------------- */
.ds-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(280px, auto);
  gap: var(--grid-gap-md);
}
.ds-bento__cell {
  grid-column: span 2;
  grid-row: span 1;
  position: relative;
}
.ds-bento__cell--tall { grid-row: span 2; }
.ds-bento__cell--wide { grid-column: span 4; }

@media (max-width: 900px) {
  .ds-bento { grid-template-columns: repeat(2, 1fr); }
  .ds-bento__cell { grid-column: span 1; grid-row: span 1; }
  .ds-bento__cell--tall { grid-row: span 2; }
  .ds-bento__cell--wide { grid-column: span 2; }
}
@media (max-width: 560px) {
  .ds-bento { grid-template-columns: 1fr; grid-auto-rows: 260px; }
  .ds-bento__cell, .ds-bento__cell--tall, .ds-bento__cell--wide { grid-column: span 1; grid-row: span 1; }
}

/* Make cards stretch within bento cells.
   The body claims its NATURAL height (so a 2-line excerpt never leaves a
   big gap under it) and the image grows to fill whatever's left in the
   cell. `min-height` on the image guarantees it doesn't shrink too small
   in short cells — that was the original "tiny thumbnails" bug. */
.ds-bento .ds-card-place,
.ds-bento .ds-card-itinerary {
  height: 100%;
  aspect-ratio: auto;
}
.ds-bento .ds-card-place { flex-direction: column; }
.ds-bento .ds-card-place__media {
  flex: 1 1 auto;        /* fill the remaining vertical space in the cell */
  min-height: 220px;     /* but never collapse smaller than this */
  aspect-ratio: auto;    /* let the image area follow the cell, not a ratio */
}
.ds-bento .ds-card-place__body {
  padding: var(--sp-4);
  flex: 0 0 auto;        /* body takes only the space its content needs */
}

/* -----------------------------------------------------------------------------
   14. GRIDS — generic 2/3/4-up
   --------------------------------------------------------------------------- */
.ds-grid {
  display: grid;
  gap: var(--grid-gap-md);
}
.ds-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ds-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ds-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .ds-grid--3, .ds-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ds-grid--2, .ds-grid--3, .ds-grid--4 { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
   29. BENTO — 6-card compact variant (used by the "Places you can't miss"
   section on home). Renders uniform shorter cards instead of the tall +
   3-cell mosaic. Pairs with markup `.ds-bento.ds-bento--six` +
   `.ds-bento__cell.ds-bento__cell--compact`.
   --------------------------------------------------------------------------- */
.ds-bento--six {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 240px;
  gap: var(--sp-4);
}
.ds-bento--six .ds-bento__cell--compact {
  grid-row: span 1;
  grid-column: span 1;
}
@media (max-width: 900px) {
  .ds-bento--six { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ds-bento--six { grid-template-columns: 1fr; grid-auto-rows: 220px; }
}