/* ==========================================================================
   Dědkova Crew — Neon Cyberpunk design
   ==========================================================================
   Pink/magenta + cyan neon palette on dark background.
   ========================================================================== */

:root {
  /* ── Surfaces ── */
  --dp-ink: #080811;
  --dp-ink-2: #0e0e1a;
  --dp-ink-3: #161626;
  --dp-line: rgba(255, 255, 255, 0.07);

  /* ── Primary accent: neon pink/magenta ── */
  --dp-pink: #ff2d78;
  --dp-pink-dim: #cc1a5e;
  --dp-pink-soft: rgba(255, 45, 120, 0.12);
  --dp-pink-border: rgba(255, 45, 120, 0.45);
  --dp-glow-pink: 0 0 8px rgba(255, 45, 120, 0.6), 0 0 30px rgba(255, 45, 120, 0.25);
  --dp-glow-pink-strong: 0 0 10px rgba(255, 45, 120, 0.7), 0 0 40px rgba(255, 45, 120, 0.35), 0 0 80px rgba(255, 45, 120, 0.15);

  /* ── Secondary accent: neon cyan ── */
  --dp-cyan: #00e5ff;
  --dp-cyan-dim: #00b8cc;
  --dp-cyan-soft: rgba(0, 229, 255, 0.10);
  --dp-cyan-border: rgba(0, 229, 255, 0.40);
  --dp-glow-cyan: 0 0 8px rgba(0, 229, 255, 0.55), 0 0 28px rgba(0, 229, 255, 0.22);
  --dp-glow-cyan-strong: 0 0 10px rgba(0, 229, 255, 0.7), 0 0 40px rgba(0, 229, 255, 0.3), 0 0 80px rgba(0, 229, 255, 0.12);

  /* ── Tertiary: gold (kept for stats/badges) ── */
  --dp-gold: #f0a830;
  --dp-gold-soft: rgba(240, 168, 48, 0.14);
  --dp-gold-border: rgba(240, 168, 48, 0.35);
  --dp-glow-gold: 0 0 8px rgba(240, 168, 48, 0.55), 0 0 28px rgba(240, 168, 48, 0.25);

  /* ── Streamer color-coding (Program streamů) — 15 total w/ pink/cyan/gold above ── */
  --dp-purple: #b026ff;
  --dp-glow-purple: 0 0 8px rgba(176, 38, 255, 0.55), 0 0 28px rgba(176, 38, 255, 0.25);
  --dp-green: #39ff88;
  --dp-glow-green: 0 0 8px rgba(57, 255, 136, 0.55), 0 0 28px rgba(57, 255, 136, 0.25);
  --dp-red: #ff3b3b;
  --dp-glow-red: 0 0 8px rgba(255, 59, 59, 0.55), 0 0 28px rgba(255, 59, 59, 0.25);
  --dp-orange: #ff8a00;
  --dp-glow-orange: 0 0 8px rgba(255, 138, 0, 0.55), 0 0 28px rgba(255, 138, 0, 0.25);
  --dp-yellow: #ffea00;
  --dp-glow-yellow: 0 0 8px rgba(255, 234, 0, 0.55), 0 0 28px rgba(255, 234, 0, 0.25);
  --dp-lime: #aaff00;
  --dp-glow-lime: 0 0 8px rgba(170, 255, 0, 0.55), 0 0 28px rgba(170, 255, 0, 0.25);
  --dp-teal: #00ffc8;
  --dp-glow-teal: 0 0 8px rgba(0, 255, 200, 0.55), 0 0 28px rgba(0, 255, 200, 0.25);
  --dp-blue: #2979ff;
  --dp-glow-blue: 0 0 8px rgba(41, 121, 255, 0.55), 0 0 28px rgba(41, 121, 255, 0.25);
  --dp-indigo: #6c5ce7;
  --dp-glow-indigo: 0 0 8px rgba(108, 92, 231, 0.55), 0 0 28px rgba(108, 92, 231, 0.25);
  --dp-magenta: #ff00e5;
  --dp-glow-magenta: 0 0 8px rgba(255, 0, 229, 0.55), 0 0 28px rgba(255, 0, 229, 0.25);
  --dp-rose: #ff5c8a;
  --dp-glow-rose: 0 0 8px rgba(255, 92, 138, 0.55), 0 0 28px rgba(255, 92, 138, 0.25);
  --dp-white: #f5f5ff;
  --dp-glow-white: 0 0 8px rgba(245, 245, 255, 0.55), 0 0 28px rgba(245, 245, 255, 0.25);

  /* ── Text ── */
  --dp-text: #eeeef6;
  --dp-text-dim: #8a85a0;
  --dp-text-faint: #504b65;

  /* ── Type ── */
  --dp-font-display: 'Bebas Neue', sans-serif;
  --dp-font-body: 'Inter', sans-serif;

  /* ── Bootstrap overrides ── */
  --bs-body-bg: var(--dp-ink);
  --bs-body-color: var(--dp-text);
  --bs-body-font-family: var(--dp-font-body);
  --bs-primary: var(--dp-pink);
  --bs-primary-rgb: 255, 45, 120;
  --bs-link-color: var(--dp-cyan);
  --bs-link-hover-color: var(--dp-pink);
  --bs-border-color: var(--dp-line);
}

