/* ============================================================
   ABOUT US — page-specific chrome only. Ported near-verbatim from
   `About Us.html`'s own <style> block (couple-website-markup repo). Every
   value is a token from colors_and_type.css. No new colors / fonts /
   radii / shadows.
   ============================================================ */

/* ---------- HERO ---------- */
.am-hero { margin-bottom: 0; }
.am-hero-pad { max-width: 1440px; margin: 0 auto; padding: 0 96px; }
.am-hero-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: var(--rhythm-64);
  align-items: center;
}

.am-hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
.am-hero-copy .h1-hero { letter-spacing: -0.8px; }
.am-hero-lead { margin: 24px 0 0; max-width: 520px; }

/* Media — the live online-event mockup (same dating-room screenshot the
   Events hero uses). It's an opaque rectangular UI shot, so it takes the
   Events hero's card treatment — r-card corners + the elevated shadow —
   not the floating transparent-PNG drop-shadow. */
.am-hero-media { display: grid; place-items: center; }
.am-hero-media img {
  width: 100%; max-width: calc(540 * var(--el-px)); height: auto; display: block;
  border-radius: var(--r-card); box-shadow: var(--shadow-elevated);
}

/* ---------- MISSION ---------- */
.am-mission { max-width: 1440px; margin: 0 auto; padding: var(--rhythm-80) 96px; }
.am-mission-head { margin-bottom: 20px; max-width: 820px; }

.am-rows { display: flex; flex-direction: column; gap: var(--rhythm-64); }

.am-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "copy media";
  column-gap: var(--rhythm-80);
  align-items: center;
}
.am-row-copy { grid-area: copy; min-width: 0; }
.am-row-media { grid-area: media; }
/* Reverse swaps the copy/media columns for the alternating rhythm. */
.am-row--reverse {
  grid-template-areas: "media copy";
}

.am-pillar-title {
  font: var(--type-display-sm);
  color: var(--fg-heading);
  letter-spacing: -0.4px;
  margin: 0;
  text-wrap: balance;
}
.am-pillar-body { margin: 20px 0 0; max-width: 460px; }

/* Each row's image fills a capped wide band (object-fit cover) with the
   card chrome — r-card-lg corners + the card shadow. Height is capped so
   the four mission statements sit close together rather than being
   pushed apart by tall imagery. */
.am-row-media img {
  width: 100%; height: calc(240 * var(--el-px)); object-fit: cover; display: block;
  border-radius: var(--r-card-lg); box-shadow: var(--shadow-card);
}

/* ============================================================
   RESPONSIVE — follows the project's 1100 / 900 / 768 / 640 cadence.
   ============================================================ */
@media (max-width: 1100px) {
  .am-hero-pad { padding: 0 56px; }
  .am-hero-grid { gap: 48px; }
  .am-rows { gap: 56px; }
  .am-row { gap: 56px; }
}

@media (max-width: 900px) {
  .am-hero-pad { padding: 0 48px; }
  .am-hero-grid { grid-template-columns: 1fr; gap: 40px; max-width: 640px; }
  .am-hero-media { order: -1; }
  .am-hero-media img { max-width: 460px; }
  .am-hero-lead { max-width: 560px; }

  .am-mission-head { margin-bottom: 20px; }
  .am-rows { gap: 64px; }
  /* Stack to one column: copy, then media — for every row (reverse incl.). */
  .am-row,
  .am-row--reverse {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "media";
    column-gap: 0;
    row-gap: 32px;
    max-width: 560px;
  }
  .am-pillar-title { font-size: 30px; }
}

@media (max-width: 768px) {
  .am-hero-pad { padding: 0 40px; }
}

@media (max-width: 640px) {
  .am-hero-pad { padding: 0 20px; }
  .am-hero-copy .h1-hero { font-size: 38px !important; letter-spacing: -0.5px; }
  .am-hero-lead { font-size: 18px !important; }
  .am-hero-media img { max-width: 100%; }

  .am-mission-head .h2-section { font-size: 30px !important; }
  .am-rows { gap: 56px; }
  .am-pillar-title { font-size: 24px !important; }
  .am-row-media img { height: 200px; }
}