/* PGRI events — an editorial "row" list with a refined search + month toolbar.
   Design language mirrors the site system (mw-jumpnav chips, contact-form
   inputs, road-card): Barlow Condensed titles, deep-green #004d32 + spring
   #8bc641 accents, sage hairlines, soft green focus ring. Everything is
   class-scoped, so it's inert on any page without an events list. */

/* ============================================================
   Toolbar — search field + month dropdown + live count
   ============================================================ */
/* Grid (not flex): a stray flex-line-sizing quirk in this ancestor context
   stretches a wrapped flex field to the full row — grid tracks are immune. */
.pgri-events-filter{
	display:grid;
	grid-template-columns:minmax(0,360px) auto 1fr;
	align-items:center;
	column-gap:.75rem;row-gap:.6rem;
	margin:0 0 1.4rem;
}

/* ---- Search field ---- */
.pgri-events-filter__field--search{
	grid-column:1;
	display:flex;align-items:center;gap:.55rem;min-width:0;
	background:#fff;border:1px solid #cdd8c6;border-radius:9px;
	padding:9px 14px;
	transition:border-color .15s ease, box-shadow .15s ease;
}
.pgri-events-filter__field--search:focus-within{
	border-color:#004d32;box-shadow:0 0 0 3px rgba(139,198,65,.18);
}
.pgri-events-filter__icon{color:#5a8c1d;flex:0 0 auto}
/* The wrapper draws the only border/shadow. Reset the input hard — the theme
   styles `input[type=search]` (border + radius + shadow + its own padding),
   which outspecifies a bare `.pgri-events-filter__input`, so scope it under the
   field to win and strip every field affordance the theme injects (that nested
   border was the "double border"). */
.pgri-events-filter__field--search .pgri-events-filter__input{
	border:0 !important;background:transparent !important;box-shadow:none !important;
	border-radius:0 !important;padding:0 !important;margin:0 !important;
	font:inherit;color:#16261c;width:100%;min-width:0;min-height:0;
}
.pgri-events-filter__input::placeholder{color:#9aa392}
/* Kill the global `input:focus-visible{outline:3px !important}` — the field
   shell already shows the single ring. */
.pgri-events-filter__input:focus-visible{outline:none !important;box-shadow:none !important}

/* ---- Custom month dropdown (a real listbox — the native <select> open panel
   is OS-rendered and can't be themed, so we build our own) ---- */
.pgri-events-filter__month{grid-column:2;justify-self:start;position:relative}

.pgri-md__trigger{
	display:flex;align-items:center;gap:.6rem;width:100%;min-width:132px;cursor:pointer;
	background:#fff;border:1px solid #cdd8c6;border-radius:9px;
	padding:9px 14px;font:inherit;color:#16261c;line-height:1.2;text-align:left;
	transition:border-color .15s ease, box-shadow .15s ease;
}
.pgri-md__trigger:hover{border-color:#a9bb9e}
.pgri-md__trigger[aria-expanded="true"],
.pgri-md__trigger:focus-visible{
	border-color:#004d32;box-shadow:0 0 0 3px rgba(139,198,65,.18);outline:none !important;
}
.pgri-md__label{white-space:nowrap}
.pgri-md__trigger::after{
	content:"";margin-left:auto;width:12px;height:12px;flex:0 0 auto;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%235a8c1d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition:transform .18s ease;
}
.pgri-md__trigger[aria-expanded="true"]::after{transform:rotate(180deg)}

.pgri-md__panel{
	position:absolute;z-index:30;top:calc(100% + 6px);left:0;min-width:100%;
	margin:0;padding:6px;list-style:none;
	background:#fff;border:1px solid #dbe3d3;border-radius:11px;
	box-shadow:0 16px 38px rgba(8,20,12,.15), 0 4px 10px rgba(8,20,12,.06);
}
.pgri-md__panel[hidden]{display:none}
.pgri-md__opt{
	display:flex;align-items:center;gap:.5rem;cursor:pointer;
	padding:8px 12px 8px 8px;border-radius:7px;
	font-family:"Barlow",sans-serif;font-size:.98rem;color:#26302a;white-space:nowrap;
	outline:none;transition:background .12s ease, color .12s ease;
}
.pgri-md__opt::before{
	content:"";width:15px;height:15px;flex:0 0 auto;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23004d32' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity:0;
}
.pgri-md__opt:hover,
.pgri-md__opt.is-focus{background:#f0f5ea;color:#004d32}
.pgri-md__opt[aria-selected="true"]{color:#004d32;font-weight:600}
.pgri-md__opt[aria-selected="true"]::before{opacity:1}

.pgri-events-filter__count{
	grid-column:3;justify-self:end;margin:0;
	font-family:"Barlow",sans-serif;
	font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;
	color:#6a7360;white-space:nowrap;
}
.pgri-events-filter__count strong{color:#004d32;font-weight:700;font-size:.95rem}

.pgri-events-filter__empty{
	padding:2.2rem 0;margin:0;color:#6a7360;font-size:1.05rem;
}

/* ============================================================
   Event rows — media · date · title · location, with a hover state
   ============================================================ */
.pgri-eventlist{list-style:none;margin:0;padding:0}
.pgri-eventlist > li,
.pgri-eventlist > .wp-block-post{margin:0}

.pgri-eventrow{
	gap:1.4rem;
	padding:1.35rem 1.1rem;
	border-radius:12px;
	align-items:center;
	position:relative;
	transition:background-color .18s ease;
}
/* Hairline between rows — an inset pseudo so the rounded hover fill never
   collides with the divider. */
.pgri-eventlist > li + li .pgri-eventrow::before,
.pgri-eventlist > .wp-block-post + .wp-block-post .pgri-eventrow::before{
	content:"";position:absolute;top:0;left:1.1rem;right:1.1rem;
	border-top:1px solid #e7ebe1;
}
.pgri-eventrow:hover{background:#f5f9f0}

/* Media */
.pgri-eventrow__media{flex:0 0 auto}
.pgri-eventrow__media .wp-block-post-featured-image{
	margin:0 !important;
	width:112px !important;height:112px !important;
	border-radius:14px !important;overflow:hidden;
	border:1px solid #e4eadd;background:#f3f6f0;display:block;
}
.pgri-eventrow__media .wp-block-post-featured-image a{display:block;width:100%;height:100%}
.pgri-eventrow__media img{
	width:100% !important;height:100% !important;
	object-fit:cover;display:block;border-radius:0 !important;
	transition:transform .3s ease;
}
.pgri-eventrow:hover .pgri-eventrow__media img{transform:scale(1.05)}

/* Body */
.pgri-eventrow__body{flex:1 1 auto;min-width:0}
.pgri-eventrow__date{
	color:#5a8c1d !important;
	font-weight:700 !important;font-size:.82rem !important;
	letter-spacing:.06em;text-transform:uppercase;
}
.pgri-eventrow__title{margin:.2rem 0 .35rem !important;line-height:1.08}
.pgri-eventrow__title a{
	color:#004d32;text-decoration:none;padding-bottom:1px;
	background-image:linear-gradient(#004d32,#004d32);
	background-repeat:no-repeat;background-position:0 100%;background-size:0 2px;
	transition:background-size .28s ease;
}
.pgri-eventrow:hover .pgri-eventrow__title a{background-size:100% 2px}
.pgri-eventrow__loc{color:#6a7360 !important;margin:0 !important;font-size:.95rem}

/* Hover affordance — a chevron that slides in on the right. Reserved as a flex
   item (opacity 0 at rest) so the layout never shifts. */
.pgri-eventrow::after{
	content:"";flex:0 0 auto;width:22px;height:22px;align-self:center;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23004d32' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity:0;transform:translateX(-8px);
	transition:opacity .2s ease, transform .2s ease;
}
.pgri-eventrow:hover::after{opacity:.85;transform:none}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:600px){
	/* search full-width row 1; month + count share row 2 */
	.pgri-events-filter{grid-template-columns:1fr auto;column-gap:.7rem}
	.pgri-events-filter__field--search{grid-column:1 / -1}
	.pgri-events-filter__field--month{grid-column:1;justify-self:start}
	.pgri-events-filter__count{grid-column:2;justify-self:end}
	.pgri-eventrow{gap:1rem;padding:1.1rem .6rem}
	.pgri-eventrow__media .wp-block-post-featured-image{width:84px !important;height:84px !important;border-radius:12px !important}
	.pgri-eventrow::after{display:none}
	.pgri-eventrow::before{left:.6rem !important;right:.6rem !important}
}