/*
 * proof/image-accordion. Figma "About v2" 2612:271, see
 * sites/proof/design/about-spec.md. Open item: image 954 + 4 + panel 586;
 * closed items: 108 panel strip; 24 between items (1808 in total).
 * proof.js adds .is-ready to .pf-hacc, .is-open to the open item and the
 * toggle button (.pf-hacc-toggle) to every panel.
 */

/* 230 in the design, less the stat text's untrimmed line box. */
.pf-block.pf-haccsec {
	padding-top: calc(223 * var(--pf-u));
}
.pf-hacc {
	display: flex;
	flex-direction: column;
	gap: calc(24 * var(--pf-u));
	margin-top: calc(98.5 * var(--pf-u));
}
.pf-hacc-item {
	display: flex;
	gap: calc(4 * var(--pf-u));
	height: calc(600 * var(--pf-u));
}
.pf-block .pf-hacc-img {
	flex: 1;
	height: 100%;
}
.pf-hacc-panel {
	position: relative;
	display: flex;
	flex: none;
	flex-direction: column;
	width: calc(586 * var(--pf-u));
	min-width: 0;
	height: 100%;
	padding: calc(32 * var(--pf-u));
	overflow: hidden;
	border-radius: calc(6 * var(--pf-u));
	background: var(--pf-blue);
}
/* Brand shape, anchored 32 from the right as in Figma. */
.pf-hacc-panel::after {
	content: "";
	position: absolute;
	right: calc(32 * var(--pf-u));
	top: calc(50% - 53.13 * var(--pf-u) - 558.88 * var(--pf-u));
	width: calc(1387 * var(--pf-u));
	height: calc(1117.75 * var(--pf-u));
	background: url("../../assets/img/brand-shape-blue.svg") no-repeat center / 100% 100%;
	pointer-events: none;
	transition: opacity 0.4s;
}
.pf-hacc-panel > * {
	position: relative;
	z-index: 1;
}
.pf-hacc-num {
	display: grid;
	flex: none;
	place-items: center;
	width: calc(44 * var(--pf-u));
	height: calc(44 * var(--pf-u));
	border-radius: 50%;
	background: var(--pf-lime);
	font-family: var(--pf-mono);
	font-weight: 700;
	font-size: calc(24 * var(--pf-t));
	line-height: 1;
	letter-spacing: 1px;
	color: var(--pf-blue);
	transition: background-color 0.3s, color 0.3s;
}
.pf-hacc-body {
	display: flex;
	flex-direction: column;
	gap: calc(16 * var(--pf-u));
	/* Fixed width, so a closed (108) panel keeps the open panel's height
	   for the hidden text and its toggle stays at the bottom. */
	width: calc(522 * var(--pf-u));
	margin-top: auto;
	transition: opacity 0.3s;
}
.pf-block .pf-hacc-lead {
	font-weight: 500;
	font-size: calc(24 * var(--pf-t));
	line-height: 1.24;
	letter-spacing: -0.03em;
	color: rgba(255, 255, 255, 0.56);
}
.pf-hacc-lead strong {
	font-weight: inherit;
	color: #fff;
}
.pf-hacc-lead a {
	color: #fff;
}
.pf-block .pf-hacc-text {
	font-size: calc(16 * var(--pf-t));
	line-height: 1.5;
	letter-spacing: -0.04em;
	color: rgba(255, 255, 255, 0.8);
}
.pf-hacc-toggle {
	position: relative;
	z-index: 1;
	flex: none;
	margin-top: calc(32 * var(--pf-u));
	padding-top: calc(32 * var(--pf-u));
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.pf-block .pf-hacc-toggle button {
	display: block;
	width: calc(44 * var(--pf-u));
	height: calc(44 * var(--pf-u));
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.04) url("../../assets/img/hacc-plus.svg") no-repeat center / calc(24 * var(--pf-u));
	cursor: pointer;
	transition: background-color 0.2s;
}
.pf-block .pf-hacc-toggle button:hover {
	background-color: rgba(255, 255, 255, 0.12);
}
.pf-block .pf-hacc-toggle button:focus-visible {
	outline: 2px solid var(--pf-lime);
	outline-offset: 3px;
}
.pf-block .pf-hacc-item.is-open .pf-hacc-toggle button {
	background-image: url("../../assets/img/hacc-minus.svg");
}

