/* TS Event Calendar – Public Styles
   Author: Philipp Avenell | Version: 1.0
   Design: matches tempo-sport.ch – clean white, bold black headings, orange accent #e8401c
   Divi breakpoints: desktop >980px, tablet 768–980px, mobile <768px
   =========================================================== */

:root {
    --tsec-accent:     #e8401c;
    --tsec-accent-hov: #c73314;
    --tsec-muted:      #666;
    --tsec-border:     #e0e0e0;
    --tsec-bg:         #f5f5f5;
    --tsec-card-bg:    #fff;
    --tsec-radius:     8px;
    --tsec-btn-radius: 4px;
    --tsec-max-width:  1200px;
    --tsec-transition: 0.2s ease;
}

/* ── Single Event wrapper ─────────────────────────────────── */

.tsec-single-event {
    font-family: inherit;
    font-size:   inherit;
    color:       inherit;
    line-height: inherit;
    /* Needed so the hero image negative-margin escape works */
    overflow-x:  hidden;
}

.tsec-single-inner {
    max-width: min(var(--tsec-max-width), 90%);
    margin:    0 auto;
    padding:   0 0 60px;
}

/* ── Hero Thumbnail — true 100vw breakout from any theme container ── */

.tsec-hero-image {
    /* Escape the theme content wrapper using viewport units */
    position:        relative;
    left:            50%;
    right:           50%;
    margin-left:     -50vw;
    margin-right:    -50vw;
    width:           100vw;

    height:          400px;
    max-height:      400px;
    overflow:        hidden;
    margin-bottom:   36px;
    background:      #f0f0f0;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.tsec-hero-image img {
    width:           100%;
    height:          400px;
    max-height:      400px;
    object-fit:      cover;
    object-position: center center;
    display:         block;
}

/* ── Category badges ─────────────────────────────────────── */

.tsec-category-badges {
    display:       flex;
    flex-wrap:     wrap;
    gap:           8px;
    margin-bottom: 14px;
}

.tsec-cat-badge {
    display:         inline-block;
    background:      var(--tsec-accent);
    color:           #fff;
    font-family:     inherit;
    font-size:       0.72em;
    font-weight:     600;
    letter-spacing:  0.06em;
    text-transform:  uppercase;
    text-decoration: none;
    padding:         4px 10px;
    border-radius:   3px;
    transition:      background var(--tsec-transition);
}
.tsec-cat-badge:hover {
    background: var(--tsec-accent-hov);
    color:      #fff;
}

/* ── Event title ─────────────────────────────────────────── */

.tsec-event-title {
    font-family:    inherit;
    font-size:      50px;          /* desktop */
    font-weight:    800;
    line-height:    1.1;
    letter-spacing: -0.01em;
    color:          inherit;
    text-transform: uppercase;
    margin:         0 0 18px;
}

/* ── Date / location meta row ────────────────────────────── */

.tsec-event-meta {
    display:        block;
    margin-bottom:  28px;
    padding-bottom: 20px;
    border-bottom:  1px solid var(--tsec-border);
    font-family:    inherit;
    font-size:      0.88em;
    color:          var(--tsec-muted);
}

.tsec-meta-item,
.tsec-meta-date-wrap {
    display:     flex;
    align-items: flex-start;
    gap:         6px;
    margin-bottom: 6px;
}

.tsec-meta-date-line {
    display:     flex;
    align-items: center;
    gap:         6px;
}

.tsec-meta-item svg {
    flex-shrink: 0;
    opacity:     0.7;
    margin-top:  2px;
}

/* ── Description ─────────────────────────────────────────── */

.tsec-event-description {
    font-family:   inherit;
    font-size:     inherit;
    line-height:   inherit;
    color:         inherit;
    margin-bottom: 48px;
}

.tsec-event-description p          { margin-bottom: 1.2em; }
.tsec-event-description h2,
.tsec-event-description h3         { margin: 2em 0 0.6em; }
.tsec-event-description ul         { list-style: disc outside; padding-left: 1.8em; margin-bottom: 1.2em; }
.tsec-event-description ol         { list-style: decimal outside; padding-left: 1.8em; margin-bottom: 1.2em; }
.tsec-event-description ul ul      { list-style: circle outside; margin-bottom: 0; }
.tsec-event-description ul ul ul   { list-style: square outside; }
.tsec-event-description li         { display: list-item; margin-bottom: 0.4em; }

/* ── Registration Form ───────────────────────────────────── */

.tsec-registration-form-wrap {
    background:    var(--tsec-bg);
    border-radius: var(--tsec-radius);
    padding:       40px 36px;
    margin-top:    48px;
    margin-left:   0;
    margin-right:  auto;
    font-family:   inherit;
    max-width:     700px;
}

