/* PJ Calendar — [pjcal]
   Every rule is scoped to .pjcal (two-class specificity) so theme styles don't leak in and ours
   don't leak out. Typography inherits from the theme; colours come from a small set of custom
   properties so a theme (or the Pro add-on) can restyle by overriding variables only:

   .pjcal { --pjcal-accent: #0f6e8c; --pjcal-top: 80px; }
*/

.pjcal {
	--pjcal-accent: #800138;
	--pjcal-bg: #ffffff;
	--pjcal-surface: #f6f3f4;
	--pjcal-surface-2: #ffffff;
	--pjcal-line: rgba(0, 0, 0, .1);
	--pjcal-text: #1c1c1c;
	--pjcal-muted: #6b6468;
	--pjcal-badge-text: #ffffff;
	--pjcal-project-badge: #d9d2d5;
	--pjcal-project-text: #4a4247;
	--pjcal-radius: 14px;
	--pjcal-top: 0px;          /* height of a fixed header above the calendar (sticky offsets) */
	--pjcal-head: inherit;     /* heading font; Pro / theme can set a family here */
	--pjcal-body: inherit;

	position: relative;
	container: pjcal / inline-size;
	background: var(--pjcal-bg);
	color: var(--pjcal-text);
	font-family: var(--pjcal-body);
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
}
.pjcal.pjcal--dark {
	--pjcal-bg: #0d0b0c;
	--pjcal-surface: #181315;
	--pjcal-surface-2: #211a1d;
	--pjcal-line: rgba(255, 255, 255, .09);
	--pjcal-text: #f3eef0;
	--pjcal-muted: #a99ba1;
	--pjcal-project-badge: #3a2a31;
	--pjcal-project-text: #f3eef0;
}
.pjcal *, .pjcal *::before, .pjcal *::after { box-sizing: border-box; }
.pjcal.pjcal--bleed { width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: 0 !important; }

