/**
 * No.28 ページヘッダー（page-header）。
 * Figma: 643:8325（PC events）/ 649:27748（SP events）。
 * eyecatch 高さはカード events+archive+large に合わせ 360px。
 */

.page-header {
	--page-header-eyecatch-height: 22.5rem; /* 360px（events 既定） */
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0;
	color: var(--wp--preset--color--base-black);
	font-family: var(--wp--preset--font-family--jp-sans);
	background-color: var(--wp--preset--color--base-white);
}

/* creator: PC eyecatch 240×240 */
.page-header[data-category="creator"] {
	--page-header-eyecatch-height: 15rem; /* 240px */
}

.page-header__inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--wp--custom--atom--xxl, 1rem);
	box-sizing: border-box;
	width: 100%;
	padding-block-start: var(--wp--custom--atom--xxl, 1rem);
}

.page-header__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--custom--atom--xxl, 1rem);
	box-sizing: border-box;
	width: 100%;
	padding-inline: var(--wp--custom--molecule--rg, 1.5rem);
	padding-block: var(--wp--custom--atom--rg, 0.5rem);
}

.page-header__back {
	flex: 0 1 auto;
	min-inline-size: 0;
	line-height: 0;
}

.page-header__back .wp-block-button,
.page-header__back .wp-block-button__link {
	margin: 0;
}

/* パンくずと同じ text-xs（is-style-link 既定の text-md を上書き） */
.page-header__back .wp-block-button.is-style-link :is(.btn, .wp-block-button__link) {
	font-size: var(--wp--preset--font-size--text-xs);
}

.page-header__breadcrumb {
	flex: 0 1 auto;
	max-inline-size: min(100%, 40rem);
}

.page-header__body {
	display: flex;
	align-items: stretch;
	box-sizing: border-box;
	width: 100%;
	border-block-start: var(--wp--custom--border-width--thin, 1px) solid var(--wp--preset--color--line-grey);
	border-block-end: var(--wp--custom--border-width--thin, 1px) solid var(--wp--preset--color--line-grey);
	overflow: hidden;
}

.page-header__detail {
	display: flex;
	flex: 1 1 auto;
	align-items: flex-end;
	min-inline-size: 0;
}

.page-header__detail-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--custom--atom--xxl, 1rem);
	box-sizing: border-box;
	width: 100%;
	padding: var(--wp--custom--molecule--rg, 1.5rem);
}

.page-header__label-list {
	width: 100%;
}

/* __head ラベルは非リンクのため hover 色打ち消し（sidebar と同様） */
.page-header__label-list .label:hover,
.page-header__label-list .label:focus-visible {
	border-color: var(--wp--preset--color--base-black);
}

.page-header__label-list .label[data-style="filled"]:hover,
.page-header__label-list .label[data-style="filled"]:focus-visible {
	background-color: var(--wp--preset--color--base-black);
	color: var(--wp--preset--color--base-white);
}

.page-header__label-list .label[data-style="outlined"]:hover,
.page-header__label-list .label[data-style="outlined"]:focus-visible {
	background-color: transparent;
	color: var(--wp--preset--color--base-black);
}

.page-header__title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--custom--atom--rg, 0.5rem);
	width: 100%;
}

.page-header__eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--text-xs);
	font-weight: var(--wp--custom--font-weight--regular, 400);
	line-height: var(--wp--custom--line-height--narrow, 1.25);
}

.page-header__heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-md);
	font-weight: var(--wp--custom--font-weight--bold, 700);
	line-height: var(--wp--custom--line-height--regular, 1.5);
	letter-spacing: 0.02em;
}

.page-header__heading-note {
	display: block;
	margin-block-start: var(--wp--custom--atom--rg);
	font-size: var(--wp--preset--font-size--text-sm);
	font-weight: var(--wp--custom--font-weight--medium, 500);
}

/* 1.5em のアイコンの中心を文字の中心にそろえる（middle だと約 0.2em 下がる） */
.page-header__heading-note > .icon {
	margin-inline-end: var(--wp--custom--atom--xs);
	vertical-align: -0.25em;
}

.page-header__subtitle {
	margin: 0;
	font-size: var(--wp--preset--font-size--text-sm);
	font-weight: var(--wp--custom--font-weight--regular, 400);
	line-height: var(--wp--custom--line-height--regular, 1.5);
}

.page-header__meta {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	column-gap: var(--wp--custom--atom--xxl, 1rem);
	row-gap: var(--wp--custom--atom--rg, 0.5rem);
	width: 100%;
	padding-block-start: var(--wp--custom--atom--xxl, 1rem);
}

/* creator: sidebar と同じ縦積み（SNS / URL / タグ） */
.page-header[data-category="creator"] .page-header__meta {
	flex-direction: column;
	align-items: flex-start;
	column-gap: 0;
	row-gap: var(--wp--custom--atom--rg, 0.5rem);
}

.page-header__meta a.marker-text {
	text-decoration: none;
}

.page-header__meta a.marker-text .marker-text__label {
	display: inline-block;
}

/* --- eyecatch --- */

.page-header__figure {
	box-sizing: border-box;
	flex-shrink: 0;
	margin: 0;
	padding: var(--wp--custom--molecule--rg, 1.5rem);
	border-inline-start: var(--wp--custom--border-width--thin, 1px) solid var(--wp--preset--color--line-grey);
	background-color: var(--wp--preset--color--base-white);
	overflow: hidden;
}

.page-header__figure img {
	display: block;
	object-position: center;
}

/* デフォルト: 正方形トリム（画像本体 360×360） */
.page-header__figure[data-image="square"] {
	inline-size: auto;
}

.page-header__figure[data-image="square"] img {
	inline-size: var(--page-header-eyecatch-height);
	block-size: var(--page-header-eyecatch-height);
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* 横幅成り行き（高さ 360 固定） */
.page-header__figure[data-image="auto"] {
	inline-size: auto;
	max-inline-size: min(100%, 28rem);
}

.page-header__figure[data-image="auto"] img {
	inline-size: auto;
	block-size: var(--page-header-eyecatch-height);
	max-inline-size: 100%;
	aspect-ratio: auto;
	object-fit: contain;
	object-position: center;
}

@media (max-width: 767px) {
	.page-header .page-header__inner {
		gap: var(--wp--custom--atom--rg, 0.5rem);
		padding-block-start: var(--wp--custom--atom--rg, 0.5rem);
	}

	.page-header .page-header__head {
		padding-inline: var(--wp--custom--molecule--rg, 1.5rem);
		padding-block: var(--wp--custom--atom--xs, 0.25rem);
	}

	.page-header .page-header__breadcrumb {
		display: none;
	}

	.page-header .page-header__body {
		flex-direction: column;
		align-items: stretch;
	}

	.page-header .page-header__figure {
		order: -1;
		inline-size: 100%;
		max-inline-size: none;
		padding: var(--wp--custom--molecule--rg, 1.5rem);
		border-inline-start: 0;
		border-block-end: var(--wp--custom--border-width--thin, 1px) solid var(--wp--preset--color--line-grey);
	}

	.page-header .page-header__figure[data-image="square"] img {
		inline-size: 100%;
		block-size: auto;
		aspect-ratio: 1 / 1;
		object-fit: cover;
	}

	.page-header .page-header__figure[data-image="auto"] img {
		inline-size: 100%;
		block-size: auto;
		aspect-ratio: auto;
		object-fit: contain;
	}

	.page-header .page-header__detail-inner {
		gap: var(--wp--custom--atom--lg, 0.75rem);
		padding: var(--wp--custom--molecule--rg, 1.5rem);
	}

	.page-header .page-header__title {
		gap: var(--wp--custom--atom--xs, 0.25rem);
	}

	.page-header .page-header__meta {
		padding-block-start: 0;
		row-gap: var(--wp--custom--atom--lg, 0.75rem);
	}
}

/* --- slider（creatives） --- */

.page-header[data-image="slider"] {
	--page-header-slider-height: 26.25rem; /* 420px */
}

.page-header[data-image="slider"] .page-header__body {
	flex-direction: column;
	align-items: stretch;
}

.page-header__slider {
	box-sizing: border-box;
	width: 100%;
	height: var(--page-header-slider-height, 26.25rem);
	overflow: hidden;
}

.page-header__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 1px;
	box-sizing: border-box;
	width: max-content;
	height: 100%;
	will-change: transform;
}

.page-header__slider[data-state="play"] .page-header__track {
	animation: page-header-marquee var(--loop-duration, 40s) linear infinite;
}

.page-header__slider[data-state="pause"] .page-header__track {
	animation: page-header-marquee var(--loop-duration, 40s) linear infinite;
	animation-play-state: paused;
}

.page-header__slide {
	flex: 0 0 auto;
	box-sizing: border-box;
	width: auto;
	height: 100%;
	margin: 0;
}

.page-header__slide img {
	display: block;
	width: auto;
	height: 100%;
	max-width: none;
	object-fit: contain;
	object-position: center;
}

.page-header[data-image="slider"] .page-header__detail {
	flex: 0 0 auto;
	width: 100%;
	border-block-start: var(--wp--custom--border-width--thin, 1px) solid var(--wp--preset--color--line-grey);
}

.page-header[data-image="slider"] .page-header__detail-inner {
	flex-direction: row;
	align-items: stretch;
	gap: 0;
	padding-block: 0;
	padding-inline: var(--wp--custom--molecule--rg, 1.5rem);
}

.page-header[data-image="slider"] .page-header__title {
	flex: 0 0 55%;
	width: 55%;
	max-width: 55%;
	justify-content: center;
	padding-block: var(--wp--custom--atom--xxl, 1rem);
	padding-inline-end: var(--wp--custom--molecule--lg, 1.75rem);
}

.page-header[data-image="slider"] .page-header__meta {
	flex: 0 0 45%;
	width: 45%;
	max-width: 45%;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	column-gap: 0;
	row-gap: var(--wp--custom--atom--rg, 0.5rem);
	min-inline-size: 0;
	padding-block: var(--wp--custom--atom--xxl, 1rem);
	padding-inline-start: var(--wp--custom--molecule--xl, 1.875rem);
	border-inline-start: var(--wp--custom--border-width--thin, 1px) solid var(--wp--preset--color--base-black);
}

@media (max-width: 767px) {
	.page-header[data-image="slider"] .page-header__detail-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--custom--atom--lg, 0.75rem);
		padding-block: var(--wp--custom--atom--xxl, 1rem);
		padding-inline: var(--wp--custom--molecule--rg, 1.5rem);
	}

	.page-header[data-image="slider"] .page-header__title {
		flex: none;
		width: 100%;
		max-width: none;
		padding: 0;
	}

	.page-header[data-image="slider"] .page-header__meta {
		flex: none;
		flex-grow: 0;
		align-self: flex-start;
		width: 100%;
		max-width: none;
		padding: 0;
		border-inline-start: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.page-header__slider[data-state="play"] .page-header__track,
	.page-header__slider[data-state="pause"] .page-header__track {
		animation: none;
	}
}

@keyframes page-header-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(calc(-1 * var(--loop-width, 0px)));
	}
}

/* --- cover（cases） --- */

.page-header[data-image="cover"] {
	--page-header-cover-height: 37.5rem; /* 600px */
}

.page-header[data-image="cover"] .page-header__body {
	position: relative;
	display: block;
	height: var(--page-header-cover-height);
	border-block-start: 0;
	border-block-end: 0;
	overflow: hidden;
}

.page-header[data-image="cover"] .page-header__figure {
	position: absolute;
	inset: 0;
	order: 0;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	max-inline-size: none;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
}

.page-header[data-image="cover"] .page-header__figure img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

.page-header[data-image="cover"] .page-header__figure picture {
	display: block;
	width: 100%;
	height: 100%;
}

