/* linkedinwelcome.html — page-only overrides (loads after pages.css). Prefix: lw-. Tokens only. */

/* Hero: the welcome video is the main content, so the media column is wider than the
   default 480px portrait slot and keeps the video's own 16:9 ratio at every width. */
@media (min-width: 1069px) {
  .lw-hero .pg-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); }
  .lw-hero .pg-facts { flex-wrap: nowrap; }   /* keep the three facts on one line beside the video */
}
.lw-hero .pg-hero__media { max-width: 760px; }
@media (max-width: 1068px) { .lw-hero .pg-hero__media { max-width: none; justify-self: stretch; } }

.lw-video { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.lw-hero .pg-hero__media .lw-video__frame { aspect-ratio: 16 / 9; max-height: none; background: var(--color-navy-900); }
.lw-video__frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.lw-video__frame::after { z-index: 1; }   /* hairline sits over the poster, never blocks the controls (pointer-events: none) */

.lw-video__cap {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-alt); font-weight: 600; font-size: var(--fs-label); line-height: 1.2;
  letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--color-on-dark-muted);
}
.lw-video__dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--color-yellow-400); flex: none; }

/* Service cards: push the link to the card foot so all six rows line up */
.lw-help .pg-card { display: flex; flex-direction: column; }
.lw-help .pg-card .link-underline { margin-top: auto; align-self: flex-start; }
.lw-help .pg-card__text { margin-bottom: var(--space-3); }

/* Round 1 fixes ------------------------------------------------------------ */
/* Big centred play button (yellow circle, navy glyph), hidden once playing */
.lw-video__frame { position: relative; }
.lw-play {
  position: absolute; inset: 0; margin: auto; z-index: 2;
  width: 84px; height: 84px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; padding-left: 4px;
  background: var(--color-yellow-400); color: var(--color-navy-900);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--color-yellow-400) 25%, transparent), var(--shadow-rest);
  transition: transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease);
}
.lw-play:hover { transform: scale(1.06); box-shadow: 0 0 0 16px color-mix(in srgb, var(--color-yellow-400) 22%, transparent), var(--shadow-rest); }
.lw-play:focus-visible { outline: 3px solid var(--color-yellow-400); outline-offset: 6px; }
.lw-video__frame.is-playing .lw-play { display: none; }
@media (max-width: 734px) { .lw-play { width: 72px; height: 72px; } }

/* Stacked hero (≤1068px): video right after the lead, before buttons + facts */
@media (max-width: 1068px) {
  .lw-hero .pg-hero__grid { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-head-intro); }
  .lw-hero .pg-hero__content { display: contents; }
  .lw-hero .pg-hero__content > * { order: 1; }
  .lw-hero .pg-hero__content > .pg-actions,
  .lw-hero .pg-hero__content > .pg-facts { order: 3; }
  .lw-hero .pg-hero__media { order: 2; width: 100%; max-width: 720px; margin-block: var(--space-3) var(--space-2); }
}
@media (max-width: 734px) { .lw-hero .pg-hero__media { max-width: none; } }

/* Meet Shay: photo and text read as one unit */
@media (min-width: 1069px) {
  .lw-shay .pg-split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-8); }
}
@media (min-width: 1069px) {
  .lw-shay .pg-photo { max-height: none; aspect-ratio: 5 / 6; }   /* fill the column so photo + text bottoms line up */
}