/* ============================================
   VENUE MAP - Shared component
   Used by: companies, map
   ============================================ */

.venue-map {
    position: relative;
    overflow: hidden;
}

/* Element: Title - inherits default h2 styling */

/* Element: Description */
.venue-map__description {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    margin: 0 auto;
}

/* Element: Content Container */
.venue-map__content {
    margin-top: var(--space-3xl);
    position: relative;
    min-height: 600px;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

/* Element: Floor Container */
.venue-map__floor {
    display: none;
    opacity: 0;
    transition: opacity var(--transition-normal);
    animation: fadeIn 0.4s ease-out forwards;
}

/* Modifier: Active Floor */
.venue-map__floor--active {
    display: block;
    opacity: 1;
}

/* Element: Map Container */
.venue-map__map-container {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    margin-bottom: var(--space-2xl);
    border: 1px solid var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Element: Map Placeholder */
.venue-map__map-placeholder {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
}

/* Element: Map Image (for when maps are added) */
.venue-map__map-image {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

/* Element: Booth List */
.venue-map__booth-list {
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Element: List Title */
.venue-map__list-title {
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-lg);
}

/* Element: List Placeholder */
.venue-map__list-placeholder {
    color: var(--color-text-secondary);
    font-size: var(--text-md);
}

/* Responsive Design */
@media (max-width: 768px) {
    /* Removed custom venue-map__title styling - uses default h2 */
    
    .venue-map__description {
        font-size: var(--text-md);
    }
    
    .venue-map__map-container {
        padding: var(--space-lg);
    }
    
    .venue-map__booth-list {
        padding: var(--space-lg);
    }
    
    .venue-map__list-title {
        font-size: var(--text-xl);
    }
}

/* Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Element: List Image (for when list images are used instead of HTML) */
.venue-map__list-image {
    width: 100%;
    max-width: 600px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Update booth list container for image display */
.venue-map__booth-list {
    background: transparent;
    border-radius: 0;
    padding: var(--space-2xl) 0;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Responsive adjustments for images */
@media (max-width: 768px) {
    .venue-map__list-image {
        max-width: 100%;
    }
}

/* ==========================================
   VENUE MAP BOOTH LISTS - HTML Version
   ========================================== */

/* Update booth list container for HTML content */
.venue-map__booth-list {
    background: transparent;
    border-radius: 0;
    padding: var(--space-3xl) var(--space-2xl);
    border: none;
    max-width: 800px;
    margin: 0 auto;
}

/* List Title (Floor Name) */
.venue-map__list-title {
    font-size: 3rem;
    font-weight: 800;
    color: var(--color-text);
    text-transform: uppercase;
    margin-bottom: var(--space-2xl);
    letter-spacing: 0.05em;
}

/* List Container */
.venue-map__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* List Item */
.venue-map__list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-xl);
    color: var(--color-text);
    padding: var(--space-sm) 0;
    flex-wrap: nowrap;
}

/* Location Name */
.venue-map__location {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    flex: 1;
    padding-left: var(--space-lg);
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bullet point */
.venue-map__location::before {
    content: '•';
    position: absolute;
    left: 0;
    font-size: 1.2em;
    line-height: 1;
}

/* Booth Code */
.venue-map__code {
    font-weight: 800;
    font-size: var(--text-2xl);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 100px;
    text-align: right;
}

/* Color Modifiers for Codes */
.venue-map__code--green {
    color: #73c04e; /* Túnið */
}

.venue-map__code--yellow {
    color: #fff570; /* 1. Floor */
}

.venue-map__code--pink {
    color: #ed0c6e; /* 2. Floor */
}

.venue-map__code--orange {
    color: #f26122; /* 3. Floor */
}

.venue-map__code--blue {
    color: #0052a4; /* 4. Floor */
}

.venue-map__code--purple {
    color: #af83ae; /* 5. Floor */
}

/* Responsive Design */
@media (max-width: 768px) {
    .venue-map__list-title {
        font-size: 2rem;
    }
    
    .venue-map__list-item {
        font-size: var(--text-md);
    }
    
    .venue-map__location {
        padding-left: var(--space-md);
    }
    
    .venue-map__code {
        font-size: var(--text-lg);
        min-width: 60px;
    }
    
    .venue-map__booth-list {
        padding: var(--space-xl) var(--space-md);
    }
}

/* ==========================================
   VENUE MAP BOOTH LISTS - CORRECT LAYOUT
   Horizontal layout with title on left, list on right
   ========================================== */

/* Override booth list container for horizontal layout */
.venue-map__booth-list {
    background: transparent;
    border-radius: 0;
    padding: var(--space-3xl) var(--space-2xl);
    border: none;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3xl);
}

/* List Title (Floor Name) - Left Side */
.venue-map__list-title {
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--color-text);
    text-transform: uppercase;
    margin-bottom: 0;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    min-width: 200px;
    line-height: 1;
}

/* List Container - Right Side */
.venue-map__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    flex: 1;
}

/* List Item */
.venue-map__list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-xl);
    color: var(--color-text);
    padding: 0;
}

