/* Video cards for /videos and /cad-tools. Sits on top of learn.css and uses
   its tokens, so light and dark mode come for free. */

.vgrid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.vgrid.is-feature { grid-template-columns: 1fr; }

/* Shorts: a row of vertical cards. On a phone they scroll sideways with a
   snap, so eight Shorts do not make a page eight screens tall. */
.vshorts { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
@media (max-width: 700px) {
  .vshorts { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 62%;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px;
    margin: 0 -24px; padding-left: 24px; padding-right: 24px; scroll-padding-left: 24px; }
  .vshorts .vcard { scroll-snap-align: start; }
}

.vcard { margin: 0; min-width: 0; }
.vplay, .vframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 14px;
  overflow: hidden; background: #0d0e13; box-shadow: var(--shadow); }
.vcard.is-short .vplay, .vcard.is-short .vframe { aspect-ratio: 9 / 16; }

.vplay { position: relative; padding: 0; cursor: pointer; }
.vplay img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.vplay:hover img { transform: scale(1.03); }
.vplay:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.vplay-btn { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px;
  border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: rgba(17, 105, 55, .92); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); transition: transform .2s ease; }
.vplay-btn svg { margin-left: 3px; }
.vplay:hover .vplay-btn { transform: scale(1.08); }
.vcard.is-short .vplay-btn { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
.vtag { position: absolute; left: 10px; top: 10px; font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: #fff; background: rgba(0, 0, 0, .62); padding: 4px 9px; border-radius: 999px; }

.vcard figcaption { margin-top: 12px; display: grid; gap: 5px; }
.vtitle { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 16.5px; line-height: 1.35;
  color: var(--ink); text-decoration: none; }
.vtitle:hover { color: var(--brand); }
.vcard.is-short .vtitle { font-size: 14.5px; }
.vblurb { font-size: 15px; line-height: 1.55; color: var(--body); }

/* CAD Tools benefits: each Short carries its headline and a line of copy, so
   the cards need more width than the bare Shorts row. */
.vshorts.is-benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 20px; }
.vshorts.is-benefits .vtitle { font-size: 16px; }
.vshorts.is-benefits .vblurb { font-size: 14.5px; }
@media (max-width: 980px) { .vshorts.is-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .vshorts.is-benefits { grid-template-columns: none; grid-auto-columns: 74%; }
}