/* PCO Groups — uses TEC's own classes, minimal overrides only */

/* ── Filter Bar ─────────────────────────────────────────────────────────── */

.pco-groups-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    padding: 1rem 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--tec-color-border-default, #e0e0e0);
}

.pco-groups-filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 140px;
}

.pco-groups-filter-field label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tec-color-text-secondary, #5c5c5c);
}

.pco-groups-filter-field input,
.pco-groups-filter-field select {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--tec-color-border-default, #ccc);
    border-radius: 3px;
    font-size: 0.9rem;
    background: #fff;
    font-family: inherit;
}

.pco-groups-filter-actions {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    padding-bottom: 2px;
}

/* ── Loading State ──────────────────────────────────────────────────────── */

.pco-groups-results--loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s;
    position: relative;
    min-height: 4rem;
}

/* ── Self-contained event list (groups + registrations) ─────────────────── */
/*
 * Reproduces The Events Calendar's list-view look using TEC's own values, with
 * no dependency on its stylesheets. DEFAULT layout matches /events/: a small
 * date tag, then the event content with the PHOTO ON THE RIGHT and the text on
 * the left. On a narrow column (< 600px) the card stacks (photo on top). Colors
 * use TEC's CSS variables when present and fall back to the same literals.
 */

/*
 * Standalone wrapper: match The Events Calendar's centered container width
 * (--tec-grid-width = 1176px + 42px*2 = 1260px) so the list lines up with the
 * /events/ page, and clear the theme's fixed/overlay header the way the calendar
 * shortcode does. Scoped with :not(.tribe-common) so the /events/ injection
 * (which has .tribe-common and is already inside TEC's container) is unaffected.
 */
.pco-groups-events:not(.tribe-common),
.pco-registrations-events:not(.tribe-common) {
    max-width: var(--tec-grid-width, 1260px);
    margin-left: auto;
    margin-right: auto;
    padding-top: var(--pco-top-spacing, calc(var(--header-height, 80px) + 20px));
}

.pco-groups-event-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Month separator: "Month Year ───────────────" */
.pco-event-month-separator {
    display: flex;
    align-items: center;
    margin: 48px 0 20px;
}

.pco-event-month-separator:first-child {
    margin-top: 0;
}

.pco-event-month-separator h3 {
    display: flex;
    align-items: center;
    flex: 1;
    margin: 0;
}

.pco-event-month-separator-text {
    flex: none;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tec-color-text-secondary, #5d5d5d);
}

.pco-event-month-separator h3::after {
    content: "";
    flex: auto;
    height: 1px;
    margin-left: 20px;
    background-color: var(--tec-color-border-default, #d5d5d5);
}

/* Event row: small date tag + content (no separator border — TEC uses whitespace) */
.pco-event-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;
    margin: 48px 0 40px;
}

.pco-event-date-tag {
    flex: none;
    width: 11.111%;
    min-width: 90px;
    padding-top: 4px;
    text-align: center;
}

.pco-event-date-tag-weekday {
    display: block;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--tec-color-text-secondary, #5d5d5d);
}

.pco-event-date-tag-daynum {
    display: block;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.42;
    color: var(--tec-color-text-primary, #141827);
}

.pco-event-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}

/* Card: PHOTO ON THE RIGHT, text on the left (matches /events/) */
.pco-event-card {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 24px;
}

.pco-event-image-wrap {
    flex: none;
    width: 37.5%;
}

.pco-event-image {
    display: block;
    width: 100%;
    height: auto;
}

.pco-event-details {
    flex: 1 1 auto;
    min-width: 0;
}

.pco-event-header {
    display: flex;
    flex-direction: column;
}