body {
  background-color: var(--dp-ink);
  color: var(--dp-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

.container {
  --bs-gutter-x: 3rem;
}

a {
  text-decoration: none;
}

::selection {
  background: var(--dp-pink-soft);
  color: var(--dp-pink);
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, .dp-display {
  font-family: var(--dp-font-display);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.05;
}

.dp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--dp-font-display);
  font-size: 0.8rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--dp-pink);
  text-shadow: var(--dp-glow-pink);
}

.dp-eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dp-pink);
  box-shadow: var(--dp-glow-pink);
  animation: dp-pulse 2s infinite;
}

.dp-gold-text {
  color: var(--dp-gold);
  text-shadow: var(--dp-glow-gold);
}

.dp-text-dim {
  color: var(--dp-text-dim);
}

/* list-style-position defaults to "outside", which anchors the
   marker (•, 1., 2., ...) to the block's own left edge — independent
   of text-align. In a right-aligned .dp-prose (e.g. an About/Social
   member row that's flipped to the right side), that left the number
   sitting at the far left while its text sat at the far right, with
   nothing visually connecting them. "inside" keeps the marker glued
   to its own item's text no matter which way the block is aligned. */
.dp-prose ol,
.dp-prose ul {
  list-style-position: inside;
}

/* News detail article text only — scoped to .dp-news-body so it
   doesn't shrink .dp-prose on other pages (About, Cookies, Terms, ...)
   that reuse the same class. */
.dp-news-body .dp-prose,
.dp-news-body .dp-prose p,
.dp-news-body .dp-prose li {
  font-size: 18px;
}

/* ==========================================================================
   Navbar
   ========================================================================== */

.dp-navbar {
  background: rgba(8, 8, 17, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: none;
  box-shadow: 0 4px 40px rgba(255, 45, 120, 0.08);
  position: relative;
}

.dp-navbar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--dp-pink);
  box-shadow: var(--dp-glow-pink-strong);
  clip-path: polygon(
    0% 0%, 3% 100%, 8% 0%, 15% 80%, 22% 0%, 28% 100%, 35% 20%,
    42% 100%, 48% 0%, 55% 90%, 60% 10%, 68% 100%, 72% 0%,
    78% 80%, 85% 0%, 90% 100%, 95% 20%, 100% 100%, 100% 0%
  );
}

.dp-navbar .navbar-brand {
  font-family: var(--dp-font-display);
  font-size: 1.6rem;
  letter-spacing: 3px;
  color: var(--dp-pink);
  text-shadow: var(--dp-glow-pink-strong);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-style: italic;
}

.dp-navbar .navbar-brand img {
  height: 34px;
  width: auto;
}

.dp-navbar .nav-link {
  font-family: var(--dp-font-display);
  font-size: 0.95rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dp-text-dim);
  padding: 0.5rem 0.9rem !important;
  transition: color 0.2s, text-shadow 0.2s;
}

.dp-navbar .nav-link:hover,
.dp-navbar .nav-link:focus,
.dp-navbar .nav-link.active {
  color: var(--dp-text);
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
}

.dp-navbar .dropdown-menu {
  background: var(--dp-ink-2);
  border: 1px solid var(--dp-pink-border);
  border-radius: 8px 3px 10px 5px;
  box-shadow: 0 8px 30px rgba(255, 45, 120, 0.1);
  transform: rotate(0.3deg);
}

.dp-navbar .dropdown-item {
  color: var(--dp-text-dim);
  font-size: 0.92rem;
  padding: 0.55rem 1rem;
}

.dp-navbar .dropdown-item:hover,
.dp-navbar .dropdown-item:focus {
  background: var(--dp-pink-soft);
  color: var(--dp-pink);
}

.dp-navbar .navbar-toggler {
  border-color: var(--dp-pink-border);
}

.dp-navbar .navbar-toggler-icon {
  filter: invert(1) brightness(0.7);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn-dp-gold {
  background: transparent;
  color: var(--dp-cyan);
  border: 2px solid var(--dp-cyan);
  border-radius: 12px 4px 14px 6px;
  font-family: var(--dp-font-display);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0.6rem calc(1.5rem - 1.5px) 0.6rem 1.5rem;
  box-shadow: var(--dp-glow-cyan), inset 0 0 20px rgba(0, 229, 255, 0.06);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  transform: rotate(-0.5deg);
}

.btn-dp-gold:hover {
  background: rgba(0, 229, 255, 0.12);
  color: #fff;
  box-shadow: var(--dp-glow-cyan-strong), inset 0 0 30px rgba(0, 229, 255, 0.1);
}

.btn-dp-outline {
  background: transparent;
  color: var(--dp-cyan);
  border: 2px solid var(--dp-cyan);
  border-radius: 14px 5px 10px 3px;
  font-family: var(--dp-font-display);
  font-size: 1.05rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0.8rem calc(2rem - 2px) 0.8rem 2rem;
  box-shadow: var(--dp-glow-cyan-strong), inset 0 0 30px rgba(0, 229, 255, 0.1);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  transform: rotate(-0.8deg);
}

.btn-dp-outline:hover {
  background: rgba(0, 229, 255, 0.15);
  color: #fff;
  box-shadow: var(--dp-glow-cyan-strong), inset 0 0 35px rgba(0, 229, 255, 0.12);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.dp-hero {
  position: relative;
  overflow: hidden;
  border-bottom: none;
  box-shadow: 0 2px 40px rgba(255, 45, 120, 0.15);
  background:
    url("../img/hero-bg.b4926b1567a3.svg") center/cover no-repeat,
    linear-gradient(160deg, #080812 0%, #0a0616 30%, #120820 60%, #0c0618 100%);
}

/* Scan lines overlay */
.dp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 1px,
      rgba(0, 0, 0, 0.25) 1px,
      rgba(0, 0, 0, 0.25) 3px
    );
  pointer-events: none;
  z-index: 2;
  opacity: 0.7;
}

/* Strong neon floor reflection */
.dp-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 250px;
  background:
    linear-gradient(
      to top,
      rgba(0, 229, 255, 0.22) 0%,
      rgba(255, 45, 120, 0.14) 15%,
      rgba(0, 229, 255, 0.10) 35%,
      rgba(255, 45, 120, 0.04) 55%,
      transparent 100%
    );
  pointer-events: none;
  z-index: 1;
}

