/**
 * Split Pride Template - Premium LGBTQ+ Bento Grid
 *
 * Extends the Split template with Pride flag colors, rainbow shimmer,
 * and LGBTQ+ community theming. Imports all base Split styles first,
 * then overrides colors, tiles, and effects.
 *
 * Classic 6-Stripe Pride on White. Apple Pride aesthetic meets Bento Grid.
 *
 * Palette (WCAG AA on #ffffff):
 *   Red #D90429 (7.2:1) | Orange #C05600 (5.8:1) | Yellow #946B00 (5.5:1 text) / #FFED00 (gradients)
 *   Green #007A2F (5.4:1) | Blue #0043CE (7.8:1) | Violet #7B2D8E (6.1:1)
 *   Trans Blue #0967B8 (5.0:1) | Trans Pink #C74084 (4.5:1)
 *
 * On dark tiles (white text): bright Pride colors used directly.
 */

/* Import all base Split template styles */
@import "./split.css";

/* ==========================================================================
   1. PRIDE COLOR SYSTEM
   ========================================================================== */
.split-page {
  /* Pride on White — deeper for text contrast */
  --pride-red: #D90429;
  --pride-orange: #C05600;
  --pride-yellow: #946B00;
  --pride-yellow-bright: #FFED00;
  --pride-green: #007A2F;
  --pride-blue: #0043CE;
  --pride-violet: #7B2D8E;

  /* Bright versions for dark backgrounds and decorative gradients */
  --pride-red-bright: #FF2D2D;
  --pride-orange-bright: #FF8C00;
  --pride-green-bright: #00BF3F;
  --pride-blue-bright: #3B6FFF;
  --pride-violet-bright: #B44AC0;

  /* Trans flag */
  --pride-trans-blue: #0967B8;
  --pride-trans-pink: #C74084;

  /* Override Split accent system */
  --split-primary: #D90429;
  --split-secondary: #7B2D8E;
  --split-accent: #0043CE;
  --split-accent-light: #7B2D8E;

  /* Glow becomes rainbow-tinted */
  --split-shadow-glow: 0 8px 24px rgba(217, 4, 41, 0.2), 0 4px 12px rgba(0, 67, 206, 0.1);
  --split-shadow-glow-hover: 0 12px 32px rgba(217, 4, 41, 0.3), 0 6px 16px rgba(123, 45, 142, 0.15);

  /* Checkout form variables (override hardcoded blue from split.css) */
  --checkout-primary: #D90429;
  --checkout-primary-hover: #B8001E;
  --checkout-primary-muted: rgba(217, 4, 41, 0.15);
  --checkout-focus-ring: #D90429;
  --checkout-danger: #C74084;
  --checkout-shadow-glow: 0 8px 24px rgba(217, 4, 41, 0.25);
}

/* Selection — Pride red */
.split-page ::selection {
  background: rgba(217, 4, 41, 0.15);
  color: var(--split-text-dark);
}

/* ==========================================================================
   2. KEYFRAMES
   ========================================================================== */

/* Smooth flowing rainbow for backgrounds */
@keyframes pride-flow {
  0%   { background-position: 0% 50%; }
  100% { background-position: -200% 50%; }
}

/* Shimmer for gradient text */
@keyframes pride-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Soft rainbow glow pulse */
@keyframes pride-glow-soft {
  0%   { box-shadow: 0 8px 30px rgba(217, 4, 41, 0.15), 0 4px 12px rgba(0, 67, 206, 0.08); }
  33%  { box-shadow: 0 8px 30px rgba(0, 122, 47, 0.15), 0 4px 12px rgba(192, 86, 0, 0.08); }
  67%  { box-shadow: 0 8px 30px rgba(0, 67, 206, 0.15), 0 4px 12px rgba(123, 45, 142, 0.08); }
  100% { box-shadow: 0 8px 30px rgba(217, 4, 41, 0.15), 0 4px 12px rgba(0, 67, 206, 0.08); }
}

