/**
 * IL Advent Calendar - front end styles.
 *
 * Units are em on purpose: the host theme may set html { font-size: 62.5% },
 * which makes rem unreliable. Everything inherits the surrounding font size.
 *
 * Theming: override the custom properties on .ilac (or any parent), e.g.
 *   .ilac { --ilac-accent-rgb: 156, 120, 60; --ilac-radius: 0; --ilac-ratio: 4 / 5; }
 */

.ilac {
	--ilac-gap: 1em;
	--ilac-radius: 0.5em;
	--ilac-ratio: 1 / 1;
	--ilac-accent-rgb: 184, 134, 11;
	--ilac-badge-bg: rgba(0, 0, 0, 0.6);
	--ilac-badge-fg: #fff;
	--ilac-bubble-bg: #222;
	--ilac-bubble-fg: #fff;
	--ilac-focus: #1d4ed8;
	--ilac-warn: #b91c1c;

	position: relative;
	margin: 1.5em 0;
	font-size: 1em;
	line-height: 1.4;
}

.ilac,
.ilac *,
.ilac *::before,
.ilac *::after {
	box-sizing: border-box;
}

/* The theme's display rules must not win over the hidden attribute. */
.ilac [hidden] {
	display: none !important;
}

/* ---- grid ---------------------------------------------------------------- */

