@import url("global-styles.css");
@import url("news-letter.css");
@import url("callout.css");
@import url("card.css");

.events-select {
    width: auto;
    height: auto;
    padding: 10px 15px;
    outline: none;
    border: none;
}
.events-select:hover {
    transform: none;
}

.events-select option {
    background-color: #e89a5b;
}

.events-select option:nth-child(odd) {
    background-color: #da9256;
}

.events-card figure {
    width: 70%;
    height: auto;
}

@media screen and (max-width: 1050px) {
    .events-card figure .image-events,
    .events-card figure {
        width: 380px;
    }
}

@media screen and (max-width: 415px) {
    .events-card figure .image-events,
    .events-card figure {
        width: 100%;
    }
}

@media screen and (max-width: 230px) {
    events-select {
        width: 100%;
        padding: 7px 10px;
    }
}

.events-card:hover figure {
    transform: none;
}

/* ================================================================
   Events Module — v2 styles
   ================================================================ */

.ev-main { max-width: 1100px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }

/* ── Calendar ─────────────────────────────────────────────────── */
.ev-calendar-section {
    margin-bottom: 3rem;
    padding-left: 3rem;
    padding-right: 3rem;
}

.ev-cal-nav {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1rem;
}
.ev-cal-nav__title { font-size: 1.25rem; font-weight: 700; margin: 0; }
.ev-cal-nav__arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.2rem; height: 2.2rem; border-radius: 50%;
    background: #f4f4f4; color: #333; text-decoration: none; font-size: 1.1rem;
    transition: background .15s;
}
.ev-cal-nav__arrow:hover { background: #e0e0e0; }

.ev-cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: 2px; background: #e5e5e5; border: 1px solid #e5e5e5; border-radius: 10px; overflow: hidden;
}
.ev-cal-head {
    background: #f7f7f7; text-align: center; padding: .4rem 0;
    font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #777;
}
.ev-cal-day {
    background: #fff; min-height: 3rem; display: flex; flex-direction: column;
    align-items: center; justify-content: center; padding: .35rem; position: relative;
}
.ev-cal-day--empty { background: #fafafa; }
.ev-cal-day__num { font-size: .9rem; font-weight: 500; color: #333; }
.ev-cal-day--today .ev-cal-day__num {
    background: #e89a5b; color: #fff; border-radius: 50%;
    width: 1.6rem; height: 1.6rem; display: flex; align-items: center; justify-content: center;
}
.ev-cal-dot {
    display: block; width: 6px; height: 6px; border-radius: 50%; background: #e89a5b; margin-top: 2px;
}
.ev-cal-day--has-event { background: #fff8f2; }

/* ── Section headings ─────────────────────────────────────────── */
.ev-section {
    max-width: 820px;
    margin: 0;
    padding: 3rem clamp(1.25rem, 5vw, 2.5rem) 2rem;
    box-sizing: border-box;
}
.ev-section--past { opacity: .85; }
.ev-section__title {
    font-size: 1.5rem; font-weight: 700; margin: 0 0 1.25rem;
    padding-bottom: .5rem; border-bottom: 2px solid #e89a5b; display: inline-block;
}
.ev-empty { color: #777; font-style: italic; }

/* ── Event cards ─────────────────────────────────────────────── */
.ev-cards {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem;
}
.ev-cards--past .ev-card { filter: grayscale(60%); opacity: .8; }
.ev-cards--past .ev-card:hover { filter: none; opacity: 1; }

.ev-card {
    background: #fff; border-radius: 12px; overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,.08); display: flex; flex-direction: column;
    transition: transform .2s, box-shadow .2s;
}
.ev-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }

.ev-card__img { width: 100%; height: 180px; overflow: hidden; background: #f0f0f0; }
.ev-card__img img { width: 100%; height: 100%; object-fit: cover; }
.ev-card__img-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #f0ede8 0%, #ddd8d0 100%); }

.ev-card__body { padding: 1.1rem 1.25rem 1.25rem; flex: 1; display: flex; flex-direction: column; gap: .4rem; }
.ev-card__date { font-size: .78rem; color: #e89a5b; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.ev-card__title { font-size: 1.05rem; font-weight: 700; margin: 0; line-height: 1.3; }
.ev-card__title a { color: inherit; text-decoration: none; }
.ev-card__title a:hover { color: #e89a5b; }
.ev-card__location { font-size: .85rem; color: #666; margin: 0; }
.ev-card__excerpt { font-size: .88rem; color: #555; margin: 0; flex: 1; }
.ev-card__link { margin-top: auto; font-size: .85rem; font-weight: 600; color: #e89a5b; text-decoration: none; }
.ev-card__link:hover { text-decoration: underline; }

/* ── Badges ───────────────────────────────────────────────────── */
.ev-badge { display: inline-block; padding: .2rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.ev-badge--completed { background: #eee; color: #777; }

/* ── Detail page ─────────────────────────────────────────────── */
.ev-detail-hero { display: flex; flex-wrap: wrap; gap: 2rem; margin-bottom: 2rem; }
.ev-detail-hero__img { flex: 0 0 auto; width: 100%; max-width: 480px; border-radius: 12px; overflow: hidden; }
.ev-detail-hero__img img { width: 100%; height: 300px; object-fit: cover; }
.ev-detail-hero__body { flex: 1 1 280px; display: flex; flex-direction: column; gap: .5rem; }
.ev-detail-hero__back { margin: 0; }
.ev-detail-hero__back a { color: #e89a5b; text-decoration: none; font-size: .9rem; }
.ev-detail-hero__title { font-size: 2rem; font-weight: 800; line-height: 1.2; margin: 0; }
.ev-detail-meta { list-style: none; padding: 0; margin: .5rem 0 0; font-size: .95rem; color: #444; display: flex; flex-direction: column; gap: .3rem; }

.ev-detail-body { margin-bottom: 2.5rem; }
.ev-detail-body__prose { max-width: 720px; font-size: 1rem; line-height: 1.75; color: #333; }
.ev-detail-body__prose h2,
.ev-detail-body__prose h3 { font-weight: 700; margin-top: 1.5rem; }

.ev-gallery {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem;
}
.ev-gallery__item { border-radius: 8px; overflow: hidden; aspect-ratio: 4/3; }
.ev-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.ev-gallery__item:hover img { transform: scale(1.04); }
.ev-gallery__item--cover { grid-column: span 2; grid-row: span 2; }

.ev-detail-footer { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #eee; }

@media (max-width: 640px) {
    .ev-detail-hero__img { max-width: 100%; }
    .ev-detail-hero__title { font-size: 1.5rem; }
    .ev-gallery__item--cover { grid-column: span 1; grid-row: span 1; }
}