/* import global variables */
@import "style-global.css";

/* ============================================
   HEADER SECTION
   ============================================ */
.event-header_news {
    background-color: white;
    margin-top: calc(7 * var(--menu-margin));
    min-height: 200px;
}

.event-title_news {
    padding-left: calc(9 * var(--global-margin));
    padding-right: calc(28 * var(--global-margin));
    padding-top: calc(4 * var(--global-margin));
    padding-bottom: calc(1 * var(--global-margin));
    text-transform: uppercase;
    font-size: 90px;
    font-weight: medium;
    line-height: 0.9;
    border-top: 1.5px dotted #666;
    color: #000;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.event-title_description {
    padding-left: calc(9 * var(--global-margin));
    padding-right: calc(9 * var(--global-margin));
    padding-top: calc(1 * var(--global-margin));
    padding-bottom: calc(4 * var(--global-margin));
    font-size: 7vh !important;
    font-weight: medium;
    line-height: 0.9;
    border-top: 0px dotted;
    color: #000;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ============================================
   META GRID - Three Column Layout
   ============================================ */
.event-meta-grid_news {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 0.1fr) 30vw; /* left (more space) | middle (narrower) | fixed right */
    column-gap: 0px;
    row-gap: 0px;
    align-items: start;
    margin-bottom: calc(3 * var(--global-margin));
}

/* Left Column */
.meta-left_news {
    align-self: start;
}

.event-type_news {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0 !important;
    padding-left: calc(9 * var(--global-margin));
    font-size: 3vw;
    font-weight: medium;
    color: #000;
    text-transform: lowercase;
    line-height: 1.5;
}

.event-promoter_news {
    display: inline-flex;
    align-items: center;
}

/* Promoter badge in right column - display as block, no left margin */
.meta-right_news .event-promoter_news {
    display: block;
    margin-bottom: 0;
    padding-right: calc(9 * var(--global-margin));
    text-align: right;
    margin-top: calc(2 * var(--global-margin)); /* Align with event-type (first row) */
    /* Match the baseline position of event-type_news */
}

.promoter-badge_news {
    background-color: #000 !important;
    color: #fff !important;
    border: 0.5vh solid #000 !important;
    text-transform: uppercase !important;
    line-height: 1.5;
    padding:1px 1px;
    font-size: 1vw;
    margin-left: 0;
    margin-right: 0;
;
}

/* Promoter badge in right column - no margins, inline-block for right alignment */
.meta-right_news .promoter-badge_news {
    margin-left: 0;
    margin-right: 0;
    display: inline-block;
}

.event-location_news {
    font-size: 3vw;
    color: #000;
    line-height: 0.4;
    padding-left: calc(9 * var(--global-margin));
    margin-top: 0;
    /* This will be on the second row, aligning with date in right column */
}

/* Middle Column */
.meta-middle_news {
    align-self: start;
}

.event-date_news,
.event-time_news {
    margin: 0;
    line-height: 0.4;
    text-transform: lowercase;
    font-size: 3vw !important;
    color: #000;
    text-align: right;
    padding-right: calc(9 * var(--global-margin));
}

.event-date_news {
    margin-bottom: 0;
}

/* Date in middle column - keep right alignment */
.meta-middle_news .event-date_news {
    text-align: right;
}

.event-time_news {
    line-height: 0.4;
}

/* Right Column */
.meta-right_news {
    align-self: start;
    justify-self: end; /* push to far right */
    text-align: right; /* Right-aligned content within the right column */
    width: 100%;
    padding-left: 2vw; /* Gap between middle and right columns */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
}

/* Date in right column - adjust styling */
.meta-right_news .event-date_news {
    text-align: right;
    margin-top: 0;
    margin-bottom: 0;
    padding-right: calc(9 * var(--global-margin));
    line-height: 0.4; /* Match event-location_news line-height for alignment */
    /* Aligns with event-location which comes after event-type (line-height 1.5 creates the spacing) */
}

.event-price_news {
    font-size: 3vw;
    color: #555;
    text-align: left; /* Left-aligned within the right column */
    line-height: 1.5;
}

.event-ticket-button_news {
    text-align: left;
    margin-bottom: 10px;
    line-height: 1.2 !important;
    margin-top: -5px;
}

.ticket-button_news {
    display: inline-block;
    background-color: white;
    color: #000;
    border: 1px solid #000;
    padding: 2px 24px;
    text-decoration: none;
    border-radius: 10px;
    font-size: 20px;
    font-weight: 400 !important;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
    letter-spacing: 2px;
}

.ticket-button_news:hover {
    background-color: #000;
    color: white;
    text-decoration: none !important;
}

.ticket-button_news:visited {
    color: #000;
}

/* ============================================
   FILMSTRIP SECTION
   ============================================ */
.event-filmstrip_news {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    background: #ffffff;
    touch-action: pan-y;
}

.event-filmstrip_news .filmstrip-track_news {
    display: inline-flex;
    gap: 0; /* no separation between images */
    white-space: nowrap;
}

