/* =============================================================================
   PNHSA Events — Frontend Styles
   Version: 1.0.0
   Scope: all selectors are prefixed .pnhsa-event* to avoid theme conflicts.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   CSS custom properties
   --------------------------------------------------------------------------- */
:root {
	--pnhsa-accent:        #3AD5E8;
	--pnhsa-card-bg:       #ffffff;
	--pnhsa-card-radius:   12px;
	--pnhsa-card-shadow:   0 2px 8px rgba(0, 0, 0, 0.08);
	--pnhsa-grid-gap:      1.75rem;
	--pnhsa-image-ratio:   56.25%;
	--pnhsa-placeholder:   #e5e7eb;
}

/* ---------------------------------------------------------------------------
   Empty-state message
   --------------------------------------------------------------------------- */
.pnhsa-events-empty {
	text-align: center;
	padding: 2.5rem 1rem;
	color: #000;
	font-size: 1rem;
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Grid
   --------------------------------------------------------------------------- */
.pnhsa-events-grid {
	display: grid;
	gap: var(--pnhsa-grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pnhsa-events-cols-3 { grid-template-columns: repeat(3, 1fr); }
.pnhsa-events-cols-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 1024px) {
	.pnhsa-events-cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.pnhsa-events-cols-3,
	.pnhsa-events-cols-2 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Card shell — no hover animation
   --------------------------------------------------------------------------- */
.pnhsa-event-card {
	background:     var(--pnhsa-card-bg);
	border-radius:  var(--pnhsa-card-radius);
	overflow:       hidden;
	box-shadow:     var(--pnhsa-card-shadow);
	display:        flex;
	flex-direction: column;
}

/* ---------------------------------------------------------------------------
   Image area
   --------------------------------------------------------------------------- */
.pnhsa-event-card__image-link {
	display:         block;
	text-decoration: none;
	outline-offset:  2px;
}

.pnhsa-event-card__image-wrap {
	position:    relative;
	overflow:    hidden;
	width:       100%;
	padding-top: var(--pnhsa-image-ratio);
	background:  var(--pnhsa-placeholder);
}

.pnhsa-event-card__image,
.pnhsa-event-card__image--placeholder {
	position: absolute;
	inset:    0;
	width:    100%;
	height:   100%;
}

.pnhsa-event-card__image {
	object-fit:      cover;
	object-position: center;
	display:         block;
}

.pnhsa-event-card__image--placeholder {
	background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
}

/* ---------------------------------------------------------------------------
   Date badge
   --------------------------------------------------------------------------- */
.pnhsa-event-card__date-badge {
	position:       absolute;
	top:            12px;
	left:           12px;
	z-index:        2;
	background:     var(--pnhsa-accent);
	color:          #fff;
	border-radius:  8px;
	padding:        7px 11px;
	text-align:     center;
	line-height:    1.1;
	display:        flex;
	flex-direction: column;
	align-items:    center;
	min-width:      50px;
	box-shadow:     0 2px 8px rgba(0, 0, 0, 0.28);
	pointer-events: none;
}

.pnhsa-event-card__badge-month {
	font-size:      0.6rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity:        0.9;
}

.pnhsa-event-card__badge-day {
	font-size:   1.75rem;
	font-weight: 800;
	line-height: 1;
	margin:      2px 0;
}

.pnhsa-event-card__badge-year {
	font-size:      0.55rem;
	font-weight:    600;
	letter-spacing: 0.05em;
	opacity:        0.8;
}

/* ---------------------------------------------------------------------------
   Card body
   --------------------------------------------------------------------------- */
.pnhsa-event-card__body {
	padding:        1.25rem 1.4rem 1.5rem;
	display:        flex;
	flex-direction: column;
	flex:           1;
	gap:            0.45rem;
}

/* ---------------------------------------------------------------------------
   Title — black, no hover color change
   --------------------------------------------------------------------------- */
.pnhsa-event-card__title {
	font-size:   1.1rem;
	font-weight: 700;
	line-height: 1.3;
	margin:      0 0 0.35rem;
	color:       #000;
}

.pnhsa-event-card__title a {
	color:           #000 !important;
	text-decoration: none !important;
}

.pnhsa-event-card__title a:hover {
	color:           #000 !important;
	text-decoration: none !important;
}

/* ---------------------------------------------------------------------------
   Meta rows (date / time / location) — black
   --------------------------------------------------------------------------- */
.pnhsa-event-card__meta {
	display:     flex;
	align-items: flex-start;
	gap:         0.45rem;
	margin:      0;
	font-size:   0.875rem;
	color:       #000;
	line-height: 1.45;
}

.pnhsa-event-card__icon {
	flex-shrink: 0;
	width:       15px;
	height:      15px;
	margin-top:  2px;
	color:       #000;
}

.pnhsa-event-card__icon svg {
	width:   100%;
	height:  100%;
	display: block;
}

/* ---------------------------------------------------------------------------
   Excerpt — black
   --------------------------------------------------------------------------- */
.pnhsa-event-card__excerpt {
	font-size:          0.875rem;
	color:              #000;
	line-height:        1.65;
	margin-top:         0.3rem;
	display:            -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow:           hidden;
}

.pnhsa-event-card__excerpt p {
	margin: 0;
}

/* ---------------------------------------------------------------------------
   CTA link — black, no hover color change
   --------------------------------------------------------------------------- */
.pnhsa-event-card__cta {
	display:         inline-flex;
	align-items:     center;
	gap:             0.3rem;
	margin-top:      auto;
	padding-top:     0.85rem;
	font-size:       0.875rem;
	font-weight:     600;
	color:           #000 !important;
	text-decoration: none !important;
	letter-spacing:  0.01em;
}

.pnhsa-event-card__cta:hover {
	color:           #000 !important;
	text-decoration: underline !important;
}