.dp-hero > .container {
  position: relative;
  z-index: 3;
}

/* Glitch heading effect */
.dp-hero h1 {
  text-shadow:
    0 0 40px rgba(255, 45, 120, 0.6),
    0 0 80px rgba(255, 45, 120, 0.3),
    0 0 150px rgba(255, 45, 120, 0.15),
    3px 0 rgba(0, 229, 255, 0.25),
    -2px 0 rgba(255, 45, 120, 0.15);
  animation: dp-glitch-text 5s ease-in-out infinite;
}

@keyframes dp-glitch-text {
  0%, 88%, 100% { text-shadow: 0 0 40px rgba(255,45,120,0.5), 0 0 80px rgba(255,45,120,0.2), 3px 0 rgba(0,229,255,0.2), -2px 0 rgba(255,45,120,0.15); transform: translateX(0); }
  89% { text-shadow: 0 0 50px rgba(255,45,120,0.6), 0 0 80px rgba(255,45,120,0.3), -6px 2px rgba(0,229,255,0.4), 4px -1px rgba(255,45,120,0.35); transform: translateX(-2px); }
  90% { text-shadow: 0 0 40px rgba(255,45,120,0.5), 0 0 80px rgba(255,45,120,0.2), 5px -1px rgba(0,229,255,0.35), -3px 1px rgba(255,45,120,0.3); transform: translateX(3px); }
  91% { text-shadow: 0 0 60px rgba(255,45,120,0.7), 0 0 120px rgba(255,45,120,0.3), -8px 3px rgba(0,229,255,0.5), 6px -2px rgba(255,45,120,0.4); transform: translateX(-1px); }
  92% { text-shadow: 0 0 40px rgba(255,45,120,0.5), 0 0 80px rgba(255,45,120,0.2), 2px 0 rgba(0,229,255,0.15), -1px 0 rgba(255,45,120,0.1); transform: translateX(0); }
}

.dp-hero-mascot {
  max-height: 70vh;
  width: auto;
  filter:
    drop-shadow(0 0 25px rgba(255, 45, 120, 0.6))
    drop-shadow(0 0 60px rgba(255, 45, 120, 0.35))
    drop-shadow(0 0 50px rgba(0, 229, 255, 0.35))
    drop-shadow(0 0 100px rgba(0, 229, 255, 0.15));
  animation: dp-mascot-glow 3s ease-in-out infinite alternate;
}

@keyframes dp-mascot-glow {
  0% {
    filter: drop-shadow(0 0 25px rgba(255,45,120,0.6)) drop-shadow(0 0 60px rgba(255,45,120,0.35)) drop-shadow(0 0 50px rgba(0,229,255,0.35)) drop-shadow(0 0 100px rgba(0,229,255,0.15));
  }
  100% {
    filter: drop-shadow(0 0 35px rgba(255,45,120,0.7)) drop-shadow(0 0 80px rgba(255,45,120,0.4)) drop-shadow(0 0 65px rgba(0,229,255,0.45)) drop-shadow(0 0 120px rgba(0,229,255,0.2));
  }
}

@media (max-width: 991.98px) {
  .dp-hero-mascot {
    max-height: 50vh;
    max-width: 280px;
  }
  .dp-navbar .dropdown-menu {
    transform: none;
  }
}

/* Decorative glitch X near mascot */
.dp-hero-glitch-x {
  position: absolute;
  top: 8%;
  right: 3%;
  width: 60px;
  height: 60px;
  z-index: 4;
  animation: dp-x-flicker 4s ease-in-out infinite;
}

.dp-hero-glitch-x::before,
.dp-hero-glitch-x::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 55px;
  height: 6px;
  background: var(--dp-pink);
  border-radius: 1px;
  box-shadow: var(--dp-glow-pink-strong), 0 0 15px rgba(255, 45, 120, 0.5);
}

.dp-hero-glitch-x::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.dp-hero-glitch-x::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

@keyframes dp-x-flicker {
  0%, 95%, 100% { opacity: 1; }
  96% { opacity: 0.3; }
  97% { opacity: 0.9; }
  98% { opacity: 0.2; }
  99% { opacity: 1; }
}

/* Glitch bars — horizontal neon lines in hero */
.dp-hero-glitch-bar {
  position: absolute;
  height: 3px;
  background: var(--dp-pink);
  box-shadow: var(--dp-glow-pink);
  z-index: 4;
  pointer-events: none;
}

