.shorts-section { margin-block: 44px; }
.shorts-section .section-heading h2 { line-height: 1.17; }
.shorts-grid { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 300px; margin-inline: auto; }
.short-card { overflow: hidden; border: 1px solid #e9def0; border-radius: 16px; background: #fff; box-shadow: 0 7px 22px #34104f09; transition: transform .23s ease, box-shadow .23s ease; }
.short-trigger { display: block; color: #2f1941; }
.short-trigger:hover { color: #2f1941; }
.short-thumbnail { display: block; position: relative; overflow: hidden; aspect-ratio: 9 / 16; background: #17131d; }
.short-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; }
.short-thumbnail:after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(#120b232b, transparent 40%, #10091a9c); }
.short-badge { position: absolute; left: 14px; top: 15px; z-index: 1; padding: 6px 9px; border: 1px solid #ffffff50; border-radius: 6px; background: #241333b8; color: white; font-size: 8px; letter-spacing: .1em; }
.short-play { position: absolute; z-index: 1; top: 50%; left: 50%; display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid #ffffff70; border-radius: 50%; background: #883c9ce8; color: white; transform: translate(-50%, -50%); box-shadow: 0 5px 25px #0004; }
.short-play .icon { width: 25px; height: 25px; margin-left: 3px; }
.short-watch { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 18px; display: flex; align-items: center; justify-content: space-between; color: white; font-size: 12px; font-weight: 600; }
.short-caption { display: block; padding: 18px; }
.short-caption > span, .short-caption strong { display: block; }
.short-caption strong { font-size: 15px; line-height: 1.5; margin-bottom: 8px; }
.short-caption > span:last-child { color: #806c8b; font-size: 12px; line-height: 1.65; }
.shorts-note { margin: 20px 0 0; text-align: center; font-size: 11px; color: #897195; }
.shorts-dialog { width: fit-content; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); margin: auto; padding: 0; overflow-y: auto; border: 1px solid #ffffff24; border-radius: 16px; background: #18111f; color: #fff; box-shadow: 0 25px 100px #0007; }
.shorts-dialog::backdrop { background: #140b20cf; backdrop-filter: blur(4px); }
.shorts-dialog-layout { padding: 16px; }
.shorts-dialog-header { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 13px; max-width: 405px; }
.shorts-dialog-header p { font-size: 8px; letter-spacing: .15em; color: #d3b8e5; margin-bottom: 5px; }
.shorts-dialog-header h2 { color: #fff; font: 600 14px/1.5 "Segoe UI", Arial, sans-serif; letter-spacing: normal; margin: 0; }
.shorts-close { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border: 1px solid #ffffff30; border-radius: 50%; color: #fff; background: #ffffff10; cursor: pointer; }
.shorts-close:hover { background: #ffffff25; }
.shorts-player { width: min(405px, calc(56.25dvh - 95.625px), calc(100vw - 56px)); min-width: 200px; aspect-ratio: 9 / 16; margin: auto; overflow: hidden; border-radius: 9px; background: #000; }
.shorts-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.shorts-dialog-footer { text-align: center; padding-top: 13px; }
.shorts-dialog-footer a { color: #e7caef; font-size: 11px; text-underline-offset: 4px; }
.shorts-dialog-footer a:hover { color: #fff; text-decoration: underline; }
body.video-is-open { overflow: hidden; }
@media (hover: hover) and (pointer: fine) {
    .short-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px #34104f16; }
}
@media (max-width: 650px) {
    .shorts-section { margin-block: 32px; }
    .shorts-grid { padding: 4px 3px 14px; }
    .short-card { scroll-snap-align: start; }
    .short-caption { padding: 15px; }
    .short-badge { left: 12px; font-size: 7px; }
    .shorts-dialog-layout { padding: 13px; }
    .shorts-close { width: 40px; height: 40px; }
}
@media (max-height: 500px) and (orientation: landscape) {
    .shorts-dialog-layout { display: grid; grid-template-columns: 200px 200px; column-gap: 18px; }
    .shorts-player { grid-column: 1; grid-row: 1 / 3; width: 200px; height: calc(100dvh - 60px); min-height: 200px; aspect-ratio: auto; }
    .shorts-dialog-header { grid-column: 2; grid-row: 1; }
    .shorts-dialog-footer { grid-column: 2; grid-row: 2; align-self: end; }
}
@media (prefers-reduced-motion: reduce) { .short-card { transition: none; } }