/* "Explore everything we can make": video cards of our YouTube tutorials, on videos.html and the home page (2026-10-30) */
.explore { padding: clamp(20px, 3vw, 40px) var(--side) clamp(60px, 8vw, 120px); background: rgba(248,248,255,.86);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.explore h2 { color: var(--ink); font-size: clamp(30px, 4vw, 54px); line-height: 1.05; letter-spacing: -.03em; font-weight: 700; text-align: center; }
/* Cards share each row: 3 in a row, and a last row of 2 fills the width with two big cards */
.xgrid { display: flex; flex-wrap: wrap; gap: clamp(18px, 2.2vw, 30px); margin: clamp(28px, 4vw, 52px) 0 0; padding: 0; list-style: none; }
.xgrid li { flex: 1 1 calc(33.33% - 30px); min-width: 0; }
.xcard { display: block; height: 100%; padding: 10px 10px 16px; border-radius: 18px; background: #fff; color: var(--ink); text-decoration: none;
  box-shadow: 0 18px 40px -26px rgba(29,38,184,.45); transition: transform .18s ease, box-shadow .18s ease; }
.xcard:hover { transform: translateY(-3px); box-shadow: 0 24px 46px -24px rgba(29,38,184,.6); }
.xcard img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.xcard b { display: block; margin: 14px 6px 0; font-size: 17px; line-height: 1.3; letter-spacing: -.01em; font-weight: 700; }
.xcard small { display: flex; align-items: center; gap: 7px; margin: 4px 6px 0; color: var(--muted); font-size: 14px; }
/* The cards read as videos: play button, length, YouTube logo */
.xthumb { position: relative; display: block; }
.xplay { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center;
  width: 56px; aspect-ratio: 1; border-radius: 50%; background: rgba(12,14,36,.35); transform: translate(-50%, -50%);
  transition: transform .18s ease, background .18s ease; }
.xplay svg { width: 56%; height: 56%; margin-left: 4%; }
.xcard:hover .xplay, .xcard:focus-visible .xplay { transform: translate(-50%, -50%) scale(1.143); background: rgba(12,14,36,.45); }
.xtime { position: absolute; right: 8px; bottom: 8px; padding: 3px 7px; border-radius: 5px; background: rgba(0,0,0,.82); color: #fff;
  font-size: 13px; line-height: 1.2; font-weight: 600; font-variant-numeric: tabular-nums; }
.xyt { flex: none; width: 21px; height: 15px; }
.xnote { margin-top: 20px; color: var(--muted); font-size: 13px; line-height: 1.4; text-align: center; }
.xend { margin-top: clamp(44px, 5vw, 72px); text-align: center; }
.xend .btn-lg { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 18px 34px; font-size: 19px; }
.xend .xyt { width: 28px; height: 20px; }
/* Home page: the section follows "Your first video starts here", so it needs its own space and a line above it */
.xhome { padding-top: clamp(50px, 6vw, 90px); border-top: 1px solid var(--line); }
@media (max-width: 600px) {
  .xgrid li { flex-basis: 100%; }
  .xend .btn-lg { width: 100%; }
}