/* Location Name */
.venue-map__location {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    flex: 1;
    padding-left: var(--space-md);
    position: relative;
}

/* Bullet point */
.venue-map__location::before {
    content: '•';
    position: absolute;
    left: 0;
    font-size: 1.2em;
    line-height: 1;
}

/* Booth Code */
.venue-map__code {
    font-weight: 900;
    font-size: var(--text-2xl);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 80px;
    text-align: right;
    margin-left: var(--space-lg);
}

/* Responsive Design */
@media (max-width: 968px) {
    .venue-map__booth-list {
        flex-direction: column;
        gap: var(--space-xl);
    }
    
    .venue-map__list-title {
        font-size: 2.5rem;
        min-width: auto;
    }
}

@media (max-width: 768px) {
    .venue-map__list-title {
        font-size: 2rem;
    }
    
    .venue-map__list-item {
        font-size: var(--text-md);
    }
    
    .venue-map__location {
        padding-left: var(--space-md);
    }
    
    .venue-map__code {
        font-size: var(--text-lg);
        min-width: 60px;
    }
    
    .venue-map__booth-list {
        padding: var(--space-xl) var(--space-md);
    }
}

/* ==========================================
   VENUE MAP BOOTH LISTS - CORRECT VERTICAL LAYOUT
   Title above, list below
   ========================================== */

/* Booth list container - vertical layout */
.venue-map__booth-list {
    background: transparent;
    border-radius: 0;
    padding: var(--space-3xl) var(--space-2xl);
    border: none;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* List Title (Floor Name) - Above the list */
.venue-map__list-title {
    font-size: 4rem;
    font-weight: 900;
    color: var(--color-text);
    text-transform: uppercase;
    margin-bottom: var(--space-2xl);
    letter-spacing: 0.05em;
    line-height: 1;
}

/* List Container */
.venue-map__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    width: 100%;
}

/* List Item */
.venue-map__list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-xl);
    color: var(--color-text);
    padding: 0;
    flex-wrap: nowrap;
}

/* Location Name */
.venue-map__location {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    flex: 1;
    padding-left: var(--space-lg);
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bullet point */
.venue-map__location::before {
    content: '•';
    position: absolute;
    left: 0;
    font-size: 1.2em;
    line-height: 1;
}

/* Booth Code */
.venue-map__code {
    font-weight: 900;
    font-size: var(--text-2xl);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 100px;
    text-align: right;
    margin-left: var(--space-xl);
}

/* Color Modifiers for Codes */
.venue-map__code--green {
    color: #73c04e; /* Túnið */
}

.venue-map__code--yellow {
    color: #fff570; /* 1. Floor */
}

.venue-map__code--pink {
    color: #ed0c6e; /* 2. Floor */
}

.venue-map__code--orange {
    color: #f26122; /* 3. Floor */
}

.venue-map__code--blue {
    color: #0052a4; /* 4. Floor */
}

.venue-map__code--purple {
    color: #af83ae; /* 5. Floor */
}

/* Responsive Design */
@media (max-width: 768px) {
    .venue-map__list-title {
        font-size: 2.5rem;
    }
    
    .venue-map__list-item {
        font-size: var(--text-md);
    }
    
    .venue-map__location {
        padding-left: var(--space-md);
    }
    
    .venue-map__code {
        font-size: var(--text-lg);
        min-width: 60px;
        margin-left: var(--space-md);
    }
    
    .venue-map__booth-list {
        padding: var(--space-xl) var(--space-md);
    }
}

/* ==========================================
   VENUE MAP - FINAL LAYOUT
   Title centered above, map left, list right
   ========================================== */

/* Floor container */
.venue-map__floor {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

/* Floor Title - Centered above everything */
.venue-map__floor-title {
    font-size: var(--text-3xl);
    font-weight: 900;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
    text-align: center;
    margin: 0;
}

/* Floor Content - Horizontal layout container */
.venue-map__floor-content {
    display: flex;
    gap: var(--space-3xl);
    align-items: flex-start;
}

/* Map Container - Left side */
.venue-map__map-container {
    flex: 1;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-primary);
}

/* Booth List Container - Right side
   40% of the section width (paired with the map's flex: 3 1 0 = 60%). Labels
   wrap to fit their 40% allotment — deliberate trade so the map size stays
   consistent across floors regardless of label length. */
.venue-map__booth-list {
    flex: 2 1 0;
    min-width: 0;
    background: transparent;
    border-radius: 0;
    padding: var(--space-xl) 0;
    border: none;
    display: flex;
    flex-direction: column;
}

/* List Container */
.venue-map__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    width: 100%;
}

