/* =========================================
   ALOHA EVENTS — FRONTEND STYLESHEET
   Matches the donor deck layout style
   ========================================= */

/* -----------------------------------------
   1. LOAD MAIN FONT (Jack McCoy Font)
----------------------------------------- */
@font-face {
    font-family: 'JackMcCoyFont';
    src: url('https://jackmccoyalohafoundation.org/wp-content/uploads/2025/11/JackMcCoyFont.woff2') format('woff2'),
         url('https://jackmccoyalohafoundation.org/wp-content/uploads/2025/11/JackMcCoyFont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* -----------------------------------------
   2. WRAPPER FOR ALL EVENTS
----------------------------------------- */
.aloha-events-wrapper {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 40px 0 120px;
}


/* -----------------------------------------
   3. EVENT BLOCK LAYOUT
----------------------------------------- */
.aloha-event {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    margin-bottom: 120px;
    background: white;
}

.aloha-event.event-right {
    grid-template-columns: 1fr 1.4fr;
}

.aloha-event.event-right .event-image {
    order: 2;
}

.aloha-event.event-right .event-content {
    order: 1;
}


/* -----------------------------------------
   4. IMAGE
----------------------------------------- */
.event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* -----------------------------------------
   5. CONTENT AREA
----------------------------------------- */
.event-content {
    padding: 60px;
    position: relative;
}

.event-meta {
    margin-bottom: 10px;
    font-size: 17px;
    color: #222;
}


/* -----------------------------------------
   6. TITLES
----------------------------------------- */

/* 🔥 MAIN TITLE — FORCE THE MAIN FONT */
.event-title {
    font-family: 'JackMcCoyFont', serif !important;
    font-size: 58px !important;
    font-weight: 800 !important;
    line-height: 1.05;
    color: #0a4f74;
    margin-bottom: 25px;
}

/* Small subtitle above content (if needed in future) */
.section-title {
    font-family: 'JackMcCoyFont', serif !important;
    color: #0a4f74;
    font-size: 32px;
    margin-bottom: 10px;
}


/* -----------------------------------------
   7. BODY TEXT
----------------------------------------- */
.event-content p {
    font-size: 17px;
    line-height: 1.65;
    color: #333;
}


/* -----------------------------------------
   8. OVERVIEW LIST
----------------------------------------- */
.event-overview {
    margin: 15px 0 20px 22px;
    padding: 0;
}

.event-overview li {
    margin-bottom: 8px;
    font-size: 17px;
}


/* -----------------------------------------
   9. OPTIONAL BADGE (kept disabled)
----------------------------------------- */
.badge {
    display: none !important;
}


/* -----------------------------------------
   10. RESPONSIVE (MOBILE)
----------------------------------------- */
@media (max-width: 900px) {

    .aloha-event,
    .aloha-event.event-right {
        grid-template-columns: 1fr;
    }

    .event-content {
        padding: 30px 20px;
    }

    .event-title {
        font-size: 40px !important;
    }

    .event-overview {
        margin-left: 18px;
    }
}