.ilac .ilac__grid {
	display: grid;
	grid-template-columns: repeat(var(--ilac-cols, 4), minmax(0, 1fr));
	gap: var(--ilac-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 700px) {
	.ilac .ilac__grid {
		grid-template-columns: repeat(var(--ilac-cols-md, 3), minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.ilac .ilac__grid {
		grid-template-columns: repeat(var(--ilac-cols-sm, 2), minmax(0, 1fr));
	}
}

/* ---- door ---------------------------------------------------------------- */

.ilac .ilac-door {
	position: relative;
	aspect-ratio: var(--ilac-ratio);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ilac .ilac-door__face {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--ilac-radius);
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	perspective: 900px; /* depth for the swinging door */
	-webkit-tap-highlight-color: transparent;
}

.ilac .ilac-door__face:focus-visible {
	outline: 3px solid var(--ilac-focus);
	outline-offset: 3px;
}

/* Two stacked layers: the open photo below, the closed photo (the door) on top. */
.ilac .ilac-door__open,
.ilac .ilac-door__closed {
	display: block;
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: var(--ilac-radius);
}

.ilac .ilac-door__open {
	background: #2b2b2b;
}

.ilac .ilac-door__closed {
	background: rgb(var(--ilac-accent-rgb));
	box-shadow: 0 0.15em 0.5em rgba(0, 0, 0, 0.25);
	transform-origin: left center;
	backface-visibility: hidden;
	transition: transform 0.8s cubic-bezier(0.3, 0.1, 0.2, 1), opacity 0.25s linear 0.55s;
}

.ilac .ilac-door__open--blank {
	background: linear-gradient(135deg, #3a3a3a, #1c1c1c);
}

.ilac .ilac-door__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
}

.ilac .ilac-door__num {
	position: absolute;
	top: 0.5em;
	left: 0.5em;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2em;
	height: 2em;
	padding: 0 0.5em;
	border-radius: 1em;
	background: var(--ilac-badge-bg);
	color: var(--ilac-badge-fg);
	font-weight: 700;
	line-height: 1;
}

/* Door without a photo still shows a big number. */
.ilac .ilac-door__closed--blank .ilac-door__num {
	top: 50%;
	left: 50%;
	min-width: 0;
	height: auto;
	padding: 0;
	background: none;
	font-size: 2.2em;
	transform: translate(-50%, -50%);
}

/* ---- locked: dimmed, with a lock ----------------------------------------- */

.ilac .is-locked .ilac-door__closed::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.22);
}

.ilac .is-locked .ilac-door__closed::before {
	content: "";
	position: absolute;
	right: 0.5em;
	bottom: 0.5em;
	z-index: 1;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	background: var(--ilac-badge-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V11a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm-3 5a3 3 0 0 1 6 0v3H9V6z'/%3E%3C/svg%3E") center / 55% no-repeat;
}

/* ---- unlocked, not opened yet: gentle pulse ------------------------------ */

.ilac .is-unlocked:not(.is-open) .ilac-door__closed {
	animation: ilac-pulse 2.4s ease-in-out infinite;
}

@keyframes ilac-pulse {
	0%,
	100% {
		box-shadow: 0 0.15em 0.5em rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(var(--ilac-accent-rgb), 0.6);
	}
	50% {
		box-shadow: 0 0.15em 0.5em rgba(0, 0, 0, 0.25), 0 0 0 0.4em rgba(var(--ilac-accent-rgb), 0);
	}
}

/* ---- opened: the door swings away and reveals the open photo ------------- */

.ilac .is-open .ilac-door__closed {
	transform: rotateY(-115deg);
	opacity: 0;
	pointer-events: none;
	animation: none;
}

/* ---- "not yet": the locked door shakes ----------------------------------- */

.ilac .ilac-door.is-shaking {
	animation: ilac-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes ilac-shake {
	0%,
	100% {
		transform: translateX(0);
	}
	15% {
		transform: translateX(-0.45em) rotate(-1.5deg);
	}
	30% {
		transform: translateX(0.4em) rotate(1.5deg);
	}
	45% {
		transform: translateX(-0.3em) rotate(-1deg);
	}
	60% {
		transform: translateX(0.25em) rotate(1deg);
	}
	75% {
		transform: translateX(-0.12em);
	}
}

/* ---- speech bubble next to the door -------------------------------------- */

/*
 * Placed by calendar.js (left/top/width and --ilac-arrow-x). Fixed to the screen so
 * it is always visible, however far down the page the calendar is. Screen readers
 * get the same text from a separate live region, so this one is aria-hidden.
 */
.ilac .ilac__message {
	position: fixed;
	z-index: 99999; /* above sticky headers */
	top: 0;
	left: 0;
	max-width: min(20em, calc(100vw - 16px));
	margin: 0;
	padding: 0.65em 0.9em;
	border-radius: 0.5em;
	background: var(--ilac-bubble-bg);
	color: var(--ilac-bubble-fg);
	box-shadow: 0 0.4em 1.2em rgba(0, 0, 0, 0.35);
	font-size: max(14px, 1em); /* never smaller than 14px, whatever the theme sets */
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	text-transform: none;
	letter-spacing: normal;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}

.ilac .ilac__message.is-visible {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

/* The little arrow pointing at the door. */
.ilac .ilac__message::after {
	content: "";
	position: absolute;
	left: var(--ilac-arrow-x, 50%);
	margin-left: -0.45em;
	border: 0.45em solid transparent;
}

.ilac .ilac__message.is-above::after {
	top: 100%;
	border-top-color: var(--ilac-bubble-bg);
}

.ilac .ilac__message.is-below::after {
	bottom: 100%;
	border-bottom-color: var(--ilac-bubble-bg);
}

/* ---- closing message ----------------------------------------------------- */

.ilac .ilac__ended {
	padding: 3em 1.5em;
	border: 1px solid rgba(var(--ilac-accent-rgb), 0.4);
	border-radius: var(--ilac-radius);
	background: rgba(var(--ilac-accent-rgb), 0.12);
	text-align: center;
}

.ilac .ilac__ended-text {
	margin: 0;
	font-size: 2em;
	font-weight: 700;
	line-height: 1.25;
}

/* ---- editor notices ------------------------------------------------------ */

.ilac-notice {
	margin: 0 0 1em;
	padding: 0.6em 0.9em;
	border: 1px dashed rgba(0, 0, 0, 0.4);
	border-radius: 0.3em;
	background: rgba(255, 255, 255, 0.7);
	color: #222;
	font-size: 0.9em;
}

/* ---- screen reader only -------------------------------------------------- */

.ilac .ilac-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---- reduced motion: no shaking, no swinging, no pulsing ----------------- */

@media (prefers-reduced-motion: reduce) {
	.ilac .ilac-door.is-shaking {
		animation: none;
		outline: 3px solid var(--ilac-warn);
		outline-offset: 2px;
	}

	.ilac .ilac-door__closed {
		transition: opacity 0.2s linear;
	}

	.ilac .ilac__message {
		transition: none;
	}

	.ilac .is-open .ilac-door__closed {
		transform: none;
	}

	.ilac .is-unlocked:not(.is-open) .ilac-door__closed {
		animation: none;
	}
}