/* List Item */
.venue-map__list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-xl);
    color: var(--color-text);
    padding: 0;
    flex-wrap: nowrap;
}

/* Location Name */
.venue-map__location {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    flex: 1;
    padding-left: var(--space-lg);
    position: relative;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.25;
    word-break: normal;
    overflow-wrap: anywhere;
}

/* Bullet point */
.venue-map__location::before {
    content: '•';
    position: absolute;
    left: 0;
    font-size: 1.2em;
    line-height: 1;
}

/* Booth Code */
.venue-map__code {
    font-weight: 900;
    font-size: var(--text-2xl);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 100px;
    text-align: right;
    margin-left: var(--space-xl);
    flex-shrink: 0;
}

/* Keep the code visually aligned with the first line of a wrapped location name. */
.venue-map__list-item {
    align-items: flex-start;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .venue-map__floor-content {
        flex-direction: column;
    }

    .venue-map__floor-title {
        font-size: var(--text-2xl);
    }
}

@media (max-width: 768px) {
    .venue-map__floor-title {
        font-size: var(--text-xl);
    }
    
    .venue-map__map-container {
        padding: var(--space-lg);
    }
    
    .venue-map__list-item {
        font-size: var(--text-md);
    }
    
    .venue-map__location {
        padding-left: var(--space-md);
    }
    
    .venue-map__code {
        font-size: var(--text-lg);
        min-width: 60px;
        margin-left: var(--space-md);
    }
}

/* ==========================================
   FIX: Hide/Show Floors Based on Active State
   ========================================== */

/* Hide all floors by default */
.venue-map__floor {
    display: none;
    opacity: 0;
    transition: opacity var(--transition-normal);
}

/* Show only the active floor */
.venue-map__floor--active {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
    opacity: 1;
    animation: fadeIn 0.4s ease-out forwards;
}

/* ==========================================
   YEAR FILTER TABS - Page-specific spacing
   ========================================== */

/* Venue map container - remove max-width to allow full width */
#venue-map .container {
    max-width: none;
}

/* Venue map section year-filter styling */
#venue-map .year-filter {
    margin-bottom: var(--space-3xl);
}

/* ==========================================
   RESPONSIVE MAP CONTAINER & IMAGE SIZING
   Clean solution for all breakpoints
   ========================================== */

/* Desktop: Map takes 60% of the row (paired with the booth list's flex: 2 1 0
   = 40%). Width is consistent across floors because both items use a fixed
   ratio rather than sizing to content. */
.venue-map__map-container {
    flex: 3 1 0;
    min-width: 0;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 0;
    display: block;
    border: 1px solid var(--color-primary);
    overflow: hidden;
    line-height: 0;
}

.venue-map__map-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-lg);
}

/* Tablet & mobile: stack vertically. With the 50/50 row layout, the
   horizontal mode is comfortable down to ~1024px. Below that, the map takes
   full width above the list.

   Reset the row-mode flex sizing — in column direction, flex-basis: 0 on the
   map collapses it vertically to nothing. `flex: 0 0 auto` lets each item size
   to its natural content (the image scales via width: 100%). */
@media (max-width: 1024px) {
    .venue-map__floor-content {
        flex-direction: column;
        gap: var(--space-lg);
    }

    .venue-map__map-container,
    .venue-map__booth-list {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .venue-map__floor-content {
        gap: var(--space-md);
    }
}

@media (max-width: 480px) {
    .venue-map__floor-content {
        gap: var(--space-sm);
    }
}