/* ============================================================================
   Project and article pages — hero, meta table, prose, and the media blocks
   the six sub-pages draw from. Loaded after base.css.
   ========================================================================== */

/* ── Hero + heading ───────────────────────────────────────────────────────── */

.hero {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--bg-secondary);
  /* A page may supply a second, phone-only picture; the desktop block below
     goes back to the wide one. Both arrive as custom properties from
     PF.ui.hero(). */
  background-image: var(--hero-mobile, var(--hero));
  background-size: cover;
  background-position: center;
  /* `cover` is rounded to whole pixels and can land a hair short of the box;
     without this the wrapped copy shows as a sliver down one edge. */
  background-repeat: no-repeat;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  display: block;
  margin-bottom: 32px;
}

.type-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.006em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 12px;
}

.page-title {
  font-size: 28px;
  line-height: 34px;
  font-weight: 600;
  letter-spacing: -0.011em;
  margin: 0 0 32px;
  color: var(--text-primary);
}

/* The animation article runs a slightly smaller display size. */
.page-title.is-compact {
  font-size: 26px;
  line-height: 32px;
}

/* Activities pairs its title with a lead paragraph, so the gap is tighter. */
.page-title.has-lead { margin-bottom: 12px; }

.lead {
  font-size: 17px;
  line-height: 26px;
  letter-spacing: -0.004em;
  color: var(--text-secondary);
  margin: 0 0 32px;
  max-width: 640px;
}

.lead.is-wide {
  margin-bottom: 48px;
  max-width: 720px;
}

/* ── Meta table ───────────────────────────────────────────────────────────── */

.meta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  margin-bottom: 40px;
}

.meta-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

.meta-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.006em;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}

.meta-value {
  font-size: 15px;
  color: var(--text-primary);
  font-weight: 500;
}

/* ── Prose ────────────────────────────────────────────────────────────────── */

.block { margin-bottom: 32px; }

.block-heading {
  font-size: 20px;
  line-height: 25px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text-primary);
  margin: 0 0 12px;
}

.block-heading.is-large {
  font-size: 22px;
  line-height: 28px;
}

.para {
  font-size: 17px;
  line-height: 26px;
  letter-spacing: -0.004em;
  color: var(--text-secondary);
  margin: 0;
}

.quote {
  font-size: 20px;
  line-height: 28px;
  font-style: italic;
  font-weight: 500;
  color: var(--text-primary);
  text-align: center;
  margin: 48px 0;
  padding: 0 20px;
}

.section-heading {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.006em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 48px 0 16px;
}

/* ── Gallery ──────────────────────────────────────────────────────────────── */

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.gallery-grid.has-top-gap { margin-top: 12px; }

/* The AirTrip walkthrough. Taller on a phone, where 16/9 across one column
   left it too small to read; the desktop block puts 16/9 back. The ratio is
   fixed either way, so the block never changes size as the file arrives. */
.walkthrough {
  aspect-ratio: 4 / 3;
  margin-bottom: 12px;
}

.gallery-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--card-border);
}

/* ── MUJO: auto-advancing slideshow and shot grid ─────────────────────────── */

.slideshow {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  background: #1a1a1a;
  border: 1px solid var(--card-border);
}

.slideshow-track {
  display: flex;
  height: 100%;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Set while the track snaps back from the last slide to the first. */
.slideshow-track.is-jumping { transition: none; }

.slide {
  height: 100%;
  flex-shrink: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.shot {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  background-color: #1a1a1a;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.shot.is-cover { background-size: cover; }

.gallery-row-start {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
  align-items: start;
}

/* ── Video clips with load / failure states ───────────────────────────────── */

/* The box a clip sits in: the video, the loading veil, the failure label. */
.video-frame {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  background: var(--bg-secondary);
}

.clip-wrap {
  aspect-ratio: 16 / 9;
  margin-bottom: 32px;
}

/* Dims the first frame and spins until the clip is genuinely moving. Without
   it a paused clip is indistinguishable from a photo — these have no
   controls. */
.video-veil {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.42);
  opacity: 1;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 3;
}

.video-veil.is-gone { opacity: 0; }

.video-veil i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-top-color: transparent;
  animation: om-splash-spin 0.9s linear infinite;
}

.clip {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.skeleton {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--bg-secondary) 0%, var(--surface) 50%, var(--bg-secondary) 100%);
  animation: om-shimmer 1.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

.failed-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-tertiary);
  z-index: 2;
}

/* ── Animation article: 30 numbered cells, loaded as they come into view ──── */

.clip-cell {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-secondary);
  border: 1px solid var(--card-border);
}

.clip-cell .skeleton { z-index: 1; }

.clip-media {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

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

.clip-num {
  position: absolute;
  top: 10px;
  left: 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.006em;
  color: var(--text-tertiary);
  z-index: 3;
}

/* ── Activities: masonry of certificates and photos ───────────────────────── */

.masonry {
  column-count: 2;
  column-gap: 12px;
}

.photo-cell {
  break-inside: avoid;
  margin-bottom: 12px;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  display: block;
  cursor: default;
}

a.photo-cell { cursor: pointer; }

.photo-cell img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--bg-secondary);
}

.photo-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.72) 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.photo-caption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  color: #fff;
  font-size: 14px;
  line-height: 19px;
  font-weight: 500;
  letter-spacing: -0.002em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.photo-cell:hover .photo-scrim { opacity: 1; }
.photo-cell:hover .photo-caption { opacity: 1; transform: translateY(0); }

/* ── Desk setup: numbered items with an optional store link ───────────────── */

.desk-item {
  margin-bottom: 56px;
  max-width: 860px;
}

.desk-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}

.desk-num {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.desk-name {
  font-size: 20px;
  line-height: 25px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text-primary);
  margin: 0;
}

.desk-para {
  font-size: 17px;
  line-height: 26px;
  letter-spacing: -0.004em;
  color: var(--text-secondary);
  margin: 0 0 14px;
}

.buy-link {
  display: inline-block;
  font-size: 13px;
  letter-spacing: -0.001em;
  color: var(--text-primary);
  background: var(--surface);
  padding: 9px 16px;
  border-radius: 980px;
  margin-bottom: 20px;
  transition: box-shadow 0.2s ease;
}

.buy-link:hover {
  color: var(--text-primary);
  box-shadow: inset 0 0 0 999px var(--surface-strong);
}

.desk-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  background-color: var(--bg-secondary);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--card-border);
}

.desk-triple {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* ── Desktop (>= 900px) ───────────────────────────────────────────────────── */

@media (min-width: 900px) {
  .hero {
    aspect-ratio: 21 / 8;
    background-image: var(--hero);
  }

  .walkthrough { aspect-ratio: 16 / 9; }

  .page-title { font-size: 40px; line-height: 46px; }
  .page-title.is-compact { font-size: 36px; line-height: 42px; }

  .meta-grid { grid-template-columns: repeat(4, 1fr); }
  .meta-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .meta-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

  .quote { font-size: 26px; line-height: 36px; }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-row-start { grid-template-columns: 1.464fr 1fr; }

  .masonry { column-count: 3; }

  .desk-photo { width: calc(50% - 6px); }
  .desk-triple { grid-template-columns: repeat(3, 1fr); }
}