.dp-hero-glitch-bar:nth-child(1) { top: 12%; right: 0; width: 150px; opacity: 0.8; }
.dp-hero-glitch-bar:nth-child(2) { top: 15%; right: 5%; width: 250px; opacity: 0.5; background: var(--dp-cyan); box-shadow: var(--dp-glow-cyan-strong); height: 2px; }
.dp-hero-glitch-bar:nth-child(3) { bottom: 25%; left: 0; width: 100px; opacity: 0.6; background: var(--dp-cyan); box-shadow: var(--dp-glow-cyan); }

/* Primary CTA — pink neon with shimmer */
.btn-dp-gold-cta {
  background: transparent;
  color: var(--dp-pink);
  border: 2px solid var(--dp-pink);
  border-radius: 14px 5px 10px 3px;
  font-family: var(--dp-font-display);
  font-size: 1.05rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0.8rem calc(2rem - 2px) 0.8rem 2rem;
  box-shadow: var(--dp-glow-pink-strong), inset 0 0 30px rgba(255, 45, 120, 0.1);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
  transform: rotate(-0.8deg);
}

.btn-dp-gold-cta::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 45, 120, 0.18) 45%,
    rgba(255, 45, 120, 0.35) 50%,
    rgba(255, 45, 120, 0.18) 55%,
    transparent 60%
  );
  animation: dp-shimmer 3.5s ease-in-out infinite;
}

@keyframes dp-shimmer {
  0%, 100% { left: -75%; }
  50% { left: 125%; }
}

.btn-dp-gold-cta:hover {
  background: rgba(255, 45, 120, 0.15);
  color: #fff;
  box-shadow: var(--dp-glow-pink-strong), inset 0 0 35px rgba(255, 45, 120, 0.12);
}

.btn-dp-gold-cta:hover::after {
  animation: none;
  opacity: 0;
}

/* Stat row */
.dp-stat {
  border-right: 1px solid var(--dp-line);
  padding-right: 1.5rem;
}

.dp-stat:last-child {
  border-right: none;
}

.dp-stat-icon {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
  display: block;
}

.dp-stat .dp-stat-number {
  font-family: var(--dp-font-display);
  font-size: 2.2rem;
  color: var(--dp-cyan);
  text-shadow: var(--dp-glow-cyan);
  line-height: 1;
}

.dp-stat .dp-stat-label {
  font-size: 0.75rem;
  color: var(--dp-text-dim);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.dp-card {
  background: var(--dp-ink-2);
  border: 1px solid var(--dp-line);
  border-radius: 10px 3px 8px 5px;
  padding: 1.5rem;
  height: 100%;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.dp-card:hover {
  border-color: var(--dp-cyan-border);
  transform: translateY(-3px) rotate(0.3deg);
  box-shadow: 0 4px 20px rgba(0, 229, 255, 0.08);
}

.dp-card .dp-card-icon {
  font-size: 1.9rem;
  margin-bottom: 0.75rem;
  display: block;
}

.dp-card .dp-card-title {
  font-family: var(--dp-font-display);
  font-size: 1.3rem;
  letter-spacing: 1px;
  color: var(--dp-cyan);
  margin-bottom: 0.4rem;
}

.dp-card .dp-card-text {
  font-size: 0.9rem;
  color: var(--dp-text-dim);
}

/* Content card (news/competition/bonus listing) with cover image */
.dp-content-card {
  background: var(--dp-ink-2);
  border: 1px solid var(--dp-line);
  border-radius: 5px 12px 4px 10px;
  overflow: hidden;
  height: 100%;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}

.dp-content-card:hover {
  border-color: var(--dp-pink-border);
  transform: translateY(-3px) rotate(-0.4deg);
  box-shadow: 0 4px 25px rgba(255, 45, 120, 0.1);
}

.dp-content-card .dp-content-card-img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  background: var(--dp-ink-3);
}

.dp-content-card .dp-content-card-img-square {
  aspect-ratio: 1 / 1;
}

.dp-content-card .dp-content-card-body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.dp-content-card .dp-content-card-title {
  font-family: var(--dp-font-display);
  font-size: 1.15rem;
  letter-spacing: 0.5px;
  color: var(--dp-text);
  margin-bottom: 0.5rem;
}

.dp-content-card:hover .dp-content-card-title {
  color: var(--dp-pink);
}

.dp-content-card .dp-content-card-text {
  font-size: 0.88rem;
  color: var(--dp-text-dim);
  flex: 1;
}

.dp-badge {
  display: inline-block;
  font-family: var(--dp-font-display);
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 8px 3px 6px 4px;
  background: var(--dp-cyan-soft);
  border: 1px solid var(--dp-cyan-border);
  color: var(--dp-cyan);
}

.dp-badge-pink {
  background: var(--dp-pink-soft);
  border-color: var(--dp-pink-border);
  color: var(--dp-pink);
}

.dp-badge-muted {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--dp-line);
  color: var(--dp-text-dim);
}

/* ==========================================================================
   StreamField block spacing
   ========================================================================== */

.dp-streamfield-block {
  margin-bottom: 20px;
}

.dp-streamfield-block:last-child {
  margin-bottom: 0;
}

/* Contains any floated image block (see .dp-image-block-float below) so
   it never bleeds past the article body into whatever follows the
   StreamField — a floated element with no clearing sibling otherwise
   keeps affecting layout until something clears it. */
.dp-streamfield {
  display: flow-root;
}

