/* Homepage Media: scoped to the reel and its popup, independent of board CSS. */
.yy-media-reel { padding: var(--yy-section-py) 0; background: var(--yy-white); scroll-margin-top: 100px; }
.yy-media-reel *, .yy-media-popup * { box-sizing: border-box; }
.yy-media-reel [hidden], .yy-media-popup [hidden] { display: none !important; }
.yy-media-reel__viewport { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 4px var(--yy-pad) 12px; overscroll-behavior-x: contain; }
.yy-media-reel__viewport::-webkit-scrollbar { display: none; }
.yy-media-reel__track, .yy-media-reel__group { display: flex; width: max-content; }
.yy-media-reel__group { flex-shrink: 0; gap: 28px; padding-right: 28px; align-items: flex-start; }
.yy-media-reel__card { flex: 0 0 auto; width: clamp(300px, 28vw, 440px); margin: 0; }
.yy-media-reel__link { display: block; color: var(--yy-dark); text-decoration: none; }
.yy-media-reel__image { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--yy-dark-deeper); border-radius: 3px; }
.yy-media-reel__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 450ms var(--yy-ease), opacity 450ms var(--yy-ease); }
.yy-media-reel__image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(0,0,0,.35)); pointer-events: none; }
.yy-media-reel__play { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--yy-red); box-shadow: 0 3px 16px rgba(0,0,0,.16); transition: background 200ms, transform 200ms; }
.yy-media-reel__play svg { width: 24px; height: 24px; fill: currentColor; margin-left: 2px; }
.yy-media-reel__watch { position: absolute; z-index: 1; bottom: 14px; right: 18px; color: #fff; font-size: 12px; letter-spacing: .02em; }
.yy-media-reel__copy { padding: 23px 2px 0; }
.yy-media-reel__program { margin: 0 0 9px; color: var(--yy-grey); font-size: 13px; font-weight: 400; }
.yy-media-reel__copy h3 { margin: 0; font-family: var(--yy-serif); font-size: clamp(20px, 1.7vw, 24px); font-weight: 600; line-height: 1.55; overflow-wrap: anywhere; }
.yy-media-reel__link:hover .yy-media-reel__image img { transform: scale(1.035); opacity: .9; }
.yy-media-reel__link:hover .yy-media-reel__play { background: var(--yy-red-deep); transform: translate(-50%, -50%) scale(1.08); }
.yy-media-reel__link:focus-visible { outline: 2px solid var(--yy-red); outline-offset: 3px; border-radius: 3px; }
.yy-media-reel__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 32px; }
.yy-media-reel__toolbar p { margin: 0; font-size: 13px; color: var(--yy-n-500); }
.yy-media-reel__controls { display: flex; gap: 8px; }
.yy-media-reel__controls button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--yy-n-200); border-radius: 50%; background: var(--yy-white); color: var(--yy-dark); cursor: pointer; }
.yy-media-reel__controls button:hover { border-color: var(--yy-dark); }
.yy-media-reel__controls button:focus-visible { outline: 2px solid var(--yy-red); outline-offset: 3px; }
.yy-media-reel__controls svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.yy-media-reel__more { margin-top: 52px; }
.yy-media-reel__empty { text-align: center; color: var(--yy-n-500); }
.yy-media-popup { position: fixed; inset: 0; width: min(1040px, calc(100vw - 48px), calc((100dvh - 220px) * 16 / 9)); max-width: none; max-height: calc(100dvh - 48px); margin: auto; padding: 0; border: 0; border-radius: 6px; overflow: auto; color: #fff; background: #1D2027; box-shadow: 0 24px 100px rgba(0,0,0,.4); font-family: var(--yy-sans); }
.yy-media-popup:not([open]) { display: none; }
.yy-media-popup::backdrop { background: rgba(0,0,0,.82); backdrop-filter: blur(5px); }
.yy-media-popup__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 26px; background: #1D2027; }
.yy-media-popup__head span { display: block; margin-bottom: 7px; font-size: 11px; font-weight: 500; letter-spacing: .18em; color: #c5c6c9; }
.yy-media-popup__head h2 { margin: 0; font: 500 19px/1.5 var(--yy-sans); color: #fff; }
.yy-media-popup__head button { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #575b63; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.yy-media-popup__head button:hover { background: #3A3E47; }
.yy-media-popup__head button:focus-visible, .yy-media-popup__foot a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.yy-media-popup__head svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.yy-media-popup__player { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.yy-media-popup__player iframe { display: block; width: 100%; height: 100%; border: 0; }
.yy-media-popup__foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 20px; padding: 17px 26px; font-size: 12px; color: #b9bbc0; }
.yy-media-popup__foot a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 600px) {
  .yy-media-reel__card { width: min(78vw, 360px); }
  .yy-media-reel__group { gap: 18px; padding-right: 18px; }
  .yy-media-reel__copy { padding-top: 18px; }
  .yy-media-reel__program { font-size: 12px; }
  .yy-media-reel__copy h3 { font-size: 20px; }
  .yy-media-reel__play { width: 48px; height: 48px; }
  .yy-media-reel__toolbar { flex-direction: column; margin-top: 26px; gap: 16px; }
  .yy-media-reel__more { margin-top: 32px; }
  .yy-media-popup { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .yy-media-popup__head { gap: 12px; padding: 16px; }
  .yy-media-popup__head h2 { font-size: 15px; }
  .yy-media-popup__head button { width: 40px; height: 40px; }
  .yy-media-popup__foot { padding: 16px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .yy-media-reel__image img, .yy-media-reel__play { transition: none; }
}