/* jaschahal.ca: the /videos page's own looks. Loaded by site/videos.html
   alone, after styles.css. Everything shared stays in styles.css (the .vid
   cards and .vid-empty, which are the worker's render contract, the .page
   header, .social-links, .cta-band); this file only spaces the wall and
   dresses the follow row. No inline styles anywhere: the CSP is strict
   (Trevor's ask, 2026-09-23: same chassis and guardrails as
   maplegroovefinancial.ca). Mobile first; breakpoint at 900px. */

/* The renderer's empty state is a <div class="vid-empty"> with one <p>
   inside (scripts/social-videos/render.mjs). The base paragraph margin
   would leave a gap under the text inside the dashed box. */
.videos-page .vid-empty p { margin: 0; }

/* The wall: the generated block plus the one-line note under it. */
.videos-wall { margin-bottom: clamp(44px, 6vw, 72px); }

/* Under each card the date and the "Watch on Instagram" link share one
   12px uppercase line. In a four- or five-column wall the column is about
   270px, too narrow for both, and the date was breaking mid-phrase
   ("Sep 22," over "2026"). Keep the date whole and let the link drop to a
   second line instead. Page-scoped; the shared rule lives in styles.css. */
.videos-page .vid__meta { flex-wrap: wrap; row-gap: 2px; }
.videos-page .vid__meta time { white-space: nowrap; }
.videos-note {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--ink-2);
}

/* Follow row: intro on the left, the round social buttons on the right.
   A white card on the off-white page, like the listing and service cards,
   so the page has a clear close before the navy CTA band. */
.videos-follow {
  display: grid;
  gap: 22px;
  align-items: center;
  padding: clamp(26px, 4vw, 40px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  margin-bottom: clamp(52px, 8vw, 96px);
}
.videos-follow h2 { font-size: clamp(24px, 2.6vw, 30px); }
.videos-follow__body p:last-child { margin-bottom: 0; max-width: 56ch; }
@media (min-width: 900px) {
  .videos-follow { grid-template-columns: 1fr auto; gap: 40px; }
}