/* News detail: intro text is a separate field rendered as a sibling
   *after* the StreamField (see news_page.html), not a StreamField
   block itself. For a floated lead image in body to wrap with that
   intro text, both need to share one block formatting context, so
   here .dp-streamfield's own flow-root is cancelled back to a plain
   block — containment instead comes from .dp-news-body wrapping both. */
.dp-news-body {
  display: flow-root;
}

.dp-news-body .dp-streamfield {
  display: block;
}

/* "Menší, text obtéká" ImageBlock layout — shrinks the image so body
   text can wrap around it instead of forcing it full-width. Only
   floats from the md breakpoint up; on narrow screens there isn't
   enough room next to it for wrapping to look right, so it stacks
   full-width like the default layout. */
.dp-image-block-float {
  max-width: 100%;
}

@media (min-width: 768px) {
  .dp-image-block-float {
    max-width: 380px;
  }
}

/* ==========================================================================
   Video embed
   ========================================================================== */

.dp-video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 5px;
  overflow: hidden;
  background: var(--dp-ink-3);
}

.dp-competition-img {
  /* Fills whatever height is actually available (see usage below)
     with object-fit: cover, so every Soutěže image ends up the same
     height as its siblings without ever stretching/squishing:
     - Plain image cards: Bootstrap's .row stretches every column to
       match the tallest one (Bootstrap's own equal-height-columns
       pattern), and this fills that stretched column via height:100%.
     - The "Zapojit se do slosování" card has extra text/button below
       the image, so that column is naturally the tallest — its own
       image uses flex to fill just the space left over after the
       text, rather than height:100% of the whole card. */
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  min-height: 0;
  object-fit: cover;
  display: block;
  background: var(--dp-ink-3);
}