.event-filmstrip_news .filmstrip-image_news {
    display: block;
    height: 70vh; /* tall band; adjust if needed */
    width: auto;
    object-fit: contain; /* keep image proportion, no cropping */
    cursor: grab;
    -webkit-user-drag: none;
    user-select: none;
    box-sizing: border-box;
    border: 2px solid #fff;
    border-radius: 0px;
}

.event-filmstrip_news .filmstrip-image_news:active,
.event-filmstrip_news .dragging .filmstrip-image_news {
    cursor: grabbing;
}

/* Hide native scrollbar visually (keep accessible) */
.event-filmstrip_news::-webkit-scrollbar {
    height: 0px;
}

.event-filmstrip_news {
    scrollbar-width: none;
}

/* ============================================
   LONG DESCRIPTION SECTION
   ============================================ */
.event-long-description-section_news {
    padding-left: calc(2.5 * var(--global-margin));
    padding-right: calc(2.5 * var(--global-margin));
    padding-top: calc(10 * var(--global-margin));
    padding-bottom: calc(10 * var(--global-margin));
    background-color: white;
    border-bottom: 1px dotted #000;
}

.event-long-description_news {
    font-size: 28px;
    line-height: 1;
    color: #333;
    margin-left: calc(9 * var(--global-margin));
    margin-right: calc(9 * var(--global-margin));
}

/* Reduce padding on description section when no next events follow */
.event-long-description-section_news:not(:has(~ .half_container_news.bottom_half_news)) {
    padding-bottom: calc(3 * var(--global-margin)) !important;
}

.event-long-description-section_news:has(~ .half_container_news.bottom_half_news[style*="display: none"]) {
    padding-bottom: calc(3 * var(--global-margin)) !important;
}

/* ============================================
   BOTTOM HALF CONTAINER - Next Events
   ============================================ */

/* When description doesn't exist - apply same styling after filmstrip */
.event-filmstrip_news ~ .half_container_news.bottom_half_news {
    display: flex;
    flex-direction: row;
    gap: calc(1 * var(--global-margin));
    padding-left: calc(2 * var(--global-margin));
    padding-right: calc(2 * var(--global-margin));
    padding-bottom: calc(2 * var(--global-margin));
    padding-top: calc(2 * var(--global-margin)) !important;
    align-items: stretch;
    height: calc(0.45 * (100vh - (7 * var(--menu-margin))));
    position: relative;
    border-top: 1px dotted #000;
    margin-top: calc(10 * var(--global-margin));
}

/* When description exists - override border and margin with !important */
.event-long-description-section_news ~ .half_container_news.bottom_half_news {
    display: flex;
    flex-direction: row;
    gap: calc(1 * var(--global-margin));
    padding-left: calc(2 * var(--global-margin));
    padding-right: calc(2 * var(--global-margin));
    padding-bottom: calc(2 * var(--global-margin));
    padding-top: calc(2 * var(--global-margin)) !important;
    align-items: stretch;
    height: calc(0.45 * (100vh - (7 * var(--menu-margin))));
    position: relative;
    border-top: none !important;
    margin-top: 0 !important;
}

/* When both description and filmstrip don't exist - apply same styling after meta-grid */
.event-meta-grid_news ~ .half_container_news.bottom_half_news {
    display: flex;
    flex-direction: row;
    gap: calc(1 * var(--global-margin));
    padding-left: calc(2 * var(--global-margin));
    padding-right: calc(2 * var(--global-margin));
    padding-bottom: calc(2 * var(--global-margin));
    padding-top: calc(2 * var(--global-margin)) !important;
    align-items: stretch;
    height: calc(0.45 * (100vh - (7 * var(--menu-margin))));
    position: relative;
    border-top: 1px dotted #000;
    margin-top: calc(10 * var(--global-margin));
}

/* Hide empty bottom_half container on news pages */
.half_container_news.bottom_half_news:empty,
.half_container.bottom_half.half_container_news.bottom_half_news:empty {
    display: none !important;
}

/* Hide container if it has no event images */
.half_container_news.bottom_half_news:not(:has(.next-event-image_news)),
.half_container.bottom_half.half_container_news.bottom_half_news:not(:has(.next-event-image_news)) {
    display: none !important;
}

.half_container_news.bottom_half_news:not(:has(.next-event-image_news)):not(:empty),
.half_container.bottom_half.half_container_news.bottom_half_news:not(:has(.next-event-image_news)):not(:empty) {
    display: none !important;
}

/* Next Event Image Styling */
.event-long-description-section_news ~ .half_container_news.bottom_half_news .next-event-image_news,
.event-filmstrip_news ~ .half_container_news.bottom_half_news .next-event-image_news,
.event-meta-grid_news ~ .half_container_news.bottom_half_news .next-event-image_news {
    cursor: pointer;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 125% !important;
    position: relative;
    box-sizing: border-box;
    will-change: background-size;
    transition: background-size 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-right: 0;
}