/* ==========================================================================
   3. RAINBOW TOP BAR — The universal Pride signal
   ========================================================================== */
.split-page::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  z-index: 200;
  background: linear-gradient(
    90deg,
    #FF2D2D, #FF8C00, #FFED00, #00BF3F, #3B6FFF, #B44AC0,
    #FF2D2D, #FF8C00, #FFED00, #00BF3F, #3B6FFF, #B44AC0
  );
  background-size: 200% 100%;
  animation: pride-flow 4s linear infinite;
  pointer-events: none;
}

/* ==========================================================================
   4. HERO — Pride Bento Tiles
   ========================================================================== */

/* Hero background: subtle rainbow tint */
.split-hero {
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    rgba(217, 4, 41, 0.02) 25%,
    rgba(255, 237, 0, 0.015) 50%,
    rgba(0, 67, 206, 0.02) 75%,
    #ffffff 100%
  );
}

/* PRIMARY tile (title): Full Pride rainbow gradient — THE statement piece */
.split-bento-tile--primary {
  background: linear-gradient(
    135deg,
    #D90429 0%,
    #C05600 20%,
    #007A2F 40%,
    #0043CE 60%,
    #7B2D8E 80%,
    #D90429 100%
  );
  --local-text: #ffffff;
}

/* SECONDARY tile (location): Pride Green */
.split-bento-tile--secondary {
  background: linear-gradient(135deg, #007A2F, #005A22);
  --local-text: #ffffff;
}

/* ACCENT tile (description): Pride Blue */
.split-bento-tile--accent {
  background: linear-gradient(135deg, #0043CE, #00339E);
  --local-text: #ffffff;
}

/* DARK tiles (date, time): Pride Violet */
.split-bento-tile--dark {
  background: linear-gradient(135deg, #7B2D8E, #5C1D6E);
  --local-text: #ffffff;
}

/* LIGHT tiles (speakers, actions): White with Pride red bottom border.
   Uses solid border (not border-image) to preserve border-radius. */
.split-bento-tile--light {
  border: 2px solid rgba(0, 0, 0, 0.06);
  border-bottom: 3px solid #D90429;
  position: relative;
}

/* Glow ring on light tile hover */
.split-bento-tile--light:hover {
  border-color: #D90429;
  box-shadow: 0 0 0 1px #D90429, 0 8px 24px rgba(217, 4, 41, 0.12);
}

/* Image tile overlay: Rainbow-tinted gradient */
.split-bento-tile--image::before {
  background: linear-gradient(
    to top,
    rgba(217, 4, 41, 0.65) 0%,
    rgba(0, 67, 206, 0.3) 20%,
    rgba(123, 45, 142, 0.15) 40%,
    rgba(0, 0, 0, 0) 60%
  );
}

/* Tile hover: rainbow glow */
.split-bento-tile:hover {
  box-shadow: 0 8px 24px rgba(217, 4, 41, 0.15), 0 4px 12px rgba(0, 67, 206, 0.08);
}

/* Speaker count value: Pride red instead of default blue */
.split-bento-tile--light .split-tile-value {
  color: #D90429;
}

/* ==========================================================================
   5. SECTION HEADERS — Rainbow Shimmer Titles
   ========================================================================== */
.split-section-title {
  font-weight: 800;
  background: linear-gradient(
    90deg,
    #D90429, #C05600, #FFED00, #007A2F, #0043CE, #7B2D8E,
    #D90429, #C05600, #B8860B
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: pride-shimmer 8s linear infinite;
}

/* Section label — Pride red */
.split-section-label {
  color: #D90429;
}

.split-section-subtitle {
  color: var(--split-text-muted);
}

/* ==========================================================================
   6. STICKY BAR — Rainbow bottom border
   ========================================================================== */
.split-sticky-bar {
  border-bottom: 4px solid transparent;
  border-image: linear-gradient(90deg, #FF2D2D, #FF8C00, #FFED00, #00BF3F, #3B6FFF, #B44AC0) 1;
}

/* ==========================================================================
   7. BUTTONS — Pride Red Primary
   ========================================================================== */
.split-btn-primary {
  background: #D90429;
  border-color: #D90429;
  box-shadow: 0 8px 24px rgba(217, 4, 41, 0.25);
}

.split-btn-primary:hover {
  background: #B8001E;
  border-color: #B8001E;
  box-shadow: 0 12px 32px rgba(217, 4, 41, 0.35);
}

/* On dark/colored tiles */
.split-bento-tile--primary .split-btn-secondary,
.split-bento-tile--dark .split-btn-secondary,
.split-bento-tile--accent .split-btn-secondary {
  background: #ffffff;
  color: #D90429;
}

.split-btn-outline {
  border-color: #D90429;
  color: #D90429;
}

.split-btn-outline:hover {
  background: #D90429;
  color: #ffffff;
}

/* ==========================================================================
   8. CARDS — Rainbow accent on hover
   ========================================================================== */
.split-card {
  transition: all var(--split-transition-spring);
}

.split-card:hover {
  box-shadow: 0 0 0 2px #D90429, 0 12px 32px rgba(217, 4, 41, 0.12);
  transform: translateY(-3px);
}

/* Horizontal cards: Pride red left border (box-shadow preserves border-radius) */
.split-card-horizontal:hover {
  box-shadow: -4px 0 0 0 #D90429, 0 12px 32px rgba(217, 4, 41, 0.12);
}

/* ==========================================================================
   9. SPEAKERS — Pride Color Rotation with Rainbow Glow
   ========================================================================== */

/* Card accent colors rotate through Pride */
.split-card:nth-child(6n+1):hover { box-shadow: 0 0 0 2px #D90429, 0 8px 24px rgba(217,4,41,0.15); }
.split-card:nth-child(6n+2):hover { box-shadow: 0 0 0 2px #C05600, 0 8px 24px rgba(192,86,0,0.15); }
.split-card:nth-child(6n+3):hover { box-shadow: 0 0 0 2px #B8860B, 0 8px 24px rgba(184,134,11,0.15); }
.split-card:nth-child(6n+4):hover { box-shadow: 0 0 0 2px #007A2F, 0 8px 24px rgba(0,122,47,0.15); }
.split-card:nth-child(6n+5):hover { box-shadow: 0 0 0 2px #0043CE, 0 8px 24px rgba(0,67,206,0.15); }
.split-card:nth-child(6n+6):hover { box-shadow: 0 0 0 2px #7B2D8E, 0 8px 24px rgba(123,45,142,0.15); }

/* Tags in trans colors */
.split-tag {
  color: #0967B8;
  border-color: rgba(12, 123, 220, 0.3);
  background: rgba(12, 123, 220, 0.06);
}

.split-tag:nth-child(2n) {
  color: #C74084;
  border-color: rgba(199, 64, 132, 0.3);
  background: rgba(199, 64, 132, 0.06);
}

/* ==========================================================================
   10. PROGRAM — Rainbow Timeline
   ========================================================================== */

/* Timeline vertical line: rainbow gradient */
.split-timeline::before {
  background: linear-gradient(180deg, #D90429, #C05600, #FFED00, #007A2F, #0043CE, #7B2D8E);
}

/* Timeline dots: cycle through Pride colors */
.split-timeline-item:nth-child(6n+1)::before { background: #D90429; box-shadow: 0 0 0 4px rgba(217,4,41,0.15); }
.split-timeline-item:nth-child(6n+2)::before { background: #C05600; box-shadow: 0 0 0 4px rgba(192,86,0,0.15); }
.split-timeline-item:nth-child(6n+3)::before { background: #B8860B; box-shadow: 0 0 0 4px rgba(184,134,11,0.15); }
.split-timeline-item:nth-child(6n+4)::before { background: #007A2F; box-shadow: 0 0 0 4px rgba(0,122,47,0.15); }
.split-timeline-item:nth-child(6n+5)::before { background: #0043CE; box-shadow: 0 0 0 4px rgba(0,67,206,0.15); }
.split-timeline-item:nth-child(6n+6)::before { background: #7B2D8E; box-shadow: 0 0 0 4px rgba(123,45,142,0.15); }

/* Program tabs */
.split-program-tab.is-active {
  background: #D90429;
  color: #ffffff;
  border-color: #D90429;
}

.split-program-tab:hover {
  color: #D90429;
  border-color: rgba(217, 4, 41, 0.3);
}

/* Featured badge */
.split-timeline-badge {
  background: linear-gradient(90deg, #D90429, #C05600);
  color: #ffffff;
}

/* ==========================================================================
   11. TICKETS — Rainbow Featured Card
   ========================================================================== */

/* Featured ticket: animated rainbow glow */
.split-card.split-ticket-card--featured {
  border: 2px solid #D90429;
  animation: pride-glow-soft 6s ease-in-out infinite;
  border-radius: var(--split-radius-lg);
}

.split-card.split-ticket-card--featured:hover {
  animation: none;
  box-shadow: 0 0 0 2px #D90429, 0 12px 40px rgba(217, 4, 41, 0.25);
}

/* Chip colors */
.split-chip {
  color: #D90429;
  background: rgba(217, 4, 41, 0.08);
}

.split-chip--success {
  color: #007A2F;
  background: rgba(0, 122, 47, 0.08);
}

.split-chip--small {
  color: #C05600;
}

/* ==========================================================================
   12. SPONSORS — Pride tier colors
   ========================================================================== */
.split-sponsors-level-title {
  color: #D90429;
}

.split-sponsor-card--platin {
  border-color: transparent;
  background: linear-gradient(135deg, rgba(217,4,41,0.03), rgba(0,67,206,0.03));
}

.split-sponsor-card--platin:hover {
  box-shadow: 0 0 0 2px #D90429, 0 8px 24px rgba(217, 4, 41, 0.12);
}

.split-sponsor-card--gold:hover {
  box-shadow: 0 0 0 2px #C05600, 0 8px 24px rgba(192, 86, 0, 0.12);
}

/* ==========================================================================
   13. CONTENT CARDS — Pride Color Rotation
   ========================================================================== */
.split-content-type {
  color: #D90429;
}

.split-content-card:nth-child(6n+1):hover { box-shadow: 0 0 0 2px #D90429, var(--split-shadow-md); }
.split-content-card:nth-child(6n+2):hover { box-shadow: 0 0 0 2px #C05600, var(--split-shadow-md); }
.split-content-card:nth-child(6n+3):hover { box-shadow: 0 0 0 2px #946B00, var(--split-shadow-md); }
.split-content-card:nth-child(6n+4):hover { box-shadow: 0 0 0 2px #007A2F, var(--split-shadow-md); }
.split-content-card:nth-child(6n+5):hover { box-shadow: 0 0 0 2px #0043CE, var(--split-shadow-md); }
.split-content-card:nth-child(6n+6):hover { box-shadow: 0 0 0 2px #7B2D8E, var(--split-shadow-md); }

/* ==========================================================================
   14. ANNOUNCEMENTS
   ========================================================================== */
.split-announcement-card {
  border-left: 4px solid #D90429;
}

.split-announcement-card:nth-child(6n+1) { border-left-color: #D90429; }
.split-announcement-card:nth-child(6n+2) { border-left-color: #C05600; }
.split-announcement-card:nth-child(6n+3) { border-left-color: #946B00; }
.split-announcement-card:nth-child(6n+4) { border-left-color: #007A2F; }
.split-announcement-card:nth-child(6n+5) { border-left-color: #0043CE; }
.split-announcement-card:nth-child(6n+6) { border-left-color: #7B2D8E; }

/* #1072: the date badge background is var(--split-primary) which split-pride
   redefines to #D90429 (red) — so a red day number was red-on-red = invisible
   (only the white "APR" month showed). Use the badge's light text colour so the
   day reads on the red badge, matching the month. */
.split-announcement-day {
  color: var(--split-text-light, #ffffff);
}

/* ==========================================================================
   15. CUP
   ========================================================================== */
.split-card:nth-child(1) .split-card-title {
  color: #D90429;
}

/* ==========================================================================
   16. FOOTER — Rainbow Divider + Pride Accents
   ========================================================================== */
.split-footer {
  border-top: 6px solid transparent;
  border-image: linear-gradient(90deg, #FF2D2D, #FF8C00, #FFED00, #00BF3F, #3B6FFF, #B44AC0) 1;
}

.split-footer-heading {
  color: #ffffff;
}

/* ==========================================================================
   17. ACTION BUTTONS (Hero) — Scoped per tile background
   ========================================================================== */

/* On DARK/COLORED tiles: white icons (visible on colored backgrounds) */
.split-bento-tile--primary .split-action-btn,
.split-bento-tile--dark .split-action-btn,
.split-bento-tile--accent .split-action-btn,
.split-bento-tile--secondary .split-action-btn,
.split-bento-tile--image .split-action-btn {
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.08);
}

.split-bento-tile--primary .split-action-btn:hover,
.split-bento-tile--dark .split-action-btn:hover,
.split-bento-tile--accent .split-action-btn:hover,
.split-bento-tile--secondary .split-action-btn:hover,
.split-bento-tile--image .split-action-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #ffffff;
  color: #ffffff;
  box-shadow: 0 0 15px rgba(255, 45, 45, 0.2);
}

/* On LIGHT tiles: Pride-colored icons (visible on white background!) */
.split-bento-tile--light .split-action-btn {
  border-color: rgba(217, 4, 41, 0.2);
  color: #D90429;
  background: rgba(217, 4, 41, 0.04);
}

.split-bento-tile--light .split-action-btn:hover {
  border-color: #D90429;
  color: #D90429;
  background: rgba(217, 4, 41, 0.08);
  box-shadow: 0 4px 12px rgba(217, 4, 41, 0.15);
  transform: translateY(-2px);
}

/* Watchlist active: trans pink (works on both light and dark tiles) */
.split-action-btn--active {
  border-color: #C74084;
  color: #C74084;
}

.split-bento-tile--light .split-action-btn--active {
  border-color: #C74084;
  color: #C74084;
  background: rgba(199, 64, 132, 0.06);
}

/* ==========================================================================
   18. BADGES — Pride themed
   ========================================================================== */
.split-badge {
  background: rgba(217, 4, 41, 0.1);
  color: #D90429;
  border: 1px solid rgba(217, 4, 41, 0.2);
}

.split-badge--live::before {
  background: #007A2F;
}

/* ==========================================================================
   19. FOCUS STATES
   ========================================================================== */
.split-btn:focus-visible,
.split-card:focus-visible,
.split-program-tab:focus-visible,
.split-timeline-item:focus-visible {
  outline: 2px solid #D90429;
  outline-offset: 2px;
}

/* ==========================================================================
   20. SKIP LINK
   ========================================================================== */
.split-skip-link {
  background: #D90429;
}

/* ==========================================================================
   21. TICKETS WRAPPER (Checkout Embed)
   ========================================================================== */
.split-page .split-tickets-wrapper a:not(.split-btn) {
  color: #0043CE;
}

/* ==========================================================================
   22. BASICS — Rainbow blockquote
   ========================================================================== */
.split-page .split-section blockquote {
  border-left: 4px solid #D90429;
}

/* ==========================================================================
   23. WOW UPGRADES — Parität mit Bold Pride
   ========================================================================== */

/* W1: Sponsor tiers — Silber/Bronze/Partner (Bold Pride parity) */
.split-sponsor-card--silber:hover {
  box-shadow: 0 0 0 2px #0043CE, 0 8px 24px rgba(0, 67, 206, 0.12);
}
.split-sponsor-card--bronze:hover {
  box-shadow: 0 0 0 2px #946B00, 0 8px 24px rgba(148, 107, 0, 0.12);
}
.split-sponsor-card--partner:hover {
  box-shadow: 0 0 0 2px #7B2D8E, 0 8px 24px rgba(123, 45, 142, 0.12);
}

/* W2: Content cards — subtle Pride-tinted backgrounds matching hover color */
.split-content-card:nth-child(6n+1) { background: rgba(217, 4, 41, 0.02); }
.split-content-card:nth-child(6n+2) { background: rgba(192, 86, 0, 0.02); }
.split-content-card:nth-child(6n+3) { background: rgba(148, 107, 0, 0.015); }
.split-content-card:nth-child(6n+4) { background: rgba(0, 122, 47, 0.02); }
.split-content-card:nth-child(6n+5) { background: rgba(0, 67, 206, 0.02); }
.split-content-card:nth-child(6n+6) { background: rgba(123, 45, 142, 0.02); }

/* W3: Announcement hover glow */
.split-announcement-card:hover {
  box-shadow: 0 4px 12px rgba(217, 4, 41, 0.08);
  transform: translateY(-1px);
}

/* W4: Keyfact tiles — Pride-tinted backgrounds */
.split-keyfact-tile { background: rgba(217, 4, 41, 0.02); }
.split-keyfact-tile:hover { background: rgba(217, 4, 41, 0.04); }
.split-keyfact-tile--accent {
  background: linear-gradient(135deg, rgba(217, 4, 41, 0.04), rgba(0, 67, 206, 0.04));
}

/* W5: Speaker card images — saturation boost (Pride is about visibility) */
.split-card .split-card-image img {
  filter: saturate(1.1);
  transition: filter 300ms ease;
}
.split-card:hover .split-card-image img {
  filter: saturate(1.25);
}

/* W6: Location detail icons — Pride gradient */
.split-location-detail-icon {
  background: linear-gradient(135deg, #D90429, #7B2D8E);
  color: #ffffff;
}

/* W7: Organizer card hover — rainbow ring */
.split-organizer-card:hover {
  box-shadow: 0 0 0 2px #D90429, 0 8px 24px rgba(217, 4, 41, 0.1);
}

/* W8: Horizontal card hover — rainbow left accent */
.split-card-horizontal:hover {
  box-shadow: -4px 0 0 0 #D90429, 0 8px 24px rgba(217, 4, 41, 0.08);
}

/* ==========================================================================
   24. RAINBOW BAR PERFORMANCE
   ========================================================================== */
.split-page::after {
  will-change: background-position;
}

/* ==========================================================================
   24. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .split-page::after {
    animation: none;
    background-size: 100% 100%;
  }

  .split-section-title {
    animation: none;
    background-size: 100% 100%;
  }

  .split-card.split-ticket-card--featured {
    animation: none;
    box-shadow: 0 8px 24px rgba(217, 4, 41, 0.15);
  }
}

/* ==========================================================================
   25. MOBILE — Disable expensive box-shadow animation
   ========================================================================== */
@media (max-width: 768px) {
  .split-card.split-ticket-card--featured {
    animation: none;
    box-shadow: 0 8px 24px rgba(217, 4, 41, 0.15);
  }
}

/* ==========================================================================
   26. HIGH CONTRAST
   ========================================================================== */
@media (prefers-contrast: high) {
  .split-page::after {
    height: 6px;
  }

  .split-section-title {
    -webkit-text-fill-color: var(--split-text-dark);
    background: none;
    animation: none;
  }

  .split-card:hover {
    box-shadow: 0 0 0 3px #D90429;
  }
}

/* ==========================================================================
   27. PRINT — Gradient text must degrade to solid
   ========================================================================== */
@media print {
  .split-page::after {
    display: none;
  }

  .split-section-title {
    -webkit-text-fill-color: currentColor;
    background: none;
    color: inherit;
    animation: none;
  }
}

/* ==========================================================================
   28. FORCED COLORS
   ========================================================================== */
@media (forced-colors: active) {
  .split-section-title {
    -webkit-text-fill-color: unset;
    background: none;
    color: CanvasText;
    animation: none;
  }

  .split-page::after {
    display: none;
  }
}