.page-header[data-image="cover"] .page-header__detail {
	position: absolute;
	right: 0;
	bottom: var(--wp--custom--molecule--lg, 1.75rem);
	left: auto;
	z-index: 1;
	flex: none;
	align-items: stretch;
	width: 55%;
	min-width: 48rem; /* 768px。幅広時は 55% を維持 */
	height: auto;
	background-color: color-mix(in srgb, var(--wp--preset--color--base-white) 70%, transparent);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.page-header[data-image="cover"] .page-header__detail-inner {
	gap: 0;
	padding: var(--wp--custom--molecule--rg, 1.5rem);
}

.page-header[data-image="cover"] .page-header__title {
	padding-block-start: var(--wp--custom--atom--rg, 0.5rem);
	padding-block-end: var(--wp--custom--atom--xxl, 1rem);
}

.page-header__description {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding-block-start: var(--wp--custom--atom--xxl, 1rem);
	border-block-start: var(--wp--custom--border-width--thin, 1px) solid var(--wp--preset--color--line-grey);
}

.page-header__description p {
	margin: 0;
	font-size: var(--wp--preset--font-size--text-xs);
	font-weight: var(--wp--custom--font-weight--regular, 400);
	line-height: 2;
}

@media (max-width: 767px) {
	.page-header[data-image="cover"] .page-header__body {
		flex-direction: unset;
	}

	.page-header[data-image="cover"] .page-header__detail {
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		min-width: 0;
	}
}

/* --- none（archive / single・page） --- */

.page-header[data-image="none"] .page-header__body {
	border-block-start: 0;
	border-block-end: 0;
	overflow: visible;
}

.page-header[data-image="none"] .page-header__title {
	box-sizing: border-box;
	justify-content: flex-end;
	padding-block: var(--wp--custom--atom--xxl, 1rem);
}

.page-header[data-image="none"] .page-header__subtitle {
	font-size: var(--wp--preset--font-size--text-xs);
}

/* archive: HTML は __head → __body。PC は row-reverse で左タイトル 55 / 右パンくず 45 */
.page-header[data-image="none"][data-type="archive"] .page-header__inner {
	flex-direction: row-reverse;
	align-items: flex-end;
	gap: var(--wp--custom--atom--xxl, 1rem);
	box-sizing: border-box;
	height: 16.875rem; /* 270px */
	padding-block-start: 0;
	padding-block-end: 0;
	border-block-end: var(--wp--custom--border-width--thin, 1px) solid var(--wp--preset--color--line-grey);
}

.page-header[data-image="none"][data-type="archive"] .page-header__head {
	flex: 0 0 45%;
	align-items: flex-end;
	justify-content: flex-end;
	width: 45%;
	padding-inline: var(--wp--custom--molecule--lg, 1.75rem);
	padding-block-start: var(--wp--custom--atom--rg, 0.5rem);
	padding-block-end: var(--wp--custom--atom--xxl, 1rem); /* __title と揃え、パンくずを __subtitle 下端に合わせる */
}

.page-header[data-image="none"][data-type="archive"] .page-header__breadcrumb {
	max-inline-size: none;
}

.page-header[data-image="none"][data-type="archive"] .page-header__body {
	flex: 0 0 55%;
	width: 55%;
}

.page-header[data-image="none"][data-type="archive"] .page-header__title {
	padding-inline: var(--wp--custom--molecule--lg, 1.75rem);
}

/* single / page: 戻る＋パンくずを上段、タイトルを下段。__head は他バリアントと同じ高さ */
.page-header[data-image="none"][data-type="single"] .page-header__inner,
.page-header[data-image="none"][data-type="page"] .page-header__inner {
	flex-direction: column;
	align-items: stretch;
	gap: var(--wp--custom--atom--xxl, 1rem);
}

.page-header[data-image="none"][data-type="single"] .page-header__body,
.page-header[data-image="none"][data-type="page"] .page-header__body {
	width: 100%;
	border-block-start: var(--wp--custom--border-width--thin, 1px) solid var(--wp--preset--color--line-grey);
	border-block-end: var(--wp--custom--border-width--thin, 1px) solid var(--wp--preset--color--line-grey);
}

.page-header[data-image="none"][data-type="single"] .page-header__title,
.page-header[data-image="none"][data-type="page"] .page-header__title {
	padding-inline: var(--wp--custom--molecule--rg, 1.5rem);
}

/* 固定ページ：タイトル帯の下の線を消すページ（サイト側で border_bottom=false を渡す） */
.page-header[data-image="none"][data-type="page"][data-border-bottom="none"] .page-header__body {
	border-block-end: 0;
}

@media (min-width: 768px) {
	/*
	 * 固定ページ：戻る・パンくずの段は、サイトヘッダーの下の線とタイトル帯の上の線の間で上下を同じ余白にする
	 * （上は __inner の padding＋__head の padding）。タイトル帯の上の線とタイトルの間は organism/sm
	 * （margin は線の外側に付くため __body の padding で付ける）。
	 */
	.page-header[data-image="none"][data-type="page"] .page-header__inner {
		gap: 0;
	}

	.page-header[data-image="none"][data-type="page"] .page-header__head {
		padding-block-end: calc(var(--wp--custom--atom--xxl, 1rem) + var(--wp--custom--atom--rg, 0.5rem));
	}

	.page-header[data-image="none"][data-type="page"] .page-header__body {
		padding-block-start: var(--wp--custom--organism--sm);
	}

	.page-header[data-image="none"][data-type="page"] .page-header__title {
		padding-block-start: 0;
	}

	/* 一覧：高さは中身なり。上に余白 */
	.page-header[data-image="none"][data-type="archive"] .page-header__inner {
		height: auto;
		margin-block-start: var(--wp--custom--organism--xxs);
	}
}

@media (max-width: 767px) {
	.page-header[data-image="none"][data-type="archive"] .page-header__inner {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-end;
		height: 14.125rem; /* 226px */
		padding-block-start: var(--wp--custom--organism--xl);
	}


	.page-header[data-image="none"][data-type="archive"] .page-header__head {
		display: none;
	}

	.page-header[data-image="none"][data-type="archive"] .page-header__body {
		flex: none;
		width: 100%;
	}

	.page-header[data-image="none"][data-type="archive"] .page-header__title {
		padding-inline: var(--wp--custom--molecule--rg, 1.5rem);
	}

	/* 固定ページ：SP はタイトル帯の上の線なし */
	.page-header[data-image="none"][data-type="page"] .page-header__body {
		border-block-start: 0;
	}
}