/* ==========================================================================
   DazlinQ Travel — Layout: containers, sections, grids, media boxes
   ========================================================================== */

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

.container--narrow { max-width: 900px; }

/* --- Sections --------------------------------------------------------- */
.section { padding-block: var(--sec-y); }
.section--tight  { padding-block: calc(var(--sec-y) * .62); }
.section--cream  { background: var(--cream); }
.section--blush  { background: var(--blush); }
.section--deep   { background: var(--blush-deep); }
.section--white  { background: var(--white); }

/* Section heading block */
.section-head { max-width: var(--maxw-text); margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: .9rem;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gold);
  flex: none;
}
.section-head--center .eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gold);
  flex: none;
}

/* Gold hairline used as the decorative flourish that replaces the old
   two-tone headings — the accent lives under the words, not inside them. */
.rule-gold {
  width: 76px;
  height: 2px;
  border: 0;
  margin: 1.25rem 0 1.5rem;
  background: linear-gradient(90deg, var(--gold), var(--gold-light), transparent);
}
.section-head--center .rule-gold {
  margin-inline: auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.85;
  color: var(--ink-soft);
  max-width: var(--maxw-text);
}

/* --- Grids ------------------------------------------------------------ */
.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }

/* ==========================================================================
   MEDIA BOXES — the fix for "images get cut off on different screens"

   Three rules, applied everywhere an image appears:
   1. aspect-ratio, never a fixed pixel height, so the box scales with its
      column instead of squeezing its contents.
   2. object-fit: cover with a per-image FOCAL POINT, so the subject stays in
      frame at every width instead of always cropping from dead centre.
   3. Real <img> elements, never CSS background-image, so the browser can
      pick a responsive source and we can art-direct the crop.

   Focal point is set inline per image: style="--fx:38%; --fy:24%"
   In Phase 4 the admin media library writes these values from a click-to-set
   picker, so Kim can fix any crop herself without touching code.
   ========================================================================== */
.media {
  position: relative;
  overflow: hidden;
  background: var(--pink-mist);
  border-radius: var(--r-md);
}

/* <picture> is inline by default, which means a percentage height on the
   <img> inside it has no containing block to resolve against and silently
   collapses to auto — the image then ignores its aspect-ratio box entirely.
   Making the wrapper a block that fills its parent is what lets object-fit
   and the focal point actually take effect. */
picture { display: block; }

.media picture,
.hero__media picture,
.deal__media picture,
.gallery__item picture { width: 100%; height: 100%; }

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 50%);
}

.media--16x9  { aspect-ratio: 16 / 9; }
.media--4x3   { aspect-ratio: 4 / 3; }
.media--3x2   { aspect-ratio: 3 / 2; }
.media--1x1   { aspect-ratio: 1 / 1; }
.media--4x5   { aspect-ratio: 4 / 5; }

/* On narrow screens tall crops read better than wide ones — a 16:9 box on a
   375px phone is only 210px tall and beheads people. */
@media (max-width: 640px) {
  .media--responsive { aspect-ratio: 4 / 3; }
}

/* --- Utilities -------------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }