/**
 * Understanding Primary Immunodeficiencies page layout — Figma nodes 516:38107 / 516:39462.
 */

.ipopi-understanding-pids {
	display: flex;
	flex-direction: column;
	overflow-x: clip;
	background: var(--ipopi-color-background-base, #ffffff);
}

.ipopi-understanding-pids > .wp-block-post-content {
	max-width: none;
	width: 100%;
}

.ipopi-understanding-pids .wp-block-post-content > * {
	box-sizing: border-box;
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Full-bleed sections inside the page column */
.ipopi-understanding-pids .wp-block-post-content > .wp-block-group.alignfull,
.ipopi-understanding-pids .wp-block-post-content > .wp-block-ipopi-video-carousel.alignfull,
.ipopi-understanding-pids .wp-block-post-content > .wp-block-ipopi-take-action.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.ipopi-understanding-pids__panel {
	width: 100%;
}

.ipopi-understanding-pids__panel--hero {
	background: var(--ipopi-color-background-base, #ffffff);
	padding: var(--ipopi-space-600, 40px) var(--ipopi-space-400, 24px);
}

.ipopi-understanding-pids__panel--low {
	background: var(--ipopi-color-background-low, #fafafa);
	padding: var(--ipopi-space-600, 40px) var(--ipopi-space-400, 24px);
}

.ipopi-understanding-pids__panel--classification {
	background: var(--ipopi-color-background-base, #ffffff);
	padding: var(--ipopi-space-600, 40px) var(--ipopi-space-400, 24px);
}

.ipopi-understanding-pids__panel > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Child blocks must not paint over panel backgrounds */
.ipopi-understanding-pids__panel--hero .wp-block-ipopi-page-intro,
.ipopi-understanding-pids__panel--hero .wp-block-ipopi-video-player,
.ipopi-understanding-pids__panel--hero .wp-block-ipopi-content-section,
.ipopi-understanding-pids__panel--low .wp-block-ipopi-content-section,
.ipopi-understanding-pids__panel--low .wp-block-ipopi-video-player,
.ipopi-understanding-pids__panel--classification .wp-block-ipopi-content-section,
.ipopi-understanding-pids__panel--classification .wp-block-ipopi-document-link-card {
	background: transparent;
}

/* Hero title */
.ipopi-understanding-pids__panel--hero .wp-block-ipopi-page-intro .ipopi-page-intro__inner {
	padding-top: 0;
	padding-bottom: 0;
}

.ipopi-understanding-pids__panel--hero .wp-block-ipopi-page-intro .ipopi-page-intro__title {
	text-align: center;
}

/* Content column */
.ipopi-understanding-pids .wp-block-ipopi-page-intro .ipopi-page-intro__inner,
.ipopi-understanding-pids .wp-block-ipopi-content-section .ipopi-section__inner,
.ipopi-understanding-pids .wp-block-ipopi-video-player .ipopi-section__inner,
.ipopi-understanding-pids .wp-block-ipopi-document-link-card .ipopi-section__inner {
	width: 100%;
	max-width: var(--ipopi-content-width, 784px);
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
}

.ipopi-understanding-pids .wp-block-ipopi-content-section .ipopi-section__inner {
	padding-top: 0;
	padding-bottom: 0;
}

.ipopi-understanding-pids .wp-block-ipopi-content-section .ipopi-content-section__content {
	padding-top: var(--ipopi-space-100, 8px);
	padding-bottom: var(--ipopi-space-100, 8px);
}

.ipopi-understanding-pids .wp-block-ipopi-content-section .ipopi-content-section__title {
	margin-bottom: var(--ipopi-space-400, 24px);
}

/* Video player — Figma compact 334/188 */
.ipopi-understanding-pids .wp-block-ipopi-video-player .ipopi-video-player__frame {
	aspect-ratio: 334 / 188;
	border: 1px solid var(--ipopi-color-stroke-default, #dce2e4);
	border-radius: var(--ipopi-space-200, 12px);
}

.ipopi-understanding-pids .wp-block-ipopi-video-player .ipopi-video-player__overlay {
	background: rgba(0, 0, 0, 0.2);
}

.ipopi-understanding-pids .wp-block-ipopi-video-player .ipopi-video-player__play {
	width: 48px;
	height: 48px;
	border: 1px solid var(--ipopi-color-stroke-default, #dce2e4);
	border-radius: var(--ipopi-space-300, 16px);
	background: var(--ipopi-color-background-low, #fafafa);
	box-shadow: 0 4px 16px rgba(43, 40, 39, 0.32);
}

.ipopi-understanding-pids .wp-block-ipopi-video-player .ipopi-video-player__play svg {
	width: 24px;
	height: 24px;
}

/* Inline links */
.ipopi-understanding-pids .ipopi-content-section__body a {
	color: var(--ipopi-color-action-high, #db6809);
	text-decoration: underline;
}

/* Document card inside classification */
.ipopi-understanding-pids__panel--classification .wp-block-ipopi-document-link-card .ipopi-document-link-card__card {
	width: 100%;
}

/* Spacing between blocks inside panels */
.ipopi-understanding-pids__panel--hero .wp-block-ipopi-page-intro + .wp-block-ipopi-video-player {
	margin-top: var(--ipopi-space-700, 48px);
}

.ipopi-understanding-pids__panel--hero .wp-block-ipopi-video-player + .wp-block-ipopi-content-section {
	margin-top: var(--ipopi-space-400, 24px);
}

.ipopi-understanding-pids__panel--low .wp-block-ipopi-content-section + .wp-block-ipopi-video-player {
	margin-top: var(--ipopi-space-400, 24px);
}

.ipopi-understanding-pids__panel--low .wp-block-ipopi-video-player + .wp-block-ipopi-content-section {
	margin-top: var(--ipopi-space-400, 24px);
}

.ipopi-understanding-pids__panel--classification .wp-block-ipopi-content-section + .wp-block-ipopi-content-section,
.ipopi-understanding-pids__panel--classification .wp-block-ipopi-content-section + .wp-block-ipopi-document-link-card,
.ipopi-understanding-pids__panel--classification .wp-block-ipopi-document-link-card + .wp-block-ipopi-content-section {
	margin-top: var(--ipopi-space-400, 24px);
}

.ipopi-understanding-pids__panel--classification .wp-block-ipopi-content-section .ipopi-content-section__eyebrow {
	margin: 0 0 var(--ipopi-space-200, 12px);
	color: var(--ipopi-color-text, #2b2827);
	font-size: var(--ipopi-type-body-medium-size, 16px);
	font-weight: 700;
	line-height: var(--ipopi-type-body-medium-line-height, 26px);
}

.ipopi-understanding-pids .wp-block-ipopi-take-action {
	margin-top: 0;
}

@media (max-width: 767px) {
	.ipopi-understanding-pids__panel--hero,
	.ipopi-understanding-pids__panel--low,
	.ipopi-understanding-pids__panel--classification {
		padding: var(--ipopi-space-600, 40px) var(--ipopi-space-400, 24px);
	}

	.ipopi-understanding-pids__panel--hero .wp-block-ipopi-page-intro + .wp-block-ipopi-video-player {
		margin-top: var(--ipopi-space-400, 24px);
	}

	.ipopi-understanding-pids__panel--low .wp-block-ipopi-content-section + .wp-block-ipopi-video-player,
	.ipopi-understanding-pids__panel--low .wp-block-ipopi-video-player + .wp-block-ipopi-content-section {
		margin-top: var(--ipopi-space-300, 16px);
	}
}

@media (min-width: 768px) {
	.ipopi-understanding-pids__panel--hero,
	.ipopi-understanding-pids__panel--low,
	.ipopi-understanding-pids__panel--classification {
		padding: var(--ipopi-space-1000, 72px) var(--ipopi-space-700, 48px);
	}

	.ipopi-understanding-pids__panel--hero .wp-block-ipopi-page-intro + .wp-block-ipopi-video-player {
		margin-top: var(--ipopi-space-700, 48px);
	}

	.ipopi-understanding-pids__panel--low .wp-block-ipopi-video-player + .wp-block-ipopi-content-section {
		margin-top: var(--ipopi-space-700, 48px);
	}
}