/* =====================================================================
   FSDC Aerosolutions — Media Player component
   =====================================================================

   PURPOSE
   Event stories will accumulate video from LinkedIn, YouTube and Instagram.
   A bare link is a dead end and a raw embed looks like someone pasted a URL.
   This component wraps every video in a *device* — a phone, a laptop or a
   cinema frame — with a branded poster, a platform badge and a play control.
   Nothing loads until the visitor asks for it (click-to-play), so a page with
   six videos still costs nothing on first paint.

   ANATOMY
     .mp                     wrapper (sets the device via a modifier)
       .mp__device           the physical frame (bezel, notch, hinge, stand)
         .mp__screen         16:9 or 9:16 viewport
           .mp__poster       image + gradient + play button (state: idle)
           .mp__frame        iframe injected on demand (state: playing)
       .mp__meta             platform badge, title, duration, external link

   MODIFIERS
     .mp--phone   9:16   vertical — Instagram reels, LinkedIn vertical video
     .mp--laptop  16:10  landscape — YouTube, long-form film
     .mp--cinema  16:9   frameless, full-bleed — hero films

   STATES
     data-state="idle"     poster visible, no network
     data-state="loading"  spinner while the iframe boots
     data-state="playing"  iframe visible

   ACCESSIBILITY
     The play control is a real <button> with an accessible name; the device
     chrome is aria-hidden; keyboard focus is visible; prefers-reduced-motion
     removes the float, glow and scanline animations.
   ===================================================================== */

:root {
  --mp-navy: #071626;
  --mp-navy-2: #0b2337;
  --mp-cyan: #18bed2;
  --mp-line: #dfe8ee;
  --mp-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --mp-li: #0a66c2;
  --mp-yt: #ff0000;
  --mp-ig: #d62976;
}

/* ---------- shell ---------- */
.mp { margin: 46px 0 50px; }
.mp__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--mp-line);
}
.mp__head-title {
  font-family: var(--mp-mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mp-navy);
}
.mp__head-note { font-family: var(--mp-mono); font-size: .7rem; color: #6b8290; letter-spacing: .08em; }

.mp__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  align-items: start;
}
.mp__row--single { grid-template-columns: minmax(0, 1fr); max-width: 940px; }

/* ---------- device: shared ---------- */
.mp__device { position: relative; margin: 0 auto; width: 100%; }
.mp__screen {
  position: relative;
  overflow: hidden;
  background: #04101b;
  isolation: isolate;
}

/* poster */
.mp__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: #04101b;
  z-index: 2;
}
.mp__poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .62;
  transition: transform .8s cubic-bezier(.2, .7, .3, 1), opacity .4s ease;
}
.mp__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 60% at 50% 45%, rgba(24, 190, 210, .18), transparent 70%),
    linear-gradient(180deg, rgba(4, 16, 27, .25) 0%, rgba(4, 16, 27, .78) 100%);
}
.mp__poster:hover img { transform: scale(1.05); opacity: .74; }
.mp__poster:focus-visible { outline: 3px solid var(--mp-cyan); outline-offset: -3px; }

/* play control */
.mp__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 78px; height: 78px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--mp-cyan);
  color: #04202b;
  font-size: 1.4rem;
  padding-left: 5px;
  box-shadow: 0 0 0 0 rgba(24, 190, 210, .55);
  animation: mp-pulse 2.6s ease-out infinite;
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), background .3s ease;
}
.mp__poster:hover .mp__play { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
@keyframes mp-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(24, 190, 210, .5); }
  70%  { box-shadow: 0 0 0 26px rgba(24, 190, 210, 0); }
  100% { box-shadow: 0 0 0 0 rgba(24, 190, 210, 0); }
}

