/* ===============================
   FULL WIDTH OVERRIDE
================================ */

/* Full width override */
.full-width-events {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

.full-width-events .ast-container {
    max-width: 100% !important;
    padding: 0 !important;
}

/* Events Archive Page Full Width */
.events-archive-page {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    background-color: #ffffff; /* White background */
    box-sizing: border-box;
}

/* ===============================
   FULL WIDTH EVENTS BANNER (FIXED)
================================ */

.events-banner {
    position: relative;
    width: 100%;
    height: 435px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

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

/* ===============================
   INTRO CONTENT BOX (OVERLAP 5%)
================================ */

.events-intro-box {
    position: relative;
    max-width: 1142px;
    text-align: left;
    margin: -50px auto 60px; /* 5% overlap of 435px ≈ 22px */
    background: #ffffff;
    padding: 40px 50px;
    border-radius: 20px;
    box-shadow: 0px 4px 20px 2px #CADFFF59;
}

.events-intro-box h2 {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 30px;
    color: #161616;
    text-align: left;
    margin-bottom: 20px;
}

.events-intro-box p {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 1.6;
    color: #000000;
    text-align: left;
    margin-bottom: 16px;
}

.events-intro-box p:last-child {
    margin-bottom: 0;
}

/* ===============================
   RESPONSIVE - BANNER & INTRO BOX
================================ */

@media (max-width: 768px) {
    .events-banner {
        height: 300px;
    }

    .events-intro-box {
        margin: -15px 20px 40px;
        padding: 30px 25px;
    }

    .events-intro-box h2 {
        font-size: 24px;
    }
}

/* ===============================
   EVENTS CONTAINER
================================ */

.events-container{
    margin: 80px;
}

/* ===============================
   EVENTS FILTER BUTTONS
================================ */

.events-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 40px 0 20px;
    gap: 20px;
}

/* Left text */
.events-filter-title {
    font-family: Sora;
    font-weight: 600;
    font-style: SemiBold;
    font-size: 40px;
    line-height: 141%;
    letter-spacing: 0;
    vertical-align: middle;

    /* Gradient text */
    background: linear-gradient(90deg, #E31E24 0%, #173E83 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: #161616; /* fallback for non-supporting browsers */

    display: inline-block;
    position: relative;
    padding-bottom: 10px; /* space for the underline */
}

/* Line below text */
.events-filter-title::after {
    content: "";
    display: block;
    width: 100%;
    height: 0.5px; /* ✅ real 0.5px line */
    background: linear-gradient(
        90deg,
        #E31E24 1.78%,
        #173E83 50.98%,
        rgba(255, 255, 255, 0) 73.37%
    );
    margin-top: 5px;
}

/* Right buttons container */
.events-filter {
    display: flex;
    gap: 12px;
}

/* Active Button */
.filter-btn.active {
    background: #173E83;
    border: 0.9px solid;
    border-image-source: linear-gradient(90deg, rgba(227, 30, 36, 0.4) 0%, rgba(23, 62, 131, 0.4) 100%);
    border-radius: 35px;
    width: 200px;
    color: #FFFFFF;
    font-family: Sora;
    font-weight: 600;
    font-style: SemiBold;
    font-size: 14px;
    line-height: 150%;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Inactive Button */
.filter-btn {
    background: #FFFFFF;
    border: 0.9px solid #D9D9D9;
    border-radius: 35px;
    width: 200px;
    color: #161616;
    font-family: Inter;
    font-weight: 500;
    font-style: Medium;
    font-size: 14px;
    line-height: 150%;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* ===============================
   EVENTS TABLE
================================ */

/* Events Table without cell borders, row-level style */
.events-table-wrapper {
    overflow-x: auto;
    border-radius: 8px;
    margin-top: 80px;
}

.events-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Sora', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 135%;
    vertical-align: middle;
    border: none; /* Remove table border */
}

.events-table th {
    padding: 15px;
    text-align: left;
    font-family: 'Sora', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 135%;
    vertical-align: middle;
    background: linear-gradient(148.31deg, #F0F6FF 0%, #FFFFFF 100%);
    border: none; /* Remove th borders */
}

.events-table td {
    position: relative;
    padding-left: 30px; /* space for icon */
    font-family: 'Sora', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 135%;
    vertical-align: middle;
    color: #173E83;
}

/* ===============================
   TABLE CELL ICONS
================================ */

.event-location::before {
    content: url('https://sidsamgroup.com/wp-content/uploads/2025/12/Clip-path-group.png');
    margin-right: 4px;
    vertical-align: middle;
}

.event-date::before {
    content: url('https://sidsamgroup.com/wp-content/uploads/2025/12/Frame-2.png');
    margin-right: 4px;
    vertical-align: middle;
}

.event-title::before {
    content: url('https://sidsamgroup.com/wp-content/uploads/2025/12/Frame-1410089047.png');
    margin-right: 4px;
    vertical-align: middle;
}
.event-action::after {
    content: url('https://sidsamgroup.com/wp-content/uploads/2025/12/right_arrow.png');
    margin-right: 4px;
    vertical-align: middle;
}




/* ===============================
   TABLE ROWS & HOVER
================================ */
.events-table {
    border-collapse: separate;
    border-spacing: 0 12px;
}

/* ROW background (single gradient) */
.events-table tbody tr {
    background: linear-gradient(148.31deg, #F0F6FF 0%, #FFFFFF 100%);
}

/* Cells inherit row background */
.events-table tbody td {
    background: transparent;
    padding: 24px 16px;
    border-top: 2px solid #C1DDF3;
    border-bottom: 2px solid #C1DDF3;
}

/* Left & Right borders */
.events-table tbody td:first-child {
    border-left: 2px solid #C1DDF3;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.events-table tbody td:last-child {
    border-right: 2px solid #C1DDF3;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Hover keeps single gradient */
.events-table tbody tr:hover {
    background: linear-gradient(148.31deg, #E8F1FF 0%, #F0F6FF 100%);
}

/* Remove inner column borders */
.events-table td,
.events-table th {
    border-left: none;
    border-right: none;
}

.event-title {
    font-weight: 600;
    color: #173E83;
}

.event-action {
    text-align: right;
    padding-right: 29px !important;
}

.event-action .btn-more-info {
    display: inline-flex;
    align-items: center;
}

.event-location {
    padding-left: 29px !important;
}



/* ===============================
   MORE INFO BUTTON
================================ */

/* More Info Button with Arrow */
.btn-more-info {
    background: none; /* Remove background */
    color: #173E83;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    line-height: 135%;
    letter-spacing: 0;
    text-transform: uppercase; /* Make text uppercase */
    vertical-align: middle;
    padding: 0;
    border: none;
    cursor: pointer;
    text-decoration: none; /* Remove underline */
    transition: color 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 5px; /* Space between text and arrow */
}

.btn-more-info:hover {
    color: #0F2A5B;
}

.btn-more-info:hover::after {
    transform: translateX(3px); /* small move on hover */
}

/* ===============================
   SINGLE EVENT PAGE
================================ */

/* Single Event Page */
.single-event-page {
    padding: 0;
}

.event-meta {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.event-meta span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
}

.event-description {
    background: #f9f9f9;
    padding: 40px 20px;
}

.event-description .container {
    max-width: 1000px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.8;
}

.events-pagination-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    flex-wrap: wrap;
    background-color: #E8F5FF; /* Background color */
    border-radius: 5px;        /* Rounded corners */
    height: 80px;  
}

.pagination-info {
    font-family: 'Inter', sans-serif; /* Set font */
    font-weight: 500;                  /* Medium weight */
    font-style: normal;                 /* Correct font-style for medium */
    font-size: 22px;                    /* Bigger size */
    color: #4A86BD;                     /* Text color */
    margin-left: 30px;
}

.pagination-links {
    padding-right: 30px;
}

.pagination-links a,
.pagination-links span {
    margin: 0 6px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 22px;
    color: #2D77BC;
    text-decoration: none;
    border: none;               /* REMOVE BORDER */
    background: transparent;
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Current Page Style */
.pagination-links .current {
    background-color: #2D77BC;  /* BG COLOR */
    color: #ffffff;             /* TEXT COLOR */
    border-radius: 6px;         /* Optional – can remove if sharp corners needed */
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Hover Effect (Optional but recommended) */
.pagination-links a:hover {
    background-color: rgba(45, 119, 188, 0.1);
    border-radius: 6px;
}

/* Next / Prev */
.pagination-links .next,
.pagination-links .prev {
    font-weight: 500;
}





/* ===============================
   RESPONSIVE DESIGN
================================ */

/* Responsive */
@media (max-width: 768px) {
    .banner-content h1 {
        font-size: 32px;
    }
    
    .event-banner {
        height: 300px;
    }
    
    .banner-overlay h1 {
        font-size: 28px;
    }
    
    .event-meta {
        flex-direction: column;
        gap: 10px;
    }
    
    .tabs-navigation {
        flex-direction: column;
    }
    
    .tab-btn {
        text-align: left;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
    }
    
    .events-table {
        font-size: 16px;
    }
    
    .events-table th,
    .events-table td {
        padding: 12px 10px;
    }
}