/* Vertical videos (reels) — cards, strip and grid. */
.reels-strip { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 18px) / 5); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; }
.reels-strip > * { scroll-snap-align: start; }
.reels-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 22px; }
.reel-card { display: block; color: #1d2939; text-decoration: none !important; }
.reel-card:hover { color: #0b6265; }
.reel-thumb { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #0f1d22; box-shadow: 0 6px 18px rgba(10, 30, 35, .14); }
.reel-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.reel-thumb.is-wide img { object-fit: contain; background: #0f1d22; }
.reel-card:hover .reel-thumb img { transform: scale(1.04); }
.reel-thumb::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); pointer-events: none; }
.reel-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #0b6265; display: flex; align-items: center; justify-content: center; font-size: 18px; z-index: 2; box-shadow: 0 4px 16px rgba(0, 0, 0, .3); transition: transform .2s; }
.reel-play i { margin-left: -3px; }
.reel-card:hover .reel-play { transform: translate(-50%, -50%) scale(1.08); }
.reel-cat { position: absolute; top: 10px; right: 10px; z-index: 2; background: #054245; color: #fff; font-size: 12px; padding: 2px 10px; border-radius: 99px; }
.reel-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 10px; font-size: 15px; font-weight: 700; line-height: 1.75; }
.reel-date { display: block; font-size: 12px; color: #66727a; margin-top: 2px; }
@media (max-width: 991px) { .reels-strip { grid-auto-columns: calc((100% - 2 * 14px) / 2.6); gap: 14px; } }
@media (max-width: 575px) {
    .reels-strip { grid-auto-columns: 44%; margin: 0 -15px; padding: 0 15px 12px; scroll-padding: 0 15px; }
    .reels-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .reel-title { font-size: 14px; }
    .reel-play { width: 44px; height: 44px; font-size: 15px; }
}