/* caption strip inside the screen */
.mp__strip {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: 26px 18px 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}
.mp__strip-title {
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}
.mp__strip-meta {
  font-family: var(--mp-mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #a9c8d6;
  margin-top: 5px;
  display: block;
}

/* platform badge */
.mp__badge {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(4, 16, 27, .74);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--mp-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.mp__badge i { font-size: .85rem; }
.mp--linkedin .mp__badge i { color: #4aa3ea; }
.mp--youtube  .mp__badge i { color: #ff5a5a; }
.mp--instagram .mp__badge i { color: #f0629b; }

/* iframe */
.mp__frame { position: absolute; inset: 0; z-index: 1; }
.mp__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.mp[data-state="playing"] .mp__poster { opacity: 0; pointer-events: none; }
.mp[data-state="playing"] .mp__frame { z-index: 4; }
.mp[data-state="loading"] .mp__play::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 2px solid rgba(4, 32, 43, .25);
  border-top-color: #04202b;
  border-radius: 50%;
  animation: mp-spin .8s linear infinite;
}
@keyframes mp-spin { to { transform: rotate(360deg); } }

/* ---------- device: phone ---------- */
.mp--phone .mp__device {
  max-width: 320px;
  padding: 14px;
  border-radius: 42px;
  background: linear-gradient(160deg, #2b3a45 0%, #0d151c 45%, #24313b 100%);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, .06) inset,
    0 30px 60px rgba(0, 0, 0, .45);
}
.mp--phone .mp__screen { border-radius: 30px; aspect-ratio: 9 / 16; }
.mp--phone .mp__device::before { /* notch */
  content: "";
  position: absolute;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  width: 96px; height: 20px;
  background: #0d151c;
  border-radius: 0 0 14px 14px;
  z-index: 5;
}
.mp--phone .mp__device::after { /* side button */
  content: "";
  position: absolute;
  right: -3px; top: 120px;
  width: 3px; height: 52px;
  border-radius: 0 3px 3px 0;
  background: #46565f;
}

/* ---------- device: laptop ---------- */
.mp--laptop .mp__device { max-width: 720px; }
.mp--laptop .mp__lid {
  padding: 12px 12px 12px;
  border-radius: 14px 14px 4px 4px;
  background: linear-gradient(160deg, #35434d 0%, #131c23 60%, #2a3740 100%);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .05) inset, 0 24px 48px rgba(0, 0, 0, .4);
}
.mp--laptop .mp__screen { border-radius: 6px; aspect-ratio: 16 / 10; }
.mp--laptop .mp__base {
  height: 14px;
  /* Flush with the lid: any widening (negative margin or scaleX) contributes
     to scrollable overflow and adds a horizontal scrollbar on phones. */
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, #46565f 0%, #1b242b 100%);
  position: relative;
}
.mp--laptop .mp__base::after {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  width: 84px; height: 5px;
  border-radius: 0 0 6px 6px;
  background: #0e161c;
}

/* ---------- device: cinema ---------- */
.mp--cinema .mp__device { max-width: 100%; }
.mp--cinema .mp__screen {
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  border: 1px solid rgba(140, 227, 239, .22);
  box-shadow: 0 34px 70px rgba(0, 0, 0, .45);
}

/* ---------- meta row under the device ---------- */
.mp__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin-top: 16px;
  font-family: var(--mp-mono);
  font-size: .73rem;
  color: #6b8290;
  line-height: 1.6;
}
.mp__meta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--mp-li);
  text-decoration: none;
  white-space: nowrap;
}
.mp--youtube .mp__meta a { color: #c4302b; }
.mp--instagram .mp__meta a { color: var(--mp-ig); }
.mp__meta a:hover { text-decoration: underline; }

/* on a dark section, flip the text colours */
.ev-sources .mp__head-title,
.home-film .mp__head-title { color: #fff; }
.ev-sources .mp__meta,
.home-film .mp__meta { color: #8fb0c0; }
.ev-sources .mp__head,
.home-film .mp__head { border-bottom-color: rgba(255, 255, 255, .14); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .mp__play { animation: none; }
  .mp__poster img, .mp__play { transition: none !important; }
  .mp__poster:hover img { transform: none; }
  .mp[data-state="loading"] .mp__play::after { animation: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  .mp__row { gap: 26px; }
  .mp--laptop .mp__device { max-width: 560px; }
}
@media (max-width: 767px) {
  .mp { margin: 32px 0 36px; }
  .mp__row { grid-template-columns: 1fr; gap: 30px; }
  .mp__head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .mp--phone .mp__device { max-width: 268px; padding: 11px; border-radius: 34px; }
  .mp--phone .mp__screen { border-radius: 24px; }
  .mp--phone .mp__device::before { width: 78px; height: 17px; top: 15px; }
  .mp--laptop .mp__lid { padding: 9px; border-radius: 10px 10px 3px 3px; }
  .mp__play { width: 62px; height: 62px; font-size: 1.1rem; }
  .mp__strip { padding: 20px 13px 12px; }
  .mp__strip-title { font-size: .86rem; }
  .mp__meta { font-size: .68rem; }
}