/* Events & Outreach directory
   (c) HAUS XXIV, LLC · Licensed to Long Beach Pride */

.ed .head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--gap) clamp(32px, 6vw, 120px); align-items: end; margin-bottom: clamp(28px, 3.4vw, 52px); }
.ed .head .kicker { margin-bottom: 20px; }
.ed .head .lead { margin: 0; }

/* Filter bar: stays in reach while scrolling the list */
.ed-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 8px; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 0 0 1px rgba(12, 12, 14, .06), 0 14px 34px -22px rgba(12, 12, 14, .4); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.ed-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.ed-seg button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: inherit; font-size: var(--t-sm); font-weight: 700; cursor: pointer; transition: background .25s, color .25s; }
.ed-seg button:hover { background: var(--bone); color: var(--ink); }
.ed-seg button[aria-checked="true"] { background: var(--ink); color: #fff; }
.ed-seg button:focus-visible, .ed-cat select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ed-n { min-width: 24px; padding: 1px 7px; border-radius: 99px; background: rgba(12, 12, 14, .08); font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; }
.ed-seg button[aria-checked="true"] .ed-n { background: rgba(255, 255, 255, .2); }
.ed-cat select { min-height: 44px; padding: 0 40px 0 18px; border: 1px solid var(--hair-2); border-radius: 999px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230C0C0E' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center / 16px; color: var(--ink); font: inherit; font-size: var(--t-sm); font-weight: 600; -webkit-appearance: none; appearance: none; cursor: pointer; }
.ed-count { margin: 0 14px 0 auto; font-size: var(--t-sm); font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Month groups */
.ed-month[hidden], .ed-item[hidden] { display: none; }
.ed .tg-h { display: flex; align-items: center; gap: 14px; margin: clamp(44px, 5vw, 80px) 0 clamp(18px, 2vw, 28px); font-family: var(--sans); font-size: var(--t-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.ed .tg-h::after { content: ""; flex: 1; height: 1px; background: var(--hair-2); }
.ed-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.2vw, 32px); margin: 0; padding: 0; list-style: none; }
.ed-item { min-width: 0; }

/* Card: the whole card is the link (title link stretched over it) */
.ed-card { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(12, 12, 14, .06), 0 2px 6px -2px rgba(12, 12, 14, .08), 0 24px 48px -26px rgba(12, 12, 14, .28); transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s cubic-bezier(.22, 1, .36, 1); }
.ed-card:hover { transform: translateY(-5px); box-shadow: 0 0 0 1px rgba(12, 12, 14, .06), 0 4px 10px -4px rgba(12, 12, 14, .1), 0 34px 60px -28px rgba(12, 12, 14, .36); }
.ed-card:focus-within { box-shadow: 0 0 0 3px var(--focus), 0 24px 48px -26px rgba(12, 12, 14, .28); }
.ed-img { position: relative; aspect-ratio: 4 / 3; margin: 8px 8px 0; border-radius: 18px; background: var(--bone); }
.ed-ph { position: absolute; inset: 0; overflow: hidden; border-radius: 18px; }
.ed-ph img { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; }
.ed .lbp-ptag { display: none !important; }
/* Tall or square images (flyers): the whole image, centered over a soft blurred fill of itself */
.ed-ph.is-fit { background: #1a1024; }
.ed-ph.is-fit::before { content: ""; position: absolute; inset: -24px; background: var(--bg) center / cover no-repeat; filter: blur(22px) saturate(1.3) brightness(.85); transform: scale(1.1); }
html body main .ed .ed-ph.is-fit img { position: relative; object-fit: contain !important; object-position: 50% 50% !important; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .35)); }
.ed-cover { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 18px 20px 30px; border-radius: 18px; color: #fff; font-size: 17px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.ed-cover > span { max-width: 20ch; text-shadow: 0 1px 12px rgba(0, 0, 0, .25); }
.ed-cover[data-tone="1"] { background: radial-gradient(120% 90% at 0% 0%, #8B5CF6 0%, transparent 55%), radial-gradient(110% 90% at 100% 100%, #EC4899 0%, transparent 55%), #312E81; }
.ed-cover[data-tone="2"] { background: radial-gradient(120% 90% at 100% 0%, #22D3EE 0%, transparent 55%), radial-gradient(110% 90% at 0% 100%, #6366F1 0%, transparent 55%), #1E3A8A; }
.ed-cover[data-tone="3"] { background: radial-gradient(120% 90% at 0% 100%, #F59E0B 0%, transparent 55%), radial-gradient(110% 90% at 100% 0%, #A855F7 0%, transparent 55%), #4C1D95; }
.ed-cal { position: absolute; z-index: 2; left: 14px; bottom: -22px; width: 52px; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(12, 12, 14, .06), 0 10px 22px -10px rgba(12, 12, 14, .45); font-family: var(--sans); text-align: center; }
.ed-cal .m { display: block; padding: 3px 0 2px; background: #D70015; color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ed-cal .d { display: block; padding: 2px 0 5px; color: var(--ink); font-size: 24px; font-weight: 600; line-height: 1.1; letter-spacing: -.03em; }
.ed-tag { position: absolute; z-index: 2; top: 12px; right: 12px; display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px; border-radius: 99px; background: rgba(255, 255, 255, .94); color: var(--ink); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5); }
.is-ours .ed-tag { background: linear-gradient(120deg, #D60270 0%, #9B1BB0 55%, #750787 100%); color: #fff; }
.ed-body { display: flex; flex: 1; flex-direction: column; padding: 34px 20px 18px; }
.ed-meta { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
/* Same card as the home page events (host above the title, date, two lines, a hairline, venue and a black button) */
.ed-host { margin: 0; overflow: hidden; font-size: 11.5px; font-weight: 600; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-3); }
.ed-t { display: -webkit-box; margin: 10px 0 0; overflow: hidden; font-size: 18px !important; font-weight: 650 !important; line-height: 1.22 !important; letter-spacing: -.02em; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ed-t a { color: var(--ink); text-decoration: none; }
.ed-t a::after { content: ""; position: absolute; z-index: 3; inset: 0; border-radius: 24px; }
.ed-t a:focus-visible { outline: none; }
.ed-when { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--accent-ink, #6D28D9); }
.ed-when { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ed-desc { display: -webkit-box; margin: 8px 0 0; overflow: hidden; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ed-foot { display: flex; align-items: center; gap: 8px; margin: auto -20px 0; padding: 14px 20px 0; border-top: 1px solid rgba(12, 12, 14, .07); }
.ed-body > :has(+ .ed-foot) { margin-bottom: 16px; }
.ed-where { flex: 1; min-width: 0; overflow: hidden; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-3); }
.ed-go { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 34px; margin-left: auto; padding: 0 14px; border-radius: 999px; background: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap; color: #fff; transition: background .2s; }
.ed-card:hover .ed-go { background: #2A2A30; }
.ed-go svg { width: 14px; height: 14px; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.ed-card:hover .ed-go svg { transform: translate(2px, -2px); }
.ed-none { margin-top: 40px; }

/* Load more: a quiet line, a count, one clear button */
.ed-more { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: clamp(48px, 5vw, 72px); }
.ed-more[hidden] { display: none; }
.ed-more::before { content: ""; width: min(320px, 60%); height: 1px; margin-bottom: 8px; background: linear-gradient(90deg, transparent, var(--hair-2), transparent); }
.ed-shown { margin: 0; font-size: var(--t-sm); font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ed-more-btn { display: inline-flex; align-items: center; gap: 12px; height: 54px; padding: 0 22px 0 30px; border: 1.5px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background .3s, color .3s; }
.ed-more-btn svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--ink); fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; transition: background .3s, stroke .3s; }
.ed-more-btn:hover { background: var(--ink); color: #fff; }
.ed-more-btn:hover svg { background: #fff; stroke: var(--ink); }
.ed-more-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Share your event */
.ed-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; margin-top: clamp(56px, 6vw, 96px); padding: clamp(24px, 3vw, 44px); border-radius: var(--r-lg, 28px); background: radial-gradient(80% 140% at 0% 0%, rgba(214, 2, 112, .12), transparent 60%), radial-gradient(80% 140% at 100% 100%, rgba(0, 77, 255, .1), transparent 60%), var(--bone); }
.ed-share-t { margin: 0 0 6px; font-size: clamp(22px, 2vw, 30px) !important; font-weight: 800; letter-spacing: -.02em; }
.ed-share p { max-width: 60ch; margin: 0; color: var(--ink-2); }

/* List / Calendar switch */
.ed-view { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--bone); }
.ed-view[hidden], .ed-list[hidden], .ed-cal-view[hidden] { display: none; }
.ed-view button { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: inherit; font-size: var(--t-sm); font-weight: 650; cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
.ed-view button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ed-view button:hover { color: var(--ink); }
.ed-view button[aria-checked="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(12, 12, 14, .1), 0 3px 10px -4px rgba(12, 12, 14, .18); }
.ed-view button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ed-view + .ed-count, .ed-count:has(+ .ed-view) { margin-right: 6px; }

/* Category colors (Apple system palette); Long Beach Pride events use the brand magenta */
.ed [data-c] { --c: #8E8E93; }
.ed [data-c="arts-culture"] { --c: #FF9500; }
.ed [data-c="board-membership"] { --c: #8E8E93; }
.ed [data-c="business"] { --c: #636366; }
.ed [data-c="civic"] { --c: #5856D6; }
.ed [data-c="community"] { --c: #007AFF; }
.ed [data-c="fundraiser"] { --c: #FF2D55; }
.ed [data-c="health-support"] { --c: #30B0C7; }
.ed [data-c="observances"] { --c: #A2845E; }
.ed [data-c="seniors"] { --c: #00C7BE; }
.ed [data-c="social-nightlife"] { --c: #AF52DE; }
.ed [data-c="sports-wellness"] { --c: #34C759; }
.ed [data-c="youth-family"] { --c: #FFB800; }
.ed .is-ours[data-c], .ed [data-c].is-ours { --c: #C8137E; }

/* Calendar */
.ed-cal-view { margin-top: clamp(28px, 3vw, 44px); }
.edc { display: grid; grid-template-columns: minmax(0, 1fr) 340px; overflow: hidden; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px rgba(12, 12, 14, .07), 0 2px 6px -2px rgba(12, 12, 14, .06), 0 30px 60px -34px rgba(12, 12, 14, .32); }
.edc-main { min-width: 0; padding: clamp(18px, 2vw, 28px) clamp(16px, 2vw, 28px) clamp(16px, 2vw, 24px); }
.edc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.edc-title { margin: 0; white-space: nowrap; font-family: var(--sans); font-size: clamp(24px, 2.3vw, 34px) !important; font-weight: 400 !important; line-height: 1.1 !important; letter-spacing: -.025em; color: var(--ink); }
.edc-title b { font-weight: 700; }
.edc-nav { display: flex; align-items: center; gap: 6px; }
.edc-btn { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--bone); color: var(--ink); font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; transition: background .2s, opacity .2s; }
.edc-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.edc-btn:hover:not(:disabled) { background: var(--bone-2, #E8E8EA); }
.edc-btn:disabled { opacity: .35; cursor: default; }
.edc-btn:focus-visible, .edc-dn:focus-visible, .edc-item:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.edc-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.edc-wk span { padding: 0 10px 10px; font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; text-align: right; color: var(--ink-3); }
.edc-wk abbr { text-decoration: none; }
.edc-grid { border-radius: 16px; }
.edc-row:not(.edc-wk) + .edc-row, .edc-wk + .edc-row { border-top: 1px solid var(--hair); }
.edc-day { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 116px; padding: 6px 6px 8px; cursor: pointer; transition: background .2s; }
.edc-day + .edc-day { border-left: 1px solid var(--hair); }
.edc-day:hover { background: rgba(12, 12, 14, .025); }
.edc-day.is-sel { background: rgba(200, 19, 126, .055); }
.edc-day.is-out { background: rgba(12, 12, 14, .018); }
.edc-day.is-out .edc-dn span, .edc-day.is-past .edc-dn span { color: #A1A1A8; }
.edc-day.is-past .edc-evs { opacity: .55; }
.edc-dn { align-self: flex-end; display: grid; place-items: center; width: 30px; height: 30px; margin: 0 0 4px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); font: inherit; font-size: 15px; font-weight: 550; font-variant-numeric: tabular-nums; cursor: pointer; }
.edc-dn::after { content: ""; position: absolute; inset: 0; }
.edc-day.is-today .edc-dn { background: #D70015; color: #fff; font-weight: 700; }
.edc-day.is-today .edc-dn span { color: #fff; }
.edc-day.is-sel:not(.is-today) .edc-dn { background: var(--ink); color: #fff; }
.edc-day.is-sel:not(.is-today) .edc-dn span { color: #fff; }
.edc-evs { display: flex; flex-direction: column; gap: 3px; min-width: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.edc-ev { display: flex; align-items: baseline; gap: 5px; min-width: 0; padding: 3px 7px 3px 8px; border-radius: 6px; background: color-mix(in srgb, var(--c) 13%, #fff); box-shadow: inset 2.5px 0 0 var(--c); color: var(--ink); font-size: 11.5px; font-weight: 600; line-height: 1.25; }
/* Titles get the room in the grid; times are in the day list. */
.edc-tm { display: none; flex: none; color: color-mix(in srgb, var(--c) 55%, var(--ink)); font-weight: 650; font-variant-numeric: tabular-nums; }
.edc-et { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.edc-more { padding: 1px 8px; font-size: 11px; font-weight: 650; color: var(--ink-3); }
.edc-dots { display: none; }

/* Day agenda */
.edc-side { display: flex; flex-direction: column; min-width: 0; max-height: 860px; overflow-y: auto; padding: clamp(20px, 2vw, 28px); border-left: 1px solid var(--hair); background: #FAFAFB; overscroll-behavior: contain; }
.edc-side-head { margin-bottom: 16px; }
.edc-side-k { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #D70015; }
.edc-side-d { margin: 4px 0 0; font-size: 26px !important; font-weight: 700 !important; line-height: 1.1 !important; letter-spacing: -.025em; }
.edc-side-sub { margin: 22px 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.edc-empty { margin: 6px 0 0; color: var(--ink-3); font-size: 15px; }
.edc-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.edc-item { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 10px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(12, 12, 14, .06), 0 8px 20px -14px rgba(12, 12, 14, .3); color: var(--ink); text-decoration: none; transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s; }
.edc-item::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--c); }
.edc-item:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(12, 12, 14, .06), 0 14px 28px -16px rgba(12, 12, 14, .36); }
.edc-thumb { overflow: hidden; width: 64px; height: 80px; border-radius: 10px; background: linear-gradient(150deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c)); }
.edc-thumb img { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; }
.edc-it { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 1px; }
.edc-time { font-size: 12.5px; font-weight: 650; color: color-mix(in srgb, var(--c) 60%, var(--ink)); font-variant-numeric: tabular-nums; }
.edc-name { font-size: 15px; font-weight: 650; line-height: 1.25; letter-spacing: -.01em; }
.edc-host { overflow: hidden; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
.edc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.edc-chip, .edc-cat { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 0 8px; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.edc-chip { background: var(--bone); color: var(--ink-2); }
.is-ours .edc-chip { background: linear-gradient(120deg, #D60270 0%, #9B1BB0 55%, #750787 100%); color: #fff; }
.edc-cat { background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--ink-2); }
.edc-cat i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }

@media (max-width: 1100px) { .ed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1180px) {
	.edc { grid-template-columns: 1fr; }
	.edc-side { max-height: none; border-left: 0; border-top: 1px solid var(--hair); }
	.edc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
@media (max-width: 900px) {
	.ed .head { grid-template-columns: 1fr; }
	.ed-bar { border-radius: 22px; }
	.ed-count { margin-left: 8px; }
}
@media (max-width: 640px) {
	.ed-grid { grid-template-columns: 1fr; }
	.ed-bar { padding: 10px; }
	.ed-seg { width: 100%; }
	.ed-seg button { flex: 1 1 auto; justify-content: center; padding: 0 12px; }
	.ed-cat, .ed-cat select { width: 100%; }
	.ed-count { margin: 0 6px; }
	.ed-view { width: 100%; }
	.ed-view button { flex: 1; justify-content: center; }
	/* Phones: compact month like iOS Calendar, with dots for days that have events */
	.edc { border-radius: 22px; }
	.edc-main { padding: 16px 10px 12px; }
	.edc-head { gap: 10px; padding: 0 6px; }
	.edc-title { font-size: 23px !important; }
	.edc-btn { min-width: 36px; height: 36px; padding: 0 10px; }
	.edc-wk span { padding: 0 0 8px; text-align: center; font-size: 11px; }
	.edc-row:not(.edc-wk) + .edc-row, .edc-wk + .edc-row { border-top: 0; }
	.edc-day, .edc-day + .edc-day { align-items: center; min-height: 52px; padding: 2px 0 6px; border-left: 0; background: none !important; }
	.edc-dn { align-self: center; width: 36px; height: 36px; margin: 0; font-size: 17px; }
	.edc-evs { display: none; }
	.edc-dots { display: flex; gap: 3px; height: 6px; margin-top: 3px; }
	.edc-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
	.edc-day.is-past .edc-dots { opacity: .45; }
	.edc-side { padding: 18px 14px 20px; }
	.edc-list { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
	.ed-card, .ed-go svg, .edc-item, .edc-day, .ed-view button { transition: none; }
	.ed-card:hover, .edc-item:hover { transform: none; }
}

/* ==========================================================================
   Nov 2026 refresh: categories only, share menu, cleaner calendar
   ========================================================================== */
.ed [data-c="long-beach-pride"] { --c: #C8137E; }
.ed [data-c="youth-family"] { --c: #E0A100; }
.ed [data-c="observances"] { --c: #8E7152; }

/* Filter bar: one category menu and the view switch */
.ed-bar { gap: 12px; }
.ed-cat.lbp-sel .lbp-dd-btn { height: 44px; border-radius: 999px; }
.ed-cat .lbp-dd-list li[data-c] .lbp-dd-oi { color: var(--c); }
.ed-cat .lbp-dd-i { color: var(--accent-ink, #6D28D9); }
.ed-cat .lbp-dd-i[data-c] { color: var(--c); }

/* Card category label (top right of the image) */
.ed-tag { gap: 6px; padding: 0 11px 0 8px; background: rgba(255, 255, 255, .94); color: var(--ink); font-weight: 650; box-shadow: 0 1px 2px rgba(12, 12, 14, .12); }
.ed-tag-i { display: inline-grid; place-items: center; width: 16px; height: 16px; color: var(--c); }
.ed-tag-i svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ed-by { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-3); }

/* Share button and menu */
.ed-foot { position: relative; z-index: 4; }
.ed-share-btn { position: relative; z-index: 5; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 10px; border: 0; border-radius: 999px; background: var(--bone); color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s; }
.ed-share-btn:hover, .ed-share-btn[aria-expanded="true"] { background: var(--bone-2, #E8E8EA); color: var(--ink); }
.ed-share-btn:focus-visible { outline: 2px solid var(--focus, #004DFF); outline-offset: 2px; }
.ed-share-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ed-share-btn.is-icon { width: 36px; height: 36px; padding: 0; justify-content: center; background: transparent; }
.ed-share-btn.is-icon:hover { background: var(--bone); }
.ed-sharepop { position: absolute; z-index: 1000; width: 240px; padding: 8px; border-radius: 18px; background: #fff; box-shadow: 0 28px 64px -20px rgba(28, 16, 52, .38), 0 0 0 1px rgba(12, 12, 14, .07); }
.ed-sharepop[hidden] { display: none; }
.ed-sharepop-t { margin: 6px 10px 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.ed-sharepop ul { margin: 0; padding: 0; list-style: none; }
.ed-sharepop a, .ed-sharepop button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: 12px; background: none; font: inherit; font-size: 14.5px; font-weight: 550; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; }
.ed-sharepop a:hover, .ed-sharepop button:hover, .ed-sharepop a:focus-visible, .ed-sharepop button:focus-visible { background: var(--bone); outline: none; }
.ed-sharepop svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--accent-ink, #6D28D9); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Calendar, cleaned up (Apple Calendar feel): hairline grid, plain day
   numbers, events as a colored dot + title, simple agenda rows. */
.edc { box-shadow: 0 0 0 1px rgba(12, 12, 14, .07); }
.edc-head { margin-bottom: 14px; }
.edc-title { font-size: clamp(26px, 2.4vw, 34px) !important; letter-spacing: -.02em; }
.edc-title b { font-weight: 650; }
.edc-btn { background: transparent; color: var(--ink-2); }
.edc-btn:hover:not(:disabled) { background: var(--bone); }
.edc-today { padding: 0 14px; box-shadow: inset 0 0 0 1px rgba(12, 12, 14, .12); font-size: 14px; font-weight: 600; }
.edc-wk span { padding: 0 10px 8px; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--ink-3); }
.edc-row:not(.edc-wk) + .edc-row, .edc-wk + .edc-row { border-top: 1px solid rgba(12, 12, 14, .07); }
.edc-day + .edc-day { border-left: 1px solid rgba(12, 12, 14, .05); }
.edc-day { min-height: 112px; padding: 6px 4px 8px; }
.edc-day:hover { background: rgba(12, 12, 14, .02); }
.edc-day.is-sel { background: rgba(12, 12, 14, .035); }
.edc-day.is-out { background: none; }
.edc-day.is-out .edc-dn span { color: #C7C7CC; }
.edc-day.is-out .edc-evs { opacity: .4; }
.edc-dn { width: 28px; height: 28px; font-size: 14px; font-weight: 500; }
.edc-day.is-sel:not(.is-today) .edc-dn { background: var(--ink); }
.edc-day.is-today .edc-dn { background: #FF3B30; font-weight: 600; }
.edc-evs { gap: 1px; }
.edc-ev:not(#_) { display: flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 5px; background: none; box-shadow: none; font-size: 12px; font-weight: 500; line-height: 1.35; color: var(--ink-2); }
.edc-ev i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--c); }
.edc-more { padding: 2px 4px 0 16px; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.edc-side { background: #fff; }
.edc-side-k { color: #FF3B30; font-weight: 650; }
.edc-side-d { font-weight: 650 !important; }
.edc-list { gap: 0; }
.edc-row-item { position: relative; display: flex; align-items: flex-start; gap: 6px; padding: 12px 0; border-top: 1px solid rgba(12, 12, 14, .07); }
.edc-row-item:first-child { border-top: 0; }
.edc-row-item::before { content: ""; flex: none; width: 3px; align-self: stretch; margin-right: 8px; border-radius: 3px; background: var(--c); }
.edc-item:not(#_) { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ink); text-decoration: none; }
.edc-item::before { display: none; }
.edc-item:hover { transform: none; box-shadow: none; }
.edc-item:hover .edc-name { color: var(--accent-ink, #6D28D9); }
.edc-time { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.edc-name { font-size: 15px; font-weight: 600; transition: color .2s; }
.edc-cat { min-height: 0; margin-top: 3px; padding: 0; background: none; font-size: 12px; font-weight: 550; color: var(--ink-3); }
.edc-cat i { width: 6px; height: 6px; }
@media (max-width: 1180px) { .edc-list { display: flex; } }
@media (max-width: 640px) {
	.ed-cat.lbp-sel, .ed-cat .lbp-dd, .ed-cat .lbp-dd-btn { width: 100%; }
}
.ed [data-c="outreach-support"] { --c: #30B0C7; }
.ed [data-c="bars-nightlife"] { --c: #AF52DE; }
.ed [data-c="business-networking"] { --c: #636366; }
.ed [data-c="civic-advocacy"] { --c: #5856D6; }
.ed [data-c="community-social"] { --c: #007AFF; }
.ed-bar:not(#_) { overflow: visible; position: relative; z-index: 6; }

/* Organizer logo: a white tile across from the date, same row and size */
.ed-org { position: absolute; z-index: 2; right: 14px; bottom: -22px; display: grid; place-items: center; width: 52px; height: 52px; padding: 6px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(12, 12, 14, .06), 0 10px 22px -10px rgba(12, 12, 14, .45); overflow: hidden; }
.ed-org img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* Zoom: the card image opens full size in a pop-up (view.js). A chip top left
   says so; with more than one image it shows how many. */
.ed-zoom { position: absolute; z-index: 4; inset: 0; padding: 0; border: 0; border-radius: 18px; background: none; cursor: zoom-in; }
.ed-zoom:focus-visible { outline: 3px solid var(--focus, #004DFF); outline-offset: 2px; }
.ed-zoom-i { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 5px; height: 30px; min-width: 30px; padding: 0 8px; justify-content: center; border-radius: 99px; background: rgba(255, 255, 255, .94); color: var(--ink); font-size: 12px; font-weight: 700; box-shadow: 0 1px 2px rgba(12, 12, 14, .12); opacity: 0; transform: scale(.9); transition: opacity .25s, transform .25s; }
.ed-zoom-i b { font-weight: 700; }
.ed-zoom-i svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ed-zoom-i:has(b), .ed-card:hover .ed-zoom-i, .ed-zoom:focus-visible .ed-zoom-i { opacity: 1; transform: none; }
@media (hover: none) { .ed-zoom-i { opacity: 1; transform: none; } }

/* The pop-up: the image whole, over a blurred, darkened copy of itself */
.ed-lb { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #0d0a12; color: #fff; overflow: hidden; }
.ed-lb::backdrop { background: rgba(8, 6, 12, .6); }
.ed-lb[open] { display: grid; animation: ed-lb-in .28s cubic-bezier(.22, 1, .36, 1); }
@keyframes ed-lb-in { from { opacity: 0; } }
.ed-lb-bg { position: absolute; inset: -60px; background: var(--bg) center / cover no-repeat; filter: blur(48px) saturate(1.35) brightness(.55); transform: scale(1.15); transition: background-image .3s; }
.ed-lb-fig { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; gap: 14px; height: 100dvh; margin: 0; padding: 72px 88px 22px; }
.ed-lb-img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 14px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7); object-fit: contain; touch-action: pan-y; user-select: none; -webkit-user-drag: none; }
.ed-lb-img.is-swap { animation: ed-lb-swap .32s cubic-bezier(.22, 1, .36, 1); }
@keyframes ed-lb-swap { from { opacity: 0; transform: scale(.97); } }
.ed-lb-cap { display: flex; align-items: center; gap: 12px; max-width: min(720px, 100%); font-size: 14.5px; font-weight: 600; line-height: 1.35; text-align: center; text-shadow: 0 1px 10px rgba(0, 0, 0, .4); }
.ed-lb-n { flex: none; padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, .16); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ed-lb-n[hidden] { display: none; }
.ed-lb-b { position: absolute; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: background .2s, transform .2s; }
.ed-lb-b:hover { background: rgba(255, 255, 255, .26); }
.ed-lb-b:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ed-lb-b[hidden] { display: none; }
.ed-lb-b svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ed-lb-x { top: 16px; right: 16px; }
.ed-lb-prev { top: 50%; left: 20px; transform: translateY(-50%); }
.ed-lb-next { top: 50%; right: 20px; transform: translateY(-50%); }
@media (max-width: 700px) {
	.ed-lb-fig { padding: 68px 14px 92px; }
	.ed-lb-prev, .ed-lb-next { top: auto; bottom: 22px; transform: none; }
	.ed-lb-prev { left: calc(50% - 60px); }
	.ed-lb-next { right: calc(50% - 60px); }
	.ed-lb-cap { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
	.ed-lb[open], .ed-lb-img.is-swap, .ed-zoom-i { animation: none; transition: none; }
}
/* A site-wide focus rule squares buttons off; keep these round */
.ed-lb .ed-lb-b, .ed-lb .ed-lb-b:focus, .ed-lb .ed-lb-b:focus-visible { border-radius: 999px !important; }
.ed .ed-zoom, .ed .ed-zoom:focus-visible { border-radius: 18px !important; }