/* ==========================================================================
   HOMEPAGE ENHANCEMENTS (home-enhance.css)
   1) Premium heading feel sitewide
   2) Italic sub-line under the 3 side stories (Chef Story / Success Journey / Founder Story)
   3) Video card for the "Public Opinion" slot in Hospitality Conversations
   ========================================================================== */

/* ---- 1. Premium headings ---- */
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.3px; }
.sec-head h2 { letter-spacing: -1px; }
.eyebrow { font-weight: 700; }

/* ---- 2. Side-story sub-line: italic, muted gold-purple, not shouty ---- */
.story-side-card .eyebrow {
  display: block; text-transform: none; letter-spacing: 0;
  font-style: italic; font-weight: 500; font-size: 13.5px; line-height: 1.4;
  color: var(--purple-lt); margin: 6px 0 0;
}
.story-side-card .eyebrow p { margin: 0; font-family: var(--font-sans); }

/* ---- 3. Video card (Public Opinion) ----
   Thumbnail in the grid always keeps the card's normal 4:5 shape (nothing
   cropped, nothing scaled). Clicking it opens the video in a centered
   overlay sized to the VIDEO's own shape (9:16 below) — so the player's
   own controls, logo/branding and fullscreen button all work exactly as
   they do on the provider's own site. Nothing is ever cropped or stretched. */
.leader-card-video { cursor: default; }
.leader-video-thumb {
  position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 16px;
  overflow: hidden; margin-bottom: 14px; background: linear-gradient(160deg, #4A3A99, #262330);
  cursor: pointer;
}
.leader-video-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.leader-video-thumb:hover img { transform: scale(1.04); }
.leader-video-thumb .ep {
  position: absolute; top: 12px; left: 12px; z-index: 2; font-size: 10px; font-weight: 700;
  background: rgba(203, 163, 92, 0.9); color: var(--black); padding: 3px 8px; border-radius: var(--radius-sm);
}
.leader-video-thumb .play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 56px; height: 56px; border-radius: 50%; background: rgba(10, 10, 16, 0.6);
  backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); transition: transform 0.2s ease, background 0.2s ease;
}
.leader-video-thumb .play::before { content: ""; margin-left: 4px; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.leader-video-thumb:hover .play { transform: translate(-50%, -50%) scale(1.08); background: rgba(203, 163, 92, 0.85); }

/* ---- Video modal (opened by leader-video.js) ----
   Change --modal-ratio if you embed a different shaped video
   (9:16 portrait = 177.78%; a normal 16:9 landscape video = 56.25%). */
.video-modal {
  position: fixed; inset: 0; z-index: 2000; display: none;
  align-items: center; justify-content: center;
  background: rgba(6, 6, 10, 0.9); backdrop-filter: blur(6px);
  padding: 76px 20px 24px;
}
.video-modal.open { display: flex; }
.video-modal-box {
  /* Video's own width:height, e.g. 9:16 portrait (below). A normal landscape video would be 16 / 9. */
  --ratio-w: 9;
  --ratio-h: 16;
  position: relative;
  width: min(92vw, calc(84vh * var(--ratio-w) / var(--ratio-h)));
  aspect-ratio: var(--ratio-w) / var(--ratio-h);
  background: #000; border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
.video-modal-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Beyond The Menu mark, fixed top-left — mirrors the Close pill on the
   right so the modal still feels like part of the site, not a random popup. */
.video-modal-logo {
  position: fixed; top: 16px; left: 16px; z-index: 1000;
  display: inline-flex; background: var(--white); border-radius: 10px; padding: 6px 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.video-modal-logo img { height: 26px; width: auto; display: block; }

/* Close button: fixed to the screen's own top-right corner (not the video box),
   so it's always in the same, obvious spot — never hidden behind or on top of
   the video/player controls, on any screen size. */
.video-modal-close {
  position: fixed; top: 16px; right: 16px; z-index: 1000;
  display: flex; align-items: center; gap: 7px;
  padding: 9px 16px 9px 12px; border-radius: 999px;
  background: rgba(10, 10, 16, 0.9); border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff; font-family: var(--font-sans, sans-serif); font-size: 13.5px; font-weight: 700;
  cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.video-modal-close .x-ico { font-size: 16px; line-height: 1; }
.video-modal-close:hover { background: rgba(203, 163, 92, 0.92); border-color: transparent; color: #17141F; }
@media (max-width: 520px) {
  .video-modal { padding: 68px 12px 16px; }
  .video-modal-logo { top: 12px; left: 12px; padding: 5px 10px; }
  .video-modal-logo img { height: 21px; }
  .video-modal-close { top: 12px; right: 12px; padding: 8px 14px 8px 11px; font-size: 13px; }
}