/**
 * Scoped Timetable CSS
 * 
 * This file contains ONLY the essential Tailwind utility classes needed for
 * the timetable layout, scoped to #festival-timetable-root.
 * 
 * This ensures the layout works correctly when embedded in Webflow,
 * while allowing Webflow's global CSS to handle colors, fonts, etc.
 */

/* Reset font-weight to prevent Webflow body styles from making everything bold */
#festival-timetable-root {
  font-weight: 400;
}

/* Flexbox utilities */
#festival-timetable-root .flex {
  display: flex !important;
}

#festival-timetable-root .inline-flex {
  display: inline-flex !important;
}

#festival-timetable-root .flex-col {
  flex-direction: column !important;
}

#festival-timetable-root .flex-shrink-0 {
  flex-shrink: 0 !important;
}

#festival-timetable-root .items-baseline {
  align-items: baseline !important;
}

#festival-timetable-root .items-center {
  align-items: center !important;
}

#festival-timetable-root .justify-between {
  justify-content: space-between !important;
}

#festival-timetable-root .gap-2 {
  gap: 0.5rem !important;
}

/* Position utilities */
#festival-timetable-root .relative {
  position: relative !important;
}

#festival-timetable-root .absolute {
  position: absolute !important;
}

#festival-timetable-root .sticky {
  position: sticky !important;
}

#festival-timetable-root .top-0 {
  top: 7rem !important;
}

#festival-timetable-root .left-4 {
  left: 1rem !important;
}

#festival-timetable-root .right-4 {
  right: 1rem !important;
}

/* Sizing utilities */
#festival-timetable-root .w-full {
  width: 100% !important;
}

#festival-timetable-root .h-full {
  height: 100% !important;
}

#festival-timetable-root .min-h-screen {
  min-height: 100vh !important;
}

#festival-timetable-root .min-w-full {
  min-width: 100% !important;
}

/* Spacing utilities */
#festival-timetable-root .px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

#festival-timetable-root .py-4 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

#festival-timetable-root .mt-1 {
  margin-top: 0.25rem !important;
}

/* Z-index */
#festival-timetable-root .z-50 {
  z-index: 50 !important;
}

#festival-timetable-root .z-\[9999\] {
  z-index: 9999 !important;
}

/* Display utilities */
#festival-timetable-root .block {
  display: block !important;
}

#festival-timetable-root .hidden {
  display: none !important;
}

/* Overflow utilities */
#festival-timetable-root .overflow-hidden {
  overflow: hidden !important;
}

#festival-timetable-root .overflow-x-scroll {
  overflow-x: scroll !important;
}

/* Text utilities */
#festival-timetable-root .text-left {
  text-align: left !important;
}

#festival-timetable-root .text-center {
  text-align: center !important;
}

#festival-timetable-root .text-sm {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}

#festival-timetable-root .font-bold {
  font-weight: 700 !important;
}

/* Cursor utilities */
#festival-timetable-root .cursor-pointer {
  cursor: pointer !important;
}

/* Transition utilities */
#festival-timetable-root .transition-opacity {
  transition-property: opacity !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}

#festival-timetable-root .hover\:opacity-80:hover {
  opacity: 0.8 !important;
}

/* Modal specific utilities */
#festival-timetable-root .fixed {
  position: fixed !important;
}

#festival-timetable-root .inset-0 {
  inset: 0 !important;
}

/* Text color utilities - use white for timetable text */
#festival-timetable-root .text-white {
  color: rgb(255, 255, 255) !important;
}

/* Modal text overrides - match live site typography */
#festival-timetable-root .text-size-small {
  font-weight: 400 !important;
}

@media screen and (max-width: 991px) {
  #festival-timetable-root .text-size-small.is-heading-style-h6-on-mobile {
    font-weight: 700 !important;
  }
}

/* Artist name + B2B line uppercase - scoped to timetable only */
#festival-timetable-root .artist-card .heading-style-h6,
#festival-timetable-root .artist-card .heading-style-h5 {
  text-transform: uppercase !important;
}

/* Hide classes from widget.css */
@media screen and (max-width: 991px) {
  #festival-timetable-root .hide,
  #festival-timetable-root .hide-tablet {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  #festival-timetable-root .hide-mobile-landscape {
    display: none !important;
  }
}

@media screen and (max-width: 479px) {
  #festival-timetable-root .hide-mobile {
    display: none !important;
  }
}

/* Glitch effect CSS */
#festival-timetable-root .modal2_image-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.03) 0px,
    rgba(255, 255, 255, 0.03) 1px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0) 4px
  );
  mix-blend-mode: overlay;
  opacity: 0.35;
}

#festival-timetable-root .modal2_image-bg .glitch-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  will-change: transform, clip-path, -webkit-clip-path, filter, opacity;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#festival-timetable-root .modal2_image-bg .glitch-layer.is-r {
  mix-blend-mode: screen;
  filter: hue-rotate(10deg) saturate(1.4);
}

#festival-timetable-root .modal2_image-bg .glitch-layer.is-g {
  mix-blend-mode: screen;
  filter: hue-rotate(120deg) saturate(1.4);
}

#festival-timetable-root .modal2_image-bg .glitch-layer.is-b {
  mix-blend-mode: screen;
  filter: hue-rotate(240deg) saturate(1.4);
}

/* Mobile adjustments (<767px) */
@media (max-width: 767px) {
  #festival-timetable-root .stage-column {
    width: 17.5rem !important;
    min-width: 17.5rem !important;
    max-width: 17.5rem !important;
  }

  #festival-timetable-root .artist-card {
    padding: 1rem !important;
  }
}