.dp-video-embed iframe,
.dp-video-embed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.dp-social-card {
  background: var(--dp-ink-2);
  border: 1px solid var(--dp-line);
  border-radius: 10px 3px 8px 5px;
  padding: 1.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.dp-social-card:hover {
  transform: translateY(-3px) rotate(-0.3deg);
}

.dp-social-card-head {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.dp-social-card-icon {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 16px 5px 12px 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--dp-ink-3);
}

.dp-social-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dp-social-card-icon svg {
  width: 30px;
  height: 30px;
  fill: #fff;
  stroke: #fff;
}

.dp-social-card-title {
  margin: 0;
  font-size: 1.4rem;
}

.dp-social-card-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dp-social-card-list :where(ul, ol) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Bullet-style marker on every line, whether the editor actually used
   a <ul> or just typed each line as its own paragraph — both are
   common ways to enter this in the rich text field, and should look
   the same. */
.dp-social-card-list :where(li, p) {
  padding-left: 1.5rem;
  position: relative;
  margin: 0;
}

.dp-social-card-list :where(li, p)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.dp-social-card-btn {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  border-radius: 8px 3px 6px 3px;
  border: 1px solid;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: box-shadow 0.2s, transform 0.2s;
}

.dp-social-card-btn:hover {
  transform: translateY(-2px);
}

.dp-social-card-pink { border-color: var(--dp-pink); box-shadow: var(--dp-glow-pink); }
.dp-social-card-cyan { border-color: var(--dp-cyan); box-shadow: var(--dp-glow-cyan); }
.dp-social-card-gold { border-color: var(--dp-gold); box-shadow: var(--dp-glow-gold); }
.dp-social-card-purple { border-color: var(--dp-purple); box-shadow: var(--dp-glow-purple); }
.dp-social-card-green { border-color: var(--dp-green); box-shadow: var(--dp-glow-green); }
.dp-social-card-red { border-color: var(--dp-red); box-shadow: var(--dp-glow-red); }
.dp-social-card-orange { border-color: var(--dp-orange); box-shadow: var(--dp-glow-orange); }
.dp-social-card-yellow { border-color: var(--dp-yellow); box-shadow: var(--dp-glow-yellow); }
.dp-social-card-lime { border-color: var(--dp-lime); box-shadow: var(--dp-glow-lime); }
.dp-social-card-teal { border-color: var(--dp-teal); box-shadow: var(--dp-glow-teal); }
.dp-social-card-blue { border-color: var(--dp-blue); box-shadow: var(--dp-glow-blue); }
.dp-social-card-indigo { border-color: var(--dp-indigo); box-shadow: var(--dp-glow-indigo); }
.dp-social-card-magenta { border-color: var(--dp-magenta); box-shadow: var(--dp-glow-magenta); }
.dp-social-card-rose { border-color: var(--dp-rose); box-shadow: var(--dp-glow-rose); }
.dp-social-card-white { border-color: var(--dp-white); box-shadow: var(--dp-glow-white); }

.dp-social-card-icon-pink { background: var(--dp-pink); }
.dp-social-card-icon-cyan { background: var(--dp-cyan); }
.dp-social-card-icon-gold { background: var(--dp-gold); }
.dp-social-card-icon-purple { background: var(--dp-purple); }
.dp-social-card-icon-green { background: var(--dp-green); }
.dp-social-card-icon-red { background: var(--dp-red); }
.dp-social-card-icon-orange { background: var(--dp-orange); }
.dp-social-card-icon-yellow { background: var(--dp-yellow); }
.dp-social-card-icon-lime { background: var(--dp-lime); }
.dp-social-card-icon-teal { background: var(--dp-teal); }
.dp-social-card-icon-blue { background: var(--dp-blue); }
.dp-social-card-icon-indigo { background: var(--dp-indigo); }
.dp-social-card-icon-magenta { background: var(--dp-magenta); }
.dp-social-card-icon-rose { background: var(--dp-rose); }
.dp-social-card-icon-white { background: var(--dp-white); }

.dp-social-card-list-pink :where(li, p)::before { background: var(--dp-pink); }
.dp-social-card-list-cyan :where(li, p)::before { background: var(--dp-cyan); }
.dp-social-card-list-gold :where(li, p)::before { background: var(--dp-gold); }
.dp-social-card-list-purple :where(li, p)::before { background: var(--dp-purple); }
.dp-social-card-list-green :where(li, p)::before { background: var(--dp-green); }
.dp-social-card-list-red :where(li, p)::before { background: var(--dp-red); }
.dp-social-card-list-orange :where(li, p)::before { background: var(--dp-orange); }
.dp-social-card-list-yellow :where(li, p)::before { background: var(--dp-yellow); }
.dp-social-card-list-lime :where(li, p)::before { background: var(--dp-lime); }
.dp-social-card-list-teal :where(li, p)::before { background: var(--dp-teal); }
.dp-social-card-list-blue :where(li, p)::before { background: var(--dp-blue); }
.dp-social-card-list-indigo :where(li, p)::before { background: var(--dp-indigo); }
.dp-social-card-list-magenta :where(li, p)::before { background: var(--dp-magenta); }
.dp-social-card-list-rose :where(li, p)::before { background: var(--dp-rose); }
.dp-social-card-list-white :where(li, p)::before { background: var(--dp-white); }

.dp-social-card-btn-pink, .dp-social-card-btn-pink:hover { border-color: var(--dp-pink); color: var(--dp-pink); box-shadow: var(--dp-glow-pink); }
.dp-social-card-btn-cyan, .dp-social-card-btn-cyan:hover { border-color: var(--dp-cyan); color: var(--dp-cyan); box-shadow: var(--dp-glow-cyan); }
.dp-social-card-btn-gold, .dp-social-card-btn-gold:hover { border-color: var(--dp-gold); color: var(--dp-gold); box-shadow: var(--dp-glow-gold); }
.dp-social-card-btn-purple, .dp-social-card-btn-purple:hover { border-color: var(--dp-purple); color: var(--dp-purple); box-shadow: var(--dp-glow-purple); }
.dp-social-card-btn-green, .dp-social-card-btn-green:hover { border-color: var(--dp-green); color: var(--dp-green); box-shadow: var(--dp-glow-green); }
.dp-social-card-btn-red, .dp-social-card-btn-red:hover { border-color: var(--dp-red); color: var(--dp-red); box-shadow: var(--dp-glow-red); }
.dp-social-card-btn-orange, .dp-social-card-btn-orange:hover { border-color: var(--dp-orange); color: var(--dp-orange); box-shadow: var(--dp-glow-orange); }
.dp-social-card-btn-yellow, .dp-social-card-btn-yellow:hover { border-color: var(--dp-yellow); color: var(--dp-yellow); box-shadow: var(--dp-glow-yellow); }
.dp-social-card-btn-lime, .dp-social-card-btn-lime:hover { border-color: var(--dp-lime); color: var(--dp-lime); box-shadow: var(--dp-glow-lime); }
.dp-social-card-btn-teal, .dp-social-card-btn-teal:hover { border-color: var(--dp-teal); color: var(--dp-teal); box-shadow: var(--dp-glow-teal); }
.dp-social-card-btn-blue, .dp-social-card-btn-blue:hover { border-color: var(--dp-blue); color: var(--dp-blue); box-shadow: var(--dp-glow-blue); }
.dp-social-card-btn-indigo, .dp-social-card-btn-indigo:hover { border-color: var(--dp-indigo); color: var(--dp-indigo); box-shadow: var(--dp-glow-indigo); }
.dp-social-card-btn-magenta, .dp-social-card-btn-magenta:hover { border-color: var(--dp-magenta); color: var(--dp-magenta); box-shadow: var(--dp-glow-magenta); }
.dp-social-card-btn-rose, .dp-social-card-btn-rose:hover { border-color: var(--dp-rose); color: var(--dp-rose); box-shadow: var(--dp-glow-rose); }
.dp-social-card-btn-white, .dp-social-card-btn-white:hover { border-color: var(--dp-white); color: var(--dp-white); box-shadow: var(--dp-glow-white); }

.dp-member-photo {
  max-width: 320px;
  width: 100%;
  height: auto;
}

.dp-member-photo-placeholder {
  width: 320px;
  height: 320px;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  border-radius: 50%;
  background: var(--dp-ink-3);
  border: 1px solid var(--dp-line);
}

/* ==========================================================================
   Schedule table
   ========================================================================== */

.dp-table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--dp-text);
  --bs-table-border-color: var(--dp-line);
}

.dp-table thead th {
  font-family: var(--dp-font-display);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--dp-cyan);
  border-bottom: 2px solid var(--dp-cyan-border);
}

.dp-table tbody tr:hover,
.dp-table tbody tr.dp-schedule-row-hover {
  --bs-table-bg: rgba(255, 45, 120, 0.05);
}

.dp-schedule-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}

