/* ZANOKA Shorts (1 October 2026): zanoka.ca/shorts, every YouTube Short newest first. Built on the press kit's
   zeta cards and its click-to-play players (press-kit.css, press-kit.js); loaded after them, by shorts.html only.
   No style attributes anywhere (the CSP has no 'unsafe-inline'). */

.shorts-page .pk-main { padding-top: 56px; }

.press-page .pk-card.shorts-best {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px 34px;
  align-items: center;
  margin-bottom: 64px;
  padding: 26px 28px 28px;
}

.press-page .shorts-best h2 { margin: 0 0 10px; color: #f4f9ff; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.03em; line-height: 1.12; }
.press-page .shorts-best p:not(.pk-label) { max-width: 720px; margin: 0; }
.press-page .shorts-best strong { color: rgb(var(--pk-gold)); }
.shorts-best-actions { display: grid; gap: 12px; min-width: 250px; }
.shorts-best-actions .pk-button { justify-content: center; }

.shorts-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

.press-page .shorts-card figcaption strong { font-size: 17px; line-height: 1.3; }
.press-page .shorts-card .shorts-meta {
  display: block;
  margin-top: 5px;
  color: rgba(var(--pk-rgb), .9);
  font-family: var(--font-label);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.press-page .shorts-card figcaption p:not(.pk-links) { color: var(--muted); line-height: 1.55; }

/* The photosensitivity warning sits under the section heading, small (owner, 2 Oct 2026). */
.press-page .shorts-section .section-heading .shorts-warning { margin: 12px 0 0; color: var(--muted-2); font-size: 13px; line-height: 1.5; }
.press-page .shorts-warning strong { color: rgba(var(--pk-gold), .9); }

/* The poster is a <picture> (AVIF with a JPEG fallback); it fills the frame like the plain img did. */
.shorts-card .pk-frame picture { position: absolute; inset: 0; }

/* Each Short's own caption is at the top of its poster, so no tag goes there, and the play button sits low. */
.shorts-card .pk-frame-short .pk-play { top: 86%; }

@media (max-width: 1180px) {
  .shorts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .press-page .pk-card.shorts-best { grid-template-columns: 1fr; }
  .shorts-best-actions { min-width: 0; }
  .shorts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .shorts-grid { grid-template-columns: 1fr; justify-items: center; }
  .press-page .shorts-card { width: min(100%, 380px); }
  .shorts-best-actions .pk-button { width: 100%; }
}