.tsec-form-title {
    font-family:    inherit;
    font-size:      1.4em;
    font-weight:    700;
    color:          inherit;
    margin:         0 0 28px;
    border-bottom:  3px solid var(--tsec-accent);
    padding-bottom: 10px;
}

.tsec-form-messages {
    border-radius: var(--tsec-radius);
    padding:       14px 18px;
    margin-bottom: 24px;
    font-family:   inherit;
    font-size:     0.92em;
    line-height:   1.5;
}
.tsec-form-messages.tsec-success {
    background: #d4edda;
    color:      #155724;
    border:     1px solid #c3e6cb;
}
.tsec-form-messages.tsec-error {
    background: #f8d7da;
    color:      #721c24;
    border:     1px solid #f5c6cb;
}

.tsec-field {
    margin-bottom: 20px;
}

.tsec-label {
    display:       block;
    font-family:   inherit;
    font-size:     0.9em;
    font-weight:   600;
    color:         inherit;
    margin-bottom: 7px;
}

.tsec-required {
    color:       var(--tsec-accent);
    margin-left: 2px;
}

.tsec-form input[type="text"],
.tsec-form input[type="email"],
.tsec-form select,
.tsec-form textarea {
    display:       block;
    width:         100%;
    padding:       10px 14px;
    border:        1.5px solid var(--tsec-border);
    border-radius: var(--tsec-btn-radius);
    background:    #fff;
    font-family:   inherit;
    font-size:     0.95em;
    color:         inherit;
    transition:    border-color var(--tsec-transition), box-shadow var(--tsec-transition);
    box-sizing:    border-box;
}

.tsec-form input:focus,
.tsec-form select:focus,
.tsec-form textarea:focus {
    outline:      none;
    border-color: var(--tsec-accent);
    box-shadow:   0 0 0 3px rgba(232,64,28,0.12);
}

.tsec-form select {
    appearance:          none;
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 14px center;
    padding-right:       38px;
}

.tsec-form textarea {
    resize:     vertical;
    min-height: 120px;
}

.tsec-field-type-radio fieldset {
    border:  none;
    padding: 0;
    margin:  0;
}

.tsec-radio-label {
    display:       flex;
    align-items:   center;
    gap:           8px;
    font-family:   inherit;
    font-size:     0.93em;
    cursor:        pointer;
    margin-bottom: 8px;
}

.tsec-radio-label input[type="radio"] {
    accent-color: var(--tsec-accent);
    width:        18px;
    height:       18px;
    flex-shrink:  0;
}

.tsec-form-footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             16px;
    margin-top:      24px;
    padding-top:     20px;
    border-top:      1px solid var(--tsec-border);
}

.tsec-required-note {
    font-family: inherit;
    font-size:   0.82em;
    color:       var(--tsec-muted);
    margin:      0;
}

.tsec-submit-btn {
    display:        inline-block;
    background:     var(--tsec-accent);
    color:          #fff;
    font-family:    inherit;
    font-size:      0.95em;
    font-weight:    700;
    padding:        13px 30px;
    border:         none;
    border-radius:  var(--tsec-btn-radius);
    cursor:         pointer;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition:     background var(--tsec-transition), transform var(--tsec-transition);
}

.tsec-submit-btn:hover:not(:disabled) {
    background: var(--tsec-accent-hov);
    transform:  translateY(-1px);
}

.tsec-submit-btn:disabled {
    opacity: 0.65;
    cursor:  not-allowed;
}

/* ── Event List / Grid ───────────────────────────────────── */

.tsec-events-wrap {
    font-family: inherit;
    color:       inherit;
}

.tsec-cat-filter {
    display:       flex;
    flex-wrap:     wrap;
    gap:           8px;
    margin-bottom: 32px;
}

.tsec-filter-btn {
    display:          inline-block;
    padding:          8px 18px;
    border:           1.5px solid var(--tsec-border);
    border-radius:    40px;
    background:       transparent;
    font-family:      inherit;
    font-size:        0.85em;
    font-weight:      600;
    color:            inherit;
    text-decoration:  none;
    cursor:           pointer;
    transition:       all var(--tsec-transition);
    white-space:      nowrap;
    -webkit-appearance: none;
}

.tsec-filter-btn:hover,
.tsec-filter-btn.active {
    background:   var(--tsec-accent);
    border-color: var(--tsec-accent);
    color:        #fff;
}

.tsec-events-grid {
    display:               grid;
    gap:                   28px;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom:         40px;
}

.tsec-cols-1 { grid-template-columns: 1fr; }
.tsec-cols-2 { grid-template-columns: repeat(2, 1fr); }
.tsec-cols-3 { grid-template-columns: repeat(3, 1fr); }
.tsec-cols-4 { grid-template-columns: repeat(4, 1fr); }

.tsec-event-card {
    background:    var(--tsec-card-bg);
    border-radius: var(--tsec-radius);
    overflow:      hidden;
    box-shadow:    0 2px 12px rgba(0,0,0,0.07);
    font-family:   inherit;
    transition:    transform var(--tsec-transition), box-shadow var(--tsec-transition);
}

.tsec-event-card:hover {
    transform:  translateY(-4px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.13);
}

.tsec-card-link {
    display:         flex;
    flex-direction:  column;
    height:          100%;
    text-decoration: none;
    color:           inherit;
}

.tsec-card-thumb {
    position:     relative;
    overflow:     hidden;
    aspect-ratio: 16 / 9;
    background:   var(--tsec-bg);
}

.tsec-card-thumb img {
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center center;
    display:         block;
    transition:      transform 0.4s ease;
}

.tsec-event-card:hover .tsec-card-thumb img {
    transform: scale(1.04);
}

.tsec-no-thumb {
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--tsec-muted);
}

.tsec-card-cat {
    position:       absolute;
    top:            12px;
    left:           12px;
    background:     var(--tsec-accent);
    color:          #fff;
    font-family:    inherit;
    font-size:      0.7em;
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding:        3px 9px;
    border-radius:  3px;
}

.tsec-card-body {
    padding:        14px 16px 18px;
    display:        flex;
    flex-direction: column;
    flex:           1;
}

