/* The travel-advisor page: the full-viewport hero (styles/components/hero.css),
   then one idea per screen. */


/* The experiences: trio cards (site.css) as a mosaic. The first (the manta)
   runs full width, its photograph large beside its words; the other four sit
   small in a row of four, two by two on tablets, one column on phones. Each
   card's hairlines stack label over value to fit the column. */
.adv-experiences h2, .adv-experiences > .wrap > .lede { text-align: center; }
.adv-experiences > .wrap > .lede { text-wrap: balance; }
.xp-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--xl) clamp(1.25rem, 2.5vw, 2rem);
  margin-top: var(--xl);
  align-items: start;
}
.xp-grid figure { margin-bottom: var(--md); }
.xp-grid figure img { margin-bottom: 0; }   /* the margin sits on the zoom wrapper, so the zoomed photo stays inside it */
.xp-grid .hairlines { margin-top: var(--md); }
.xp-grid .hairlines li { grid-template-columns: 1fr; gap: 0.2rem; padding: 0.8rem 0; }
.xp-more { margin-top: var(--md); }

/* The manta: on wide screens a full-width ink band, 21:9, with the whole
   photograph (3:2, never cropped, so the wings stay whole) on the left fading
   into the ink, and the words white on the ink to the right, where the manta
   swims. Below that it stacks like the other cards: 16:9 on tablets (a full
   width 4:3 would stand too tall), 4:3 on phones, the cuts anchored at the
   foot of the photograph so the wing tip stays in (SIZES_BAND). */
.xp-grid .trio-item:first-child { grid-column: 1 / -1; }
.xp-grid .trio-item:last-child figure { transform: scaleX(-1); }   /* the Bespoke photographer faces into the row */

@media (min-width: 1101px) {
  .xp-grid .trio-item:first-child {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    aspect-ratio: 21 / 9;
    padding-inline: clamp(2rem, 4vw, 3.5rem);
    background: var(--ink);
  }
  .xp-grid .trio-item:first-child figure { position: absolute; top: 0; left: 0; height: 100%; aspect-ratio: 3 / 2; margin: 0; }
  .xp-grid .trio-item:first-child picture { height: 100%; }   /* a block with auto height would leave the img's 100% nothing to fill */
  .xp-grid .trio-item:first-child figure img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
  /* the fade: clear over the manta, into solid ink at the photograph's right edge (64% of the band) */
  .xp-grid .trio-item:first-child::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to right, rgba(13, 23, 32, 0) 48%, var(--ink) 64%);
  }
  .xp-grid .trio-item:first-child > div { position: relative; z-index: 1; width: 30%; }
  .xp-grid .trio-item:first-child :is(h3, .trio-sub, .hairlines span, .xp-more) { color: var(--white); }
  .xp-grid .trio-item:first-child :is(.hairlines span:last-child, .xp-more) { opacity: 0.85; }
  .xp-grid .trio-item:first-child :is(.hairlines, .hairlines li) { border-color: rgba(255, 255, 255, 0.25); }
}

@media (max-width: 1100px) {
  .xp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xp-grid .trio-item:first-child figure img { aspect-ratio: 16 / 9; }
}

@media (max-width: 700px) {
  .xp-grid { grid-template-columns: 1fr; }
  .xp-grid .trio-item:first-child figure img { aspect-ratio: 4 / 3; }
}

/* Safety: the Martin note sits between the two ledes, so it needs air below
   as well as above (site.css gives it only the top) */
.adv-safety .martin-note { margin-bottom: var(--md); }
/* short labels: the rows share one track via subgrid, so the label column is
   as narrow as the longest label and every description aligns (phones stack as usual) */
@media (min-width: 561px) {
  .adv-safety .hairlines { display: grid; grid-template-columns: max-content 1fr; }
  .adv-safety .hairlines li { grid-template-columns: subgrid; grid-column: span 2; }
}

/* We Invest In You: the four fam trips as story cards (story-card.css; a
   trip with no story yet is a card that links nowhere) across the whole Fam
   Trips row (hairlines' `below` cell), each restyled as a row like a session
   row: the thumbnail on the left, the season and the title on the right, no
   lede, no hairline; two by two, one under the other on phones. */
.fam-stories { display: grid; grid-template-columns: 1fr 1fr; gap: var(--md); margin-top: 0; }   /* story-card.css gives the grid --lg on top; the .below cell sets the air here */
.fam-stories .story-card { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--sm); align-items: center; }
.fam-stories .story-card .zoom { margin: 0; }
.fam-stories .story-title { font-size: 1.1rem; margin: 0.15rem 0 0; }
.fam-stories .story-lede { display: none; }
@media (max-width: 700px) {
  .fam-stories { grid-template-columns: 1fr; gap: var(--sm); }   /* phones: one under the other */
}

/* The application: the stepper alone in the reading column, its heading
   centered above, the applied line between, the phone + email under it */
.adv-apply { text-align: center; }
.adv-apply .lede { text-wrap: balance; }
.adv-apply .stepper { margin-top: var(--lg); text-align: left; }
.adv-apply .note { margin: var(--lg) auto 0; }
.adv-apply .note + .contact-line { margin-top: 0.4rem; }
.adv-apply :is([data-restored], [data-exists]) { text-align: left; margin: var(--lg) 0 0; }   /* the restored and account-exists notes, above the form */