/* =============================================================
   OTHER.CSS — Pinterest-style masonry board
   ============================================================= */

/* ── Sticky header wrapper (nav + secondary filter nav) ─────── */
.page-header {
  position: sticky;
  top: 16px;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* ── Page layout ─────────────────────────────────────────────── */
.pin-page {
  min-height: min-content;
}

/* ── Masonry board — JS positions cards absolutely ───────────── */
.pin-board {
  position: relative;
  padding: 16px 0 80px;
  min-height: 200px;
  opacity: 0;
}

/* ── Pin card base ───────────────────────────────────────────── */
.pin-card {
  /* The frame the image sits inside. Driving the inset from one value lets
     the media's corners stay concentric with the card's. */
  --pin-pad: 10px;
  display: block;
  position: relative;
  padding: var(--pin-pad);
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

a.pin-card:hover,
div.pin-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* ── Card media ─────────────────────────────────────────────── */
.pin-card__media {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  /* Outer radius less the inset, so the image's curve runs parallel to the
     card's rather than looking tighter or looser than it. */
  border-radius: calc(var(--border-radius-xl) - var(--pin-pad));
}

/* The picture's edge. Several of these sit on white — the two Shmilly & Petr
   covers especially — and without it their edge vanishes into the card. Same
   value the work page's frame uses. */
.pin-card__media {
  box-shadow: var(--shadow-image);
}

/* ── Photography sets ─────────────────────────────────────────── */
/* The whole set lives in the card, stacked and crossfading. The stage is
   only here to give the nav something unclipped to hang off: the picture
   clips its own overflow, so a pill straddling its bottom edge has to sit
   outside it. */
.pin-card__stage {
  position: relative;
}

/* An empty copy of the picture's shape, sitting behind it and carrying the
   shadow. A box-shadow on the picture would trace its border box and draw
   straight across the bite, so the cast has to come from a filter — but a
   filter over the picture itself would re-rasterize the whole set on every
   frame of the hover parallax. This has nothing in it to re-rasterize, and
   its own white never shows: the picture covers it exactly. */
.pin-card__shade {
  position: absolute;
  inset: 0;
  z-index: 0;
  filter: drop-shadow(var(--shadow-image-cast));
  pointer-events: none;
}

/* The bitten shape itself. Clipped here rather than on the shade, because
   clip-path runs after filter — on one element the clip trims off the very
   shadow the filter just cast. */
.pin-card__shade-fill {
  position: absolute;
  inset: 0;
  background: #ffffff;
  border-radius: calc(var(--border-radius-xl) - var(--pin-pad));
}

/* Above the shade, and casting nothing of its own */
.pin-card__media--slides {
  position: relative;
  z-index: 1;
  box-shadow: none;
}

.pin-card__media--slides .pin-card__img {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* transform is the hover parallax in other-parallax.js; it has to survive */
  transition: transform 300ms ease, opacity 520ms cubic-bezier(0.4, 0, 0.2, 1);
}

.pin-card__media--slides .pin-card__img.is-active {
  opacity: 1;
  z-index: 1;
}

/* Only the two frames actually changing are promoted — a card holds up to
   ten of these and painting them all on their own layer is what made the
   change feel heavy. */
.pin-card__media--slides .pin-card__img.is-active,
.pin-card__media--slides .pin-card__img.is-under {
  will-change: opacity;
}

/* The frame being replaced, held opaque underneath until the new one has
   finished covering it — see the note in photo-slideshow.js */
.pin-card__media--slides .pin-card__img.is-under {
  opacity: 1;
  z-index: 0;
}

/* A smaller cut of the slideshow nav from the home and work pages, laid on
   its side. It sits in a notch clipped out of the picture's bottom edge by
   photo-slideshow.js — the same bite the slideshow's pill sits in — so it
   reads as part of the picture rather than as something laid over it. A
   read-out only: the card still opens the lightbox. */
.pin-nav {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border-radius: 100px;
  background: #ffffff;
  /* Its own, now that the cast comes from a shape the pill is not part of.
     A plain rounded pill needs no filter, and --shadow-image is the value
     --shadow-image-cast was calibrated against, so the two still match. */
  box-shadow: var(--shadow-image);
  pointer-events: none;
}

.pin-nav__dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.22);
  flex-shrink: 0;
  transition: width 260ms cubic-bezier(0.34, 1.56, 0.64, 1), background 180ms ease;
}

