/* 
╔══════════════════════════════════════════════════════════════════════════════╗
║                                                                              ║
║                    EVENLIO RESPONSIVE CORE v1.0                              ║
║                                                                              ║
║  MOBILE-FIRST RESPONSIVITY FOR ALL EVENLIO SECTIONS & COMPONENTS             ║
║                                                                              ║
╚══════════════════════════════════════════════════════════════════════════════╝
*/

/* 1. FLUID TYPOGRAPHY */
:root {
    --fluid-h1: clamp(2rem, 8vw, 4rem);
    --fluid-h2: clamp(1.75rem, 6vw, 3rem);
    --fluid-h3: clamp(1.5rem, 4vw, 2.25rem);
    --fluid-p: clamp(0.875rem, 2vw, 1rem);
}

.hero-title, h1 { font-size: var(--fluid-h1) !important; line-height: 1.1 !important; word-wrap: break-word; overflow-wrap: break-word; }
.section-heading__title, h2 { font-size: var(--fluid-h2) !important; }
h3 { font-size: var(--fluid-h3) !important; }

/* 2. LAYOUT BREAKTHROUGHS */

/* Prevent horizontal overflow globally */
html, body {
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
}

/* Universal Container Padding */
.container {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* 3. COMPONENT FIXES (FROM FORENSIC INVESTIGATION) */

/* Hero/Banner Stacking */
.hero-content-wrapper {
    display: flex !important;
    flex-direction: column !important;
    text-align: center !important;
    gap: 30px !important;
}

@media (min-width: 992px) {
    .hero-content-wrapper {
        flex-direction: row !important;
        text-align: left !important;
    }
}

/* Circle Countdown/Counter Fixes */
.counter-item, .countdown-item, .stat-item {
    min-width: unset !important;
    width: auto !important;
}

/* Words breaking in circles fix */
.stat-number, .counter-number, .unit-number {
    font-size: clamp(1.1rem, 4vw, 2.5rem) !important;
}

.stat-label, .counter-label, .counter-title, .unit-label {
    font-size: 0.65rem !important;
    white-space: normal !important;
    word-break: normal !important;
    line-height: 1.2 !important;
}

/* Fix for circle wrappers that might be too small */
[class*="circle"], [class*="ring"] {
    max-width: 100%;
}

/* 4. SECTION FIXES */

/* Responsive Spacing */
.py-120, .pt-120, .pb-120 { padding-top: clamp(40px, 10vw, 120px) !important; padding-bottom: clamp(40px, 10vw, 120px) !important; }
.py-100, .pt-100, .pb-100 { padding-top: clamp(30px, 8vw, 100px) !important; padding-bottom: clamp(30px, 8vw, 100px) !important; }
.py-70, .pt-70, .pb-70 { padding-top: clamp(20px, 6vw, 70px) !important; padding-bottom: clamp(20px, 6vw, 70px) !important; }

/* 5. CARD GRID RESPONSIVITY */

/* Universal Grid Class */
.responsive-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
}

