/* ================================================
   Church Events — Single & Archive Styles
   Cherokee Hills Christian Church
   ================================================ */

:root {
    --ev-accent:       #01aeef;
    --ev-accent-dark:  #0068A6;
    --ev-text:         #1a1a1a;
    --ev-text-muted:   #555;
    --ev-border:       #e0e0e0;
    --ev-bg-light:     #f7f8fa;
    --ev-radius:       8px;
    --ev-radius-lg:    12px;
    --ev-shadow:       0 2px 12px rgba(0,0,0,0.08);
    --ev-shadow-hover: 0 6px 24px rgba(0,0,0,0.14);
    --ev-font:         system-ui, -apple-system, sans-serif;
}

/* ════════════════════════════════════════════════
   SINGLE EVENT PAGE
   ════════════════════════════════════════════════ */

.event-page {
    width:      100%;
    max-width:  100%;
    margin:     0;
    padding:    0;
    box-sizing: border-box;
    font-family: var(--ev-font);
}

/* ── Hero banner ── */
.event-hero {
    position:            relative;
    width:               100%;
    min-height:          420px;
    background-color:    var(--ev-accent-dark);
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
    display:             flex;
    align-items:         flex-end;
}

.event-hero-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.15) 0%,
        rgba(0,0,0,0.65) 100%
    );
    display:        flex;
    align-items:    flex-end;
}

.event-hero--no-image .event-hero-overlay {
    background: linear-gradient(
        135deg,
        var(--ev-accent-dark) 0%,
        var(--ev-accent) 100%
    );
}

.event-hero-content {
    position:   relative;
    z-index:    1;
    padding:    2.5rem 2rem;
    width:      100%;
    max-width:  900px;
}

.event-hero-category {
    margin-bottom: 0.6rem;
}

.event-hero-category span {
    display:        inline-block;
    background:     var(--ev-accent);
    color:          #fff;
    font-size:      0.72rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding:        0.2em 0.65em;
    border-radius:  4px;
    margin-right:   0.3rem;
}