/* ---------- Layout ---------- */
.pjcal .pjcal__photo { position: relative; height: 72svh; min-height: 420px; max-height: 760px; overflow: hidden; background: #000; }
.pjcal .pjcal__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%; margin: 0; border: 0; border-radius: 0; }
.pjcal .pjcal__photo::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 45%, rgba(0,0,0,.7) 100%);
}
.pjcal.pjcal--dark .pjcal__photo::after {
	background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 50%, var(--pjcal-bg) 100%);
}
.pjcal .pjcal__title { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1; }
.pjcal .pjcal__eyebrow { font-family: var(--pjcal-body); font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .28em; text-transform: uppercase; color: var(--pjcal-accent); }
.pjcal .pjcal__heading {
	font-family: var(--pjcal-head); font-size: clamp(36px, 11cqi, 76px); font-weight: 500; line-height: 1; letter-spacing: .1em; text-transform: uppercase;
	color: var(--pjcal-text); margin: .25em 0 0; padding: 0; text-shadow: none;
}
.pjcal:not(.pjcal--nophoto) .pjcal__heading { color: #fff; }
.pjcal:not(.pjcal--nophoto) .pjcal__eyebrow { color: #fff; opacity: .9; }
.pjcal .pjcal__main { padding: 8px 20px 80px; max-width: 760px; margin: 0 auto; }

/* No photo: title sits at the top of the content column */
.pjcal.pjcal--nophoto .pjcal__photo { height: auto; min-height: 0; max-height: none; background: none; padding: 48px 20px 0; max-width: 760px; margin: 0 auto; overflow: visible; }
.pjcal.pjcal--nophoto .pjcal__photo::after { display: none; }
.pjcal.pjcal--nophoto .pjcal__title { position: static; }
.pjcal.pjcal--nophoto .pjcal__title:empty { display: none; }

@container pjcal (min-width: 900px) {
	/* Default ("top") layout: the photo is a full-width banner with the title over it, the list below. */
	.pjcal .pjcal__title { left: max(48px, calc(50% - 360px)); right: max(48px, calc(50% - 360px)); bottom: 36px; } /* lines up with the 760px dates column below */
	.pjcal .pjcal__main { padding-bottom: 120px; }
	.pjcal .pjcal-chips { flex-wrap: wrap; overflow: visible; }

	/* layout="side": the photo pins to the left and the list scrolls beside it. */
	.pjcal.pjcal--side:not(.pjcal--nophoto) .pjcal__wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
	.pjcal.pjcal--side:not(.pjcal--nophoto) .pjcal__photo { position: sticky; top: var(--pjcal-top); height: calc(100vh - var(--pjcal-top)); max-height: none; }
	.pjcal.pjcal--side:not(.pjcal--nophoto) .pjcal__photo::after {
		background: linear-gradient(90deg, rgba(0,0,0,0) 55%, var(--pjcal-bg) 100%),
		            linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 35%);
	}
	.pjcal.pjcal--side:not(.pjcal--nophoto) .pjcal__title { left: 48px; right: 24px; bottom: 48px; }
	.pjcal.pjcal--side:not(.pjcal--nophoto) .pjcal__heading { font-size: clamp(40px, 5.2cqi, 76px); }
	.pjcal.pjcal--side:not(.pjcal--nophoto) .pjcal__main { padding: 72px 56px 120px 40px; margin: 0; max-width: none; }
}

/* ---------- Section headings ---------- */
.pjcal .pjcal__subheading {
	font-family: var(--pjcal-head); font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: .2em; text-transform: uppercase; color: var(--pjcal-text);
	margin: 48px 0 20px; padding: 0; display: flex; align-items: center; gap: 14px;
}
.pjcal .pjcal__subheading::after { content: ""; flex: 1; height: 1px; background: var(--pjcal-line); }
.pjcal .pjcal__section:first-child .pjcal__subheading { margin-top: 24px; }

/* ---------- Now & Next timeline ---------- */
.pjcal .pjcal-now { list-style: none; margin: 0; padding: 0; position: relative; }
.pjcal .pjcal-now::before {
	content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px;
	background: linear-gradient(var(--pjcal-accent), color-mix(in srgb, var(--pjcal-accent) 55%, var(--pjcal-bg)) 70%, transparent);
}
.pjcal .pjcal-now > li { position: relative; margin: 0; padding: 0 0 26px 34px; list-style: none; }
.pjcal .pjcal-now > li::before {
	content: ""; position: absolute; left: 0; top: 5px; width: 16px; height: 16px; border-radius: 50%;
	background: var(--pjcal-bg); border: 2px solid var(--pjcal-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pjcal-accent) 15%, transparent);
}
.pjcal .pjcal-now > li.is-upcoming::before { border-color: var(--pjcal-muted); box-shadow: none; }
.pjcal .pjcal-now > li.is-empty::before { display: none; }
.pjcal .pjcal-now__when { font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; color: var(--pjcal-muted); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pjcal .pjcal-now__status { color: var(--pjcal-accent); }
.pjcal .pjcal-now__time { letter-spacing: .06em; text-transform: none; }
.pjcal .is-upcoming .pjcal-now__status { color: var(--pjcal-muted); }
.pjcal .pjcal-now__title { font-size: 17px; font-weight: 700; line-height: 1.3; margin: 6px 0 4px; text-transform: uppercase; letter-spacing: .02em; color: var(--pjcal-text); }
.pjcal .pjcal-now__detail { color: var(--pjcal-text); }
.pjcal .pjcal-now__where { margin-top: 4px; color: var(--pjcal-muted); font-style: italic; font-size: 14px; }

/* Venue name → website; map pin → Google Maps (only venues with a street address) */
.pjcal .pjcal-venue { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; background: none; box-shadow: none; }
.pjcal .pjcal-venue:hover, .pjcal .pjcal-venue:focus-visible { color: var(--pjcal-accent); border-bottom-color: var(--pjcal-accent); background: none; }
.pjcal .pjcal-map {
	display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 3px; vertical-align: middle; position: relative; top: -1px;
	color: var(--pjcal-muted); border: 0; border-radius: 50%; background: none; box-shadow: none; text-decoration: none;
}
.pjcal .pjcal-map:hover, .pjcal .pjcal-map:focus-visible { color: var(--pjcal-accent); background: color-mix(in srgb, var(--pjcal-accent) 12%, transparent); }
.pjcal .pjcal-map svg { display: block; }
.pjcal .pjcal-now__link {
	display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .08em; text-transform: uppercase;
	color: var(--pjcal-text); text-decoration: none; border: 1px solid var(--pjcal-accent); border-radius: 999px; padding: 9px 14px; background: none; box-shadow: none;
}
.pjcal .pjcal-now__link:hover, .pjcal .pjcal-now__link:focus-visible { background: var(--pjcal-accent); color: #fff; }

.pjcal .pjcal-now > li[hidden] { display: none; }
.pjcal .pjcal-now__more {
	display: inline-block; margin: -6px 0 26px 34px; font-family: var(--pjcal-body); font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .08em; text-transform: uppercase;
	color: var(--pjcal-muted); background: none; border: 1px solid var(--pjcal-line); border-radius: 999px; padding: 9px 14px; cursor: pointer; box-shadow: none;
}
.pjcal .pjcal-now__more:hover, .pjcal .pjcal-now__more:focus-visible { color: var(--pjcal-text); border-color: var(--pjcal-muted); background: none; }

/* ---------- Stats ---------- */
.pjcal .pjcal-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--pjcal-line); border: 1px solid var(--pjcal-line); border-radius: var(--pjcal-radius); overflow: hidden; margin-bottom: 18px; }
.pjcal .pjcal-stats:empty { display: none; }
.pjcal .pjcal-stats > div { background: var(--pjcal-surface); padding: 14px 10px; text-align: center; }
.pjcal .pjcal-stats b { display: block; font-family: var(--pjcal-head); font-size: 26px; font-weight: 500; line-height: 1.1; color: var(--pjcal-text); }
.pjcal .pjcal-stats span { font-size: 10px; font-weight: 600; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--pjcal-muted); }