@media (min-width: 576px) { .responsive-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 992px) { .responsive-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (min-width: 1200px) { .responsive-grid { grid-template-columns: repeat(4, 1fr) !important; } }

/* 6. NAVBAR MOBILE FIX */
.ultra-nav-menu {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
}

@media (max-width: 991px) {
    .ultra-nav-link {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
    .nav-text {
        max-width: 80px !important;
    }
}

/* 7. IMAGE/VIDEO OVERFLOW */
iframe, video, img {
    max-width: 100% !important;
}

/* 8. BUTTON TOUCH-FRIENDLY */
.btn, .btn-modern, a[class*="btn"], .tactile-btn, .tactile-btn-red {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 9. SECTION-SPECIFIC RESPONSIVE FIXES */

/* Hero Banner Section */
@media (max-width: 991px) {
    .modern-hero-banner {
        padding: 100px 0 60px !important;
        min-height: auto !important;
    }

    .hero-content-wrapper {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 40px !important;
    }

    .hero-title {
        font-size: 48px !important;
    }

    .hero-description {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero-cta-group {
        justify-content: center !important;
    }

    .hero-stats {
        justify-content: center !important;
    }

    .hero-visual-content {
        display: none !important;
    }

    .visual-card-stack {
        max-width: 400px !important;
    }

    .media-wrapper {
        height: 400px !important;
    }
}

@media (max-width: 767px) {
    .modern-hero-banner {
        padding: 80px 0 40px !important;
    }

    .hero-title {
        font-size: 36px !important;
    }

    .hero-description {
        font-size: 16px !important;
    }

    .hero-cta-group {
        flex-direction: column !important;
        width: 100% !important;
    }

    .btn-modern {
        width: 100% !important;
        justify-content: center !important;
    }

    .hero-stats {
        flex-wrap: wrap !important;
        gap: 24px !important;
    }

    .stat-item {
        text-align: center !important;
    }

    .stat-number {
        font-size: 28px !important;
    }

    .stat-divider {
        display: none !important;
    }

    .visual-card-stack {
        max-width: 100% !important;
    }

    .media-wrapper {
        height: 350px !important;
    }

    .icon-circle {
        width: 100px !important;
        height: 100px !important;
    }

    .icon-circle i {
        font-size: 50px !important;
    }

    .placeholder-title {
        font-size: 20px !important;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 28px !important;
    }

    .hero-badge {
        font-size: 9px !important;
        padding: 6px 16px !important;
    }

    .btn-modern {
        padding: 14px 24px !important;
        font-size: 14px !important;
    }

    .stat-number {
        font-size: 24px !important;
    }

    .stat-label {
        font-size: 10px !important;
    }
}

/* Category Section */
@media (max-width: 991px) {
    .tactile-category-section {
        padding: 80px 0 !important;
    }
    
    .protocol-header-centered .headline {
        font-size: 36px !important;
    }
    
    .category-grid {
        flex-direction: column !important;
        height: auto !important;
        gap: 10px !important;
    }
    
    .category-node {
        height: 100px !important;
    }
    
    .category-node.node-expanded {
        height: 350px !important;
    }
    
    .node-name {
        transform: none !important;
        bottom: 20px !important;
    }
    
    .exp-name {
        font-size: 28px !important;
    }
}

@media (max-width: 767px) {
    .tactile-category-section {
        padding: 60px 0 !important;
    }
    
    .protocol-header-centered .headline {
        font-size: 28px !important;
    }
    
    .category-node.node-expanded {
        height: 300px !important;
    }
    
    .exp-name {
        font-size: 24px !important;
    }
    
    .cat-icon {
        font-size: 48px !important;
    }
    
    .exp-btn {
        padding: 12px 28px !important;
        font-size: 10px !important;
    }
}

@media (max-width: 480px) {
    .protocol-header-centered .headline {
        font-size: 24px !important;
    }
    
    .category-node {
        height: 80px !important;
    }
    
    .category-node.node-expanded {
        height: 280px !important;
    }
    
    .exp-name {
        font-size: 20px !important;
    }
    
    .exp-stats .val {
        font-size: 20px !important;
    }
}

/* 9. SECTION-SPECIFIC RESPONSIVE FIXES */

/* Category Section */
@media (max-width: 991px) {
    .tactile-category-section {
        padding: 80px 0 !important;
    }
    
    .category-grid {
        flex-direction: column !important;
        height: auto !important;
        gap: 10px !important;
    }
    
    .category-node {
        height: 100px !important;
    }
    
    .category-node.node-expanded {
        height: 350px !important;
    }
    
    .exp-name {
        font-size: 28px !important;
    }
}

@media (max-width: 767px) {
    .tactile-category-section .headline {
        font-size: 32px !important;
    }
    
    .category-node.node-expanded {
        height: 300px !important;
    }
}

/* Locations Section - Complete Responsive */
@media (max-width: 991px) {
    .tactile-location-section {
        padding: 80px 0 !important;
        min-height: auto !important;
    }
    
    .tactile-location-section .protocol-header-centered {
        margin-bottom: 60px !important;
    }
    
    .tactile-location-section .headline {
        font-size: 42px !important;
    }
    
    .tactile-location-section .tag {
        font-size: 10px !important;
        padding: 6px 18px !important;
    }
    
    .location-node-card {
        height: 360px !important;
    }
    
    .location-node-card .node-content {
        padding: 28px !important;
    }
    
    .location-node-card .node-name {
        font-size: 24px !important;
    }
    
    .location-node-card .node-meta .val {
        font-size: 18px !important;
    }
    
    .location-node-card .view-map-pulse {
        width: 55px !important;
        height: 55px !important;
    }
    
    .location-node-card .view-map-pulse i {
        font-size: 26px !important;
    }
}

@media (max-width: 767px) {
    .tactile-location-section {
        padding: 60px 0 !important;
    }
    
    .tactile-location-section .protocol-header-centered {
        margin-bottom: 50px !important;
    }
    
    .tactile-location-section .headline {
        font-size: 32px !important;
    }
    
    .tactile-location-section .tag {
        font-size: 9px !important;
        padding: 6px 16px !important;
        letter-spacing: 0.3em !important;
    }
    
    .tactile-location-section .header-divider .line {
        width: 40px !important;
    }
    
    .tactile-location-section .header-divider .diamond {
        width: 6px !important;
        height: 6px !important;
    }
    
    .location-node-card {
        height: 340px !important;
    }
    
    .location-node-card .node-content {
        padding: 24px !important;
    }
    
    .location-node-card .node-name {
        font-size: 22px !important;
        margin-bottom: 14px !important;
    }
    
    .location-node-card .node-meta .val {
        font-size: 16px !important;
    }
    
    .location-node-card .node-meta .lbl {
        font-size: 10px !important;
    }
    
    .location-node-card .view-map-pulse {
        width: 50px !important;
        height: 50px !important;
    }
    
    .location-node-card .view-map-pulse i {
        font-size: 24px !important;
    }
    
    .location-node-card .border-node {
        width: 18px !important;
        height: 18px !important;
    }
    
    .location-node-card:hover .border-node {
        width: 25px !important;
        height: 25px !important;
    }
}

@media (max-width: 480px) {
    .tactile-location-section {
        padding: 50px 0 !important;
    }
    
    .tactile-location-section .protocol-header-centered {
        margin-bottom: 40px !important;
    }
    
    .tactile-location-section .headline {
        font-size: 28px !important;
    }
    
    .tactile-location-section .tag {
        font-size: 8px !important;
        padding: 5px 14px !important;
        letter-spacing: 0.25em !important;
    }
    
    .tactile-location-section .header-divider {
        gap: 12px !important;
    }
    
    .tactile-location-section .header-divider .line {
        width: 30px !important;
    }
    
    .tactile-location-section .header-divider .diamond {
        width: 5px !important;
        height: 5px !important;
    }
    
    .location-node-card {
        height: 320px !important;
        border-radius: 10px !important;
    }
    
    .location-node-card .node-content {
        padding: 20px !important;
    }
    
    .location-node-card .content-header {
        margin-bottom: 10px !important;
    }
    
    .location-node-card .node-id {
        font-size: 10px !important;
    }
    
    .location-node-card .node-pulse {
        width: 6px !important;
        height: 6px !important;
    }
    
    .location-node-card .node-name {
        font-size: 20px !important;
        margin-bottom: 12px !important;
    }
    
    .location-node-card .node-meta {
        gap: 8px !important;
    }
    
    .location-node-card .node-meta .val {
        font-size: 16px !important;
    }
    
    .location-node-card .node-meta .lbl {
        font-size: 9px !important;
        letter-spacing: 0.12em !important;
    }
    
    .location-node-card .view-map-pulse {
        width: 45px !important;
        height: 45px !important;
        border-width: 1.5px !important;
    }
    
    .location-node-card .view-map-pulse i {
        font-size: 22px !important;
    }
    
    .location-node-card .border-node {
        width: 15px !important;
        height: 15px !important;
    }
    
    .location-node-card:hover .border-node {
        width: 22px !important;
        height: 22px !important;
    }
    
    .location-node-card .node-scan-line {
        height: 1.5px !important;
    }
}

@media (max-width: 360px) {
    .tactile-location-section {
        padding: 40px 0 !important;
    }
    
    .tactile-location-section .headline {
        font-size: 24px !important;
    }
    
    .location-node-card {
        height: 300px !important;
    }
    
    .location-node-card .node-content {
        padding: 18px !important;
    }
    
    .location-node-card .node-name {
        font-size: 18px !important;
    }
    
    .location-node-card .node-meta .val {
        font-size: 14px !important;
    }
    
    .location-node-card .node-meta .lbl {
        font-size: 8px !important;
    }
}

/* Countdown Section */
@media (max-width: 991px) {
    .modern-countdown-section {
        padding: 80px 0 !important;
        min-height: auto !important;
    }
    
    .countdown-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
    
    .section-title {
        font-size: 36px !important;
    }
    
    .countdown-heading {
        font-size: 28px !important;
    }
    
    /* Vintage Clock - Tablet */
    .vintage-clock-watch {
        width: 240px !important;
        height: 240px !important;
        margin: 0 auto 30px !important;
        border-width: 8px !important;
    }
    
    .watch-face {
        width: calc(100% - 20px) !important;
        height: calc(100% - 20px) !important;
    }
    
    .watch-days-display {
        top: 35px !important;
        padding: 12px 24px !important;
        min-width: 70px !important;
    }
    
    .days-number {
        font-size: 32px !important;
    }
    
    .days-label {
        font-size: 10px !important;
    }
    
    .watch-center-dot {
        width: 16px !important;
        height: 16px !important;
    }
    
    .watch-hand-hours {
        width: 6px !important;
        height: 65px !important;
        margin-left: -3px !important;
    }
    
    .watch-hand-mins {
        width: 4px !important;
        height: 85px !important;
        margin-left: -2px !important;
    }
    
    .watch-hand-secs {
        width: 2px !important;
        height: 95px !important;
        margin-left: -1px !important;
    }
    
    /* Timer Circles - Tablet */
    .unit-circle {
        width: 110px !important;
        height: 110px !important;
        border-width: 2px !important;
    }
    
    .unit-number {
        font-size: 36px !important;
    }
    
    .unit-label {
        font-size: 11px !important;
        margin-top: 10px !important;
    }
    
    .event-meta-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

@media (max-width: 767px) {
    .modern-countdown-section {
        padding: 60px 0 !important;
    }
    
    .section-title {
        font-size: 28px !important;
    }
    
    .countdown-heading {
        font-size: 24px !important;
    }
    
    .countdown-text {
        font-size: 16px !important;
    }
    
    /* Vintage Clock - Mobile */
    .vintage-clock-watch {
        width: 200px !important;
        height: 200px !important;
        margin: 0 auto 25px !important;
        border-width: 6px !important;
    }
    
    .watch-face {
        width: calc(100% - 16px) !important;
        height: calc(100% - 16px) !important;
        border-width: 1px !important;
    }
    
    .watch-face::before {
        width: 88% !important;
        height: 88% !important;
    }
    
    .watch-face::after {
        width: 76% !important;
        height: 76% !important;
    }
    
    .watch-days-display {
        top: 32px !important;
        padding: 10px 20px !important;
        min-width: 65px !important;
    }
    
    .days-number {
        font-size: 28px !important;
    }
    
    .days-label {
        font-size: 9px !important;
        letter-spacing: 0.2em !important;
    }
    
    .watch-center-dot {
        width: 14px !important;
        height: 14px !important;
        border-width: 1.5px !important;
    }
    
    .watch-hand-hours {
        width: 5px !important;
        height: 55px !important;
        margin-left: -2.5px !important;
    }
    
    .watch-hand-mins {
        width: 3.5px !important;
        height: 72px !important;
        margin-left: -1.75px !important;
    }
    
    .watch-hand-secs {
        width: 2px !important;
        height: 82px !important;
        margin-left: -1px !important;
    }
    
    /* Timer Circles - Mobile */
    .timer-container {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 18px !important;
    }
    
    .unit-circle {
        width: 95px !important;
        height: 95px !important;
        border-width: 2px !important;
    }
    
    .circle-bg,
    .circle-fill {
        stroke-width: 5 !important;
    }
    
    .unit-number {
        font-size: 32px !important;
    }
    
    .unit-label {
        font-size: 10px !important;
        margin-top: 10px !important;
        letter-spacing: 0.12em !important;
    }
    
    .countdown-actions {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .btn-countdown {
        width: 100% !important;
        max-width: 300px !important;
        justify-content: center !important;
    }
    
    .meta-item {
        padding: 16px !important;
    }
    
    .meta-value {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    .modern-countdown-section {
        padding: 40px 0 !important;
    }
    
    .section-badge {
        padding: 10px 20px !important;
        font-size: 11px !important;
    }
    
    .section-title {
        font-size: 24px !important;
    }
    
    .countdown-heading {
        font-size: 20px !important;
    }
    
    .countdown-text {
        font-size: 14px !important;
    }
    
    /* Vintage Clock - Small Mobile */
    .vintage-clock-watch {
        width: 160px !important;
        height: 160px !important;
        margin: 0 auto 20px !important;
        border-width: 5px !important;
    }
    
    .watch-face {
        width: calc(100% - 14px) !important;
        height: calc(100% - 14px) !important;
        border-width: 1px !important;
        box-shadow: 
            0 0 0 1px rgba(255, 255, 255, 0.08),
            0 15px 40px rgba(0, 0, 0, 0.6),
            inset 0 2px 10px rgba(255, 255, 255, 0.06),
            inset 0 -2px 10px rgba(0, 0, 0, 0.4),
            0 0 30px rgba(255, 68, 68, 0.12) !important;
    }
    
    .watch-face::before {
        width: 86% !important;
        height: 86% !important;
        border-width: 0.5px !important;
    }
    
    .watch-face::after {
        width: 72% !important;
        height: 72% !important;
        border-width: 0.5px !important;
    }
    
    .watch-days-display {
        top: 26px !important;
        padding: 8px 16px !important;
        border-radius: 8px !important;
        min-width: 60px !important;
    }
    
    .days-number {
        font-size: 24px !important;
        text-shadow: 0 0 20px rgba(255, 68, 68, 1), 0 2px 6px rgba(0, 0, 0, 0.8) !important;
    }
    
    .days-label {
        font-size: 8px !important;
        letter-spacing: 0.18em !important;
        margin-top: 4px !important;
    }
    
    .watch-center-dot {
        width: 12px !important;
        height: 12px !important;
        border-width: 1.5px !important;
        box-shadow: 0 0 20px rgba(255, 68, 68, 1) !important;
    }
    
    .watch-hand-hours {
        width: 4px !important;
        height: 45px !important;
        margin-left: -2px !important;
        border-radius: 3px 3px 0 0 !important;
    }
    
    .watch-hand-mins {
        width: 3px !important;
        height: 58px !important;
        margin-left: -1.5px !important;
        border-radius: 2px 2px 0 0 !important;
    }
    
    .watch-hand-secs {
        width: 2px !important;
        height: 66px !important;
        margin-left: -1px !important;
        border-radius: 2px 2px 0 0 !important;
    }
    
    /* Timer Circles - Small Mobile */
    .timer-container {
        gap: 15px !important;
    }
    
    .unit-circle {
        width: 80px !important;
        height: 80px !important;
        border-width: 2px !important;
        box-shadow: 
            0 6px 18px rgba(0, 0, 0, 0.35),
            inset 0 1px 6px rgba(255, 255, 255, 0.08),
            inset 0 -1px 6px rgba(0, 0, 0, 0.25) !important;
    }
    
    .circle-bg,
    .circle-fill {
        stroke-width: 4 !important;
    }
    
    .unit-number {
        font-size: 28px !important;
        text-shadow: 
            0 0 16px rgba(255, 68, 68, 1), 
            0 0 32px rgba(255, 68, 68, 0.5),
            0 2px 6px rgba(0, 0, 0, 0.8) !important;
    }
    
    .unit-label {
        font-size: 9px !important;
        margin-top: 8px !important;
        letter-spacing: 0.1em !important;
    }
    
    .btn-countdown {
        padding: 14px 24px !important;
        font-size: 14px !important;
    }
    
    .meta-item {
        padding: 14px !important;
    }
    
    .meta-icon {
        width: 22px !important;
        height: 22px !important;
    }
    
    .meta-label {
        font-size: 10px !important;
    }
    
    .meta-value {
        font-size: 13px !important;
    }
}

@media (max-width: 360px) {
    /* Vintage Clock - Extra Small Mobile */
    .vintage-clock-watch {
        width: 140px !important;
        height: 140px !important;
        margin: 0 auto 18px !important;
        border-width: 4px !important;
    }
    
    .watch-face {
        width: calc(100% - 12px) !important;
        height: calc(100% - 12px) !important;
        border-width: 1px !important;
    }
    
    .watch-days-display {
        top: 22px !important;
        padding: 6px 14px !important;
        min-width: 55px !important;
    }
    
    .days-number {
        font-size: 20px !important;
    }
    
    .days-label {
        font-size: 7px !important;
        letter-spacing: 0.15em !important;
    }
    
    .watch-center-dot {
        width: 10px !important;
        height: 10px !important;
        border-width: 1px !important;
    }
    
    .watch-hand-hours {
        width: 3.5px !important;
        height: 38px !important;
        margin-left: -1.75px !important;
    }
    
    .watch-hand-mins {
        width: 2.5px !important;
        height: 48px !important;
        margin-left: -1.25px !important;
    }
    
    .watch-hand-secs {
        width: 1.5px !important;
        height: 55px !important;
        margin-left: -0.75px !important;
    }
    
    /* Timer Circles - Extra Small Mobile */
    .timer-container {
        gap: 12px !important;
    }
    
    .unit-circle {
        width: 70px !important;
        height: 70px !important;
    }
    
    .unit-number {
        font-size: 24px !important;
    }
    
    .unit-label {
        font-size: 8px !important;
        margin-top: 6px !important;
    }
}
    
    .days-label {
        font-size: 9px !important;
    }
    
    .unit-circle {
        width: 75px !important;
        height: 75px !important;
    }
    
    .unit-number {
        font-size: 24px !important;
    }
    
    .unit-label {
        font-size: 9px !important;
    }
    
    .timer-container {
        gap: 15px !important;
    }
    
    .btn-countdown {
        padding: 14px 24px !important;
        font-size: 14px !important;
    }
    
    .meta-item {
        padding: 14px !important;
    }
    
    .meta-icon {
        width: 22px !important;
        height: 22px !important;
    }
    
    .meta-label {
        font-size: 10px !important;
    }
    
    .meta-value {
        font-size: 13px !important;
    }
}

/* Featured Events Section */
@media (max-width: 991px) {
    .tactile-featured-events-section {
        padding: 80px 0 !important;
    }
    
    .tactile-featured-events-section .headline {
        font-size: 36px !important;
    }
    
    .selector-track {
        flex-wrap: wrap;
        gap: 8px !important;
    }
}

@media (max-width: 767px) {
    .tactile-featured-events-section {
        padding: 60px 0 !important;
    }
    
    .tactile-featured-events-section .headline {
        font-size: 28px !important;
    }
    
    .selector-matrix {
        flex-direction: column;
    }
}

/* Starting Soon Section */
@media (max-width: 991px) {
    .tactile-starting-soon {
        padding: 80px 0 !important;
    }
    
    .tactile-starting-soon .headline {
        font-size: 36px !important;
    }
}

@media (max-width: 767px) {
    .tactile-starting-soon {
        padding: 60px 0 !important;
    }
    
    .tactile-starting-soon .headline {
        font-size: 28px !important;
    }
}

/* Stats/Counter Section */
@media (max-width: 991px) {
    .tactile-counter-section {
        padding: 80px 0 !important;
    }
    
    .tactile-counter-section .headline {
        font-size: 36px !important;
    }
}

@media (max-width: 767px) {
    .tactile-counter-section {
        padding: 60px 0 !important;
    }
    
    .tactile-counter-section .headline {
        font-size: 28px !important;
    }
}

/* Testimonials Section */
@media (max-width: 991px) {
    .tactile-testimonials-section {
        padding: 80px 0 !important;
    }
    
    .tactile-testimonials-section .headline {
        font-size: 36px !important;
    }
}

@media (max-width: 767px) {
    .tactile-testimonials-section {
        padding: 60px 0 !important;
    }
    
    .tactile-testimonials-section .headline {
        font-size: 28px !important;
    }
}

/* Organizers Section */
@media (max-width: 991px) {
    .tactile-featured-organizers-section {
        padding: 80px 0 !important;
    }
    
    .tactile-featured-organizers-section .headline {
        font-size: 36px !important;
    }
}

@media (max-width: 767px) {
    .tactile-featured-organizers-section {
        padding: 60px 0 !important;
    }
    
    .tactile-featured-organizers-section .headline {
        font-size: 28px !important;
    }
}

/* How It Works Section */
@media (max-width: 991px) {
    .tactile-how-it-works {
        padding: 80px 0 !important;
    }
    
    .tactile-how-it-works .headline {
        font-size: 36px !important;
    }
}

@media (max-width: 767px) {
    .tactile-how-it-works {
        padding: 60px 0 !important;
    }
    
    .tactile-how-it-works .headline {
        font-size: 28px !important;
    }
    
    .sync-line {
        left: 20px !important;
    }
    
    .sync-marker {
        left: 20px !important;
    }
    
    .sync-card {
        width: calc(100% - 60px) !important;
        margin-left: 60px !important;
    }
}

/* About Section */
@media (max-width: 991px) {
    .tactile-about-section {
        padding: 80px 0 !important;
    }
    
    .protocol-headline {
        font-size: 36px !important;
    }
    
    .node-stat {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        margin: 15px 0 !important;
    }
}

@media (max-width: 767px) {
    .tactile-about-section {
        padding: 60px 0 !important;
    }
    
    .protocol-headline {
        font-size: 28px !important;
    }
}

/* Live Games Hub */
@media (max-width: 991px) {
    .live-games-hub-tactile {
        padding: 80px 0 !important;
    }
    
    .hub-headline {
        font-size: 32px !important;
    }
}

@media (max-width: 767px) {
    .live-games-hub-tactile {
        padding: 60px 0 !important;
    }
    
    .hub-headline {
        font-size: 26px !important;
    }
}

/* Cookie Consent Mobile */
@media (max-width: 767px) {
    .tactile-cookie-protocol {
        bottom: 10px !important;
        left: 10px !important;
        right: 10px !important;
        max-width: none !important;
    }
    
    .protocol-actions {
        flex-direction: column !important;
    }
    
    .tactile-btn-accept,
    .tactile-btn-reject,
    .tactile-btn-manage {
        width: 100% !important;
    }
    
    .tactile-back-to-top.show {
        right: 10px !important;
        bottom: 140px !important;
    }
}

/* 10. REDUCED MOTION SUPPORT */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ============================================
   FOOTER RESPONSIVE STYLES
   ============================================ */

/* Desktop (default styles are in footer.blade.php) */

/* Tablet - 991px and below */
@media (max-width: 991px) {
    .footer-top {
        padding: 60px 0 30px !important;
    }
    
    .footer-widget {
        margin-bottom: 40px !important;
    }
    
    .footer-widget__title {
        font-size: 13px !important;
        margin-bottom: 20px !important;
    }
    
    .social-list {
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }
    
    .footer-menu__link {
        font-size: 13px !important;
    }
    
    .subscribe-form .btn {
        padding: 8px 16px !important;
        font-size: 11px !important;
    }
}

/* Mobile - 767px and below */
@media (max-width: 767px) {
    .footer-top {
        padding: 50px 0 20px !important;
    }
    
    .footer-bottom {
        padding: 15px 0 !important;
    }
    
    .footer-widget {
        margin-bottom: 35px !important;
        text-align: center !important;
    }
    
    .footer-widget__logo {
        display: flex !important;
        justify-content: center !important;
        margin-bottom: 20px !important;
    }
    
    .footer-logo {
        max-height: 40px !important;
    }
    
    .footer-widget__desc {
        font-size: 13px !important;
        text-align: center !important;
    }
    
    .footer-widget__title {
        font-size: 12px !important;
        margin-bottom: 18px !important;
        display: block !important;
        text-align: center !important;
        padding-left: 0 !important;
    }
    
    .footer-widget__title::before {
        display: none !important;
    }
    
    .social-title {
        font-size: 12px !important;
        text-align: center !important;
    }
    
    .social-list {
        justify-content: center !important;
        margin-bottom: 20px !important;
    }
    
    .social-list__link {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }
    
    .footer-menu {
        text-align: center !important;
    }
    
    .footer-menu__item {
        margin-bottom: 10px !important;
    }
    
    .footer-menu__link {
        font-size: 13px !important;
        justify-content: center !important;
    }
    
    .subscribe-form .input-group {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 8px !important;
    }
    
    .subscribe-form .form--control {
        height: 42px !important;
        padding: 8px 15px !important;
        font-size: 13px !important;
        text-align: center !important;
    }
    
    .subscribe-form .btn {
        width: 100% !important;
        padding: 10px 15px !important;
        font-size: 11px !important;
        justify-content: center !important;
    }
    
    .footer-copyright {
        font-size: 12px !important;
        flex-direction: column !important;
        text-align: center !important;
        gap: 5px !important;
    }
    
    .copyright-icon {
        font-size: 16px !important;
    }
    
    .footer-policy {
        justify-content: center !important;
        margin-top: 10px !important;
        flex-wrap: wrap !important;
        gap: 15px !important;
    }
    
    .footer-policy a {
        font-size: 12px !important;
    }
    
    .footer-policy a:not(:last-child)::after {
        display: none !important;
    }
    
    .footer-glow-node {
        width: 200px !important;
        height: 200px !important;
    }
}

/* Small Mobile - 576px and below */
@media (max-width: 576px) {
    .footer-top {
        padding: 40px 0 15px !important;
    }
    
    .footer-widget {
        margin-bottom: 30px !important;
    }
    
    .footer-widget__desc {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }
    
    .footer-menu__link {
        font-size: 12px !important;
    }
    
    .footer-menu__link i {
        font-size: 10px !important;
        margin-right: 8px !important;
    }
    
    .subscribe-form .form--control {
        height: 40px !important;
        font-size: 12px !important;
    }
    
    .subscribe-form .btn {
        padding: 8px 12px !important;
        font-size: 10px !important;
    }
    
    .footer-copyright {
        font-size: 11px !important;
    }
    
    .footer-policy a {
        font-size: 11px !important;
    }
}

/* Extra Small Mobile - 480px and below */
@media (max-width: 480px) {
    .footer-top {
        padding: 35px 0 10px !important;
    }
    
    .footer-widget {
        margin-bottom: 25px !important;
    }
    
    .footer-logo {
        max-height: 35px !important;
    }
    
    .social-list__link {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }
    
    .footer-glow-node {
        width: 150px !important;
        height: 150px !important;
    }
    
    .footer-grid-mesh {
        background-size: 30px 30px !important;
    }
}

/* Tiny Mobile - 360px and below */
@media (max-width: 360px) {
    .footer-top {
        padding: 30px 0 10px !important;
    }
    
    .footer-widget {
        margin-bottom: 20px !important;
    }
    
    .footer-widget__desc {
        font-size: 11px !important;
    }
    
    .footer-menu__link {
        font-size: 11px !important;
    }
    
    .social-list {
        gap: 8px !important;
    }
    
    .social-list__link {
        width: 30px !important;
        height: 30px !important;
        font-size: 13px !important;
    }
    
    .subscribe-form .form--control {
        height: 38px !important;
        font-size: 11px !important;
        padding: 6px 12px !important;
    }
    
    .subscribe-form .btn {
        padding: 6px 10px !important;
        font-size: 9px !important;
    }
    
    .footer-copyright {
        font-size: 10px !important;
    }
    
    .footer-policy a {
        font-size: 10px !important;
    }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .footer-glow-node {
        animation: none !important;
    }
    
    .social-list__link,
    .footer-menu__link,
    .footer-policy a,
    .subscribe-form .btn {
        transition: none !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .footer-area {
        border-top: 2px solid #ffffff !important;
    }
    
    .social-list__link,
    .footer-menu__link,
    .footer-policy a {
        border: 1px solid currentColor !important;
    }
}

/* Focus Visible for Keyboard Navigation */
.social-list__link:focus-visible,
.footer-menu__link:focus-visible,
.footer-policy a:focus-visible,
.subscribe-form .btn:focus-visible {
    outline: 2px solid #e10100 !important;
    outline-offset: 2px !important;
}


/* ============================================
   EVENTS PAGE & EVENT CARDS RESPONSIVE STYLES
   ============================================ */

/* Ensure black background on all devices */
.events-view,
.tactile-page,
.discovery-section-tactile {
    background-color: #000000 !important;
}

/* Event Card - Fix white/light background issue - COMPLETE FIX */
.tactile-card,
.event-card-node {
    background: #000000 !important;
    background-color: #000000 !important;
}

.tactile-card::before,
.tactile-card::after {
    display: none !important;
}

.card-image-sector {
    background: #000000 !important;
    background-color: #000000 !important;
}

.card-image-sector::before,
.card-image-sector::after {
    display: none !important;
}

.card-img-main {
    background: transparent !important;
    background-color: transparent !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Desktop - Default styles */

/* Tablet - 991px and below */
@media (max-width: 991px) {
    .events-hero-tactile {
        padding-top: 80px !important;
        padding-bottom: 60px !important;
    }
    
    .hero-title-tactile {
        font-size: 48px !important;
    }
    
    .hero-subtitle-tactile {
        font-size: 16px !important;
    }
    
    .search-engine-tactile {
        max-width: 100% !important;
    }
    
    .engine-stats-tactile {
        gap: 30px !important;
    }
    
    .stat-node .stat-value {
        font-size: 28px !important;
    }
    
    .refine-engine-tactile {
        position: static !important;
        margin-bottom: 30px !important;
        padding: 25px !important;
    }
    
    .tactile-card {
        margin-bottom: 20px !important;
    }
    
    .card-data-sector {
        padding: 18px !important;
    }
    
    .card-title-tactile {
        font-size: 16px !important;
    }
}

/* Mobile - 767px and below */
@media (max-width: 767px) {
    .events-hero-tactile {
        padding-top: 60px !important;
        padding-bottom: 40px !important;
    }
    
    .hero-tag-tactile {
        font-size: 10px !important;
        margin-bottom: 15px !important;
    }
    
    .hero-title-tactile {
        font-size: 36px !important;
        margin-bottom: 20px !important;
    }
    
    .hero-subtitle-tactile {
        font-size: 14px !important;
        margin-bottom: 30px !important;
    }
    
    .search-engine-tactile form {
        flex-direction: column !important;
    }
    
    .tactile-input-group {
        width: 100% !important;
    }
    
    .tactile-button-primary {
        width: 100% !important;
        padding: 12px !important;
    }
    
    .engine-stats-tactile {
        flex-direction: column !important;
        gap: 20px !important;
        margin-top: 30px !important;
    }
    
    .stat-node {
        text-align: center !important;
    }
    
    .stat-node .stat-value {
        font-size: 24px !important;
    }
    
    .stat-node .stat-label {
        font-size: 9px !important;
    }
    
    .discovery-section-tactile {
        padding-bottom: 80px !important;
    }
    
    .refine-engine-tactile {
        padding: 20px !important;
        border-radius: 12px !important;
    }
    
    .refine-header {
        margin-bottom: 20px !important;
    }
    
    .refine-title {
        font-size: 18px !important;
    }
    
    .refine-group {
        margin-bottom: 30px !important;
    }
    
    .sector-link {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
    
    .sector-count {
        font-size: 11px !important;
    }
    
    .logic-item {
        padding: 10px 12px !important;
        font-size: 11px !important;
        margin-bottom: 8px !important;
    }
    
    .grid-header-tactile {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }
    
    .display-title {
        font-size: 24px !important;
    }
    
    .header-meta {
        font-size: 12px !important;
    }
    
    .view-engine-tactile {
        display: none !important;
    }
    
    /* Event Card Mobile */
    .tactile-card {
        margin-bottom: 15px !important;
    }
    
    .card-image-sector {
        aspect-ratio: 16/10 !important;
    }
    
    .card-badges-tactile {
        top: 10px !important;
        left: 10px !important;
        gap: 6px !important;
    }
    
    .badge-node {
        padding: 3px 10px !important;
        font-size: 10px !important;
    }
    
    .card-date-tactile {
        bottom: 10px !important;
        left: 10px !important;
        padding: 6px 10px !important;
    }
    
    .card-date-tactile .day {
        font-size: 16px !important;
    }
    
    .card-date-tactile .month {
        font-size: 9px !important;
    }
    
    .card-actions-tactile {
        top: 10px !important;
        right: 10px !important;
        gap: 6px !important;
    }
    
    .action-btn-tactile {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }
    
    .card-data-sector {
        padding: 15px !important;
    }
    
    .category-tag-tactile {
        font-size: 10px !important;
        padding: 4px 10px !important;
    }
    
    .price-engine-tactile .val {
        font-size: 16px !important;
    }
    
    .card-title-tactile {
        font-size: 15px !important;
        margin-bottom: 12px !important;
    }
    
    .card-meta-tactile {
        gap: 10px !important;
    }
    
    .meta-node {
        font-size: 11px !important;
    }
    
    .meta-node i {
        font-size: 14px !important;
    }
    
    .card-origin-sector {
        padding: 12px 15px !important;
    }
    
    .origin-avatar {
        width: 32px !important;
        height: 32px !important;
    }
    
    .origin-info .name {
        font-size: 12px !important;
    }
    
    .origin-info .label {
        font-size: 9px !important;
    }
    
    .tactile-access-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }
}

/* Small Mobile - 576px and below */
@media (max-width: 576px) {
    .events-hero-tactile {
        padding-top: 50px !important;
        padding-bottom: 30px !important;
    }
    
    .hero-title-tactile {
        font-size: 32px !important;
    }
    
    .hero-subtitle-tactile {
        font-size: 13px !important;
    }
    
    .search-engine-tactile {
        padding: 6px !important;
    }
    
    .tactile-input-group input {
        font-size: 13px !important;
        padding: 10px 10px 10px 35px !important;
    }
    
    .tactile-button-primary {
        padding: 10px !important;
        font-size: 13px !important;
    }
    
    .refine-engine-tactile {
        padding: 18px !important;
    }
    
    .refine-title {
        font-size: 16px !important;
    }
    
    .display-title {
        font-size: 20px !important;
    }
    
    .card-title-tactile {
        font-size: 14px !important;
    }
    
    .card-data-sector {
        padding: 12px !important;
    }
}

/* Extra Small Mobile - 480px and below */
@media (max-width: 480px) {
    .events-hero-tactile {
        padding-top: 40px !important;
        padding-bottom: 25px !important;
    }
    
    .hero-tag-tactile {
        font-size: 9px !important;
    }
    
    .hero-title-tactile {
        font-size: 28px !important;
    }
    
    .hero-subtitle-tactile {
        font-size: 12px !important;
    }
    
    .stat-node .stat-value {
        font-size: 20px !important;
    }
    
    .stat-node .stat-label {
        font-size: 8px !important;
    }
    
    .refine-engine-tactile {
        padding: 15px !important;
    }
    
    .sector-link {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
    
    .logic-item {
        padding: 8px 10px !important;
        font-size: 10px !important;
    }
    
    .display-title {
        font-size: 18px !important;
    }
    
    .card-image-sector {
        aspect-ratio: 16/11 !important;
    }
    
    .card-badges-tactile {
        top: 8px !important;
        left: 8px !important;
    }
    
    .badge-node {
        padding: 2px 8px !important;
        font-size: 9px !important;
    }
    
    .card-date-tactile {
        bottom: 8px !important;
        left: 8px !important;
        padding: 5px 8px !important;
    }
    
    .card-date-tactile .day {
        font-size: 14px !important;
    }
    
    .card-date-tactile .month {
        font-size: 8px !important;
    }
    
    .card-actions-tactile {
        top: 8px !important;
        right: 8px !important;
        gap: 5px !important;
    }
    
    .action-btn-tactile {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }
    
    .card-data-sector {
        padding: 10px !important;
    }
    
    .category-tag-tactile {
        font-size: 9px !important;
        padding: 3px 8px !important;
    }
    
    .price-engine-tactile .val {
        font-size: 14px !important;
    }
    
    .card-title-tactile {
        font-size: 13px !important;
        margin-bottom: 10px !important;
    }
    
    .meta-node {
        font-size: 10px !important;
    }
    
    .meta-node i {
        font-size: 12px !important;
    }
    
    .card-origin-sector {
        padding: 10px 12px !important;
    }
    
    .origin-avatar {
        width: 28px !important;
        height: 28px !important;
    }
    
    .origin-info .name {
        font-size: 11px !important;
    }
    
    .origin-info .label {
        font-size: 8px !important;
    }
    
    .tactile-access-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }
}

/* Tiny Mobile - 360px and below */
@media (max-width: 360px) {
    .hero-title-tactile {
        font-size: 24px !important;
    }
    
    .hero-subtitle-tactile {
        font-size: 11px !important;
    }
    
    .tactile-input-group input {
        font-size: 12px !important;
    }
    
    .tactile-button-primary {
        font-size: 12px !important;
    }
    
    .refine-title {
        font-size: 14px !important;
    }
    
    .display-title {
        font-size: 16px !important;
    }
    
    .card-title-tactile {
        font-size: 12px !important;
    }
    
    .card-data-sector {
        padding: 8px !important;
    }
    
    .card-origin-sector {
        padding: 8px 10px !important;
    }
}

/* Fix for empty state */
.empty-manifest {
    background: transparent !important;
    color: var(--stark-white) !important;
}

.empty-icon {
    font-size: 64px !important;
    color: var(--crimson-red) !important;
}

.empty-title {
    color: var(--stark-white) !important;
}

.empty-desc {
    color: var(--muted-light) !important;
}

/* Pagination styling */
.manifest-pagination-tactile {
    display: flex !important;
    justify-content: center !important;
}

.manifest-pagination-tactile .pagination {
    gap: 8px !important;
}

.manifest-pagination-tactile .page-link {
    background: var(--deep-charcoal) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--stark-white) !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
}

.manifest-pagination-tactile .page-link:hover,
.manifest-pagination-tactile .page-item.active .page-link {
    background: var(--crimson-red) !important;
    border-color: var(--crimson-red) !important;
    color: var(--stark-white) !important;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .tactile-card,
    .card-img-main,
    .action-btn-tactile,
    .sector-link,
    .logic-item {
        transition: none !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .tactile-card {
        border: 2px solid var(--stark-white) !important;
    }
    
    .sector-link,
    .logic-item {
        border: 1px solid currentColor !important;
    }
}

/* Focus Visible for Keyboard Navigation */
.tactile-card:focus-visible,
.action-btn-tactile:focus-visible,
.sector-link:focus-visible,
.logic-item:focus-visible,
.tactile-button-primary:focus-visible {
    outline: 2px solid var(--crimson-red) !important;
    outline-offset: 2px !important;
}


/* ============================================
   ULTRA FEATURED EVENTS - RESPONSIVE STYLES
   ============================================ */

/* Tablet Large - 1199px and below */
@media (max-width: 1199px) {
    .ultra-showcase-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 25px !important;
    }
    
    .showcase-nav-arrow {
        width: 50px !important;
        height: 50px !important;
    }
    
    .showcase-nav-arrow i {
        font-size: 24px !important;
    }
}

/* Tablet - 991px and below */
@media (max-width: 991px) {
    .ultra-featured-events-section {
        padding: 100px 0 !important;
    }
    
    .ultra-header {
        margin-bottom: 60px !important;
    }
    
    .ultra-title {
        font-size: 3rem !important;
    }
    
    .ultra-subtitle {
        font-size: 1.1rem !important;
    }
    
    .ultra-filter-system {
        margin-bottom: 50px !important;
    }
    
    .filter-track {
        padding: 10px 0 !important;
        justify-content: flex-start !important;
    }
    
    .filter-scroll-btn {
        display: none !important;
    }
    
    .ultra-filter-btn {
        padding: 12px 20px !important;
        font-size: 13px !important;
    }
    
    .ultra-showcase-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
    
    .showcase-nav-arrow {
        display: none !important;
    }
    
    .ultra-pagination {
        margin-bottom: 50px !important;
    }
}

/* Mobile - 767px and below */
@media (max-width: 767px) {
    .ultra-featured-events-section {
        padding: 80px 0 !important;
    }
    
    .glow-orb.orb-1,
    .glow-orb.orb-2 {
        width: 400px !important;
        height: 400px !important;
    }
    
    .glow-orb.orb-3 {
        width: 300px !important;
        height: 300px !important;
    }
    
    .ultra-header {
        margin-bottom: 50px !important;
    }
    
    .header-ornament {
        margin-bottom: 20px !important;
    }
    
    .ornament-line {
        width: 50px !important;
    }
    
    .ornament-diamond {
        width: 10px !important;
        height: 10px !important;
    }
    
    .header-badge-ultra {
        padding: 10px 24px !important;
        font-size: 11px !important;
        letter-spacing: 2px !important;
        margin-bottom: 25px !important;
    }
    
    .header-badge-ultra i {
        font-size: 16px !important;
    }
    
    .ultra-title {
        font-size: 2.5rem !important;
        margin-bottom: 20px !important;
    }
    
    .ultra-subtitle {
        font-size: 1rem !important;
        margin-bottom: 30px !important;
    }
    
    .divider-line {
        width: 80px !important;
    }
    
    .divider-dot {
        width: 5px !important;
        height: 5px !important;
    }
    
    .ultra-filter-system {
        margin-bottom: 40px !important;
    }
    
    .filter-label {
        font-size: 12px !important;
        margin-bottom: 20px !important;
    }
    
    .filter-label i {
        font-size: 16px !important;
    }
    
    .filter-track {
        gap: 10px !important;
        padding: 5px 0 !important;
    }
    
    .ultra-filter-btn {
        padding: 10px 18px !important;
        font-size: 12px !important;
        gap: 8px !important;
    }
    
    .ultra-filter-btn .filter-icon {
        font-size: 16px !important;
    }
    
    .ultra-filter-btn .filter-count {
        padding: 2px 6px !important;
        font-size: 10px !important;
    }
    
    .ultra-showcase-wrapper {
        margin-bottom: 50px !important;
    }
    
    .ultra-showcase-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 15px !important;
        padding: 0 20px !important;
    }
    
    .ultra-showcase-grid::-webkit-scrollbar {
        display: none !important;
    }
    
    .ultra-showcase-item {
        flex: 0 0 calc(100% - 40px) !important;
        width: calc(100% - 40px) !important;
        min-width: calc(100% - 40px) !important;
        scroll-snap-align: center !important;
    }
    
    .ultra-pagination {
        margin-bottom: 40px !important;
        gap: 15px !important;
    }
    
    .pagination-dots {
        gap: 10px !important;
    }
    
    .pagination-dot {
        width: 10px !important;
        height: 10px !important;
    }
    
    .pagination-dot.active {
        width: 28px !important;
    }
    
    .pagination-info {
        font-size: 13px !important;
    }
    
    .pagination-info .current-page {
        font-size: 16px !important;
    }
    
    .ultra-cta-btn {
        padding: 18px 40px !important;
        font-size: 14px !important;
        letter-spacing: 1.5px !important;
    }
    
    .btn-icon {
        font-size: 18px !important;
    }
}

/* Small Mobile - 576px and below */
@media (max-width: 576px) {
    .ultra-featured-events-section {
        padding: 60px 0 !important;
    }
    
    .ultra-header {
        margin-bottom: 40px !important;
    }
    
    .header-badge-ultra {
        padding: 8px 20px !important;
        font-size: 10px !important;
        gap: 10px !important;
    }
    
    .header-badge-ultra i {
        font-size: 14px !important;
    }
    
    .ultra-title {
        font-size: 2rem !important;
    }
    
    .ultra-subtitle {
        font-size: 0.95rem !important;
    }
    
    .filter-label {
        font-size: 11px !important;
    }
    
    .ultra-filter-btn {
        padding: 8px 16px !important;
        font-size: 11px !important;
    }
    
    .ultra-showcase-item {
        flex: 0 0 calc(100% - 30px) !important;
        width: calc(100% - 30px) !important;
        min-width: calc(100% - 30px) !important;
    }
    
    .pagination-dot {
        width: 8px !important;
        height: 8px !important;
    }
    
    .pagination-dot.active {
        width: 24px !important;
    }
    
    .pagination-info {
        font-size: 12px !important;
    }
    
    .pagination-info .current-page {
        font-size: 14px !important;
    }
    
    .ultra-cta-btn {
        padding: 16px 35px !important;
        font-size: 13px !important;
    }
}

/* Extra Small Mobile - 480px and below */
@media (max-width: 480px) {
    .ultra-featured-events-section {
        padding: 50px 0 !important;
    }
    
    .glow-orb.orb-1,
    .glow-orb.orb-2 {
        width: 300px !important;
        height: 300px !important;
    }
    
    .glow-orb.orb-3 {
        width: 250px !important;
        height: 250px !important;
    }
    
    .ultra-header {
        margin-bottom: 35px !important;
    }
    
    .ornament-line {
        width: 40px !important;
    }
    
    .header-badge-ultra {
        padding: 7px 18px !important;
        font-size: 9px !important;
    }
    
    .ultra-title {
        font-size: 1.75rem !important;
    }
    
    .ultra-subtitle {
        font-size: 0.9rem !important;
    }
    
    .divider-line {
        width: 60px !important;
    }
    
    .ultra-filter-system {
        margin-bottom: 35px !important;
    }
    
    .filter-track {
        gap: 8px !important;
    }
    
    .ultra-filter-btn {
        padding: 7px 14px !important;
        font-size: 10px !important;
    }
    
    .ultra-filter-btn .filter-icon {
        font-size: 14px !important;
    }
    
    .ultra-showcase-item {
        flex: 0 0 calc(100% - 20px) !important;
        width: calc(100% - 20px) !important;
        min-width: calc(100% - 20px) !important;
    }
    
    .ultra-pagination {
        margin-bottom: 35px !important;
    }
    
    .ultra-cta-btn {
        padding: 14px 30px !important;
        font-size: 12px !important;
    }
    
    .btn-icon {
        font-size: 16px !important;
    }
}

/* Tiny Mobile - 360px and below */
@media (max-width: 360px) {
    .ultra-featured-events-section {
        padding: 40px 0 !important;
    }
    
    .ultra-header {
        margin-bottom: 30px !important;
    }
    
    .header-badge-ultra {
        padding: 6px 16px !important;
        font-size: 8px !important;
        gap: 8px !important;
    }
    
    .header-badge-ultra i {
        font-size: 12px !important;
    }
    
    .ultra-title {
        font-size: 1.5rem !important;
    }
    
    .ultra-subtitle {
        font-size: 0.85rem !important;
    }
    
    .filter-label {
        font-size: 10px !important;
    }
    
    .ultra-filter-btn {
        padding: 6px 12px !important;
        font-size: 9px !important;
    }
    
    .ultra-filter-btn .filter-count {
        font-size: 9px !important;
    }
    
    .pagination-dot {
        width: 7px !important;
        height: 7px !important;
    }
    
    .pagination-dot.active {
        width: 20px !important;
    }
    
    .ultra-cta-btn {
        padding: 12px 25px !important;
        font-size: 11px !important;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .glow-orb,
    .ornament-diamond,
    .badge-glow,
    .ultra-title,
    .divider-dot,
    .filter-glow,
    .card-spotlight,
    .btn-shine,
    .icon-pulse,
    .scan-lines {
        animation: none !important;
    }
    
    .ultra-filter-btn,
    .showcase-nav-arrow,
    .pagination-dot,
    .ultra-cta-btn,
    .ultra-showcase-item {
        transition: none !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .ultra-featured-events-section {
        border-top: 2px solid #ffffff !important;
        border-bottom: 2px solid #ffffff !important;
    }
    
    .ultra-filter-btn,
    .showcase-nav-arrow,
    .pagination-dot,
    .ultra-cta-btn {
        border: 2px solid currentColor !important;
    }
}

/* Focus Visible for Keyboard Navigation */
.ultra-filter-btn:focus-visible,
.showcase-nav-arrow:focus-visible,
.pagination-dot:focus-visible,
.ultra-cta-btn:focus-visible,
.filter-scroll-btn:focus-visible {
    outline: 3px solid #d30f0f !important;
    outline-offset: 3px !important;
}


/* ============================================================================
   MOBILE PERFORMANCE OPTIMIZATIONS
   Critical for low-RAM devices and small screens
   ============================================================================ */

/* Remove expensive backdrop filters on mobile */
@media (max-width: 991px) {
    .ultra-modern-header,
    .tactile-cookie-protocol,
    .tactile-back-to-top,
    .sync-card,
    .tactile-monitor-node,
    .location-node-card,
    .category-node,
    .tactile-card,
    .media-showcase-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    /* Replace with solid backgrounds */
    .ultra-modern-header {
        background: rgba(5, 5, 5, 0.98) !important;
    }
    
    .tactile-cookie-protocol {
        background: rgba(10, 10, 10, 0.98) !important;
    }
    
    .tactile-back-to-top {
        background: rgba(10, 10, 10, 0.95) !important;
    }
    
    /* Hide decorative elements on mobile */
    .hero-geometric-bg,
    .floating-particles,
    .light-rays,
    .countdown-bg-shapes,
    .floating-element,
    .footer-glow-node,
    .bg-element,
    .shape-blob,
    .particle,
    .geometric-shape,
    .glow-orb,
    .scan-lines,
    .gradient-mesh,
    .particle-field {
        display: none !important;
    }
    
    /* Disable autoplay videos on mobile */
    video[autoplay] {
        display: none !important;
    }
    
    /* Simplify shadows on mobile */
    * {
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    /* Keep only essential shadows */
    .tactile-card:hover,
    .btn:hover,
    .ultra-modern-header {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Reduce animation complexity */
    * {
        animation-duration: 0.2s !important;
        transition-duration: 0.2s !important;
    }
    
    /* Disable transform animations */
    .icon-pulse,
    .badge-pulse,
    .marker-pulse,
    .btt-ring,
    .logo-pulse {
        animation: none !important;
    }
}

/* Extra optimizations for very small screens */
@media (max-width: 480px) {
    /* Further reduce animation duration */
    * {
        animation-duration: 0.1s !important;
        transition-duration: 0.1s !important;
    }
    
    /* Simplify gradients */
    .cinematic-bg,
    .footer-atmospheric,
    .underlay-tactile {
        opacity: 0.2 !important;
    }
    
    /* Remove blur filters completely */
    * {
        filter: none !important;
    }
}

/* Prefers reduced motion (accessibility + performance) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .hero-geometric-bg,
    .floating-particles,
    .light-rays,
    .countdown-bg-shapes,
    .floating-element,
    .particle,
    .geometric-shape {
        display: none !important;
    }
}