/*
  The home banner is a 1920x532 panorama. At 375px wide that is only 104px tall,
  so on a phone the hero reads as a letterboxed strip rather than a hero. The
  importer serves purpose-made portrait artwork below 768px via `<picture>`; this
  rule undoes the panorama's box so the phone image renders at its own 645x532
  ratio instead of being cropped to the wide one declared on the `<img>`.
*/
@media (max-width: 768px) {
  .hero-banner-img {
    aspect-ratio: 645 / 532;
    height: auto;
    max-height: none;
    object-fit: cover;
    object-position: center;
  }
}

/*
  The intro headline carries an authored `<br>` that splits it into
  "The Ultimate Costa Rica" / "Bachelor Party Packages". That only reads well
  while the first half fits on one line; below ~430px it wraps on its own and
  the forced break then leaves a ragged half-empty line after "Rica". Dropping
  the break on the narrowest phones lets the whole headline reflow. Every width
  where the split still fits keeps it.
*/
@media (max-width: 429px) {
  .intro-title br {
    display: none;
  }
}

/*
  On a phone the intro stacks as headline, both paragraphs, button, then video,
  which pushes the video below a long wall of copy. Putting it straight under
  the headline gives the section something to look at before the reading starts.

  The headline and the video live in different columns, so reordering them means
  dissolving both wrappers with `display: contents` and ordering their children
  as grid items directly. The grid gap then falls between every item instead of
  just between the two columns, so it is zeroed here and the rhythm comes from
  the margins the blocks already carry. Desktop keeps the two-column layout.
*/
@media (max-width: 768px) {
  .intro-grid {
    gap: 0;
  }

  .intro-left,
  .intro-right {
    display: contents;
  }

  .intro-title {
    order: 1;
  }

  .video-container {
    order: 2;
    /* `.intro-right` used to centre this; dissolving it hands that job here,
       and it shows between 640px and 768px where the column is wider than the
       player's 640px cap. */
    margin: 0 auto 2rem;
  }

  .intro-text {
    order: 3;
  }

  .intro-buttons {
    order: 4;
  }
}