/* ============================================================
   WAJ Styles — Šokių stiliai archive/single + Pamokos reels.
   Brand vars from waj-skin.css.
   ============================================================ */

/* ── Reels gallery (Pamokos) ──────────────────────────────── */
.waj-pam__styles-title { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 var(--space-5); }
.waj-styles-reels { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.waj-reel { display: block; position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3 / 4; background: var(--waj-surface-2); }
.waj-reel__media { position: absolute; inset: 0; }
.waj-reel video, .waj-reel__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.waj-reel__img { background-size: cover; background-position: center; }
.waj-reel__img--empty { background: radial-gradient(circle at 30% 30%, rgba(232,114,36,0.16), transparent 60%), var(--waj-surface-2); }
.waj-reel__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 55%); }
.waj-reel__label { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; z-index: 2; }
.waj-reel__title { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: #fff; letter-spacing: 0.02em; }
.waj-reel__more { display: block; font-size: 0.8rem; color: var(--waj-accent-2, #F28A4B); margin-top: 2px; opacity: 0; transition: opacity 150ms ease; }
.waj-reel:hover .waj-reel__more { opacity: 1; }
.waj-pam__styles-more { margin-top: var(--space-4); }
.waj-pam__styles-more a { color: var(--waj-accent); font-weight: 600; }

/* ── Archive grid ─────────────────────────────────────────── */
.waj-styles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.waj-style-card { display: block; }
.waj-style-card__media { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--radius-lg); overflow: hidden; background: var(--waj-surface-2); }
.waj-style-card video, .waj-style-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.waj-style-card__img { background-size: cover; background-position: center; }
.waj-style-card__img--empty { background: radial-gradient(circle at 30% 30%, rgba(232,114,36,0.16), transparent 60%), var(--waj-surface-2); }
.waj-style-card__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 55%); }
.waj-style-card__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-5); z-index: 2; }
.waj-style-card__title { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 1.4rem; color: #fff; }
.waj-style-card__tag { display: block; font-size: 0.9rem; color: rgba(255,255,255,0.8); margin-top: 4px; }
.waj-styles__empty { color: var(--waj-muted); text-align: center; padding: var(--space-7) 0; }

/* ── Single style ─────────────────────────────────────────── */
.waj-single-style { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3rem, 7vw, 5rem); }
.waj-style__layout { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: var(--space-7); align-items: start; }
.waj-style__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3 / 4; background: var(--waj-surface-2); position: sticky; top: 96px; }
.waj-style__media video, .waj-style__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.waj-style__title { font-size: clamp(2rem, 5vw, 3rem); margin: 0.4rem 0 0.6rem; }
.waj-style__tagline { font-size: 1.15rem; color: var(--waj-accent); margin: 0 0 var(--space-5); }
.waj-style__content { max-width: 640px; }
.waj-style__content p { color: var(--waj-muted); line-height: 1.8; }
.waj-style__content h2, .waj-style__content h3 { margin-top: 1.8rem; }
.waj-style__cta { margin-top: var(--space-6); display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.waj-style__cta .button { padding: 13px 32px; font-weight: 600; }
.waj-style__back { color: var(--waj-muted); }
.waj-style__back:hover { color: var(--waj-accent); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .waj-styles-reels { grid-template-columns: repeat(2, 1fr); }
  .waj-styles__grid { grid-template-columns: 1fr 1fr; }
  .waj-style__layout { grid-template-columns: 1fr; gap: var(--space-5); }
  .waj-style__media { position: static; max-width: 360px; }
}
@media (max-width: 560px) {
  .waj-styles__grid { grid-template-columns: 1fr; }
}