.event-hero-title {
    font-size:   2.4rem;
    font-weight: 800;
    color:       #fff;
    margin:      0 0 0.4rem 0;
    line-height: 1.15;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.event-hero-subtitle {
    font-size:   1.1rem;
    color:       rgba(255,255,255,0.88);
    margin:      0 0 1rem 0;
}

.event-hero-meta {
    display:    flex;
    flex-wrap:  wrap;
    gap:        0.5rem 1.5rem;
    margin-bottom: 1.25rem;
}

.event-hero-date,
.event-hero-location {
    display:     flex;
    align-items: center;
    gap:         0.4rem;
    color:       rgba(255,255,255,0.92);
    font-size:   0.95rem;
    font-weight: 500;
}

.event-hero-date svg,
.event-hero-location svg {
    flex-shrink: 0;
    opacity:     0.85;
}

/* ── Buttons ── */
.event-btn {
    display:         inline-block;
    padding:         0.65rem 1.5rem;
    border-radius:   var(--ev-radius);
    font-weight:     700;
    font-size:       0.95rem;
    text-decoration: none;
    transition:      background 0.2s, transform 0.2s;
    cursor:          pointer;
    border:          none;
}

.event-btn--primary {
    background: #fff;
    color:      var(--ev-accent-dark);
}

.event-btn--primary:hover {
    background:      #f0f0f0;
    transform:       translateY(-1px);
    color:           var(--ev-accent-dark);
    text-decoration: none;
}

.event-btn--full {
    display:    block;
    text-align: center;
    width:      100%;
}

/* ── Body layout ── */
.event-body {
    padding:   2.5rem 1.5rem;
    max-width: 1100px;
    margin:    0 auto;
    box-sizing: border-box;
}

.event-content-wrap {
    display: flex;
    gap:     3rem;
}

.event-main {
    flex:      1 1 0;
    min-width: 0;
}

.event-sidebar {
    flex:      0 0 380px;
    width:     380px;
    max-width: 380px;
}

/* ── Full width header — title + date + location above two columns ── */
.event-full-header {
    margin-bottom:  1.75rem;
    padding-bottom: 1.5rem;
    border-bottom:  2px solid var(--ev-border);
}

.event-full-header-category span {
    display:        inline-block;
    background:     var(--ev-accent);
    color:          #fff;
    font-size:      0.7rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding:        0.2em 0.65em;
    border-radius:  4px;
    margin:         0 0.25rem 0.5rem 0;
}

.event-full-header-title {
    font-size:   2rem;
    font-weight: 800;
    color:       var(--ev-text);
    margin:      0 0 0.3rem 0;
    line-height: 1.2;
}

.event-full-header-subtitle {
    font-size:   1.05rem;
    color:       var(--ev-text-muted);
    margin:      0 0 0.6rem 0;
}

.event-full-header-meta {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         0.35rem 0.6rem;
    font-size:   1rem;
    font-weight: 600;
    color:       var(--ev-text);
}

.event-full-header-meta-sep {
    color:       var(--ev-accent);
    font-weight: 700;
}

.event-full-header-meta-item {
    display:     flex;
    align-items: center;
    gap:         0.3rem;
}

.event-maps-link-inline {
    color:           var(--ev-accent);
    font-size:       0.85em;
    font-weight:     500;
    text-decoration: none;
    margin-left:     0.25rem;
}

.event-maps-link-inline:hover {
    text-decoration: underline;
    color:           var(--ev-accent-dark);
}

/* ── Image carousel ── */
.event-carousel {
    position:      relative;
    margin-bottom: 1.75rem;
    border-radius: var(--ev-radius-lg);
    overflow:      hidden;
    background:    #f0f0f0;
}

.event-carousel-track {
    position: relative;
    width:    100%;
    height:   380px;
}

.event-carousel-slide {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    opacity:         0;
    transition:      opacity 0.4s ease;
    cursor:          zoom-in;
    pointer-events:  none;
}

.event-carousel-slide.is-active {
    opacity:        1;
    pointer-events: auto;
}

.event-carousel-slide img {
    width:           100%;
    height:          100%;
    object-fit:      contain;
    object-position: center;
    display:         block;
}

.event-carousel-zoom-hint {
    position:       absolute;
    bottom:         0.75rem;
    right:          0.75rem;
    background:     rgba(0,0,0,0.55);
    color:          #fff;
    font-size:      0.72rem;
    font-weight:    600;
    padding:        0.3em 0.65em;
    border-radius:  4px;
    letter-spacing: 0.04em;
    pointer-events: none;
    opacity:        0;
    transition:     opacity 0.2s;
}

.event-carousel-slide.is-active:hover .event-carousel-zoom-hint {
    opacity: 1;
}

/* Arrows */
.event-carousel-arrow {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    background:      rgba(0,0,0,0.35);
    border:          1px solid rgba(255,255,255,0.3);
    color:           #fff;
    font-size:       1.2rem;
    width:           38px;
    height:          38px;
    border-radius:   50%;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         10;
    padding:         0;
    transition:      background 0.2s;
}

.event-carousel-arrow:hover {
    background: rgba(0,0,0,0.6);
}

.event-carousel-arrow--prev { left:  0.75rem; }
.event-carousel-arrow--next { right: 0.75rem; }

/* Dots */
.event-carousel-dots {
    position:  absolute;
    bottom:    0.75rem;
    left:      50%;
    transform: translateX(-50%);
    display:   flex;
    gap:       0.4rem;
    z-index:   10;
}

.event-carousel-dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    border:        2px solid rgba(255,255,255,0.7);
    background:    transparent;
    cursor:        pointer;
    padding:       0;
    transition:    background 0.2s, border-color 0.2s;
}

.event-carousel-dot.is-active {
    background:   #fff;
    border-color: #fff;
}

/* ── Lightbox modal ── */
.event-lightbox {
    display:         none;
    position:        fixed;
    inset:           0;
    z-index:         99999;
    background:      rgba(0,0,0,0.88);
    align-items:     center;
    justify-content: center;
    cursor:          zoom-out;
    padding:         1.5rem;
}

.event-lightbox.is-open {
    display: flex;
}

.event-lightbox img {
    max-width:     90vw;
    max-height:    90vh;
    object-fit:    contain;
    border-radius: var(--ev-radius-lg);
    box-shadow:    0 8px 48px rgba(0,0,0,0.6);
    cursor:        default;
}