.dp-schedule-dot-pink { background: var(--dp-pink); box-shadow: var(--dp-glow-pink); }
.dp-schedule-dot-cyan { background: var(--dp-cyan); box-shadow: var(--dp-glow-cyan); }
.dp-schedule-dot-gold { background: var(--dp-gold); box-shadow: var(--dp-glow-gold); }
.dp-schedule-dot-purple { background: var(--dp-purple); box-shadow: var(--dp-glow-purple); }
.dp-schedule-dot-green { background: var(--dp-green); box-shadow: var(--dp-glow-green); }
.dp-schedule-dot-red { background: var(--dp-red); box-shadow: var(--dp-glow-red); }
.dp-schedule-dot-orange { background: var(--dp-orange); box-shadow: var(--dp-glow-orange); }
.dp-schedule-dot-yellow { background: var(--dp-yellow); box-shadow: var(--dp-glow-yellow); }
.dp-schedule-dot-lime { background: var(--dp-lime); box-shadow: var(--dp-glow-lime); }
.dp-schedule-dot-teal { background: var(--dp-teal); box-shadow: var(--dp-glow-teal); }
.dp-schedule-dot-blue { background: var(--dp-blue); box-shadow: var(--dp-glow-blue); }
.dp-schedule-dot-indigo { background: var(--dp-indigo); box-shadow: var(--dp-glow-indigo); }
.dp-schedule-dot-magenta { background: var(--dp-magenta); box-shadow: var(--dp-glow-magenta); }
.dp-schedule-dot-rose { background: var(--dp-rose); box-shadow: var(--dp-glow-rose); }
.dp-schedule-dot-white { background: var(--dp-white); box-shadow: var(--dp-glow-white); }

.dp-schedule-name-pink { color: var(--dp-pink); }
.dp-schedule-name-cyan { color: var(--dp-cyan); }
.dp-schedule-name-gold { color: var(--dp-gold); }
.dp-schedule-name-purple { color: var(--dp-purple); }
.dp-schedule-name-green { color: var(--dp-green); }
.dp-schedule-name-red { color: var(--dp-red); }
.dp-schedule-name-orange { color: var(--dp-orange); }
.dp-schedule-name-yellow { color: var(--dp-yellow); }
.dp-schedule-name-lime { color: var(--dp-lime); }
.dp-schedule-name-teal { color: var(--dp-teal); }
.dp-schedule-name-blue { color: var(--dp-blue); }
.dp-schedule-name-indigo { color: var(--dp-indigo); }
.dp-schedule-name-magenta { color: var(--dp-magenta); }
.dp-schedule-name-rose { color: var(--dp-rose); }
.dp-schedule-name-white { color: var(--dp-white); }

/* "Sledovat" button on the schedule table, recolored to match the
   streamer's own color instead of the default cyan btn-dp-outline. */
.dp-schedule-btn-pink, .dp-schedule-btn-pink:hover { border-color: var(--dp-pink); color: var(--dp-pink); box-shadow: var(--dp-glow-pink); }
.dp-schedule-btn-cyan, .dp-schedule-btn-cyan:hover { border-color: var(--dp-cyan); color: var(--dp-cyan); box-shadow: var(--dp-glow-cyan); }
.dp-schedule-btn-gold, .dp-schedule-btn-gold:hover { border-color: var(--dp-gold); color: var(--dp-gold); box-shadow: var(--dp-glow-gold); }
.dp-schedule-btn-purple, .dp-schedule-btn-purple:hover { border-color: var(--dp-purple); color: var(--dp-purple); box-shadow: var(--dp-glow-purple); }
.dp-schedule-btn-green, .dp-schedule-btn-green:hover { border-color: var(--dp-green); color: var(--dp-green); box-shadow: var(--dp-glow-green); }
.dp-schedule-btn-red, .dp-schedule-btn-red:hover { border-color: var(--dp-red); color: var(--dp-red); box-shadow: var(--dp-glow-red); }
.dp-schedule-btn-orange, .dp-schedule-btn-orange:hover { border-color: var(--dp-orange); color: var(--dp-orange); box-shadow: var(--dp-glow-orange); }
.dp-schedule-btn-yellow, .dp-schedule-btn-yellow:hover { border-color: var(--dp-yellow); color: var(--dp-yellow); box-shadow: var(--dp-glow-yellow); }
.dp-schedule-btn-lime, .dp-schedule-btn-lime:hover { border-color: var(--dp-lime); color: var(--dp-lime); box-shadow: var(--dp-glow-lime); }
.dp-schedule-btn-teal, .dp-schedule-btn-teal:hover { border-color: var(--dp-teal); color: var(--dp-teal); box-shadow: var(--dp-glow-teal); }
.dp-schedule-btn-blue, .dp-schedule-btn-blue:hover { border-color: var(--dp-blue); color: var(--dp-blue); box-shadow: var(--dp-glow-blue); }
.dp-schedule-btn-indigo, .dp-schedule-btn-indigo:hover { border-color: var(--dp-indigo); color: var(--dp-indigo); box-shadow: var(--dp-glow-indigo); }
.dp-schedule-btn-magenta, .dp-schedule-btn-magenta:hover { border-color: var(--dp-magenta); color: var(--dp-magenta); box-shadow: var(--dp-glow-magenta); }
.dp-schedule-btn-rose, .dp-schedule-btn-rose:hover { border-color: var(--dp-rose); color: var(--dp-rose); box-shadow: var(--dp-glow-rose); }
.dp-schedule-btn-white, .dp-schedule-btn-white:hover { border-color: var(--dp-white); color: var(--dp-white); box-shadow: var(--dp-glow-white); }

