/**
 * Corporate & Events homepage teaser — PDF p.6.
 */

/* Root cause of the reported white/cream gaps above and below this section
   (2026-08-31): unlike Story/Partner/Catering-teaser/Contact/Lounges, this
   section has no single background color of its own — it's two flush,
   differently-colored blocks (the cherry .corporate-teaser__panel, then the
   image). Those other sections safely use min-height:var(--section-min-
   height-flow) + justify-content:center to vertically balance shorter
   content inside a comfortable viewport-tall card, because their OWN
   background fills the whole box, so the centering gap is invisible. Here
   the section itself was transparent, so that same centering gap revealed
   the page's cream <body> background as a real gap above the cherry panel
   (breaking the Collection→Corporate transition) and below the image
   (breaking the Corporate→Partner transition) — confirmed ~157px on each
   side at 1440×1200. This section's two blocks should simply stack flush
   at their natural height, not be centered inside an artificial min-height
   box, so it intentionally does NOT use --section-min-height-flow. */
.corporate-teaser {
  display: block;
}
.corporate-teaser__panel {
  background: var(--color-cherry-temp);
  padding-block: var(--section-pad-y);
}
.corporate-teaser__panel-inner {
  max-width: 900px;
  text-align: center;
}
.corporate-teaser__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-00);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-paper-on-dark-soft);
  margin: 0 0 var(--space-3);
}
.corporate-teaser__heading {
  font-size: clamp(2.5rem, 5vw, var(--fs-5));
  color: var(--color-paper-on-dark);
  margin: 0 0 var(--space-4);
}
.corporate-teaser__description {
  color: var(--color-paper-on-dark-soft);
  font-size: var(--fs-1);
  line-height: 1.7;
  max-width: 38rem;
  margin: 0 auto var(--space-6);
}
.corporate-teaser__cta {
  display: inline-block;
  border: 1px solid var(--color-line-on-dark);
  color: var(--color-paper-on-dark);
  font-family: var(--font-ui);
  font-size: var(--fs-00);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-4) var(--space-7);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.corporate-teaser__cta:hover,
.corporate-teaser__cta:focus-visible {
  background: var(--color-paper-on-dark);
  color: var(--color-cherry-temp);
}

.corporate-teaser__image-frame {
  line-height: 0;
  /* Matches Partner With Us's background (the section directly below) —
   * defense-in-depth so the reserved image space never shows the page's
   * cream <body> background for the brief instant before the photo paints
   * (removing loading="lazy" on the <img> below is the primary fix; this
   * covers any remaining decode delay, e.g. a future larger client upload).
   */
  background: var(--color-ash);
}
.corporate-teaser__image {
  width: 100%;
  height: clamp(240px, min(32vw, 46vh), 520px);
  object-fit: cover;
}

/* Client feedback: mobile typography still slightly large — small further
   reduction, not a redesign. */
@media (max-width: 640px) {
  .corporate-teaser__heading {
    font-size: clamp(2.1rem, 5vw, var(--fs-5));
  }
}

/* Client feedback, round 2: still slightly large — one further ~5% pass.
   Desktop (the var(--fs-X) ceiling) is untouched either way. */
@media (max-width: 640px) {
  .corporate-teaser__heading {
    font-size: clamp(2rem, 5vw, var(--fs-5));
  }
}