/**
 * Events Preview module — plus the shared card/grid partials used by
 * template-parts/event-card.php and template-parts/news-card.php
 * (owned here since this is the module most central to their usage).
 */
.events-section {
    padding: 80px 0;
    background: var(--teal-pale);
}

.event-info-grid .section-text > p.lead {
	padding-left: 10px;
} 
.events-grid, .news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.events-grid.cols-1 { grid-template-columns:1fr; }
.events-grid.cols-2 { grid-template-columns:repeat(2,1fr); }
.events-grid.cols-4 { grid-template-columns:repeat(4,1fr); }
.event-card, .news-card { display:flex; flex-direction:column; height:100%; background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); text-decoration:none; color:inherit; position:relative; }
.event-date-block { position:absolute; top:16px; left:16px; background:var(--gold); color:#fff; border-radius:var(--radius); padding:8px 14px; text-align:center; z-index:1; }
.event-day { font-size:1.4em; font-weight:700; line-height:1; }
.event-month { font-size:.75em; text-transform:uppercase; }
.event-img-wrap img, .news-img-wrap img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.event-body, .news-body { display:flex; flex-direction:column; flex:1; padding:20px; gap:8px; }
.events-section .event-body h3, 
.events-section .news-grid .news-body h3 {
	color: var(--navy);
	margin: 10px 0 0;
	font-size: 24px;
    line-height: 1.5;
}

.events-section .event-body p, 
.events-section .news-grid .news-body p {
	margin-top: 10px;
}
.event-time-tag, .news-meta-tag { display:inline-block; background:var(--teal-pale); color:var(--teal); border-radius:999px; padding:4px 12px; font-size:.8em; }
.news-category-tag { display:inline-block; background:var(--gold); color:#fff; border-radius:999px; padding:4px 12px; font-size:.8em; font-weight:600; margin-right:8px; }
.event-card-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; }
.card-read-more { display:inline-flex; align-items:center; gap:6px; margin-top:auto; color:var(--teal); font-weight:700; font-size:.95em; transition:gap .2s; }
.card-read-more:hover { gap:10px; }
.no-results { text-align:center; color:var(--text-mid); }
@media (max-width:960px) {
	/* .cols-1/.cols-2 already sit at or below 2 columns, so they're left alone here —
	   this only needs to cap the wider variants (base/.news-grid's 3, and .cols-4) at 2. */
	.events-grid, .news-grid, .events-grid.cols-4 { grid-template-columns:1fr 1fr; }
}
@media (max-width:680px) {
	.events-grid, .news-grid,
	.events-grid.cols-2, .events-grid.cols-4 { grid-template-columns:1fr; }
}

/* Single event / single news article detail-page chrome (single-event.php,
   single-news_post.php) — these aren't Elementor modules, so their styles
   live here alongside the other event/news card partials they reuse. */
.event-detail-hero { position:relative; min-height:240px; display:flex; align-items:flex-end; padding:60px 0 40px; overflow:hidden; background: var(--navy); }
.event-detail-hero .hero-content { text-align:center; max-width:960px; }
.event-detail-hero h1 {color:white!important;}
.event-detail-meta { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.event-detail-date { background:var(--gold); color:#fff; border-radius:var(--radius); padding:10px 16px; text-align:center; }
.ed-day { font-size:1.6em; font-weight:700; line-height:1; }
.ed-month { font-size:.75em; text-transform:uppercase; }
.event-info-grid { display:grid; grid-template-columns:2fr 1fr; gap:48px; align-items:start; }
.event-info-card { background:#fff; border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm); margin-bottom:20px; }
.event-info-card .info-row { display:flex; gap:12px; margin-bottom:14px; }
.event-info-card .info-row:last-child { margin-bottom:0; }
.event-info-card .label { display:block; font-weight:700; color:var(--navy); font-size:.85em; }
.event-info-card .value { color:var(--text-mid); }

.event-info .event-teaser {
	width: 100%;
    aspect-ratio: 3 / 2;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
@media (max-width:960px) { .event-info-grid { grid-template-columns:1fr; } }