.event-long-description-section_news ~ .half_container_news.bottom_half_news .next-event-image_news:hover,
.event-filmstrip_news ~ .half_container_news.bottom_half_news .next-event-image_news:hover,
.event-meta-grid_news ~ .half_container_news.bottom_half_news .next-event-image_news:hover {
    background-size: 128% !important;
}

/* Text overlay styling */
.event-long-description-section_news ~ .half_container_news.bottom_half_news .next-event-top_news,
.event-filmstrip_news ~ .half_container_news.bottom_half_news .next-event-top_news,
.event-meta-grid_news ~ .half_container_news.bottom_half_news .next-event-top_news {
    width: 100%;
    height: 20%;
    font-size: 16px;
    color: white;
    font-weight: 400;
    padding: calc(2 * var(--global-margin));
    padding-bottom: 0;
    box-sizing: border-box;
}

.event-long-description-section_news ~ .half_container_news.bottom_half_news .next-event-date_news,
.event-filmstrip_news ~ .half_container_news.bottom_half_news .next-event-date_news,
.event-meta-grid_news ~ .half_container_news.bottom_half_news .next-event-date_news {
    width: 30%;
    font-size: 18px;
    color: white;
    float: left;
    font-weight: 400;
    text-transform: lowercase;
}

.event-long-description-section_news ~ .half_container_news.bottom_half_news .next-event-type_news,
.event-filmstrip_news ~ .half_container_news.bottom_half_news .next-event-type_news,
.event-meta-grid_news ~ .half_container_news.bottom_half_news .next-event-type_news {
    margin-bottom: calc(-1.5 * var(--global-margin));
    width: 70%;
    font-size: 16px;
    color: white;
    float: right;
    text-align: right;
    font-weight: 400;
    text-transform: lowercase;
}

.event-long-description-section_news ~ .half_container_news.bottom_half_news .next-event-type_news .event-type-badge_news,
.event-filmstrip_news ~ .half_container_news.bottom_half_news .next-event-type_news .event-type-badge_news,
.event-meta-grid_news ~ .half_container_news.bottom_half_news .next-event-type_news .event-type-badge_news {
    color: #ffffff;
    border: .5px solid white;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 400;
    border-radius: 15px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.event-long-description-section_news ~ .half_container_news.bottom_half_news .next-event-type_news .event_button_news.tipo_home_news,
.event-filmstrip_news ~ .half_container_news.bottom_half_news .next-event-type_news .event_button_news.tipo_home_news,
.event-meta-grid_news ~ .half_container_news.bottom_half_news .next-event-type_news .event_button_news.tipo_home_news {
    background-color: transparent !important;
}

.event-long-description-section_news ~ .half_container_news.bottom_half_news .next-event-bottom_news,
.event-filmstrip_news ~ .half_container_news.bottom_half_news .next-event-bottom_news,
.event-meta-grid_news ~ .half_container_news.bottom_half_news .next-event-bottom_news {
    width: 100%;
    height: 80%;
    font-size: 3vw;
    color: white;
    font-weight: 500;
    position: relative;
    align-content: flex-end;
    text-transform: uppercase;
    line-height: 1.05;
    margin: 0;
    display: flex;
    align-items: flex-end;
    padding: calc(2 * var(--global-margin));
    padding-top: 0;
    box-sizing: border-box;
}

.event-long-description-section_news ~ .half_container_news.bottom_half_news .next-event-bottom_news > div,
.event-filmstrip_news ~ .half_container_news.bottom_half_news .next-event-bottom_news > div,
.event-meta-grid_news ~ .half_container_news.bottom_half_news .next-event-bottom_news > div {
    margin-bottom: calc(-0.7 * var(--global-margin));
}

/* ============================================
   ERROR MESSAGES
   ============================================ */
.error-message_news {
    text-align: center;
    padding: 100px 40px;
    color: #d32f2f;
}

.error-message_news h2 {
    font-size: 32px;
    margin-bottom: 20px;
}

.error-message_news p {
    font-size: 18px;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1024px) {
    .event-header_news {
        padding: 30px 40px;
    }

    .event-title_news {
        font-size: 60px;
    }

    .event-long-description-section_news {
        padding: 30px 40px;
    }
}

@media (max-width: 768px) {
    .event-header_news {
        padding: 20px 20px;
    }

    .event-title_news {
        font-size: 42px;
        margin-bottom: 20px;
        line-height: 1.1;
    }

    .event-meta-grid_news {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .meta-right_news {
        text-align: left;
        padding-left: calc(9 * var(--global-margin));
    }

    .event-date_news,
    .event-time_news {
        text-align: left;
    }

    .event-long-description-section_news {
        padding: 20px 20px;
    }

    .event-long-description_news {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .event-header_news {
        padding: 15px 15px;
    }

    .event-title_news {
        font-size: 36px;
    }

    .event-location_news {
        font-size: 18px;
    }

    .event-long-description-section_news {
        padding: 15px 15px;
    }
}