/* ---------- Toolbar (sticks under the header while scrolling the list) ---------- */
.pjcal .pjcal-tools { position: sticky; top: var(--pjcal-top); z-index: 5; background: linear-gradient(var(--pjcal-bg) 85%, transparent); padding: 10px 0 14px; margin: 0 -4px; }
.pjcal .pjcal-search { position: relative; display: block; margin: 0 4px; }
.pjcal .pjcal-search .pjcal-search__input {
	-webkit-appearance: none; appearance: none; display: block; width: 100%; height: auto; margin: 0;
	font-family: var(--pjcal-body); font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--pjcal-text); background: var(--pjcal-surface-2);
	border: 1px solid var(--pjcal-line); border-radius: 999px; padding: 12px 44px 12px 42px; box-shadow: none; outline: none;
}
.pjcal .pjcal-search .pjcal-search__input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.pjcal .pjcal-search .pjcal-search__input::placeholder { color: var(--pjcal-muted); opacity: 1; }
.pjcal .pjcal-search .pjcal-search__input:focus { border-color: var(--pjcal-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pjcal-accent) 20%, transparent); }
.pjcal .pjcal-search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); opacity: .6; color: var(--pjcal-text); }
.pjcal .pjcal-search .pjcal-search__clear {
	position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: none;
	width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: none;
	color: var(--pjcal-muted); font-size: 20px; line-height: 32px; cursor: pointer;
}
.pjcal .pjcal-search.has-value .pjcal-search__clear { display: block; }
.pjcal .pjcal-chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px 4px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pjcal .pjcal-chips:empty { display: none; }
.pjcal .pjcal-chips::-webkit-scrollbar { display: none; }
.pjcal .pjcal-chips .pjcal-chip {
	flex: none; margin: 0; font-family: var(--pjcal-body); font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .04em; text-transform: none; color: var(--pjcal-text);
	background: transparent; border: 1px solid var(--pjcal-line); border-radius: 999px; padding: 9px 14px; cursor: pointer; white-space: nowrap; box-shadow: none;
}
.pjcal .pjcal-chips .pjcal-chip:hover { border-color: var(--pjcal-muted); }
.pjcal .pjcal-chips .pjcal-chip[aria-pressed="true"] { background: var(--pjcal-accent); border-color: var(--pjcal-accent); color: #fff; }
.pjcal .pjcal-chip small { font-size: 12px; font-weight: 500; opacity: .7; margin-left: 4px; }
.pjcal .pjcal-meta { display: flex; justify-content: space-between; align-items: center; margin: 10px 4px 0; font-size: 12px; color: var(--pjcal-muted); }
.pjcal .pjcal-meta .pjcal-sort { background: none; border: 0; margin: 0; padding: 4px 0; box-shadow: none; color: var(--pjcal-muted); font-family: var(--pjcal-body); font-size: 12px; font-weight: 600; line-height: 1; text-transform: none; letter-spacing: 0; cursor: pointer; }
.pjcal .pjcal-meta .pjcal-sort:hover { color: var(--pjcal-text); background: none; }

/* ---------- Year groups ---------- */
.pjcal .pjcal-year { border-top: 1px solid var(--pjcal-line); margin: 0; }
.pjcal .pjcal-year > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; padding: 18px 2px; margin: 0; user-select: none; color: var(--pjcal-text); }
.pjcal .pjcal-year > summary::-webkit-details-marker { display: none; }
.pjcal .pjcal-year > summary::marker { content: ""; }
.pjcal .pjcal-year > summary b { font-family: var(--pjcal-head); font-size: 30px; font-weight: 500; line-height: 1; letter-spacing: .06em; }
.pjcal .pjcal-year > summary span { color: var(--pjcal-muted); font-size: 13px; }
.pjcal .pjcal-year > summary i { margin-left: auto; font-style: normal; color: var(--pjcal-muted); transition: transform .2s; }
.pjcal .pjcal-year[open] > summary i { transform: rotate(180deg); }
.pjcal .pjcal-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }

/* ---------- Card ---------- */
.pjcal .pjcal-card {
	display: grid; grid-template-columns: 62px 1fr; gap: 14px; align-items: start; margin: 0; list-style: none;
	background: var(--pjcal-surface); border: 1px solid var(--pjcal-line); border-radius: var(--pjcal-radius); padding: 12px 14px 12px 12px;
}
.pjcal .pjcal-date { background: var(--pjcal-accent); border-radius: 10px; text-align: center; padding: 8px 2px 9px; line-height: 1; color: var(--pjcal-badge-text); }
.pjcal .pjcal-date__m { font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.pjcal .pjcal-date__d { font-family: var(--pjcal-head); font-size: 22px; font-weight: 500; line-height: 1; margin-top: 5px; white-space: nowrap; letter-spacing: -.02em; }
.pjcal .pjcal-date__d.is-small { font-size: 15px; margin-top: 7px; }
.pjcal .pjcal-card--project .pjcal-date { background: var(--pjcal-project-badge); color: var(--pjcal-project-text); }
.pjcal .pjcal-card__title { font-size: 15px; font-weight: 600; line-height: 1.3; margin: 1px 0 3px; color: var(--pjcal-text); }
.pjcal .pjcal-card__series { font-size: 13px; color: var(--pjcal-accent); }
.pjcal .pjcal-card--project .pjcal-card__series { color: var(--pjcal-muted); }
.pjcal .pjcal-card__where { font-size: 13px; color: var(--pjcal-muted); margin-top: 2px; }
.pjcal .pjcal-card__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pjcal .pjcal-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pjcal .pjcal-tag { font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: var(--pjcal-muted); border: 1px solid var(--pjcal-line); border-radius: 4px; padding: 4px 6px; }
.pjcal .pjcal-tag--holiday { color: #2f7d4a; border-color: rgba(47,125,74,.35); }
.pjcal.pjcal--dark .pjcal-tag--holiday { color: #8fd1a4; border-color: rgba(143,209,164,.3); }
.pjcal .pjcal-empty { padding: 40px 0; text-align: center; color: var(--pjcal-muted); }
.pjcal mark { background: color-mix(in srgb, var(--pjcal-accent) 30%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }

@media (prefers-reduced-motion: reduce) {
	.pjcal .pjcal-year > summary i { transition: none; }
}