/* Four published channel Shorts, scoped to their Watch section. */
body.fc-watch-shorts { overflow-wrap: anywhere; }
.watch-shorts { padding-block: 36px; overflow-wrap: anywhere; }
.watch-shorts .watch-shorts-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 20px; }
.watch-shorts .watch-shorts-grid > .watch-short { flex: 0 1 310px; width: 310px; max-width: 100%; box-sizing: border-box; }
.watch-shorts .watch-short { min-width: 0; overflow: hidden; border: 1px solid var(--fc-line); border-radius: 18px; background: var(--fc-surface, #193b42); scroll-margin-top: var(--fc-anchor-offset, 16px); }
.watch-shorts .watch-short-media { position: relative; aspect-ratio: 9 / 16; background: #091b23; }
.watch-shorts .watch-short-preview { display: block; width: 100%; height: 100%; position: relative; }
.watch-shorts .watch-short-preview[hidden] { display: none; }
.watch-shorts .watch-short-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.watch-shorts .watch-short-open { display: block; margin-bottom: 16px; padding: 12px; border-radius: 24px; text-align: center; color: #102a35; background: var(--fc-gold-light, #f2d188); font-weight: 700; }
.watch-shorts .watch-short-copy { padding: 18px; }
.watch-shorts .watch-short-copy h3 { margin: 0 0 12px; font-size: 1.2rem; line-height: 1.35; }
.watch-shorts .watch-short-copy p { margin: 0 0 14px; }
.watch-shorts .watch-short-speaker { color: var(--fc-gold-light, #f2d188); font-weight: 600; }
.watch-shorts .watch-short-media iframe { display: block; width: 100%; height: 100%; border: 0; }
.watch-shorts .watch-short-player { position: absolute; inset: 0; visibility: hidden; }
.watch-shorts .watch-short-player[data-ready="true"] { visibility: visible; }
.watch-shorts .watch-short-stop { display: block; margin: 0; width: 100%; min-height: 48px; padding: 12px; border: 0; border-bottom: 2px solid #102a35; background: #f2d188; color: #102a35; font: inherit; font-weight: 700; cursor: pointer; }
.watch-shorts .watch-short[data-playing] .watch-short-media { width: min(100%, calc((100svh - 190px) * 9 / 16)); margin-inline: auto; }
.watch-shorts .watch-short[data-playing] .watch-short-open { display: none; }
.watch-shorts .watch-short-stop:focus-visible { outline: 3px solid #102a35; outline-offset: -6px; }
.watch-shorts a:focus-visible, .watch-shorts button:focus-visible { outline: 3px solid var(--fc-gold-light, #f2d188); outline-offset: -4px; }
.watch-shorts .watch-shorts-updated { margin-block: 20px 0; font-size: .9rem; }
@media (max-width: 600px) { .watch-shorts .watch-shorts-grid > .watch-short { flex-basis: 100%; width: 100%; } }

.watch-shorts-more { margin-block: 20px; }
.watch-shorts-more > summary { display: flex; cursor: pointer; width: fit-content; max-width: 100%; white-space: normal; margin-inline: auto; }
.watch-shorts-more[open] > summary { margin-bottom: 20px; }
.watch-shorts-more > summary:focus-visible { outline: 3px solid var(--fc-gold-light, #f2d188); outline-offset: 4px; }
.watch-shorts-collapse { display: block; margin: 20px auto 0; cursor: pointer; }

/* Desktop opens all four in one row. Without script, disclosure stays usable. */
@media (min-width: 1024px) {
    .watch-shorts[data-shorts-desktop] .watch-shorts-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, calc(75% - 5px)); gap: 20px; margin-block: 20px; }
    .watch-shorts[data-shorts-desktop] .watch-shorts-more { margin: 0; min-width: 0; }
    .watch-shorts[data-shorts-desktop] .watch-shorts-more::details-content { height: 100%; }
    .watch-shorts[data-shorts-desktop] .watch-shorts-more > summary,
    .watch-shorts[data-shorts-desktop] .watch-shorts-collapse { display: none; }
    .watch-shorts[data-shorts-desktop] .watch-shorts-more > .watch-shorts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .watch-shorts[data-shorts-desktop] .watch-shorts-grid { height: 100%; align-items: stretch; }
    .watch-shorts[data-shorts-desktop] .watch-shorts-grid > .watch-short { display: flex; flex-direction: column; width: 100%; max-width: none; flex: 1 1 0; }
    .watch-shorts[data-shorts-desktop] .watch-short-copy { display: flex; flex-direction: column; flex: 1; }
    .watch-shorts[data-shorts-desktop] .watch-short-copy > a:last-child { margin-top: auto; }
}