.event-lightbox-close {
    position:        absolute;
    top:             1rem;
    right:           1rem;
    background:      rgba(255,255,255,0.15);
    border:          1px solid rgba(255,255,255,0.3);
    color:           #fff;
    font-size:       1.4rem;
    width:           40px;
    height:          40px;
    border-radius:   50%;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    line-height:     1;
    padding:         0;
    transition:      background 0.2s;
}

.event-lightbox-close:hover {
    background: rgba(255,255,255,0.3);
}

/* ── Description ── */
.event-description {
    font-size:     16px;
    line-height:   1.7;
    color:         var(--ev-text);
    margin-bottom: 1.5rem;
}

.event-description p {
    margin: 0 0 1rem 0;
}

/* ── Gallery ── */
.event-gallery {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   0.75rem;
    margin-bottom:         2rem;
}

.event-gallery-item img {
    width:         100%;
    height:        180px;
    object-fit:    cover;
    border-radius: var(--ev-radius);
    display:       block;
}

/* ── File downloads ── */
.event-files {
    margin-bottom: 2rem;
}

.event-files-heading {
    font-size:      0.85rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          var(--ev-text-muted);
    margin:         0 0 0.75rem 0;
}

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

.event-file-link {
    display:         flex;
    align-items:     center;
    gap:             0.6rem;
    padding:         0.65rem 0.85rem;
    background:      var(--ev-bg-light);
    border:          1px solid var(--ev-border);
    border-radius:   var(--ev-radius);
    margin-bottom:   0.5rem;
    text-decoration: none;
    color:           var(--ev-text);
    font-weight:     500;
    font-size:       0.95rem;
    transition:      border-color 0.2s, background 0.2s;
}

.event-file-link:hover {
    border-color:    var(--ev-accent);
    background:      #f0f8ff;
    color:           var(--ev-accent-dark);
    text-decoration: none;
}

.event-file-ext {
    background:     var(--ev-accent-dark);
    color:          #fff;
    font-size:      0.65rem;
    font-weight:    700;
    padding:        0.15em 0.4em;
    border-radius:  3px;
    letter-spacing: 0.05em;
    flex-shrink:    0;
}

/* ── Sidebar detail card ── */
.event-detail-card {
    background:    var(--ev-bg-light);
    border:        1px solid var(--ev-border);
    border-radius: var(--ev-radius-lg);
    padding:       1.25rem;
    margin-bottom: 1.5rem;
}

.event-detail-row {
    display:        flex;
    flex-direction: column;
    gap:            0.2rem;
    padding:        0.75rem 0;
    border-bottom:  1px solid var(--ev-border);
}

.event-detail-row:last-child {
    border-bottom:  none;
    padding-bottom: 0;
}

.event-detail-row:first-child {
    padding-top: 0;
}

.event-detail-label {
    font-size:      0.72rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color:          var(--ev-accent-dark);
}

.event-detail-value {
    font-size:   0.95rem;
    color:       var(--ev-text);
    line-height: 1.5;
}

.event-maps-link-inline {
    display:         inline;
    font-size:       0.85em;
    font-weight:     500;
    color:           var(--ev-accent);
    text-decoration: none;
}

.event-maps-link-inline:hover {
    text-decoration: underline;
    color:           var(--ev-accent-dark);
}

/* ── Registration — full width below columns ── */
.event-registration-full {
    border-top:  1px solid var(--ev-border);
    padding-top: 2rem;
    margin-top:  0.5rem;
    margin-bottom: 1.5rem;
}

.event-registration-heading {
    font-size:     1.2rem;
    font-weight:   700;
    margin:        0 0 1rem 0;
    color:         var(--ev-text);
}

/* ════════════════════════════════════════════════
   ARCHIVE / EVENTS LIST PAGE
   ════════════════════════════════════════════════ */

.events-archive-page {
    width:      100%;
    max-width:  100%;
    margin:     0;
    padding:    2rem 5%;
    box-sizing: border-box;
}

.events-archive-header {
    margin-bottom: 2rem;
}

.events-archive-title {
    font-size:   2rem;
    font-weight: 800;
    color:       var(--ev-text);
    margin:      0;
}

.events-empty {
    text-align: center;
    padding:    3rem 1rem;
    color:      var(--ev-text-muted);
    font-size:  1.1rem;
}

/* ── Month group ── */
.events-month-group {
    margin-bottom: 3rem;
}