.pin-nav__dot.is-active {
  width: 18px;
  background: var(--color-active);
}

@media (prefers-reduced-motion: reduce) {
  .pin-card__media--slides .pin-card__img { transition: opacity 1ms linear; }
  .pin-nav__dot { transition: none; }
}

.pin-card__media--play      { aspect-ratio: 1 / 1;  }
.pin-card__media--tall      { aspect-ratio: 2 / 3;  }
.pin-card__media--landscape { aspect-ratio: 16 / 9; }

.pin-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 300ms ease;
}

/* Image scale/translate driven by other-parallax.js on hover */

/* Play overlay */
.pin-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 180ms ease;
}

a.pin-card:hover .pin-card__play {
  opacity: 1;
}

.pin-card__play-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 2.5px solid #ff4d00;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff4d00;
  box-shadow: 0 2px 16px rgba(255, 77, 0, 0.35);
}

/* ── Card info — below the image, on the card surface ────────── */
/* Below the image rather than over it. The card is the section: the media
   sits alone at the top, and the tag, title and date live underneath on the
   card's own white surface. Previously this was absolutely positioned over
   the image behind a dark scrim, which put the text on top of the picture
   and darkened whatever it covered. */
.pin-card__info {
  position: static;
  padding: 14px 10px 6px;
  /* Grid rather than a column, so the category and the date share the top
     row without needing a wrapper element around them in all 19 cards. */
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "tag   date"
    "title title";
  column-gap: 12px;
  row-gap: 2px;
  align-items: baseline;
}

.pin-card__tag {
  font-family: var(--font-primary);
  font-size: var(--scale-1);   /* 12px */
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  grid-area: tag;
  min-width: 0;
}

.pin-card__title {
  font-family: var(--font-primary);
  font-size: var(--scale-3);   /* 17.28px */
  font-weight: 700;
  color: var(--color-text-dark);
  line-height: 1.3;
  grid-area: title;
}

/* Set exactly like the category opposite it — same size, weight, case and
   tracking — so the two ends of the meta row read as one line rather than a
   label and a stray value. */
.pin-card__sub {
  font-family: var(--font-primary);
  font-size: var(--scale-1);   /* 12px */
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  /* Hard right of the card, opposite the category */
  grid-area: date;
  justify-self: end;
  white-space: nowrap;
}

/* ── Video thumbnails — fill the frame like the photos do ──── */
.pin-card__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Idea cards — dark aurora preview ───────────────────────── */
.pin-card__idea-preview {
  width: 100%;
  height: 100%;
  background: #0c0c0f;
  position: relative;
  overflow: hidden;
}

/* Suppress the aurora pseudos behind the node graph */
.pin-card__idea-preview--agents::before,
.pin-card__idea-preview--agents::after {
  display: none;
}

/* AI-agents variant: dark, orchestrator → agents node graph inside */
.pin-card__idea-preview--agents {
  background: #07101e;
}

.pin-card__idea-preview::before {
  content: '';
  position: absolute;
  top: -20%;
  left: 30%;
  width: 55%;
  height: 80%;
  background: radial-gradient(ellipse, rgba(190,68,210,0.55) 0%, rgba(255,96,72,0.3) 45%, transparent 75%);
  mix-blend-mode: screen;
}

.pin-card__idea-preview::after {
  content: '';
  position: absolute;
  top: -10%;
  left: 48%;
  width: 40%;
  height: 65%;
  background: radial-gradient(ellipse, rgba(88,72,255,0.4) 0%, transparent 70%);
  mix-blend-mode: screen;
}