/**
 * Wilde Heimat Events — Front-end sort/filter controls.
 * Loaded when [wh_events_controls] or [wh_events_header] shortcode is on the page.
 */

.wh_events-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    padding: 16px 20px;
    background: #ffffff;
    border-radius: 12px;

    margin-bottom: 24px;
}

.wh_events-controls__label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wh_events-controls__label-text {
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6C6F85;
}

.wh_events-controls__select {
    padding: 8px 14px;
    border-radius: 8px;
    border: 2px solid #e0e0e0;
    font-family: inherit;
    font-size: 14px;
    color: #2B2D42;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236C6F85' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.wh_events-controls__select:hover,
.wh_events-controls__select:focus {
    border-color: #40916C;
    outline: none;
}

.wh_events-controls__reset {
    padding: 8px 16px;
    border-radius: 8px;
    background: #f0f0f0;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    color: #666;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    line-height: 1.5;
}

.wh_events-controls__reset:hover {
    background: #e0e0e0;
    color: #333;
}

/* ── Row / Column grid ── */

.wh_events-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
}

.wh_events-header {
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6C6F85;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 12px;
    margin-bottom: 0;
}

/* Flex proportion utilities — scoped under .wh_events-grid for loop items */
.wh_events-header .wh_events-col,
.wh_events-grid .wh_events-col {
    min-width: 0;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Ensure ellipsis works through Elementor's nested wrappers.
 * Also keep empty widgets visible so columns don't collapse.
 */
.wh_events-grid .wh_events-col * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wh_events-header .wh_events-col-1,
.wh_events-grid .wh_events-col-1 { flex: 1 1 0%; }
.wh_events-header .wh_events-col-2,
.wh_events-grid .wh_events-col-2 { flex: 2 1 0%; }
.wh_events-header .wh_events-col-3,
.wh_events-grid .wh_events-col-3 { flex: 3 1 0%; }
.wh_events-header .wh_events-col-4,
.wh_events-grid .wh_events-col-4 { flex: 4 1 0%; }
.wh_events-header .wh_events-col-5,
.wh_events-grid .wh_events-col-5 { flex: 5 1 0%; }
.wh_events-header .wh_events-col-6,
.wh_events-grid .wh_events-col-6 { flex: 6 1 0%; }

/*
 * Elementor Loop Grid: each loop item container must also be a flex row.
 * Scoped to .wh_events-grid — add this CSS class to the Loop Grid widget
 * in Elementor (Advanced > CSS Classes).
 */
.wh_events-grid .e-loop-item .elementor-widget-wrap,
.wh_events-grid .e-loop-item > .elementor-section-wrap > .elementor-section > .elementor-container,
.wh_events-grid .e-loop-item > .e-con {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
}

/* Prevent empty widgets from collapsing — keeps columns aligned */
.wh_events-grid .e-loop-item .elementor-widget {
    flex-shrink: 0;
}
.wh_events-grid .e-loop-item .elementor-widget:empty,
.wh_events-grid .e-loop-item .elementor-widget-wrap > .elementor-widget {
    min-height: 1em;
}

/* Alternate row shading */
.wh_events-grid .e-loop-item:nth-child(even) {
    background: #f9f9f9;
}

/* ── Responsive — Tablet (≤1024px) ── */
@media (max-width: 1024px) {
    .wh_events-header .wh_events-hide-tablet,
    .wh_events-grid .wh_events-hide-tablet {
        display: none !important;
    }

    /*
     * Switch loop item to CSS grid with 2 rows on tablet.
     * Row 1: date/time columns (wh_events-col-1..6)
     * Row 2: secondary columns spanning full width (name, provider)
     *
     * Add wh_events-col-secondary to name/provider widgets in Elementor.
     */
    .wh_events-grid .e-loop-item .elementor-widget-wrap,
    .wh_events-grid .e-loop-item > .e-con {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto auto;
        gap: 4px 12px;
        padding: 10px 20px;
    }

    /* Date/time cols sit in row 1, one per grid column */
    .wh_events-grid .wh_events-col {
        grid-row: 1;
    }

    /* Secondary cols span full width in row 2, smaller font.
     * Use wh_events-col-secondary on both name and provider.
     * Use wh_events-col-secondary-1 on name (left half),
     *     wh_events-col-secondary-2 on provider (right half).
     * Or just wh_events-col-secondary alone to span full width.
     */
    .wh_events-grid .wh_events-col-secondary {
        grid-row: 2;
        grid-column: 1 / -1;
        font-size: 0.85em;
        color: #666;
        flex: none !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .wh_events-grid .wh_events-col-secondary-1 {
        grid-row: 2;
        grid-column: 1 / 3;
        font-size: 0.85em;
        color: #666;
        flex: none !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .wh_events-grid .wh_events-col-secondary-2 {
        grid-row: 2;
        grid-column: 3 / -1;
        font-size: 0.85em;
        color: #666;
        flex: none !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ── Responsive — Phone (≤600px) ── */
@media (max-width: 600px) {
    .wh_events-header .wh_events-hide-phone,
    .wh_events-grid .wh_events-hide-phone {
        display: none !important;
    }

    .wh_events-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .wh_events-controls__select {
        width: 100%;
    }

    .wh_events-controls__reset {
        text-align: center;
        justify-content: center;
    }

    .wh_events-row,
    .wh_events-grid .e-loop-item .elementor-widget-wrap,
    .wh_events-grid .e-loop-item > .e-con {
        flex-direction: column;
        align-items: stretch;
    }

    .wh_events-header {
        display: none;
    }
}