/* Trailwind Gravel Events — front-end styles
   Everything is scoped under .twge-app so it won't touch the rest of the site. */

.twge-app {
	--tw-ink: #1D1C24;
	--tw-pumpkin: #F36C21;
	--tw-ember: #C55217;
	--tw-copper: #B67749;
	--tw-trellised: #989F96;
	--tw-teal: #A0C9CB;
	--tw-offwhite: #F2EDE6;
	--tw-slate: #E4E8E8;

	color: var(--tw-ink);
	font-family: "Libre Baskerville", Georgia, serif;
	max-width: 1200px;
	margin: 0 auto;
}

/* ---- Controls ---------------------------------------------------------- */
.twge-app .twge-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 16px;
	align-items: center;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--tw-slate);
}
.twge-app .twge-search-wrap { flex: 1 1 240px; }
.twge-app .twge-search,
.twge-app .twge-select {
	font-family: "Rajdhani", system-ui, sans-serif;
	font-weight: 600;
	font-size: 16px;
	color: var(--tw-ink);
	background: #fff;
	border: 1px solid var(--tw-trellised);
	border-radius: 4px;
	padding: 9px 12px;
	width: 100%;
	box-sizing: border-box;
}
.twge-app .twge-search:focus,
.twge-app .twge-select:focus {
	outline: 2px solid var(--tw-pumpkin);
	outline-offset: 1px;
	border-color: var(--tw-pumpkin);
}
.twge-app .twge-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}
.twge-app .twge-select { width: auto; min-width: 150px; }
.twge-app .twge-toggle {
	font-family: "Rajdhani", system-ui, sans-serif;
	font-weight: 600;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	white-space: nowrap;
}
.twge-app .twge-toggle input { accent-color: var(--tw-pumpkin); width: 16px; height: 16px; }

/* ---- Layout ------------------------------------------------------------ */
.twge-app .twge-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 28px;
	align-items: start;
}
.twge-app .twge-count {
	font-family: "Rajdhani", system-ui, sans-serif;
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--tw-trellised);
	margin-bottom: 12px;
}

/* ---- List -------------------------------------------------------------- */
.twge-app .twge-list { list-style: none; margin: 0; padding: 0; }
.twge-app .twge-card {
	background: #fff;
	border: 1px solid var(--tw-slate);
	border-left: 4px solid var(--tw-trellised);
	border-radius: 4px;
	padding: 16px 18px;
	margin-bottom: 12px;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.twge-app .twge-card:hover,
.twge-app .twge-card.is-active {
	box-shadow: 0 4px 14px rgba(29, 28, 36, 0.10);
	transform: translateY(-1px);
}
.twge-app .twge-card.is-active { border-left-color: var(--tw-ink); }
.twge-app .twge-card.is-featured { border-left-color: var(--tw-pumpkin); background: #FFF8F3; }
.twge-app .twge-card.is-featured.is-active { box-shadow: 0 4px 16px rgba(243, 108, 33, 0.22); }
.twge-app .twge-card.is-past { opacity: 0.6; }

.twge-app .twge-card-top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}
.twge-app .twge-date {
	font-family: "Rajdhani", system-ui, sans-serif;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--tw-ember);
	white-space: nowrap;
}
.twge-app .twge-badge {
	font-family: "Rajdhani", system-ui, sans-serif;
	font-weight: 700;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #fff;
	background: var(--tw-pumpkin);
	padding: 3px 8px;
	border-radius: 3px;
	white-space: nowrap;
}
.twge-app .twge-name {
	font-family: "Teko", system-ui, sans-serif;
	font-weight: 700;
	font-size: 28px;
	line-height: 1.05;
	margin: 6px 0 4px;
	color: var(--tw-ink);
}
.twge-app .twge-place {
	font-family: "Rajdhani", system-ui, sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: var(--tw-copper);
	margin-bottom: 8px;
}
.twge-app .twge-blurb {
	font-size: 14px;
	line-height: 1.55;
	margin: 8px 0 10px;
}
.twge-app .twge-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.twge-app .twge-tag {
	font-family: "Rajdhani", system-ui, sans-serif;
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--tw-ink);
	background: var(--tw-offwhite);
	border: 1px solid var(--tw-slate);
	padding: 2px 8px;
	border-radius: 3px;
}
.twge-app .twge-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.twge-app .twge-btn {
	font-family: "Rajdhani", system-ui, sans-serif;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	padding: 8px 14px;
	border-radius: 4px;
	display: inline-block;
}
.twge-app .twge-btn-primary { background: var(--tw-pumpkin); color: #fff; }
.twge-app .twge-btn-primary:hover { background: var(--tw-ember); }
.twge-app .twge-btn-ghost {
	background: transparent;
	color: var(--tw-ink);
	border: 1px solid var(--tw-trellised);
}
.twge-app .twge-btn-ghost:hover { border-color: var(--tw-ink); }

.twge-app .twge-empty {
	font-size: 15px;
	color: var(--tw-trellised);
	padding: 24px 0;
}

/* ---- Map --------------------------------------------------------------- */
.twge-app .twge-map-wrap { position: sticky; top: 20px; }
.twge-app .twge-map {
	height: 620px;
	border-radius: 4px;
	border: 1px solid var(--tw-slate);
	background: var(--tw-slate);
}
.twge-app .twge-pin {
	width: 18px;
	height: 18px;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(29, 28, 36, 0.4);
}
.twge-app .twge-pin.is-featured { background: var(--tw-pumpkin); }
.twge-app .twge-pin.is-external { background: var(--tw-teal); }
.twge-app .twge-pin.is-active { transform: rotate(-45deg) scale(1.35); z-index: 1000; }

/* Leaflet popup, brand-styled */
.leaflet-popup-content-wrapper { border-radius: 4px; }
.twge-pop-name {
	font-family: "Teko", system-ui, sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 1.05;
	color: #1D1C24;
	margin: 0 0 2px;
}
.twge-pop-meta {
	font-family: "Rajdhani", system-ui, sans-serif;
	font-weight: 600;
	font-size: 13px;
	color: #B67749;
	margin: 0 0 8px;
}
.twge-pop-link {
	font-family: "Rajdhani", system-ui, sans-serif;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #F36C21;
	text-decoration: none;
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 860px) {
	.twge-app .twge-layout { grid-template-columns: 1fr; }
	.twge-app .twge-map-wrap { position: static; order: -1; }
	.twge-app .twge-map { height: 340px; }
}

@media (prefers-reduced-motion: reduce) {
	.twge-app .twge-card { transition: none; }
}