.events-month-heading {
    font-size:      1.1rem;
    font-weight:    700;
    color:          var(--ev-accent-dark);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin:         0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom:  2px solid var(--ev-accent);
}

/* ── Event card ── */
.events-list {
    display:        flex;
    flex-direction: column;
    gap:            1.25rem;
}

.event-card {
    background:    #f4f4f4;
    border-radius: var(--ev-radius-lg);
    overflow:      hidden;
    transition:    box-shadow 0.2s, transform 0.2s;
}

.event-card:hover {
    box-shadow: var(--ev-shadow-hover);
    transform:  translateY(-2px);
}

.event-card-link {
    display:         flex;
    text-decoration: none !important;
    color:           inherit;
    align-items:     stretch;
    min-height:      220px;
}

.event-card-link *,
.event-card-link:hover *,
.events-banner-slide *,
.events-banner-slide:hover * {
    text-decoration: none !important;
}

/* Image — left side, fixed width, full card height */
.event-card-image {
    flex:            0 0 360px;
    width:           360px;
    overflow:        hidden;
    flex-shrink:     0;
    position:        relative;
    background:      transparent;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.event-card-image img {
    width:           100%;
    height:          100%;
    object-fit:      contain;
    object-position: center;
    display:         block;
}

.event-card-image-placeholder {
    width:      100%;
    height:     100%;
    min-height: 220px;
    background: #ddd;
}

/* Content — right side */
.event-card-content {
    flex:           1;
    padding:        1.5rem 1.75rem;
    display:        flex;
    flex-direction: column;
    justify-content: center;
    gap:            0.4rem;
}

.event-card-title {
    font-size:   1.35rem;
    font-weight: 700;
    color:       var(--ev-text);
    margin:      0;
    line-height: 1.25;
}

.event-card:hover .event-card-title {
    color: var(--ev-accent-dark);
}

.event-card-date {
    font-size:  0.9rem;
    color:      var(--ev-text-muted);
    margin:     0;
    font-weight: 500;
}

.event-card-location {
    font-size:  0.88rem;
    color:      var(--ev-text-muted);
    margin:     0;
}

.event-card-location::before {
    content: '📍 ';
}

.event-card-excerpt {
    font-size:   0.95rem;
    color:       var(--ev-text);
    margin:      0.25rem 0 0 0;
    line-height: 1.6;
    display:     -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}

.event-card-register-tag {
    display:        inline-block;
    font-size:      0.7rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color:          var(--ev-accent-dark);
    background:     rgba(0, 104, 166, 0.08);
    padding:        0.2em 0.6em;
    border-radius:  4px;
    margin-top:     0.25rem;
    align-self:     flex-start;
}

/* ════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .event-content-wrap {
        flex-direction: column;
        gap:            2rem;
    }

    .event-sidebar {
        flex:      0 0 auto;
        width:     100%;
        max-width: 100%;
    }

    .event-hero-title {
        font-size: 1.8rem;
    }

    .event-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .event-hero {
        min-height: 300px;
    }

    .event-hero-title {
        font-size: 1.4rem;
    }

    .event-hero-content {
        padding: 1.5rem 1rem;
    }

    .event-body {
        padding: 1.5rem 1rem;
    }

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

    .event-carousel-track {
        height: 260px;
    }

    .event-card-link {
        flex-direction: column;
        min-height:     unset;
    }

    .event-card-image {
        flex:      0 0 auto;
        width:     100%;
        height:    200px;
    }

    .event-card-content {
        padding: 1rem 1.25rem;
    }

    .event-card-title {
        font-size: 1.1rem;
    }

    .events-archive-page {
        padding: 1.5rem 1rem;
    }
}

/* ════════════════════════════════════════════════
   EVENTS BANNER (homepage / shortcode)
   ════════════════════════════════════════════════ */

.events-banner {
    position:   relative;
    width:      100%;
    overflow:   hidden;
    background: transparent;
    height:     420px;
}

.events-banner-track {
    position: relative;
    width:    100%;
    height:   100%;
}

.events-banner-slide {
    position:        absolute;
    inset:           0;
    opacity:         0;
    transition:      opacity 0.6s ease;
    pointer-events:  none;
    display:         flex;
    flex-direction:  row;
    align-items:     stretch;
    text-decoration: none;
    color:           var(--ev-text);
    background:      transparent;
    height:          100%;
}

.events-banner-slide.is-active {
    opacity:        1;
    pointer-events: auto;
}

/* Left: image — fixed half width */
.events-banner-image {
    flex:            0 0 50%;
    width:           50%;
    height:          100%;
    overflow:        hidden;
    background:      transparent;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.events-banner-image img {
    width:      100%;
    height:     100%;
    object-fit: contain;
    display:    block;
}

.events-banner-image-placeholder {
    width:      100%;
    height:     100%;
    background: #ddd;
}

/* Right: content */
.events-banner-content {
    flex:            1;
    min-width:       0;
    padding:         2rem 4rem 2rem 2rem;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    gap:             0.5rem;
    overflow:        hidden;
}

.events-banner-category span {
    display:        inline-block;
    background:     var(--ev-accent);
    color:          #fff;
    font-size:      0.7rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding:        0.2em 0.65em;
    border-radius:  4px;
    margin:         0 0.25rem 0.25rem 0;
}

.events-banner-title {
    font-size:   1.75rem;
    font-weight: 800;
    line-height: 1.2;
    margin:      0;
    color:       var(--ev-text);
}

.events-banner-slide:hover .events-banner-title {
    color: var(--ev-accent-dark);
}

.events-banner-subtitle {
    font-size:   1rem;
    color:       var(--ev-text-muted);
    margin:      0;
    line-height: 1.5;
}

.events-banner-meta {
    display:        flex;
    flex-direction: column;
    gap:            0.2rem;
}

.events-banner-date {
    font-size:   1.05rem;
    color:       var(--ev-text);
    font-weight: 600;
}

.events-banner-location {
    font-size:   1rem;
    color:       var(--ev-text-muted);
}

.events-banner-location::before {
    content: '📍 ';
}

/* Dark button variant for light backgrounds */
.event-btn--dark {
    background: var(--ev-accent-dark);
    color:      #fff;
}

.event-btn--dark:hover {
    background:      #005a8e;
    color:           #fff;
    text-decoration: none;
}

/* View More button */
.event-btn--view-more {
    background:      transparent;
    color:           var(--ev-accent-dark);
    border:          2px solid var(--ev-accent-dark);
    font-size:       0.85rem;
    padding:         0.5rem 1.25rem;
}

.event-btn--view-more:hover {
    background:      var(--ev-accent-dark);
    color:           #fff;
    text-decoration: none;
}

/* Card and banner action button rows */
.event-card-actions,
.events-banner-actions {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         0.75rem;
    margin-top:  0.5rem;
}

.events-banner-dots {
    position:  absolute;
    bottom:    1.25rem;
    left:      50%;
    transform: translateX(-50%);
    display:   flex;
    gap:       0.5rem;
    z-index:   10;
}

.events-banner-dot {
    width:         10px;
    height:        10px;
    border-radius: 50%;
    border:        2px solid rgba(255,255,255,0.6);
    background:    transparent;
    cursor:        pointer;
    padding:       0;
    transition:    background 0.2s, border-color 0.2s;
}

.events-banner-dot.is-active {
    background:   #fff;
    border-color: #fff;
}

.events-banner-arrow {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    background:      rgba(0,0,0,0.3);
    border:          1px solid rgba(255,255,255,0.3);
    color:           #fff;
    font-size:       1.3rem;
    width:           44px;
    height:          44px;
    border-radius:   50%;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         20;
    transition:      background 0.2s;
    padding:         0;
}

.events-banner-arrow:hover {
    background: rgba(0,0,0,0.55);
}

.events-banner-arrow--prev { left:  0.75rem; }
.events-banner-arrow--next { right: 0.75rem; }

@media (max-width: 700px) {
    .events-banner,
    .events-banner-track {
        min-height: 360px;
        height:     360px;
    }

    .events-banner-content {
        padding: 1.5rem;
    }

    .events-banner-title {
        font-size: 1.5rem;
    }

    .events-banner-image {
        flex:  0 0 45%;
        width: 45%;
    }

    .events-banner-content {
        padding: 1.5rem 3rem 1.5rem 1.5rem;
    }

    .events-banner-title {
        font-size: 1.35rem;
    }
}