/* ==========================================================================
   Private air charter — two columns: heading (character reveal, glass accent),
   eyebrow, text and list on the left; composite image on the right. Stacked on
   phones. Eyebrow, text, list and image fade in after the heading has been
   revealed (js/charter.js). Uses the shared typography from base.css.
   ========================================================================== */
.home-charter {
  --charter-accent: rgba(255, 193, 126, .9);     /* same warm tone as the logo glow */
  /* extra air on top of the section gap: 1.5 block gaps above (the carousel
     above is visually heavy), one below */
  padding: calc(var(--home-block-gap) * 1.5) 1.5rem var(--home-block-gap);
  position: relative;
  z-index: 2;
}

.home-charter__grid {
  display: grid;
  gap: 2.75rem;
  margin-inline: auto;
  max-width: 1180px;
}

/* --------------------------------------------------------------------------
   Copy
   -------------------------------------------------------------------------- */
.home-charter__copy {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.home-charter__eyebrow {
  color: var(--charter-accent);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
}

.home-charter__heading {
  font-size: 30px;
  line-height: 36px;
  max-width: 12em;
  text-shadow: 0 0 8px rgba(255, 239, 225, .3);
}

.home-charter__details {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.home-charter__text {
  margin: 0;
  max-width: 26em;
}

.home-charter__list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  list-style: none;
  margin: 0;
  max-width: 28em;
  padding: 0;
}

.home-charter__list li {
  color: #fff;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 25px;
  padding-left: 2.1rem;
  position: relative;
}

/* stroked line icon in place of a bullet, aligned with the first line */
.home-charter__icon {
  color: #fff;
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  top: 2.5px;
  width: 20px;
}

.home-charter__icon svg {
  display: block;
  height: 100%;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Photo — flies in like the event tiles once the heading is revealed
   -------------------------------------------------------------------------- */
.home-charter__media {
  aspect-ratio: 1080 / 783;          /* the composite's own ratio: nothing is cropped */
  background: #14110c;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 20px;
  filter: blur(10px);
  margin: 0;
  opacity: 0;
  overflow: hidden;
  transform: translate3d(0, 2.75rem, 0);
  transition: opacity 1.15s var(--home-ease), transform 1.15s var(--home-ease), filter 1.15s var(--home-ease);
  transition-delay: .12s;
  width: 100%;
}

.home-charter__media--in {
  filter: none;
  opacity: 1;
  transform: none;
}

.home-charter__image {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Desktop: two columns
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .home-charter {
    padding: calc(var(--home-block-gap) * 1.5) 6.25rem var(--home-block-gap);
  }

  .home-charter__grid {
    align-items: center;
    gap: 4.5rem;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }

  .home-charter__copy {
    gap: 1.5rem;
  }

  .home-charter__heading {
    font-size: 42px;
    line-height: 50px;
  }

  .home-charter__media {
    border-radius: 28px;
  }
}

@media (max-width: 767px) {
  .home-charter__media {
    filter: none;      /* no blur on phones, like the other copy */
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-charter__media {
    transition: none;
  }
}