/*
 * TrueHandicap public competition browser
 * Version 1.5 - 8-Sep-2026
 * Promotes the responsive Events browser to production and removes its preview-status styling.
 * Version 1.4 - 8-Sep-2026
 * Aligns public event cards and search controls with the compact compmain Events presentation.
 * Version 1.3 - 8-Sep-2026
 * Standardises public Back and View controls with the established Events interface.
 * Version 1.2 - 8-Sep-2026
 * Responsive Events presentation with more compact event names.
 * Cache version is managed by $CSSVerComps in sharedheader.php.
 */

body {
    background: #f4f6f9;
}

#home > header {
    border-bottom: 1px solid #e2e7ef;
    background: #fff;
}

#home > header img {
    width: 145px !important;
    height: auto !important;
    max-height: 108px;
    object-fit: contain;
}

.thc-public-events,
.thc-public-events * {
    box-sizing: border-box;
}

.thc-public-events {
    width: min(100% - 32px, 1120px);
    margin: 0 auto;
    padding: 40px 0 64px;
    color: #172033;
    font-family: Arial, Helvetica, sans-serif;
}

.thc-public-events-hero {
    margin-bottom: 24px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.thc-public-events-kicker {
    margin: 0 0 6px;
    color: #2a419f;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.4;
    text-transform: uppercase;
}

.thc-public-events h1 {
    margin: 0;
    color: #172033;
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.08;
}

.thc-public-events-intro {
    max-width: 680px;
    margin: 10px 0 0;
    color: #5e687a;
    font-size: 16px;
    line-height: 1.55;
}

.thc-public-back-wrap { display: flex; align-items: center; }

.thc-events-toolbar {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.thc-events-heading {
    min-width: 0;
}

.thc-events-heading h2 {
    margin: 0;
    color: #172033;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
}

.thc-events-count {
    margin: 4px 0 0;
    color: #697386;
    font-size: 13px;
    line-height: 1.4;
}

.thc-events-filters {
    min-width: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 8px;
}

.thc-season-select-wrap {
	margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #566176;
    font-size: 12px;
    font-weight: 700;
}

.thc-season-select {
    min-width: 155px;
    height: 46px;
    padding: 9px 38px 9px 13px;
    border: 1px solid #c8cfdb;
    border-radius: 8px;
    color: #172033;
    font-size: 15px;
    font-weight: 700;
    background: #fff;
    outline: 0;
}

.thc-season-select:focus {
    border-color: #2a419f;
    box-shadow: 0 0 0 3px rgba(42, 65, 159, .13);
}

.thc-events-search-wrap {
    width: min(30vw, 310px);
	margin: 0;
    position: relative;
}

.thc-events-search-wrap::before {
    content: '\1F50D';
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #697386;
    font-size: 15px;
    pointer-events: none;
}

.thc-events-search {
    width: 100%;
    height: 46px;
    padding: 10px 14px 10px 40px;
    border: 1px solid #c8cfdb;
    border-radius: 8px;
    color: #172033;
    font-size: 15px;
    background: #fff;
    outline: 0;
}

.thc-events-search:focus {
    border-color: #2a419f;
    box-shadow: 0 0 0 3px rgba(42, 65, 159, .13);
}

.thc-events-search-button,
.thc-events-search-clear {
    height: 46px;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.thc-events-search-button {
	margin: 0 !important;
	align-self: flex-end;
    border: 1px solid #2a419f;
    color: #fff;
    background: #2a419f;
    cursor: pointer;
}

.thc-events-search-button:hover,
.thc-events-search-button:focus {
    border-color: #1e317e;
    background: #1e317e;
}

.thc-events-search-clear {
    border: 1px solid #c8cfdb;
    color: #2a419f;
    background: #fff;
}

.thc-event-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.thc-public-event-card {
    min-width: 0;
    min-height: 154px;
    padding: 15px 14px;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) 82px;
    grid-template-rows: 1fr auto;
    column-gap: 12px;
    align-items: center;
    border: 1px solid #d4d4d4;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .09);
}

.thc-public-event-date {
    grid-row: 1 / span 2;
    padding-right: 12px;
    overflow: hidden;
    align-self: center;
    border: 0;
    border-right: 1px solid #d9d9d9;
    border-radius: 0;
    color: #000;
    text-align: center;
}

.thc-public-event-month {
    width: 72px;
    padding: 3px 4px;
    display: block;
    color: #fff;
    border: 1px solid #d4d4d4;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    font-size: 13px;
    font-weight: 800;
    line-height: 18px;
    background: #333;
}

.thc-public-event-dow,
.thc-public-event-day,
.thc-public-event-year {
    width: 72px;
    display: block;
    border-right: 1px solid #d4d4d4;
    border-left: 1px solid #d4d4d4;
    background: #fff;
}

.thc-public-event-dow {
    padding-top: 5px;
    font-size: 12px;
    font-weight: 700;
    line-height: 14px;
}

.thc-public-event-day {
    padding: 0 3px;
    font-size: 30px;
    font-weight: 800;
    line-height: 31px;
}

.thc-public-event-year {
    padding: 0 3px 5px;
    border-bottom: 1px solid #d4d4d4;
    border-radius: 0 0 6px 6px;
    color: #000;
    font-size: 12px;
    font-weight: 700;
    line-height: 14px;
}

.thc-public-event-info {
    min-width: 0;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    text-align: left;
}

.thc-public-event-group {
    max-width: 100%;
    margin-bottom: 5px;
    display: inline-block;
    overflow: hidden;
    color: #9a5a00;
    font-size: 11px;
    font-weight: 800;
    line-height: 16px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.thc-public-event-title {
    margin: 0 0 6px;
    color: #000;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.thc-public-event-range {
    margin: 0 0 5px;
    color: #0046b7;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
}

.thc-public-event-rounds {
    margin-top: 3px;
    display: grid;
    gap: 3px;
}

.thc-public-event-round {
    padding: 0;
    color: #000;
    font-size: 13px;
    line-height: 1.55;
    background: transparent;
}

.thc-public-event-round strong {
    color: #000066;
}

.thc-public-event-format {
    display: inline-block;
    padding: 2px 7px;
    border: 1px solid #ccd3df;
    border-radius: 4px;
    color: #000;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}

.thc-public-event-separator { padding: 0 3px; color: #000; }
.thc-public-format-stableford { border-color: #abe5bf; color: #08713b; background: #d9f7e4; }
.thc-public-format-stroke { border-color: #b7c5e8; color: #000066; background: #e8edf7; }
.thc-public-format-scramble { border-color: #f1cfa3; color: #9a5a00; background: #fff0df; }
.thc-public-format-matchplay { border-color: #cbb8ff; color: #5b2380; background: #f3ecff; }
.thc-public-format-gross { border-color: #cfcfcf; color: #333; background: #f2f2f2; }
.thc-public-format-foursomes { border-color: #d6b8ff; color: #5b2380; background: #f3e8ff; }
.thc-public-format-greensomes { border-color: #b7e2bf; color: #08713b; background: #e4f8e7; }
.thc-public-format-betterball { border-color: #bfd0f1; color: #003c8f; background: #e7f0ff; }
.thc-public-format-default { border-color: #ccd3df; color: #000; background: #eef1f7; }

.thc-public-event-more {
    color: #697386;
    font-size: 11px;
    font-style: italic;
}

.thc-public-event-footer {
    display: contents;
}

.thc-public-event-stats {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.thc-public-event-stat {
    padding: 0;
    color: #000;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    background: transparent;
}

.thc-public-event-stat + .thc-public-event-stat::before {
    content: '•';
    padding-right: 6px;
    color: #000;
}

.thc-public-event-view {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: end;
    width: 100%;
    height: 31px;
    padding: 0 9px;
    border: 1px solid #000066;
    border-radius: 5px;
    color: #000066;
    font-size: 12px;
    font-weight: 400;
    line-height: 29px;
    background: #fff;
    cursor: pointer;
    white-space: nowrap;
}

.thc-public-event-view:hover,
.thc-public-event-view:focus {
    border-color: #000066;
    color: #fff;
    background: #000066;
}

.thc-events-empty,
.thc-events-search-empty {
    grid-column: 1 / -1;
    padding: 42px 24px;
    border: 1px solid #d6dce6;
    border-radius: 13px;
    color: #697386;
    font-size: 15px;
    line-height: 1.55;
    text-align: center;
    background: #fff;
}

.thc-events-search-empty {
    display: none;
}

.thc-events-pagination {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}

.thc-events-page,
.thc-events-page-gap {
    min-width: 40px;
    min-height: 40px;
    padding: 8px 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    color: #33405a;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
}

.thc-events-page {
    border: 1px solid #c8cfdb;
    background: #fff;
}

.thc-events-page:hover,
.thc-events-page:focus,
.thc-events-page-active {
    color: #fff;
    border-color: #2a419f;
    background: #2a419f;
}

.thc-events-page-disabled {
    color: #9ca4b3;
    pointer-events: none;
    background: #f0f2f5;
}

.thc-public-events-bottom {
    margin-top: 30px;
    text-align: center;
}

.thc-comps-environment {
    position: fixed;
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 2147483647;
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: .3px;
    white-space: nowrap;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .25);
    pointer-events: none;
}

.thc-comps-environment {
    right: max(12px, env(safe-area-inset-right));
    color: #fff;
}

.thc-comps-environment-test {
    background: #b66a0f;
}

.thc-comps-environment-dev {
    background: #7a1fa2;
}

@media (max-width: 860px) {
    .thc-events-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .thc-events-filters {
        justify-content: flex-start;
    }

    .thc-event-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    #home > header img {
        width: 116px !important;
        max-height: 92px;
    }

    .thc-public-events {
        width: calc(100% - 24px);
        padding: 28px 0 58px;
    }

    .thc-public-events-hero {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .thc-public-events-intro {
        font-size: 14px;
    }

    .thc-events-filters {
        align-items: stretch;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .thc-season-select-wrap {
        width: 100%;
    }

    .thc-season-select {
        width: 100%;
    }

    .thc-events-search-wrap {
        width: calc(100% - 86px);
        flex: 1 1 210px;
    }

    .thc-events-search-button {
        flex: 0 0 auto;
    }

    .thc-events-search-clear {
        flex: 0 0 auto;
    }

    .thc-public-event-card {
        padding: 15px;
        min-height: 0;
        grid-template-columns: 82px minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        column-gap: 12px;
    }

    .thc-public-event-title {
        font-size: 14px;
    }

    .thc-public-event-stats {
        grid-column: 2;
        grid-row: 2;
    }

    .thc-public-event-view {
        grid-column: 2;
        grid-row: 3;
        margin-top: 9px;
        width: auto;
        align-self: flex-end;
    }

    .thc-comps-environment {
        bottom: max(8px, env(safe-area-inset-bottom));
        padding: 7px 9px;
        border-radius: 6px;
        font-size: 10px;
        line-height: 14px;
        letter-spacing: 0;
    }

    .thc-comps-environment {
        right: max(8px, env(safe-area-inset-right));
    }
}