/* ==========================================================================
   Sections / dividers
   ========================================================================== */

.dp-section {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.dp-section-head {
  border-bottom: none;
  position: relative;
  padding: 20px 30px 1rem;
  margin-bottom: 2rem;
}

.dp-section-head::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--dp-pink), var(--dp-cyan), var(--dp-pink));
  box-shadow: var(--dp-glow-pink);
  clip-path: polygon(
    0% 50%, 4% 0%, 8% 100%, 13% 0%, 18% 100%, 24% 20%, 30% 100%,
    35% 0%, 40% 80%, 46% 0%, 52% 100%, 58% 30%, 64% 100%,
    70% 0%, 76% 100%, 82% 0%, 87% 70%, 92% 0%, 96% 100%, 100% 50%
  );
}

.dp-divider {
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--dp-pink), var(--dp-cyan), var(--dp-pink), transparent);
  box-shadow: var(--dp-glow-pink), var(--dp-glow-cyan);
  border: none;
  margin: 0;
  clip-path: polygon(
    0% 50%, 2% 0%, 6% 100%, 10% 0%, 14% 100%, 20% 30%, 25% 100%,
    30% 0%, 36% 100%, 40% 0%, 45% 80%, 50% 0%, 55% 100%, 60% 20%,
    65% 100%, 70% 0%, 75% 100%, 80% 0%, 85% 70%, 90% 0%, 94% 100%,
    98% 0%, 100% 50%
  );
}

/* Community CTA section */
.dp-community-cta {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 45, 120, 0.06) 0%, transparent 60%),
    var(--dp-ink-2);
  border-top: none;
  border-bottom: none;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.dp-footer {
  background: var(--dp-ink);
  border-top: none;
  padding: 2.5rem 0 1.5rem;
  margin-top: auto;
  position: relative;
}

.dp-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--dp-pink), var(--dp-cyan), transparent);
  box-shadow: var(--dp-glow-pink);
  clip-path: polygon(
    0% 50%, 5% 0%, 10% 100%, 16% 0%, 22% 100%, 28% 20%, 34% 100%,
    40% 0%, 47% 80%, 53% 0%, 58% 100%, 64% 30%, 70% 100%,
    76% 0%, 82% 100%, 88% 0%, 93% 70%, 97% 0%, 100% 50%
  );
}

.dp-footer .dp-footer-brand {
  font-family: var(--dp-font-display);
  font-size: 1.1rem;
  letter-spacing: 2px;
  color: var(--dp-pink);
  text-shadow: var(--dp-glow-pink);
}

.dp-footer a {
  color: var(--dp-text-dim);
  font-size: 0.88rem;
}

.dp-footer-cols li {
  margin-bottom: 0.5rem;
  break-inside: avoid;
}

@media (min-width: 992px) {
  .dp-footer-cols {
    column-count: 2;
    column-gap: 2rem;
  }
}

.dp-footer a:hover {
  color: var(--dp-cyan);
}

.dp-footer .dp-social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--dp-line);
  border-radius: 50%;
  margin-right: 0.5rem;
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.dp-footer .dp-social-icons a:hover {
  border-color: var(--dp-cyan);
  color: var(--dp-cyan);
  box-shadow: var(--dp-glow-cyan);
}

.dp-footer-disclaimer {
  font-size: 0.72rem;
  color: var(--dp-text-faint);
  border-top: 1px solid var(--dp-line);
  padding-top: 1rem;
  margin-top: 1.5rem;
  line-height: 1.6;
}

/* ==========================================================================
   Forms (contact page)
   ========================================================================== */

.dp-form .form-control,
.dp-form .form-select {
  background: var(--dp-ink-2);
  border: 1px solid var(--dp-line);
  color: var(--dp-text);
  border-radius: 0;
}

.dp-form .form-control:focus,
.dp-form .form-select:focus {
  background: var(--dp-ink-2);
  border-color: var(--dp-cyan);
  color: var(--dp-text);
  box-shadow: 0 0 0 0.2rem var(--dp-cyan-soft);
}

.dp-form .form-label {
  font-size: 0.85rem;
  color: var(--dp-text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.dp-form .form-control::placeholder {
  color: var(--dp-text-faint);
}

/* ==========================================================================
   Age/cookie/terms gate
   ========================================================================== */

.dp-gate-check {
  border: 2px solid var(--dp-pink);
  box-shadow: var(--dp-glow-pink);
}

.dp-gate-check:checked {
  background-color: var(--dp-green);
  border-color: var(--dp-green);
  box-shadow: var(--dp-glow-green);
}

.dp-gate-check:focus {
  border-color: var(--dp-pink);
  box-shadow: 0 0 0 0.2rem var(--dp-pink-soft);
}

.dp-gate-check:checked:focus {
  border-color: var(--dp-green);
  box-shadow: 0 0 0 0.2rem rgba(57, 255, 136, 0.25);
}

/* ==========================================================================
   Status pills (live now)
   ========================================================================== */

.dp-live-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dp-pink);
  box-shadow: var(--dp-glow-pink);
  animation: dp-pulse 2s infinite;
}

@keyframes dp-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.75); }
}

/* ==========================================================================
   Responsive helpers
   ========================================================================== */

@media (max-width: 767.98px) {
  .dp-stat {
    border-right: none;
    padding-right: 0;
  }
}