/* Clips page (/clips): the 4-across grid of 9:16 clip covers (cards come from data/clips.json
   via scripts/build_clips.py).
   Card markup and hover/tap behaviour are ported verbatim from the live Squarespace code block
   days/2026-05-01_website_update/clips-page-code-by-claude/clips_grid.html (2026-09-07).
   Loaded after /assets/css/site.css.

   THE FRAME (George's rule, 2026-09-20): the black border around the grid is a FIXED size at
   every window width, the same on the sides as on top (24px desktop, 11px phone), and the
   cards absorb all of the width change as the window is dragged. The Squarespace original
   was `width: 95vw` broken out of a 1000px column with negative margins, which made the side
   gutters 2.5vw (20px at 1100 wide, 36px at 1440, 50px at 2000) beside a fixed 24px top, cut
   the top 9px off the first row between 601 and 736px wide, and hid the last row's bottom
   36px behind the bar on phones. The frame now lives on `main` (bottom of this file) and the
   grid is a plain block inside it; no vw, so a classic scrollbar cannot skew the gutters. */

.clips-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.clip-item {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 9 / 16;
  background: #000;
}

.clip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s ease;
}

/* Hover only fires on real mouse — prevents iOS sticky-hover bug */
@media (hover: hover) {
  .clip-item:hover img {
    opacity: 0.3;
  }
  .clip-item:hover .clip-overlay {
    opacity: 1;
    background: rgba(0, 0, 0, 0.55);
  }
}

.clip-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: rgba(0, 0, 0, 0);
  opacity: 0;
  transition: opacity 0.3s ease, background 0.3s ease;
  /* While it is invisible it must not catch a tap: on a phone the first tap on a card only
     OPENS the overlay; it never lands on a logo or the play button nobody can see yet. */
  pointer-events: none;
}
.clip-item.active .clip-overlay,
.clip-item:focus-within .clip-overlay {
  pointer-events: auto;
}
@media (hover: hover) {
  .clip-item:hover .clip-overlay {
    pointer-events: auto;
  }
}

/* Mobile tap-to-reveal */
.clip-item.active img {
  opacity: 0.3;
}

.clip-item.active .clip-overlay {
  opacity: 1;
  background: rgba(0, 0, 0, 0.55);
}

.clip-logos {
  display: flex;
  gap: 20px;
  align-items: center;
}

.clip-logos a {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.clip-logos a:hover {
  transform: scale(1.15);
}

/* Pink flash (#f297ee) on logo tap — JS-driven so it works on iOS */
.clip-logos a.tapped svg {
  fill: #f297ee;
}

/* Desktop: pink on mouse hover of logo */
.clip-logos a:hover svg {
  fill: #f297ee;
}

.clip-logos svg {
  width: 36px;
  height: 36px;
  fill: #fff;
}

/* ---------- play button + where the two logos sit (every device; see clips.js) ----------
   George's layout, 2026-09-20: the play button stays where it first landed (its centre 27px
   above the tile's middle) and the Instagram/TikTok logos sit 5% of the tile LOWER than they
   used to (first tried at 12.5%; George, on seeing it: "bring the two logos up"), so someone who just wants to press play has nothing else near their
   finger or cursor, and the logos are still there for anyone who would rather watch in the app.
   Both are placed from the tile's own height (top: %), so the spacing scales with the cards.
   A card with no video has no play button and keeps its logos dead centre, as before. */
.clip-item[data-video] .clip-logos {
  position: absolute;
  left: 50%;
  top: calc(55% + 47px);        /* old centre (50% + 47px) + 5% of the tile */
  transform: translate(-50%, -50%);
}

.clip-play {
  position: absolute;
  left: 50%;
  top: calc(50% - 27px);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  padding: 0;
  border: 4px solid #fff;       /* George: "more of a stamp": thicker ring (2px, then 3px, now 4px) */
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.clip-play svg {
  width: 40px;               /* ...and a thicker triangle: bigger, with a rounded stroke so it */
  height: 40px;              /* reads as one bold stamped mark rather than a thin glyph */
  margin-left: 3px;          /* a triangle looks off-centre when it is centred */
  fill: #fff;
  stroke: #fff;
  stroke-width: 2;
  stroke-linejoin: round;
  transition: fill 0.2s ease, stroke 0.2s ease;
}
/* Pink (#f297ee) like the logos: JS-driven flash on touch, hover/focus with a mouse or keyboard */
.clip-play.tapped,
.clip-play:focus-visible {
  border-color: #f297ee;
  outline: none;
}
.clip-play.tapped svg,
.clip-play:focus-visible svg {
  fill: #f297ee;
  stroke: #f297ee;
}

@media (hover: hover) and (pointer: fine) {
  .clip-item[data-video] {
    cursor: pointer;
  }
  .clip-play:hover,
  .clip-play:focus-visible {
    transform: translate(-50%, -50%) scale(1.1);
    border-color: #f297ee;
  }
  .clip-play:hover svg {
    fill: #f297ee;
    stroke: #f297ee;
  }
  /* keyboard users: tabbing onto the button or a logo reveals the overlay like a hover does */
  .clip-item:focus-within img {
    opacity: 0.3;
  }
  .clip-item:focus-within .clip-overlay {
    opacity: 1;
    background: rgba(0, 0, 0, 0.55);
  }
}

/* Phones: two narrow columns, so a smaller button; the logos keep their size (tap targets). */
@media (max-width: 600px) {
  .clip-play {
    width: 60px;
    height: 60px;
  }
  .clip-play svg {
    width: 31px;
    height: 31px;
  }
}

.clip-item video {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.clip-item.playing video {
  display: block;
}
.clip-item.playing .clip-overlay {
  display: none;
}

@media (max-width: 600px) {
  .clips-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

/* ---------- the frame ----------
   `main` is the full width of the page here (not the shell's 1000px column) and its padding IS
   the black frame: 24px top and sides (the top was always 24px; measured 2026-09-07), 11px on
   phones (the measured phone top). Bottom padding: shell.js gives `main` a bottom margin of
   (bar height - 3px), so the last row stops (padding-bottom - 3px) above the bar: 6px on
   desktop, as it always has, and 11px on phones to match the rest of the phone frame. */
body[data-page="clips"] main {
  width: auto;
  max-width: none;
  padding: 24px 24px 9px;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
@media (max-width: 736px) {
  body[data-page="clips"] main {
    margin-bottom: 43px;
  }
}
@media (max-width: 600px) {
  body[data-page="clips"] main {
    padding: 11px 11px 14px;
  }
}

/* Photo windows use the exact clip geometry without video hover/tap behavior. */
.clip-filler {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 9 / 16;
  background: #000;
}
.clip-filler img {
  position: absolute;
  top: 0;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}