/* merge-overrides.css - temporary bridge layer (candidate only).
   home.css targets the staged redesign's class names; the live homepage ships
   .showcase/.band/.tile. These rules carry the redesign's visual treatment across.
   Delete this file once live markup adopts the redesign class names. */

/* Hero: live ships abstract gradient artwork; the redesign uses real photography.
   The scrim must be restated here in full: the `background` shorthand resets
   background-image, so a shorthand here silently deleted the redesign's two
   scrim gradients (home.css:140-142) and left the hero copy as white text
   straight onto the photo (measured 2.0-2.3:1, WCAG AA needs 3.0 for the title
   and 4.5 for the sub). Alphas are raised to hold AA across the whole copy
   width, which is wider here than in the redesign because the quote form lives
   in its own section below the hero rather than in a right-hand column. */
/* The live hero ships abstract gradient artwork (.showcase-sun/-sea/-glare) as an
   inset layer at z-index:-1. Per CSS painting order a negative-z-index child
   paints ABOVE its parent's own background, so with the photo in place this
   decorative layer would sit on top of it. Suppress it. */
.showcase.hero .showcase-art { display: none; }
.showcase.hero {
  background-color: var(--hp-navy, #0B2E4E);
  background-image:
    linear-gradient(100deg, rgba(15, 28, 56, .92) 0%, rgba(18, 32, 62, .89) 60%, rgba(24, 40, 75, .86) 100%),
    linear-gradient(to top, rgba(12, 22, 45, .55), rgba(12, 22, 45, 0) 45%),
    url('/images/hero-tropical.jpg');
  background-position: center, center, center 42%;
  background-size: cover;
  background-repeat: no-repeat;
}
.showcase.hero .showcase-inner { position: relative; z-index: 2; }

/* home.css's `@media (min-width: 1000px)` block assumes a two-column hero with
   the quote card pinned to the right edge, so it strips the container's gutters
   (padding: 0; max-width: none) and runs the copy edge-to-edge. The candidate
   keeps the quote form in its own .quote-section below the hero, so those
   gutters are the only thing separating the copy from the viewport edge.
   Re-apply the redesign's own base spacing (.hero-inner, home.css:144-153). */
.showcase.hero .showcase-inner {
  max-width: var(--hp-max, 1200px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--hp-gutter, 24px);
  padding-right: var(--hp-gutter, 24px);
}

/* The eyebrow is a pill, but it is a grid item at <1000px (home.css:144) and a
   flex item at >=1000px (home.css:227). Grid/flex children are blockified, so
   its `display: inline-block` computes to `block`, and the default stretch
   alignment then widens it into a full-bleed bar. Anchor it to its content in
   both axes so the pill hugs its text. */
.showcase.hero .showcase-eyebrow {
  justify-self: start;
  align-self: flex-start;
}

/* Destinations grid is nested inside the local band rather than being its own section. */
.band-local .destinations { margin-top: 2.5rem; }
.band-local .destinations .section-title { margin: .25rem 0 .5rem; }

/* app.js adds .is-photo after a slot image loads; make the photo fill the frame. */
.tile-art.is-photo .tile-photo { opacity: 1; transform: none; }
.advisor-frame.is-photo .advisor-monogram { display: none; }