/* ===================================
   RESPONSIVE LAYOUT SYSTEM
   =================================== */

/* ===================================
   FUNDAMENTAL RESPONSIVE FIXES
   =================================== */

/* Prevent horizontal scroll on all devices */
* {
  box-sizing: border-box !important;
}

html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Fix scroll bar issues on desktop */
@media (min-width: 768px) {

  html {
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    /* Always show scroll bar to prevent layout shifts */
  }

  body {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    /* Let body content flow naturally */
  }
  
  /* Hide mobile navigation completely on desktop to prevent scroll issues */
  .mobile-nav {
    display: none !important;
  }

  /* Ensure no sections create their own scroll bars */
  .hero-image-section,
  .hero-banner-section,
  .event-info-section,
  .venue-details-section,
  .contact-section,
  .site-footer,
  .container,
  .hero-banner-container,
  .event-details-grid,
  .venue-faq-container,
  .contact-container,
  .footer-content {
    overflow: visible !important;
  }

  /* Force all elements to not create scroll contexts */
  * {
    overflow-x: visible !important;
  }
}

/* Ensure all containers respect viewport width */
.container,
.nav-container,
.hero-banner-container,
.event-details-grid,
.venue-faq-container,
.contact-container,
.footer-content {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* Fix container overflow issues on desktop */
@media (min-width: 768px) {
  .site-header {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  .nav-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .hero-image-section,
  .hero-banner-section {
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
}

/* Fix any elements that might cause overflow */
img,
video,
iframe,
canvas,
svg {
  max-width: 100% !important;
  height: auto !important;
  box-sizing: border-box !important;
}

/* ===================================
   MOBILE-FIRST BREAKPOINTS
   =================================== */

/* Base styles (Mobile: 320px+) */
/* All base styles are defined in main.css */

/* ===================================
   CRITICAL MOBILE FIXES
   =================================== */

/* Mobile-first responsive fixes for all major issues */
@media (max-width: 767px) {

  /* FUNDAMENTAL: Prevent horizontal scroll */
  html,
  body {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    position: relative !important;
  }

  /* MOBILE LOGO SECTION - Enhanced with more space and better logo */
  .mobile-logo-section {
    display: block !important;
    width: 100% !important;
    background: linear-gradient(135deg, var(--color-deep-purple) 0%, var(--color-mystic-purple) 100%) !important;
    padding: 4rem 2rem 2rem 2rem !important;
    text-align: center !important;
    border-bottom: 4px solid var(--color-accent-gold) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
  }

  .mobile-logo-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding: 1rem 0 !important;
  }

  .mobile-hero-logo {
    width: 320px !important;
    height: auto !important;
    max-width: 95% !important;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4)) !important;
    transition: transform 0.3s ease !important;
  }

  .mobile-hero-logo:hover {
    transform: scale(1.05) !important;
  }

  /* HIDE the blank purple hero-image-section on mobile */
  .hero-image-section {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Ensure all sections fit within viewport */
  .site-header,
  .mobile-logo-section,
  .hero-image-section,
  .hero-banner-section,
  .event-info-section,
  .venue-details-section,
  .contact-section,
  .site-footer {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* CRITICAL FIX: Mobile Navigation */
  .mobile-menu-toggle {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10000 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid var(--color-light-purple) !important;
    border-radius: 8px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 8px !important;
    cursor: pointer !important;
  }

  .hamburger-line {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background-color: var(--color-pure-white) !important;
    margin: 2px 0 !important;
    border-radius: 1px !important;
    transition: all 0.3s ease !important;
  }

  /* Ensure hamburger lines are visible */
  .mobile-menu-toggle .hamburger-line:nth-child(1),
  .mobile-menu-toggle .hamburger-line:nth-child(2),
  .mobile-menu-toggle .hamburger-line:nth-child(3) {
    display: block !important;
    background-color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* CRITICAL FIX: Header Layout */
  .nav-container {
    height: 60px !important;
    padding: 0 1rem !important;
    justify-content: space-between !important;
  }

  .logo-container {
    flex: 1 !important;
    display: flex !important;
    justify-content: flex-start !important;
  }

  .logo {
    width: 120px !important;
    height: 40px !important;
  }

  .nav-controls {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }

  /* CRITICAL FIX: Mobile Menu - Proper slide-in from right */
  .mobile-nav {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: 280px !important;
    height: 100vh !important;
    background: var(--color-primary-black) !important;
    padding-top: 80px !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    transition: right 0.3s ease !important;
    z-index: 9999 !important;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3) !important;
    transform: translateX(0) !important;
    overflow-y: auto !important;
  }

  .mobile-nav[aria-hidden="false"] {
    right: 0 !important;
  }

  /* Ensure mobile nav is not constrained by header */
  .site-header .mobile-nav {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
  }

  .mobile-nav-link {
    display: block !important;
    color: var(--color-pure-white) !important;
    font-size: 1.25rem !important;
    padding: 1rem 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  /* CRITICAL FIX: Hero Section */
  .hero-banner-section {
    padding: 2rem 1rem !important;
    text-align: center !important;
  }

  .hero-banner-container {
    max-width: 100% !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .event-title {
    font-size: 2rem !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
    display: block !important;
    visibility: visible !important;
    text-align: center !important;
    width: 100% !important;
  }

  .hero-subtitle {
    font-size: 1.125rem !important;
    margin-bottom: 0.75rem !important;
    display: block !important;
    visibility: visible !important;
    text-align: center !important;
  }

  .hero-date {
    font-size: 1rem !important;
    margin-bottom: 2rem !important;
    display: block !important;
    visibility: visible !important;
    text-align: center !important;
  }

  /* Fix 2: Hide background logo on mobile */
  .hero-image-section {
    background-image: none !important;
    background: linear-gradient(135deg, var(--color-deep-purple) 0%, var(--color-mystic-purple) 100%) !important;
    height: auto !important;
    min-height: 300px !important;
  }

  /* Fix 3: Center all section headings */
  .section-heading {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }

  /* CRITICAL FIX: Card Centering */
  .event-info-section,
  .venue-details-section,
  .contact-section {
    padding: 3rem 1rem !important;
  }

  .container {
    padding: 0 1rem !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  .event-details-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2rem !important;
    padding: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
  }

  .event-details-card,
  .event-description-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
    display: block !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* CRITICAL FIX: Venue Section */
  .venue-faq-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2rem !important;
    padding: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
  }

  .faq-category {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
    display: block !important;
    position: relative !important;
  }

  .category-title {
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  .category-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: center !important;
    gap: 0.5rem !important;
  }

  .category-title {
    flex: 1 !important;
    text-align: center !important;
    margin: 0 !important;
  }

  /* Fix 7: Fix card padding - more space from borders */
  .event-details-card,
  .event-description-card,
  .faq-category {
    padding: 2rem 1.5rem !important;
  }

  .faq-item {
    padding: 1.5rem 1.25rem !important;
    margin-bottom: 1rem !important;
  }

  /* Fix 8: Center contact form */
  .contact-section {
    text-align: center !important;
  }

  .contact-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 1rem !important;
  }

  .contact-form {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* CRITICAL FIX: Footer Layout */
  .site-footer {
    padding: 2rem 0 1rem 0 !important;
    text-align: center !important;
  }

  .footer-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 0 1rem !important;
    text-align: center !important;
  }

  .footer-logo {
    order: 1 !important;
    margin-bottom: 1rem !important;
  }

  .footer-info {
    order: 2 !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .footer-info p {
    margin: 0.5rem 0 !important;
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
  }

  .footer-links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 1rem !important;
    margin: 0.5rem 0 !important;
  }

  .footer-link {
    font-size: 0.875rem !important;
    padding: 0.5rem !important;
  }

  .footer-accessibility {
    order: 3 !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 1rem 0 0 0 !important;
    padding: 1rem !important;
  }

  .footer-accessibility p {
    font-size: 0.75rem !important;
    margin: 0 !important;
  }

  .footer-bottom {
    text-align: center !important;
    padding: 1rem !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    margin-top: 1rem !important;
  }

  .footer-bottom p {
    text-align: center !important;
    margin: 0 !important;
    font-size: 0.75rem !important;
  }

  /* Fix 10: Ensure proper container spacing */
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Fix 11: Card header alignment - keep horizontal layout on mobile */
  .card-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    text-align: center !important;
  }

  .card-heading {
    flex: 1 !important;
    text-align: center !important;
    margin: 0 !important;
  }

  .dice-decoration {
    flex-shrink: 0 !important;
  }

  /* Fix 12: FAQ items alignment */
  .faq-items {
    width: 100% !important;
  }

  .faq-item {
    text-align: left !important;
    width: 100% !important;
  }

  .faq-question {
    text-align: left !important;
    margin-bottom: 0.75rem !important;
  }

  .faq-answer {
    text-align: left !important;
    line-height: 1.6 !important;
  }
}

/* Small devices (Tablets: 640px+) */
@media (min-width: 640px) {
  .sm\:block {
    display: block;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:grid {
    display: grid;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:flex-col {
    flex-direction: column;
  }

  .sm\:text-sm {
    font-size: var(--font-size-sm);
  }

  .sm\:text-base {
    font-size: var(--font-size-base);
  }

  .sm\:text-lg {
    font-size: var(--font-size-lg);
  }

  .sm\:text-xl {
    font-size: var(--font-size-xl);
  }

  .sm\:text-2xl {
    font-size: var(--font-size-2xl);
  }

  .sm\:text-3xl {
    font-size: var(--font-size-3xl);
  }

  .sm\:p-4 {
    padding: var(--space-4);
  }

  .sm\:p-6 {
    padding: var(--space-6);
  }

  .sm\:p-8 {
    padding: var(--space-8);
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Medium devices (Tablets: 768px+) */
@media (min-width: 768px) {
  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:grid {
    display: grid;
  }

  .md\:hidden {
    display: none;
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:flex-col {
    flex-direction: column;
  }

  .md\:text-base {
    font-size: var(--font-size-base);
  }

  .md\:text-lg {
    font-size: var(--font-size-lg);
  }

  .md\:text-xl {
    font-size: var(--font-size-xl);
  }

  .md\:text-2xl {
    font-size: var(--font-size-2xl);
  }

  .md\:text-3xl {
    font-size: var(--font-size-3xl);
  }

  .md\:text-4xl {
    font-size: var(--font-size-4xl);
  }

  .md\:p-6 {
    padding: var(--space-6);
  }

  .md\:p-8 {
    padding: var(--space-8);
  }

  .md\:p-12 {
    padding: var(--space-12);
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Large devices (Desktops: 1024px+) */
@media (min-width: 1024px) {
  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:flex-col {
    flex-direction: column;
  }

  .lg\:text-lg {
    font-size: var(--font-size-lg);
  }

  .lg\:text-xl {
    font-size: var(--font-size-xl);
  }

  .lg\:text-2xl {
    font-size: var(--font-size-2xl);
  }

  .lg\:text-3xl {
    font-size: var(--font-size-3xl);
  }

  .lg\:text-4xl {
    font-size: var(--font-size-4xl);
  }

  .lg\:text-5xl {
    font-size: var(--font-size-5xl);
  }

  .lg\:p-8 {
    padding: var(--space-8);
  }

  .lg\:p-12 {
    padding: var(--space-12);
  }

  .lg\:p-16 {
    padding: var(--space-16);
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Extra large devices (Large Desktops: 1280px+) */
@media (min-width: 1280px) {
  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .xl\:grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .xl\:text-5xl {
    font-size: var(--font-size-5xl);
  }

  .xl\:text-6xl {
    font-size: var(--font-size-6xl);
  }
}

/* ===================================
   FLEXIBLE GRID SYSTEM
   =================================== */

.grid-system {
  display: grid;
  gap: var(--space-4);
  width: 100%;
}

/* Mobile Grid (1 column) */
.grid-1 {
  grid-template-columns: 1fr;
}

/* Tablet Grid (2 columns) */
.grid-2 {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop Grid (3 columns) */
.grid-3 {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Four column grid */
.grid-4 {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ===================================
   CONTAINER AND SECTION PATTERNS
   =================================== */

/* Container System */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

@media (min-width: 640px) {
  .container {
    max-width: var(--container-sm);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

@media (min-width: 768px) {
  .container {
    max-width: var(--container-md);
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: var(--container-lg);
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 900px;
    /* Narrower content on desktop */
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1000px;
    /* Still narrower than full width */
    padding-left: var(--space-12);
    padding-right: var(--space-12);
  }
}

@media (min-width: 1440px) {
  .container {
    max-width: 1100px;
    /* Maximum content width for very large screens */
    padding-left: var(--space-16);
    padding-right: var(--space-16);
  }
}

/* Section Layout Patterns */
.section {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

@media (min-width: 768px) {
  .section {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }
}

@media (min-width: 1024px) {
  .section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }
}

/* Hero Image Section Pattern */
.hero-image-section {
  height: 60vh;
  min-height: 400px;
}

/* Hero Banner Section Pattern */
.hero-banner-section {
  padding: var(--space-6) 0;
}

@media (min-width: 768px) {
  .hero-image-section {
    height: 70vh;
    min-height: 500px;
  }

  .hero-banner-section {
    padding: var(--space-8) 0;
  }
}

@media (min-width: 1024px) {
  .hero-image-section {
    height: 65vh;
    /* Reduced from 75vh to make background logo smaller */
    min-height: 550px;
    /* Reduced from 600px */
    background-size: 75% auto;
    /* Make background logo smaller - 75% instead of cover */
    background-position: center center;
    background-repeat: no-repeat;
  }
}

@media (min-width: 1280px) {
  .hero-image-section {
    height: 60vh;
    /* Even smaller on very large screens */
    min-height: 500px;
    background-size: 70% auto;
    /* Even smaller background logo on large screens */
  }
}

/* Two Column Layout Pattern */
.two-column {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 768px) {
  .two-column {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

@media (min-width: 1024px) {
  .two-column {
    gap: var(--space-12);
  }
}

/* Three Column Layout Pattern */
.three-column {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .three-column {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .three-column {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }
}

/* Card Grid Pattern */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .card-grid {
    gap: var(--space-8);
  }
}

/* ===================================
   DESKTOP CONTENT WIDTH OPTIMIZATION
   =================================== */

/* Desktop-specific content width improvements - MUCH SLIMMER CARDS */
@media (min-width: 1024px) {

  /* Event information section with much slimmer content and more edge padding */
  .event-info-section .container,
  .venue-details-section .container,
  .contact-section .container {
    max-width: 600px;
    /* Much slimmer - reduced from 900px */
    margin: 0 auto;
    padding-left: 6rem;
    /* Much more edge padding */
    padding-right: 6rem;
  }

  /* Event details grid with much slimmer width */
  .event-details-grid {
    max-width: 550px;
    /* Much slimmer - reduced from 800px */
    margin: 0 auto;
    gap: 2rem;
  }

  /* Venue FAQ container with much slimmer width */
  .venue-faq-container {
    max-width: 580px;
    /* Much slimmer - reduced from 850px */
    margin: 0 auto;
  }

  /* Contact form with much slimmer centering */
  .contact-container {
    max-width: 450px;
    /* Much slimmer - reduced from 600px */
    margin: 0 auto;
  }
}

@media (min-width: 1280px) {

  /* Much slimmer content on very large screens with generous edge padding */
  .event-info-section .container,
  .venue-details-section .container,
  .contact-section .container {
    max-width: 700px;
    /* Much slimmer - reduced from 1000px */
    padding-left: 8rem;
    /* Much more edge padding */
    padding-right: 8rem;
  }

  .event-details-grid {
    max-width: 650px;
    /* Much slimmer - reduced from 900px */
    gap: 3rem;
  }

  .venue-faq-container {
    max-width: 680px;
    /* Much slimmer - reduced from 950px */
  }

  .contact-container {
    max-width: 500px;
    /* Much slimmer - reduced from 700px */
  }
}

/* ===================================
   FLEXBOX LAYOUT PATTERNS
   =================================== */

/* Centered Content Pattern */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Space Between Pattern */
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Column Stack Pattern */
.flex-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .flex-stack {
    gap: var(--space-6);
  }
}

/* Responsive Flex Direction */
.flex-responsive {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .flex-responsive {
    flex-direction: row;
    gap: var(--space-6);
  }
}

/* ===================================
   RESPONSIVE UTILITIES
   =================================== */

/* Hide/Show on different screen sizes */
.mobile-only {
  display: block;
}

@media (min-width: 768px) {
  .mobile-only {
    display: none !important;
  }

  /* Ensure mobile logo section is completely hidden on desktop */
  .mobile-logo-section {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
}

.tablet-up {
  display: none;
}

@media (min-width: 768px) {
  .tablet-up {
    display: block;
  }

  /* Restore hero-image-section on desktop with more height */
  .hero-image-section {
    display: block !important;
    height: 75vh !important;
    min-height: 600px !important;
  }

  /* Optimize hero banner section spacing for smaller background logo */
  .hero-banner-section {
    padding: 3rem 0 !important;
    /* Reduced from 4rem to work better with smaller logo */
  }

  /* Hero banner container with better centering */
  .hero-banner-container {
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
  }
}

.desktop-only {
  display: none;
}

@media (min-width: 1024px) {
  .desktop-only {
    display: block;
  }
}

/* Responsive Text Alignment */
.text-center-mobile {
  text-align: center;
}

@media (min-width: 768px) {
  .text-center-mobile {
    text-align: left;
  }
}

/* Responsive Spacing */
.responsive-padding {
  padding: var(--space-3);
}

@media (min-width: 768px) {
  .responsive-padding {
    padding: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .responsive-padding {
    padding: var(--space-8);
  }
}

.responsive-margin {
  margin: var(--space-2);
}

@media (min-width: 768px) {
  .responsive-margin {
    margin: var(--space-4);
  }
}

@media (min-width: 1024px) {
  .responsive-margin {
    margin: var(--space-6);
  }
}

/ *===================================EVENT INFORMATION RESPONSIVE LAYOUT===================================*/
/* Mobile-first event information layout */
.event-info-section {
  padding: var(--space-8) 0;
}

@media (min-width: 640px) {
  .event-info-section {
    padding: var(--space-10) 0;
  }
}

@media (min-width: 768px) {
  .event-info-section {
    padding: var(--space-12) 0;
  }
}

@media (min-width: 1024px) {
  .event-info-section {
    padding: var(--space-16) 0;
  }
}

/* Event details grid responsive behavior */
.event-details-grid {
  /* Mobile: Stack vertically */
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding: 0 var(--space-3);
}

@media (min-width: 640px) {
  .event-details-grid {
    gap: var(--space-6);
    padding: 0 var(--space-4);
  }
}

@media (min-width: 768px) {
  .event-details-grid {
    /* Tablet: Two columns side by side */
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    padding: 0 var(--space-6);
  }
}

@media (min-width: 1024px) {
  .event-details-grid {
    gap: var(--space-8);
    padding: 0;
  }
}

@media (min-width: 1280px) {
  .event-details-grid {
    gap: var(--space-12);
  }
}

/* Card responsive padding and sizing */
.event-details-card,
.event-description-card {
  padding: var(--space-4);
}

@media (min-width: 640px) {

  .event-details-card,
  .event-description-card {
    padding: var(--space-5);
  }
}

@media (min-width: 768px) {

  .event-details-card,
  .event-description-card {
    padding: var(--space-6);
  }
}

@media (min-width: 1024px) {

  .event-details-card,
  .event-description-card {
    padding: var(--space-8);
  }
}

/* Detail items responsive layout */
.detail-item {
  /* Mobile: Stack label and value vertically */
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

@media (min-width: 640px) {
  .detail-item {
    gap: var(--space-2);
  }
}

@media (min-width: 768px) {
  .detail-item {
    /* Tablet+: Horizontal layout */
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
  }
}

/* Responsive typography for event details */
.detail-label {
  font-size: var(--font-size-xs);
}

@media (min-width: 640px) {
  .detail-label {
    font-size: var(--font-size-sm);
  }
}

@media (min-width: 768px) {
  .detail-label {
    font-size: var(--font-size-base);
    min-width: 80px;
  }
}

@media (min-width: 1024px) {
  .detail-label {
    min-width: 100px;
  }
}

.detail-value {
  font-size: var(--font-size-sm);
}

@media (min-width: 640px) {
  .detail-value {
    font-size: var(--font-size-base);
  }
}

@media (min-width: 768px) {
  .detail-value {
    font-size: var(--font-size-lg);
  }
}

/* Card content responsive typography */
.card-content p {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

@media (min-width: 640px) {
  .card-content p {
    font-size: var(--font-size-base);
  }
}

@media (min-width: 768px) {
  .card-content p {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-loose);
  }
}

/* ===================================
   MOBILE DICE STYLING
   =================================== */

/* Mobile dice decorations with proper PNG files */
@media (max-width: 767px) {

  /* Mobile dice - larger than before for better visibility */
  .dice-decoration {
    width: 36px !important;
    /* Larger than original for better visibility */
    height: 36px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }

  /* Light mode dice - use purple dice on mobile */
  .dice-decoration.dice-purple,
  .dice-decoration.dice-alt {
    background-image: url('../assets/Dice/Dice-purple.png') !important;
  }

  /* Dark mode dice - use white dice on mobile */
  body.dark-mode .dice-decoration.dice-purple,
  body.dark-mode .dice-decoration.dice-alt {
    background-image: url('../assets/Dice/Dice-white.png') !important;
  }
}

/* ===================================
   DESKTOP DICE STYLING
   =================================== */

/* Desktop dice decorations - progressive sizing */
@media (min-width: 768px) {
  .dice-decoration {
    width: 48px !important;
    /* Larger base size for desktop */
    height: 48px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }
}

@media (min-width: 1024px) {
  .dice-decoration {
    width: 56px !important;
    /* Double size for large screens */
    height: 56px !important;
  }
}

/* Section heading responsive sizing */
.section-heading {
  font-size: var(--font-size-mobile-xl);
  margin-bottom: var(--space-6);
}

@media (min-width: 640px) {
  .section-heading {
    font-size: var(--font-size-mobile-2xl);
    margin-bottom: var(--space-8);
  }
}

@media (min-width: 768px) {
  .section-heading {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-10);
  }
}

@media (min-width: 1024px) {
  .section-heading {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--space-12);
  }
}

@media (min-width: 1280px) {
  .section-heading {
    font-size: var(--font-size-4xl);
  }
}

/* Card header responsive layout */
.card-header {
  margin-bottom: var(--space-3);
}

@media (min-width: 640px) {
  .card-header {
    margin-bottom: var(--space-4);
  }
}

@media (min-width: 768px) {
  .card-header {
    margin-bottom: var(--space-5);
  }
}

@media (min-width: 1024px) {
  .card-header {
    margin-bottom: var(--space-6);
  }
}

/* Card footer responsive spacing */
.card-footer {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
}

@media (min-width: 640px) {
  .card-footer {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
  }
}

@media (min-width: 768px) {
  .card-footer {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
  }
}

@media (min-width: 1024px) {
  .card-footer {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
  }
}

/* Ensure proper visual hierarchy on all screen sizes */
@media (max-width: 767px) {

  /* Mobile: Ensure cards have enough breathing room */
  .event-details-card,
  .event-description-card {
    margin-bottom: var(--space-2);
  }

  /* Mobile: Adjust card header alignment */
  .card-header {
    flex-direction: column;
    gap: var(--space-2);
    text-align: center;
  }

  .card-heading {
    order: 1;
  }

  .dice-decoration:first-child {
    order: 0;
    align-self: center;
  }

  .dice-decoration:last-child {
    order: 2;
    align-self: center;
  }
}

/* Tablet and desktop: Maintain horizontal layout */
@media (min-width: 768px) {
  .card-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .card-heading {
    flex: 1;
    text-align: center;
  }

  /* Restore hero-image-section on desktop with repositioned logo */
  .hero-image-section {
    display: block !important;
    height: 600px !important;
    /* Fixed height to match banner aspect ratio */
    min-height: 600px !important;
    /* Same as height for consistency */
    background-size: cover !important;
    /* Cover to fill space without distortion */
    background-position: center top !important;
    /* Fixed position - top aligned */
    background-repeat: no-repeat !important;
    background-color: var(--color-deep-purple) !important;
    /* Back to purple */
  }

  /* Set specific height for hero banner section - make it shorter to show more background */
  .hero-banner-section {
    height: 280px !important;
    /* Reduced from 400px to show more background logo */
    max-height: 280px !important;
    /* Ensure it doesn't exceed 280px */
    padding: 0 !important;
    /* Remove padding, use flexbox for centering */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, var(--color-deep-purple) 0%, var(--color-mystic-purple) 100%) !important;
  }

  /* Hero banner container with flexbox centering */
  .hero-banner-container {
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 1rem 2rem !important;
    /* Minimal padding for content */
    text-align: center !important;
  }

  /* Restore original purple-based hero image overlay */
  .hero-image-overlay {
    background: linear-gradient(135deg,
        rgba(26, 13, 46, 0.1) 0%,
        rgba(107, 70, 193, 0.05) 30%,
        rgba(244, 208, 63, 0.02) 60%,
        rgba(26, 13, 46, 0.15) 100%) !important;
  }

  /* Make home card content more compact */
  .event-title {
    margin-bottom: 1rem !important;
    /* Reduced spacing */
    line-height: 1.1 !important;
    /* Tighter line height */
  }

  .hero-subtitle {
    margin-bottom: 0.75rem !important;
    /* Reduced spacing */
    line-height: 1.2 !important;
    /* Tighter line height */
  }

  .hero-date {
    margin-bottom: 1.5rem !important;
    /* Reduced spacing */
    line-height: 1.2 !important;
    /* Tighter line height */
  }

  .cta-button {
    margin-bottom: 1rem !important;
    /* Reduced bottom margin */
  }

  /* Desktop dice PNG images and styling */
  /* Light mode dice - use purple dice on desktop */
  .dice-decoration.dice-purple,
  .dice-decoration.dice-alt {
    background-image: url('../assets/Dice/Dice-purple.png') !important;
  }

  /* Dark mode dice - use white dice on desktop */
  body.dark-mode .dice-decoration.dice-purple,
  body.dark-mode .dice-decoration.dice-alt {
    background-image: url('../assets/Dice/Dice-white.png') !important;
  }

  /* Remove bottom dice on desktop cards for cleaner appearance */
  .card-footer .dice-decoration {
    display: none !important;
  }
}

@media (min-width: 1280px) {
  .hero-image-section {
    height: 75vh !important;
    /* Increased height for better spacing */
    min-height: 450px !important;
    /* Increased min-height */
    background-size: 70% auto !important;
    /* Keep smaller background logo */
    background-position: center calc(50% - 50px) !important;
    /* Keep logo moved up 50px behind header */
    background-color: var(--color-deep-purple) !important;
    /* Back to purple */
  }

  /* Keep 400px height on large screens too */
  .hero-banner-section {
    height: 400px !important;
    /* Same fixed height on large screens */
    max-height: 400px !important;
  }

  .hero-banner-container {
    padding: 1rem 2rem !important;
    /* Keep minimal padding */
  }
}