.tsec-card-date {
    font-family:    inherit;
    font-size:      0.8em;
    font-weight:    600;
    color:          var(--tsec-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin:         0 0 4px;
}

.tsec-card-title {
    font-family: inherit;
    font-size:   1.05em;
    font-weight: 700;
    line-height: 1.3;
    color:       inherit;
    margin:      0 0 6px;
}

.tsec-card-location {
    font-family: inherit;
    font-size:   0.82em;
    color:       var(--tsec-muted);
    display:     flex;
    align-items: center;
    gap:         4px;
    margin:      0 0 6px;
}

.tsec-card-excerpt {
    font-family: inherit;
    font-size:   0.88em;
    color:       var(--tsec-muted);
    line-height: 1.55;
    margin:      0 0 10px;
    flex:        1;
}

.tsec-card-cta {
    font-family: inherit;
    font-size:   0.85em;
    font-weight: 700;
    color:       var(--tsec-accent);
    margin-top:  auto;
    display:     inline-block;
}

.tsec-no-events {
    font-family: inherit;
    text-align:  center;
    padding:     48px 20px;
    color:       var(--tsec-muted);
    font-size:   0.95em;
}

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

.tsec-pagination {
    display:         flex;
    justify-content: center;
    margin-top:      32px;
}

.tsec-pagination .page-numbers {
    list-style: none;
    display:    flex;
    flex-wrap:  wrap;
    gap:        6px;
    padding:    0;
    margin:     0;
}

.tsec-pagination .page-numbers a,
.tsec-pagination .page-numbers span {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       40px;
    height:          40px;
    padding:         0 12px;
    border:          1.5px solid var(--tsec-border);
    border-radius:   var(--tsec-btn-radius);
    font-family:     inherit;
    font-size:       0.9em;
    font-weight:     600;
    color:           inherit;
    text-decoration: none;
    transition:      all var(--tsec-transition);
}

.tsec-pagination .page-numbers a:hover,
.tsec-pagination .page-numbers span.current {
    background:   var(--tsec-accent);
    border-color: var(--tsec-accent);
    color:        #fff;
}

/* ── Responsive — Divi breakpoints: tablet <980px, mobile <768px ── */

/* Tablet (Divi: max-width 980px) */
@media ( max-width: 980px ) {
    .tsec-cols-4,
    .tsec-cols-3 { grid-template-columns: repeat(2, 1fr); }

    .tsec-event-title {
        font-size: 38px;
    }

    .tsec-hero-image,
    .tsec-hero-image img {
        height:     300px;
        max-height: 300px;
    }
}

/* Mobile (Divi: max-width 767px) */
@media ( max-width: 767px ) {
    .tsec-cols-4,
    .tsec-cols-3,
    .tsec-cols-2 { grid-template-columns: 1fr; }

    .tsec-event-title {
        font-size: 30px;
    }

    .tsec-hero-image,
    .tsec-hero-image img {
        height:     220px;
        max-height: 220px;
    }

    .tsec-registration-form-wrap {
        padding: 28px 18px;
    }

    .tsec-form-footer {
        flex-direction: column;
        align-items:    flex-start;
    }

    .tsec-submit-btn {
        width:      100%;
        text-align: center;
    }
}

/* ── Serie badge on card ─────────────────────────────────── */

.tsec-card-serie-badge {
    position:       absolute;
    top:            12px;
    right:          12px;
    background:     rgba(0,0,0,0.55);
    color:          #fff;
    font-family:    inherit;
    font-size:      0.68em;
    font-weight:    700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding:        3px 8px;
    border-radius:  3px;
}

/* ── Series dates on single event page ───────────────────── */

.tsec-meta-series {
    align-items: flex-start;
    display:     flex;
    gap:         6px;
}

.tsec-meta-series svg {
    margin-top: 3px;
    flex-shrink: 0;
}

.tsec-serie-label {
    display:        block;
    font-weight:    700;
    font-size:      0.85em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color:          var(--tsec-accent);
    margin-bottom:  6px;
}

.tsec-series-date-text {
    font-family: inherit;
    font-size:   0.92em;
    line-height: 1.6;
    color:       var(--tsec-text);
    margin:      0 0 6px;
}

.tsec-dates-ellipsis {
    color: var(--tsec-muted);
}

.tsec-series-time {
    display:    block;
    font-size:  0.85em;
    color:      var(--tsec-muted);
    margin-top: 4px;
}

/* ── Cost badge on form title ────────────────────────────── */

.tsec-cost-badge {
    display:        inline-block;
    background:     var(--tsec-accent);
    color:          #fff;
    font-family:    inherit;
    font-size:      0.55em;
    font-weight:    700;
    padding:        4px 12px;
    border-radius:  var(--tsec-btn-radius);
    margin-left:    14px;
    vertical-align: middle;
    letter-spacing: 0.03em;
}

.tsec-cost-badge small {
    font-weight: 400;
    opacity:     0.85;
    margin-left: 3px;
}

/* ── Anmeldeschluss notice ───────────────────────────────── */

.tsec-deadline-note {
    font-family:  inherit;
    font-size:    0.85em;
    color:        var(--tsec-muted);
    margin:       -18px 0 24px;
    padding-left: 2px;
}

/* ── Form expired message ────────────────────────────────── */

.tsec-form-expired {
    background:    #fff3cd;
    border:        1px solid #ffc107;
    border-radius: var(--tsec-radius);
    padding:       14px 20px;
    font-family:   inherit;
    font-size:     0.92em;
    color:         #856404;
    margin-top:    40px;
}

/* ── Location below time ─────────────────────────────────── */

.tsec-series-location {
    display:     flex;
    align-items: center;
    gap:         4px;
    margin-top:  5px;
    font-size:   0.92em;
    color:       var(--tsec-muted);
    padding-left: 0;
}

.tsec-series-location svg {
    flex-shrink: 0;
    opacity:     0.6;
}

/* ── Series dates toggle ─────────────────────────────────── */

.tsec-dates-extra {
    list-style: none;
    margin:     0;
    padding:    0;
}

.tsec-dates-toggle {
    display:              inline;
    background:           none  !important;
    border:               none  !important;
    box-shadow:           none  !important;
    outline:              none  !important;
    padding:              0     !important;
    margin:               0     !important;
    font-family:          inherit !important;
    font-size:            inherit !important;
    font-weight:          inherit !important;
    line-height:          inherit !important;
    color:                var(--tsec-accent) !important;
    cursor:               pointer;
    text-decoration:      underline;
    text-underline-offset: 2px;
    vertical-align:       baseline;
}

.tsec-dates-toggle:hover {
    color: var(--tsec-accent-hov) !important;
    background: none !important;
}

/* ── AJAX grid region transition ─────────────────────────── */
.tsec-grid-region {
    transition: opacity 0.2s ease;
    min-width:  0;
    width:      100%;
}



/* ── Category dropdown selector ─────────────────────────── */

.tsec-cat-dropdown-wrap {
    margin-bottom: 28px;
}

.tsec-cat-dropdown {
    font-family:     inherit;
    font-size:       0.9em;
    padding:         9px 36px 9px 14px;
    border:          1.5px solid var(--tsec-border);
    border-radius:   40px;
    background:      #fff;
    color:           inherit;
    cursor:          pointer;
    appearance:      none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 14px center;
    transition:      border-color var(--tsec-transition);
    min-width:       180px;
}

.tsec-cat-dropdown:focus {
    outline:      none;
    border-color: var(--tsec-accent);
}

/* ── Past event card ─────────────────────────────────────── */

.tsec-event-card-past {
    opacity: 0.82;
}

.tsec-event-card-past:hover {
    opacity: 1;
}

.tsec-card-past-badge {
    position:       absolute;
    top:            12px;
    right:          12px;
    background:     rgba(0,0,0,0.55);
    color:          #fff;
    font-family:    inherit;
    font-size:      0.68em;
    font-weight:    700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding:        3px 9px;
    border-radius:  3px;
}