.pco-event-datetime {
    font-size: 14px;
    line-height: 1.62;
    color: var(--tec-color-text-primary, #141827);
}

.pco-event-title {
    margin: 8px 0 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.42;
    color: var(--tec-color-text-primary, #141827);
}

.pco-event-title-link {
    color: inherit;
    text-decoration: none;
}

.pco-event-title-link:hover,
.pco-event-title-link:focus {
    text-decoration: underline;
}

.pco-event-venue {
    margin: 12px 0 0;
    font-style: normal;
    font-size: 14px;
    line-height: 1.62;
    color: var(--tec-color-text-secondary, #5d5d5d);
}

.pco-event-category {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.62;
    color: var(--tec-color-text-secondary, #5d5d5d);
}

.pco-event-description {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.62;
    color: var(--tec-color-text-primary, #141827);
}

.pco-event-empty {
    font-size: 16px;
    color: var(--tec-color-text-secondary, #5d5d5d);
}

/* Filter / Reset buttons (replaces tribe-common-c-btn) */
.pco-groups-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    border: 2px solid var(--tec-color-accent-primary, #334aff);
    border-radius: 4px;
    background: transparent;
    color: var(--tec-color-accent-primary, #334aff);
    font-size: 0.875rem;
    font-weight: 700;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, opacity 0.15s;
}

.pco-groups-btn:hover {
    background: var(--tec-color-accent-primary, #334aff);
    color: #fff;
}

.pco-groups-btn--alt {
    background: var(--tec-color-accent-primary, #334aff);
    color: #fff;
}

.pco-groups-btn--alt:hover {
    opacity: 0.85;
    color: #fff;
}

/* Phone screens only: stack the card — photo on top, smaller type. Viewport-based
   so it affects genuinely small screens but NOT the narrow content column the
   /events/ list sits in (which must still show photo-on-the-right). */
@media ( max-width: 480px ) {
    .pco-event-row {
        gap: 16px;
        margin: 24px 0;
    }

    .pco-event-date-tag {
        width: 54px;
        min-width: 0;
    }

    .pco-event-date-tag-daynum {
        font-size: 18px;
    }

    .pco-event-card {
        flex-direction: column;
        gap: 0;
    }

    .pco-event-image-wrap {
        width: 100%;
        margin-bottom: 16px;
    }

    .pco-event-datetime {
        font-size: 12px;
        line-height: 1.38;
    }

    .pco-event-title {
        font-size: 16px;
        line-height: 1.5;
    }

    .pco-event-venue,
    .pco-event-category,
    .pco-event-description {
        font-size: 12px;
        line-height: 1.38;
    }
}

/* ── Sign Up button ─────────────────────────────────────────────────────── */

.pco-groups-signup-wrap {
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
}

.pco-groups-signup-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.5rem;
    background: var(--tec-color-accent-primary, #334aff);
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s;
    line-height: 1;
}

.pco-groups-signup-link:hover,
.pco-groups-signup-link:focus {
    opacity: 0.85;
    color: #fff;
    text-decoration: none;
}

/* ── Group / Type badges ─────────────────────────────────────────────────── */

.pco-groups-group-name,
.pco-groups-group-type {
    display: inline-block;
    margin-right: 0.5rem;
}

.pco-groups-group-name::after {
    content: '·';
    margin-left: 0.5rem;
    color: var(--tec-color-text-secondary, #5c5c5c);
}

.pco-groups-group-name:last-child::after {
    content: '';
    margin-left: 0;
}

/* ── Pagination ─────────────────────────────────────────────────────────── */

.pco-groups-pagination {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 0;
}

.pco-groups-nav-btn {
    background: transparent;
    border: 2px solid var(--tec-color-accent-primary, #334aff);
    color: var(--tec-color-accent-primary, #334aff);
    padding: 0.4rem 1rem;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.875rem;
    font-family: inherit;
    font-weight: 700;
    transition: background-color 0.15s, color 0.15s;
}

.pco-groups-nav-btn:hover {
    background-color: var(--tec-color-accent-primary, #334aff);
    color: #fff;
}

.pco-groups-page-info {
    color: var(--tec-color-text-secondary, #5c5c5c);
    font-size: 0.875rem;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media ( max-width: 600px ) {
    .pco-groups-filter-bar {
        flex-direction: column;
    }

    .pco-groups-filter-field {
        min-width: 100%;
    }
}

/* ── Events Page Section ────────────────────────────────────────────────── */

.pco-groups-events-page-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--tec-color-border-default, #e0e0e0);
}

.pco-groups-section-heading {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--tec-color-text-primary, #141827);
}

/* Registration Closed label */
.pco-reg-closed-label {
    display: inline-block;
    padding: 0.3rem 0.9rem;
    border: 2px solid #999;
    border-radius: 3px;
    color: #999;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: inherit;
}

/* ── Loading spinner ─────────────────────────────────────────────────────── */

.pco-groups-results--loading::after {
    content: '';
    position: absolute;
    top: 2rem;
    left: 50%;
    width: 2rem;
    height: 2rem;
    margin-left: -1rem;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--tec-color-accent-primary, #334aff);
    border-radius: 50%;
    animation: pco-spin 0.6s linear infinite;
    pointer-events: none;
}

@keyframes pco-spin {
    to { transform: rotate(360deg); }
}

/* ── Add to Calendar ─────────────────────────────────────────────────────── */

.pco-cal-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

.pco-cal-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tec-color-text-secondary, #5c5c5c);
    white-space: nowrap;
}

.pco-cal-links {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.pco-cal-link {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--tec-color-border-default, #ccc);
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--tec-color-text-secondary, #5c5c5c);
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.pco-cal-link:hover {
    border-color: var(--tec-color-accent-primary, #334aff);
    color: var(--tec-color-accent-primary, #334aff);
    text-decoration: none;
}

/* ── Calendar Shortcode ────────────────────────────────────────────────────── */

.pco-calendar-wrap {
    font-family: inherit;
    padding-top: var(--pco-top-spacing, calc(var(--header-height, 80px) + 20px));
}

.pco-cal-view-toggle {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--tec-color-border-default, #e0e0e0);
}

.pco-cal-toggle-btn {
    background: transparent;
    border: 2px solid var(--tec-color-border-default, #ccc);
    color: var(--tec-color-text-secondary, #5c5c5c);
    padding: 0.35rem 1rem;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.875rem;
    font-family: inherit;
    font-weight: 600;
    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}

.pco-cal-toggle-btn.is-active {
    border-color: var(--tec-color-accent-primary, #334aff);
    color: var(--tec-color-accent-primary, #334aff);
    background: rgba(51, 74, 255, 0.06);
}

.pco-cal-view.is-hidden {
    display: none;
}

/* Month nav */
.pco-cal-month-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
}

.pco-cal-nav-btn {
    background: transparent;
    border: 2px solid var(--tec-color-accent-primary, #334aff);
    color: var(--tec-color-accent-primary, #334aff);
    padding: 0.3rem 0.9rem;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.8rem;
    font-family: inherit;
    font-weight: 700;
    transition: background-color 0.15s, color 0.15s;
}

.pco-cal-nav-btn:hover {
    background-color: var(--tec-color-accent-primary, #334aff);
    color: #fff;
}

.pco-cal-nav-btn:disabled {
    border-color: var(--tec-color-border-default, #ccc);
    color: var(--tec-color-border-default, #ccc);
    cursor: default;
}

.pco-cal-nav-btn:disabled:hover {
    background: transparent;
    color: var(--tec-color-border-default, #ccc);
}

/* Months */
.pco-calendar-months {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.pco-calendar-month {
    flex: 1;
    min-width: 280px;
}

.pco-calendar-month-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: var(--tec-color-text-primary, #141827);
}

.pco-calendar-grid {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.pco-calendar-grid thead th {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tec-color-text-secondary, #5c5c5c);
    padding: 0.25rem 0;
    text-align: center;
}

.pco-cal-day,
.pco-cal-empty {
    padding: 0.35rem 0.25rem;
    text-align: center;
    vertical-align: top;
    border-radius: 4px;
}

.pco-cal-day-num {
    display: block;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--tec-color-text-primary, #141827);
}

.pco-cal-day--today .pco-cal-day-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--tec-color-accent-primary, #334aff);
    color: #fff;
    font-weight: 700;
}

.pco-cal-day--has-events {
    cursor: pointer;
}

.pco-cal-day--has-events:hover {
    background: var(--tec-color-background-secondary, #f0f0f1);
}

.pco-cal-dots {
    display: flex;
    justify-content: center;
    gap: 3px;
    margin-top: 3px;
}

.pco-cal-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pco-cal-dot--group {
    background: var(--tec-color-accent-primary, #334aff);
}

.pco-cal-dot--registration {
    background: #e05252;
}

/* Legend */
.pco-cal-legend {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--tec-color-text-secondary, #5c5c5c);
    flex-wrap: wrap;
}

.pco-cal-legend-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Events Panel */
.pco-cal-panel {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--tec-color-background-secondary, #f8f8f8);
    border-radius: 4px;
    border-left: 3px solid var(--tec-color-accent-primary, #334aff);
}

.pco-cal-panel-date {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    color: var(--tec-color-text-primary, #141827);
}

.pco-cal-panel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pco-cal-panel-item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.pco-cal-panel-item-name {
    flex: 1;
}

.pco-cal-panel-item-name a {
    color: var(--tec-color-accent-primary, #334aff);
    text-decoration: none;
}

.pco-cal-panel-item-name a:hover {
    text-decoration: underline;
}

.pco-cal-panel-item-time {
    color: var(--tec-color-text-secondary, #5c5c5c);
    font-size: 0.8rem;
    white-space: nowrap;
}

/* List View */
.pco-cal-list-month {
    font-size: 1rem;
    font-weight: 700;
    margin: 1.5rem 0 0.75rem;
    color: var(--tec-color-text-primary, #141827);
    padding-bottom: 0.25rem;
    border-bottom: 2px solid var(--tec-color-border-default, #e0e0e0);
}

.pco-cal-list-month:first-child {
    margin-top: 0;
}

.pco-cal-list-event {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--tec-color-border-default, #eee);
    font-size: 0.875rem;
}

.pco-cal-list-event::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    align-self: center;
}

.pco-cal-list-event--group::before {
    background: var(--tec-color-accent-primary, #334aff);
}

.pco-cal-list-event--registration::before {
    background: #e05252;
}

.pco-cal-list-date {
    white-space: nowrap;
    min-width: 6rem;
    color: var(--tec-color-text-secondary, #5c5c5c);
    font-size: 0.8rem;
}

.pco-cal-list-name {
    flex: 1;
    font-weight: 600;
}

.pco-cal-list-name a {
    color: var(--tec-color-text-primary, #141827);
    text-decoration: none;
}

.pco-cal-list-name a:hover {
    color: var(--tec-color-accent-primary, #334aff);
}

.pco-cal-list-time {
    white-space: nowrap;
    color: var(--tec-color-text-secondary, #5c5c5c);
    font-size: 0.8rem;
}

@media ( max-width: 600px ) {
    .pco-calendar-months {
        flex-direction: column;
    }
    .pco-cal-list-event {
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    .pco-cal-list-date {
        min-width: auto;
    }
}

/* ── Learn More link ──────────────────────────────────────────────────────── */

.pco-learn-more {
    margin-left: 0.35rem;
    font-weight: 600;
    color: var(--tec-color-accent-primary, #334aff);
    text-decoration: none;
    white-space: nowrap;
}

.pco-learn-more:hover {
    text-decoration: underline;
}