@media (min-width: 1025px) {
	.pf-hacc.is-ready {
		flex-direction: row;
		height: calc(600 * var(--pf-u));
	}
	.pf-hacc.is-ready .pf-hacc-item {
		flex: none;
		gap: 0;
	}
	.pf-block .pf-hacc.is-ready .pf-hacc-img {
		flex: none;
		width: 0;
		transition: width 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), margin 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
	}
	.pf-hacc.is-ready .pf-hacc-panel {
		width: calc(108 * var(--pf-u));
		transition: width 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
	}
	.pf-block .pf-hacc.is-ready .pf-hacc-item.is-open .pf-hacc-img {
		width: calc(954 * var(--pf-u));
		margin-right: calc(4 * var(--pf-u));
	}
	.pf-hacc.is-ready .pf-hacc-item.is-open .pf-hacc-panel {
		width: calc(586 * var(--pf-u));
	}
	.pf-hacc.is-ready .pf-hacc-item:not(.is-open) .pf-hacc-panel {
		cursor: pointer;
	}
	.pf-hacc.is-ready .pf-hacc-item:not(.is-open) .pf-hacc-body {
		opacity: 0;
		visibility: hidden;
	}
	.pf-hacc.is-ready .pf-hacc-item:not(.is-open) .pf-hacc-panel::before,
	.pf-hacc.is-ready .pf-hacc-item:not(.is-open) .pf-hacc-panel::after {
		opacity: 0;
	}
	.pf-hacc.is-ready .pf-hacc-item:not(.is-open) .pf-hacc-num {
		background: rgba(255, 255, 255, 0.08);
		color: #fff;
	}
}

/* Below desktop the items stack. Closed items are a blue bar with the
   number and the plus button; the open one shows photo and panel. */
@media (max-width: 1024px) {
	.pf-block.pf-haccsec {
		padding-top: 96px;
	}
	.pf-hacc {
		gap: 12px;
		margin-top: 48px;
	}
	.pf-hacc-item {
		flex-direction: column;
		height: auto;
		gap: 4px;
	}
	.pf-block .pf-hacc-img {
		flex: none;
		width: 100%;
		aspect-ratio: 954 / 600;
	}
	.pf-hacc-panel {
		width: 100%;
		height: auto;
		gap: 40px;
		padding: 24px;
		border-radius: 6px;
	}
	/* Desktop size and natural aspect (1387 × 1117.75). The notch's right
	   corner (shape x 921) sits on the panel's left edge, so the V stays
	   outside the panel as on desktop; the wing edge (shape y 424) runs at
	   78, between the number badge and the lead. */
	.pf-hacc-panel::after {
		right: auto;
		left: -921px;
		top: -346px;
		width: 1387px;
		height: 1117.75px;
	}
	.pf-hacc-body {
		width: 100%;
	}
	.pf-hacc-num {
		width: 40px;
		height: 40px;
		font-size: 20px;
	}
	.pf-block .pf-hacc-lead {
		font-size: 21px;
	}
	.pf-block .pf-hacc-text {
		font-size: 16px;
	}
	.pf-hacc-toggle {
		margin-top: -16px;
		padding-top: 24px;
	}
	.pf-block .pf-hacc-toggle button {
		width: 40px;
		height: 40px;
		background-size: 22px;
	}

	.pf-hacc.is-ready .pf-hacc-item:not(.is-open) .pf-hacc-img,
	.pf-hacc.is-ready .pf-hacc-item:not(.is-open) .pf-hacc-body,
	.pf-hacc.is-ready .pf-hacc-item:not(.is-open) .pf-hacc-panel::before,
	.pf-hacc.is-ready .pf-hacc-item:not(.is-open) .pf-hacc-panel::after {
		display: none;
	}
	.pf-hacc.is-ready .pf-hacc-item:not(.is-open) .pf-hacc-panel {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-block: 16px;
		cursor: pointer;
	}
	.pf-hacc.is-ready .pf-hacc-item:not(.is-open) .pf-hacc-num {
		background: rgba(255, 255, 255, 0.08);
		color: #fff;
	}
	.pf-hacc.is-ready .pf-hacc-item:not(.is-open) .pf-hacc-toggle {
		margin: 0;
		padding: 0;
		border: 0;
	}
}
@media (max-width: 767px) {
	.pf-block.pf-haccsec {
		padding-top: 72px;
	}
	.pf-hacc {
		margin-top: 40px;
	}
	.pf-hacc-panel {
		gap: 32px;
		padding: 20px;
	}
	.pf-block .pf-hacc-img {
		aspect-ratio: 4 / 3;
	}
	.pf-block .pf-hacc-lead {
		font-size: 19px;
	}
	.pf-block .pf-hacc-text {
		font-size: 15px;
	}
	.pf-hacc-toggle {
		margin-top: -12px;
		padding-top: 20px;
	}
	.pf-hacc.is-ready .pf-hacc-item:not(.is-open) .pf-hacc-panel {
		padding-block: 12px;
	}
}