/* Media page specific styles (kept minimal; relies on base.css) */

/* Layout helpers */
.character-showcase {
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-8);
}
@media (max-width: 900px) { .character-showcase { grid-template-columns: 1fr; } }

.env-tour { grid-template-columns: 1fr 1.2fr; gap: var(--space-8); }
@media (max-width: 900px) { .env-tour { grid-template-columns: 1fr; } }

/* Gallery */
.gallery-controls { display: inline-flex; gap: var(--space-2); }
.gallery-grid,.spell-list {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(3, minmax(0,1fr));
  padding: 0;
}
@media (max-width: 1100px) { .gallery-grid,.spell-list{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .gallery-grid,.spell-list { grid-template-columns: 1fr; } }
.gallery-item figcaption { padding: var(--space-3); color: var(--gray-300); font-size: var(--text-size-sm); }
.gallery-item[hidden] { display: none !important; }

/* Videos */
.video-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}
@media (max-width: 860px) { .video-grid { grid-template-columns: 1fr; } }
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  background: radial-gradient(80% 60% at 30% 20%, rgba(106,63,184,0.2), rgba(10,14,20,0.8)), #000;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-deep);
  overflow: hidden;
}
.video-cta {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: var(--text-size-xl);
  color: var(--gray-100);
}
.video-cta i { font-size: 2rem; margin-right: var(--space-3); }
.video-embed[role="button"]:hover { cursor: pointer; filter: brightness(1.05); }

/* Dark fantasy palette chips */
.palette { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.swatch { height: 64px; border-radius: var(--radius-md); box-shadow: var(--shadow-ambient); border: 1px solid var(--color-border); position: relative; }
.swatch::after { content: attr(data-name); position: absolute; bottom: 8px; right: 10px; font-size: var(--text-size-sm); color: var(--gray-100); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.swatch[aria-label*="Szafir"], .swatch[data-name="Sapphire"] { background: #0f3d66; }
.swatch[aria-label*="Cień"], .swatch[data-name="Shadow"] { background: #0a0e14; }
.swatch[aria-label*="Fiolet"], .swatch[data-name="Purple"] { background: #6a3fb8; }
.swatch[aria-label*="Bursztyn"], .swatch[data-name="Amber"] { background: #ffb84d; }

/* Audio grid */
.audio-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-6); }
@media (max-width: 800px) { .audio-grid { grid-template-columns: 1fr; } }

/* Environment list */
.env-list { display: grid; gap: var(--space-2); margin-top: var(--space-4); }

/* Compare slider */
.compare { overflow: hidden; }
.compare__stage { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-elevated); }
.compare__stage img { display: block; width: 100%; height: auto; }
.compare__overlay { position: absolute; inset: 0; width: 50%; object-fit: cover; clip-path: inset(0 50% 0 0); transition: clip-path var(--dur-slow) var(--ease-dramatic); }
.compare__range { width: 100%; margin-top: var(--space-4); accent-color: var(--color-accent); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; }
.lightbox[aria-hidden="true"] { pointer-events: none; }
.lightbox[hidden] { display: none; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(2px); }
.lightbox__dialog { position: relative; max-width: min(90vw, 1100px); max-height: 86vh; display: grid; gap: var(--space-3); background: var(--color-surface-2); border: 1px solid var(--color-border); padding: var(--space-4); border-radius: var(--radius-xl); box-shadow: var(--shadow-deep); }
.lightbox__dialog img { max-width: 100%; max-height: 70vh; margin-inline: auto; border-radius: var(--radius-md); }
.lightbox__close { position: absolute; top: var(--space-3); right: var(--space-3); }
.lightbox__dialog figcaption { color: var(--gray-100); text-align: center; }

/* Community list */
.community-list { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-6); padding: 0; }
@media (max-width: 860px) { .community-list { grid-template-columns: 1fr; } }