/* ============================================================
   Videos section (hub, category pages, watch pages)
   Loaded by the /videos... static pages via <link> in page body.
   Source of truth for page generation: projects/Video-Page
   ============================================================ */

/* Left nav: indent category links under Video Library */
.help-center-nav ul:last-of-type li:not(.cp-menu):not(:first-child):not(:last-child) { padding-left: 1.6rem; }

/* Breadcrumb */
.vid-crumb { font-size: var(--fs-02); margin: 0 0 .75rem; }
.vid-crumb a { color: var(--brand-6); }
.vid-crumb a:hover { text-decoration: underline; }

/* Intro paragraph (hub + category pages) */
.vid-lead { font-size: var(--fs-04); color: var(--clr-text-2); width: 100%; margin: 0 0 1.5rem; }

/* Video card grid */
.vid-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); width: 100%; margin: 0 0 2rem; }
@media (min-width: 48rem) { .vid-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vid-card { background: var(--white); border: 1px solid var(--gray-2); border-radius: .7rem; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.vid-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.vid-card a { display: block; color: inherit; text-decoration: none; }
.vid-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--gray-1); }
.vid-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
.vid-thumb .vid-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,.55); display: grid; place-items: center; }
.vid-thumb .vid-play::after { content: ""; border-left: 14px solid var(--white); border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 3px; }
.vid-thumb .vid-dur { position: absolute; right: .4rem; bottom: .4rem; background: rgba(0,0,0,.8); color: var(--white); font-size: var(--fs-01); padding: .1rem .35rem; border-radius: .25rem; }
.vid-meta { padding: .6rem .7rem .8rem; }
.vid-meta .vid-t { font-weight: 500; font-size: var(--fs-02); line-height: 1.25; color: var(--clr-text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.3em; }
.vid-meta .vid-v { font-size: var(--fs-01); color: var(--gray-6); margin-top: .3rem; }

/* Category cards (hub) */
.vid-cat-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); width: 100%; margin: 0 0 2rem; }
@media (min-width: 48rem) { .vid-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vid-cat-card { display: block; background: var(--white); border: 1px solid var(--gray-2); border-radius: .7rem; padding: 1rem 1.1rem; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.vid-cat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.vid-cat-card .vid-cat-name { font-family: var(--ff-condensed); font-size: var(--fs-05); font-weight: 500; color: var(--clr-blue); }
.vid-cat-card .vid-cat-count { font-size: var(--fs-01); color: var(--gray-5); margin-left: .4ch; }
.vid-cat-card p { font-size: var(--fs-02); color: var(--clr-text-2); margin: .4rem 0 0; }

/* Bottom CTA banner (hub) */
.vid-cta { display: grid; gap: 1rem; align-items: center; justify-items: center; width: 100%; background: var(--bg-light-blue); border-radius: var(--border-radius); padding: 1.5rem 1rem; margin: 0 0 1rem; text-align: center; }
.vid-cta .vid-cta-msg { font-size: var(--fs-05); font-weight: 500; color: var(--clr-dark-blue); }
@media (min-width: 64rem) { .vid-cta { grid-template-columns: 1fr auto; text-align: left; } .vid-cta .vid-cta-msg { justify-self: start; } }

/* Watch page: player + facts + copy */
.vid-player { width: 100%; aspect-ratio: 16 / 9; border-radius: .7rem; overflow: hidden; margin: 0 0 1.25rem; background: var(--gray-1); }
.vid-player iframe { width: 100%; height: 100%; border: 0; display: block; }
.vid-facts { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: var(--fs-02); color: var(--gray-6); margin: 0 0 1.25rem; }
.vid-facts span b { font-weight: 500; color: var(--clr-text-3); }
.vid-copy { font-size: var(--fs-03); color: var(--clr-text-2); width: 100%; }
.vid-copy h3, .vid-shop h3, .vid-related h3 { padding-bottom: .5rem; }

/* Shop block */
.vid-shop { width: 100%; background: linear-gradient(to bottom, var(--bg-light-blue), hsl(217, 95%, 98%)); border: 1px solid var(--gray-2); border-radius: var(--border-radius); padding: 1.25rem 1.25rem 1.5rem; margin: 1.5rem 0 1rem; }
.vid-shop h3 { margin-top: 0; }
.vid-shop p { margin: 0 0 .75rem; }
.vid-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem; width: 100%; }
.vid-shop-link { display: flex; align-items: center; justify-content: space-between; gap: .75rem; background: var(--white); border: 1px solid var(--gray-2); border-radius: .5rem; padding: .65rem .9rem; font-weight: 500; font-size: var(--fs-02); color: var(--clr-primary-link); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.vid-shop-link .vid-shop-arrow { color: var(--brand-4); font-size: var(--fs-04); line-height: 1; }
.vid-shop-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); color: var(--clr-primary-hover); }

/* Related videos (watch page) */
.vid-related { margin: 1.5rem 0 0; }
.vid-related a { color: var(--brand-6); }
.vid-related a:hover { text-decoration: underline; }