/* ---------- social-grid.html ----------
   The Grid: 20 vertical video clips (23 minus the 3 "pebby forevee"
   ones Chloe flagged not to include), grouped into sections by their
   source folder under Social videos/. Shares .site-header/.site-footer
   and the --cream/--ink/--blue tokens from style.css; this file only
   covers what's specific to this page. */

.social-grid-main {
  max-width: 90rem;
  margin: 0 auto;
  padding: 3rem var(--edge) 5rem;
}

.social-grid-intro {
  max-width: 40rem;
  margin: 0 0 3.5rem;
}

.social-grid-back {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  opacity: 0.7;
}

.social-grid-back:hover { opacity: 1; }

/* Repeat of the top back-link, placed just above the footer so a visitor
   who's scrolled through the whole grid doesn't have to scroll back up
   to leave. Sits inside .social-grid-main so it inherits the same edge
   padding as everything else on the page. */
.social-grid-back-bottom {
  display: block;
  width: fit-content;
  margin: 4rem 0 0;
}

.social-grid-title {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  /* Widescreen Ex tops out at 700 (no true 900/black) */
  font-weight: 700;
  text-transform: uppercase;
  /* was clamp(2.5rem, 7vw, 5rem) when this read "The Grid" — "Life on
     the Grid" is too long a line at that scale and wraps inside
     .social-grid-intro's 40rem max-width once the font hits its old
     5rem cap, so it's capped lower here to guarantee one line. Tuned
     against Montserrat's rendered width — not re-verified against
     Widescreen Ex, which may render wider/narrower; re-check for
     wrapping once the font is actually loadable (domain-locked, doesn't
     render on localhost). */
  font-size: clamp(2rem, 6vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.social-grid-blurb {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0.7;
  max-width: 34rem;
}

.grid-section + .grid-section {
  margin-top: 3.5rem;
}

.grid-section-title {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  /* Widescreen Ex tops out at 700 (no true 900/black) */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.1rem;
}

/* 4 across by default, shrinking to 2 on narrower viewports — no gap, no
   side margins (full-bleed breakout, same technique as .packages-clouds
   on the home page: width:100vw + left:50%/-50vw margin escapes
   .social-grid-main's max-width and padding regardless of viewport
   size).

   2026-08-18 (Chloe): borders between tiles removed — only the grid's
   own outer frame remains (this container's top+left edge, plus
   border-right/border-bottom on just the last column/row of tiles below,
   via nth-child). Every category's tile count (8/4/4/4) divides evenly
   by both 4 and 2, so "last column"/"last row" via nth-child math never
   has to account for a ragged partial row.

   align-items:start (not the grid default of stretch) so a shorter row
   (e.g. the last, partial row) never gets stretched to match a taller
   one elsewhere on the page. */
.video-grid {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: start;
  border-top: 2px solid var(--ink);
  border-left: 2px solid var(--ink);
}

/* box-sizing:border-box is global (style.css), so these borders sit
   inside each tile's own grid cell rather than adding to its size */
.grid-tile:nth-child(4n) {
  border-right: 2px solid var(--ink);
}

.grid-tile:nth-last-child(-n+4) {
  border-bottom: 2px solid var(--ink);
}

@media (max-width: 760px) {
  .video-grid { grid-template-columns: repeat(2, 1fr); }

  .grid-tile:nth-child(4n) { border-right: none; }
  .grid-tile:nth-child(2n) { border-right: 2px solid var(--ink); }

  .grid-tile:nth-last-child(-n+4) { border-bottom: none; }
  .grid-tile:nth-last-child(-n+2) { border-bottom: 2px solid var(--ink); }
}

.grid-tile-media {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--ink);
  cursor: pointer;
}

.grid-tile-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Small play-triangle affordance shown over the poster frame — fades out
   once main.js starts the video playing (.is-playing), fades back in on
   pause/mouseleave. Pure CSS triangle (border trick) rather than an SVG,
   since it's just a single flat shape with no reuse elsewhere. */
.grid-tile-media::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.9rem 0 0.9rem 1.4rem;
  border-color: transparent transparent transparent var(--cream);
  transform: translate(-45%, -50%);
  opacity: 0.9;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.grid-tile-media.is-playing::after {
  opacity: 0;
}