/* Home page promotion videos (public/js/chai-promo.js). Theme colours (--red, --card, --card-b, --ink, --ink-soft),
   so every website design and dark mode style it. */
/* close to the banner above and the categories below */
html .hero + section.pv-sec, .pv-sec { padding-top: 14px; padding-bottom: 0; }
html .pv-sec + section.section { padding-top: 14px; }
.pv-head { align-items: flex-end; }
.pv-nav { display: flex; gap: 8px; }
.pv-nav button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--card-b); background: var(--card); color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .2s, color .2s; }
.pv-nav button:hover { background: var(--red); color: #fff; transform: scale(1.06); }
/* position: relative so each card's offsetLeft is measured from the track (chai-promo.js centres on it) */
.pv-track { position: relative; display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding: 16px 0 6px; -webkit-overflow-scrolling: touch; cursor: grab; user-select: none; }
.pv-track:active { cursor: grabbing; }
.pv-track::-webkit-scrollbar { display: none; }
/* size and see-through are set each frame by chai-promo.js (bigger near the middle) */
.pv-card { position: relative; flex: 0 0 15.5%; display: grid; gap: 8px; color: inherit; text-decoration: none; transform-origin: 50% 60%; will-change: transform; -webkit-user-drag: none; }
.pv-media { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: color-mix(in srgb, var(--ink) 8%, var(--card)); box-shadow: 0 18px 34px -26px rgba(0,0,0,.55); }
.pv-card.on .pv-media { box-shadow: 0 26px 48px -26px color-mix(in srgb, var(--red) 70%, #000); outline: 3px solid color-mix(in srgb, var(--red) 70%, transparent); outline-offset: -3px; }
.pv-media video, .pv-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-play { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--red); box-shadow: 0 10px 24px -8px rgba(0,0,0,.5); transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .3s; }
.pv-play svg { width: 24px; height: 24px; fill: currentColor; margin-left: 3px; }
.pv-card.on .pv-play { opacity: 0; transform: scale(.6); } .pv-card.on:hover .pv-play { opacity: 1; transform: none; }
.pv-yt { position: absolute; top: 10px; left: 10px; padding: 3px 8px; border-radius: 6px; font: 800 11px Poppins, sans-serif; font-style: normal; color: #fff; background: #ff0000; }
.pv-t { font-size: 14.5px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 6px; }
.pv-card:not(.on) .pv-t { color: var(--ink-soft); font-weight: 600; }
@media (min-width: 601px) { .pv-track { padding: 30px 0 14px; } } /* room for the bigger middle video */
@media (max-width: 1024px) { .pv-card { flex-basis: 23%; } }
@media (max-width: 600px) { .pv-card { flex-basis: 47%; } .pv-t { font-size: 12.5px; padding: 0 2px; } .pv-track { gap: 6px; } .pv-nav { display: none; } .pv-media { border-radius: 16px; } .pv-play { width: 44px; height: 44px; margin: -22px 0 0 -22px; } }