/* WS28 - YouTube Shorts tall card + rail (partial: layouts/partials/cm-short.php). Tokens only. */
.cm-short-wrap { display: block; width: 100%; max-width: 340px; margin-inline: auto; }
.cm-short {
  position: relative; margin: 0; width: 100%;
  aspect-ratio: 9 / 16;               /* reserves the space: no layout shift */
  border-radius: var(--lx-radius-media, var(--r-16));
  overflow: hidden; background: var(--c-navy-900);
  box-shadow: var(--shadow-2);
  transition: transform var(--lx-dur-hover, .35s) var(--lx-ease, ease), box-shadow var(--lx-dur-hover, .35s) var(--lx-ease, ease);
}
.cm-short:hover { transform: translateY(var(--lx-lift, -4px)); box-shadow: var(--shadow-3); }
.cm-short__btn {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; background: none; color: var(--c-surface-0);
  font: inherit; text-align: left; cursor: pointer;
}
.cm-short__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--lx-dur, .7s) var(--lx-ease, ease); }
.cm-short:hover .cm-short__img { transform: scale(var(--lx-zoom, 1.045)); }
.cm-short__btn::after {              /* subtle navy gradient, strongest behind the caption */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, var(--c-navy-overlay-band-1) 0, var(--c-navy-overlay-band-2) 18%, transparent 52%);
}
.cm-short[data-caption="top"] .cm-short__btn::after {
  background: linear-gradient(to bottom, var(--c-navy-overlay-band-1) 0, var(--c-navy-overlay-band-2) 18%, transparent 52%);
}
.cm-short__play {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: var(--r-circle);
  background: var(--c-brand-500); color: var(--c-surface-0); box-shadow: var(--shadow-3);
  transition: transform var(--lx-dur-hover, .35s) var(--lx-ease, ease);
}
.cm-short__play svg { margin-left: 3px; }
.cm-short:hover .cm-short__play { transform: translate(-50%, -50%) scale(1.08); }
.cm-short__cap {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-16) var(--sp-16) var(--sp-20);
}
.cm-short[data-caption="top"] .cm-short__cap { top: 0; bottom: auto; padding: var(--sp-20) var(--sp-16) var(--sp-16); }
.cm-short__title { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-16); line-height: 1.3; text-wrap: balance; }
.cm-short__cta { font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--c-brand-300); }
.cm-short__btn:focus-visible { outline: 0; box-shadow: inset var(--shadow-focus), inset 0 0 0 3px var(--c-surface-0); }
.cm-short__frame { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; background: var(--c-navy-900); }
.cm-short[data-playing] { transform: none; }

/* Rail: 3-5 shorts, horizontal scroll + snap on mobile, equal columns on desktop */
.cm-short-rail { width: 100%; }
.cm-short-rail__head { max-width: var(--lx-head-max, 760px); margin: 0 0 var(--sp-24); }
.cm-short-rail__eyebrow { margin: 0 0 var(--sp-8); font-size: var(--lx-eyebrow-size, var(--fs-13)); font-weight: var(--fw-semibold); letter-spacing: var(--lx-eyebrow-track, .16em); text-transform: uppercase; color: var(--c-brand-500); }
.cm-short-rail__title { margin: 0; font-family: var(--font-heading); font-size: var(--text-h3); line-height: 1.2; color: var(--c-navy-500); text-wrap: balance; }
.cm-short-rail__lede { margin: var(--sp-8) 0 0; font-size: var(--text-body); max-width: var(--lx-lede-measure, 60ch); }
.cm-short-rail__track {
  display: flex; gap: var(--lx-grid-gap, var(--sp-20)); overflow-x: auto; padding: var(--sp-8) 0 var(--sp-16);
  scroll-snap-type: x mandatory; scroll-padding-inline: 0; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.cm-short-rail__track:focus-visible { outline: 0; box-shadow: var(--shadow-focus); border-radius: var(--r-8); }
.cm-short-rail .cm-short { flex: 0 0 clamp(190px, 62vw, 240px); width: auto; scroll-snap-align: start; }
@media (min-width: 900px) {
  .cm-short-rail__track { overflow: visible; scroll-snap-type: none; }
  .cm-short-rail .cm-short { flex: 1 1 0; min-width: 0; max-width: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  .cm-short, .cm-short__img, .cm-short__play { transition: none; }
  .cm-short:hover, .cm-short:hover .cm-short__img, .cm-short:hover .cm-short__play { transform: none; }
  .cm-short:hover .cm-short__play { transform: translate(-50%, -50%); }
}