/* =============================================================
   1. LAYOUT GRID
   Two-column layout for the events page (controls + map + list).
   Note: .layout-container is also used in tour-styles.css with
   different rules (flex-based) for the tour page.
   ============================================================= */

.page-events .layout-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

@media (max-width: 1024px) {
    .page-events .layout-container {
        grid-template-columns: 1fr;
    }
}


/* =============================================================
   2. CONTROLS PANEL
   Filter buttons, date range inputs, search bar, filter checkboxes
   ============================================================= */

.controls {
    background: white;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    grid-column: 1 / -1;
}

.button-group {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}

.date-inputs {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    gap: 10px;
    align-items: center;
}

.search-controls {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
}

.search-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

#searchInput {
    flex: 1;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 4px;
}

.filter-row {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-row label {
    display: flex;
    align-items: center;
    gap: 5px;
}


/* =============================================================
   3. EVENTS LIST
   ============================================================= */

.events-list {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-height: 600px;
    overflow-y: auto;
}


/* =============================================================
   4. INFO BANNER TABS
   ============================================================= */

.info-banner-tabs {
    background: white;
    border-radius: 8px;
    margin-top: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.info-banner-tabs-header {
    padding: 15px 20px;
    background: linear-gradient(135deg, #4CAF50 0%, #66bb6a 100%);
    color: white;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.tab-content-area {
    padding: 20px;
    border: 2px solid #4CAF50;
    border-top: none;
    background-color: #f9f9f9;
    animation: slideDown 0.3s ease-out;
}

.tab-content-area p {
    margin: 0 0 15px 0;
    line-height: 1.6;
    color: #333;
}

.tab-content-area p:last-child {
    margin-bottom: 0;
}


/* =============================================================
   5. BADGES
   ============================================================= */

.touring-badge {
    background-color: #ff9800;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8em;
    margin-right: 5px;
    display: inline-block;
}

/* Wider event (festival/fringe) badge — links to festival page */
.event-wider-event-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.78em;
    font-weight: 600;
    text-decoration: none;
    background: #1b5e20;
    color: white !important;
    margin-left: 4px;
    vertical-align: middle;
    transition: background 0.15s;
}

.event-wider-event-badge:hover {
    background: #2e7d32;
    text-decoration: none;
}


/* =============================================================
   6. EVENT DISPLAY UTILITIES
   Classes that replace inline styles set by event_display.js
   ============================================================= */

   /* Story club name link — inherits text colour, subtle underline dotted */
.event-storyclub-name-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
}

/* Club info icon link (ⓘ button to club detail page) */
.event-club-info-link {
    display: inline-block;
    margin-left: 7px;
    vertical-align: middle;
    text-decoration: none;
}

/* Club info icon — sized and aligned inside the info link */
.event-club-info-icon {
    width: 17px;
    height: 17px;
    vertical-align: middle;
}

/* Flex row of expand buttons (More info / Flyer / Bio) */
.expand-button-row {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

/* Performer name line */
.event-performer {
    font-style: italic;
}

/* Performer link inside the performer line */
.event-performer-link {
    color: inherit;
    text-decoration: none;
}

/* Top margin on 2nd, 3rd… flyer images in the flyer expandable */
.event-flyer-subsequent {
    margin-top: 15px;
}

/* Video trailer embed (responsive 16:9), shown in the "Video" expandable */
.event-video-wrapper {
    position: relative;
    width: 100%;
    max-width: 480px;
    padding-bottom: 56.25%; /* 16:9 */
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.event-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Facebook event inline icon — sized and blue on event cards */
.page-events .event-facebook-inline {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    text-decoration: none !important;
    border: none !important;
    border-bottom: none !important;
}

.page-events .event-facebook-inline svg {
    width: 20px;
    height: 20px;
    fill: #1877f2;
    transition: fill 0.3s;
}

.page-events .event-facebook-inline:hover svg {
    fill: #145dbf;
}

/* =============================================================
   7. SHARE BAR
   The pin-map / copy-link bar below the main controls
   ============================================================= */

.share-bar {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.share-bar-pin-label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.share-bar-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Colour overrides for specific buttons in the event guide */
.btn-search-upcoming {
    background-color: #2e7d32;
}

.btn-copy-link {
    background-color: #2196F3;
}


/* =============================================================
   8. RESPONSIVE
   ============================================================= */

@media (max-width: 768px) {
    .button-group {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .date-inputs {
        grid-template-columns: auto 1fr;
        gap: 8px;
    }
}


/* =============================================================
   9. NEW EVENTS COLLAPSIBLE PANEL
   Shows records that have a date_added field within the chosen
   lookback period (this week / last 2 weeks / last month).
   ============================================================= */

.new-events-panel {
    background: white;
    border-radius: 8px;
    margin-bottom: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.new-events-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #1565c0 0%, #1976d2 100%);
    color: white;
    cursor: pointer;
    user-select: none;
    list-style: none;   /* remove default triangle in Firefox */
    font-weight: 600;
    font-size: 1rem;
}

/* Remove default disclosure triangle in WebKit */
.new-events-summary::-webkit-details-marker {
    display: none;
}

/* Custom chevron via ::after */
.new-events-summary::after {
    content: '▸';
    margin-left: auto;
    transition: transform 0.25s ease;
    font-size: 0.9em;
}

.new-events-panel[open] > .new-events-summary::after {
    transform: rotate(90deg);
}

.new-events-label {
    flex: 0 0 auto;
}

.new-events-counts {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-left: 4px;
}

.nec-chip {
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 10px;
    padding: 1px 9px;
    font-size: 0.78em;
    font-weight: 600;
    white-space: nowrap;
    color: white;
    /* reset button defaults */
    font-family: inherit;
    cursor: pointer;
    line-height: inherit;
    transition: background 0.15s, border-color 0.15s;
}

.nec-chip:hover,
.nec-chip:focus-visible {
    background: rgba(255,255,255,0.32);
    border-color: rgba(255,255,255,0.75);
    outline: none;
}

.nec-sep {
    opacity: 0.55;
    font-size: 0.85em;
}

/* Body shown when panel is open */
.new-events-body {
    padding: 16px 20px 20px;
    border-top: 3px solid #1565c0;
    animation: slideDown 0.2s ease-out;
}

/* Period-selector buttons */
.new-events-controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.new-events-btn {
    background: #e3f2fd;
    color: #1565c0;
    border: 2px solid #90caf9;
    border-radius: 4px;
    padding: 7px 14px;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-weight: 500;
}

.new-events-btn:hover {
    background: #bbdefb;
    border-color: #1976d2;
}

.new-events-btn.active {
    background: #1565c0;
    color: white;
    border-color: #0d47a1;
}

/* Results list */
.new-events-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.new-events-placeholder {
    color: #777;
    font-style: italic;
    font-size: 0.9rem;
    padding: 8px 0;
}

/* Individual event card */
.new-event-card {
    background: #f5f9ff;
    border: 1px solid #bbdefb;
    border-left: 4px solid #1976d2;
    border-radius: 6px;
    padding: 10px 14px;
    min-width: 220px;
    flex: 1 1 220px;
    max-width: 360px;
}

/* Full-card variant: wider to accommodate the full event card layout */
.new-event-card.new-event-card-full {
    max-width: 480px;
    padding: 0;
    overflow: hidden;
}

/* "Added" banner at the top of each full card */
.new-event-added-banner {
    background: #1565c0;
    color: white;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 12px;
}

/* The inner .event div already has its own styling from shared-styles.css;
   remove its outer box-shadow/border-radius since the shell provides that */
.new-event-card.new-event-card-full > .event {
    border-radius: 0;
    box-shadow: none;
    background: #5fa0d6;
    margin: 0;
}

.new-event-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}

.new-event-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1a1a1a;
}

.new-event-type-badge {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #90caf9;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.73em;
    font-weight: 600;
    white-space: nowrap;
}

.new-event-added {
    font-size: 0.78rem;
    color: #888;
    margin-bottom: 3px;
}

.new-event-date {
    font-size: 0.85rem;
    color: #333;
    margin-bottom: 2px;
}

.new-event-location {
    font-size: 0.82rem;
    color: #555;
    font-style: italic;
}

@media (max-width: 600px) {
    .new-events-controls {
        flex-direction: column;
        gap: 8px;
    }

    .new-event-card {
        max-width: 100%;
    }
}