/* assets/home-engagements.css — the clip box of the home page's Engagements section
   (components/features/EngagementPicker.jsx). Loaded by that section only, after
   site.css, so these rules win over the .eng-show / .eng-clip rules in site.css.
   Added 2026-10-12 (Nada): the new clips (assets/homepage-videos/advise.mp4, train.mp4,
   build.mp4) are square (1080 x 1080) and have their headline at the top and a card at
   the bottom, so a wide 16:10 box would have cut them off. The box is now square, and
   the clips are shown whole.

   Kept in its own versioned file (see ENG_CSS in EngagementPicker.jsx) because
   site.css is cached by browsers for 7 days: a returning visitor must not get the new
   square clips inside the old wide box. */

/* desktop: the square box is at most 560px wide, the text takes the rest */
.eng-show { grid-template-columns: minmax(0, min(560px, 50%)) minmax(0, 1fr); }
.eng-clip { aspect-ratio: 1 / 1; }

/* No black square between two clips (Nada, 2026-10-13).
   1. The box is the same cream as the clips' own background (it was dark), so a gap, if
      there ever is one, is not a dark flash. A box showing photos keeps its dark colour.
   2. The clip being replaced (.prev) stays fully visible under the new one (.on) while the
      new one fades in; the new one sits above it. Before, both faded at the same time and
      the dark box showed through in between. */
.eng-clip { background: #F7F3EB; }
.eng-clip.photo { background: var(--eng-clip); }
.eng-clip video.on { z-index: 0; }
.eng-clip video.prev { opacity: 1; transition: none; }

/* the row with "Explore …" and, on the Training & Adoption tab, the portal button */
.eng-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; margin-top: 40px; }
.eng-actions .eng-link { margin-top: 0; }
.eng-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 22px; border: 1.5px solid var(--ink); border-radius: 100px;
  font-family: var(--display); font-weight: 600; font-size: 15.5px; letter-spacing: -.01em; line-height: 1.2;
  color: var(--ink); white-space: nowrap;
  transition: transform .4s var(--spring);
}
.eng-btn .arrow { transition: transform .4s var(--spring); }
.eng-btn:hover { background: var(--ink); color: var(--ivory); transform: translateY(-2px); }
.eng-btn:hover .arrow, .eng-btn:focus-visible .arrow { transform: translateX(4px); }
.eng-btn:active { transform: scale(.98); }
.eng-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* the sound button in the top-right corner of the clip (the clips have a voice; they start muted).
   Top right, because the clips keep their headline in the upper middle and a card at the bottom.
   Only transform is animated; hover, focus-visible and active states are set below. */
.eng-sound {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px 10px 13px; border: 0; border-radius: 100px; cursor: pointer;
  background: rgba(28, 24, 19, .84); color: var(--ivory);
  font-family: var(--display); font-weight: 600; font-size: 13.5px; line-height: 1; letter-spacing: -.01em;
  box-shadow: 0 10px 24px -10px rgba(28, 24, 19, .55), 0 2px 6px rgba(28, 24, 19, .18);
  transition: transform .4s var(--spring);
}
.eng-sound svg { flex: none; color: var(--gold-hi); }
.eng-sound:hover { transform: translateY(-2px); background: rgba(28, 24, 19, .96); }
.eng-sound:active { transform: scale(.97); }
.eng-sound:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.eng-sound.on { background: var(--ink); }

/* tablet and phone: one column (site.css does the same at 900px); the square box is at most 520px wide */
@media (max-width: 900px) {
  .eng-show { grid-template-columns: minmax(0, 1fr); }
  .eng-clip { width: min(100%, 520px); }
}

/* On a phone the "Turn sound on" label covered the headline at the top of the clip
   (2026-10-19): below 600px the button is the round icon only, in the corner. The
   words stay in the button for screen readers. */
@media (max-width: 600px) {
  .eng-sound { top: 10px; right: 10px; padding: 10px; }
  .eng-sound span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}