/**
 * No.24 セカンダリメニュー（drawer-submenu）。
 *
 * Figma: nav__secondary（526:10574）
 * type=about（Figma type=default）: about 固定ページの子ページ一覧。
 * type=portfolio（Figma type=works）: No.17 drawer カード + アーカイブ内アンカー。
 * type=events: No.17 drawer カード + アーカイブ内アンカー（#current / #sponsored）。
 * type=cre-radi: No.17 drawer カード + #archives（次回配信予定なし）。
 * type=creator: 成果物 / 媒体・メディア / 目的 のタグ一覧（件数順・2行トリム・/ 区切り）。
 * type=news: No.02 timeline 形式 DL（公開日降順 5 件・dd のみリンク）。
 * PC / SP 共通・幅 100%・左インデント atom-xxl・リンクフォントは fluid（text-sm）。
 */

.drawer-submenu {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0 0 0 var(--wp--custom--atom--xxl, 1rem); /* 左インデント atom-xxl */
	color: var(--wp--preset--color--base-black);
}

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

.drawer-submenu__items {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--custom--atom--xs, 0.25rem);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.drawer-submenu__item {
	width: 100%;
	margin: 0;
	padding: 0;
}

.drawer-submenu__link {
	display: inline-flex;
	align-items: flex-start;
	max-width: 100%;
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: var(--wp--preset--font-family--jp-sans);
	font-size: var(--wp--preset--font-size--text-sm, 0.875rem);
	font-weight: var(--wp--custom--font-weight--regular, 400);
	line-height: 1.25;
	text-decoration: none;
	cursor: pointer;
}

/* theme.json の a:hover underline を打ち消し（data-hover-underline の ::after のみ使う） */
a.drawer-submenu__link:hover,
a.drawer-submenu__link:focus,
a.drawer-submenu__link:focus-visible {
	text-decoration: none;
}

.drawer-submenu__link:focus {
	outline: none;
}

.drawer-submenu__link:focus-visible {
	outline: 1px solid var(--wp--preset--color--logo-blue);
	outline-offset: 2px;
}

.drawer-submenu__link .drawer-submenu__label {
	display: inline-block;
}

/* --- type=portfolio / events / cre-radi（Figma works と同型） --- */

.drawer-submenu--portfolio,
.drawer-submenu--events,
.drawer-submenu--cre-radi {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

.drawer-submenu__feature {
	width: 100%;
}

.drawer-submenu__feature .card-list {
	width: 100%;
	margin: 0;
}

.drawer-submenu__feature .card-list__items {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--atom--xxl, 1rem);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.drawer-submenu--portfolio .drawer-submenu__items,
.drawer-submenu--events .drawer-submenu__items,
.drawer-submenu--cre-radi .drawer-submenu__items {
	/* カードとボーダーの間隔（PC/SP 共通） */
	margin-block-start: var(--wp--custom--molecule--xxs, 1.125rem);
	border-block-start: var(--wp--custom--border-width--thin, 1px) solid var(--wp--preset--color--line-grey);
	padding-block-start: var(--wp--custom--atom--xxl, 1rem);
}

/* --- type=creator --- */

.drawer-submenu--creator {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--custom--atom--lg, 0.75rem); /* タグリスト → 次の見出し */
}

.drawer-submenu__group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--custom--atom--rg, 0.5rem); /* 見出し → タグ */
	width: 100%;
}

/* SP はアコーディオンのため .drawer-submenu が display: block になり gap が効かない（site-header.css） */
@media (max-width: 767px) {
	.drawer-submenu--creator .drawer-submenu__group + .drawer-submenu__group {
		margin-block-start: var(--wp--custom--atom--rg, 0.5rem); /* タグリスト → 次の見出し */
	}
}

.drawer-submenu__group-title {
	display: flex;
	align-items: flex-end;
	gap: var(--wp--custom--atom--xs, 0.25rem);
	width: 100%;
	margin: 0;
	font-family: var(--wp--preset--font-family--jp-sans);
	font-size: var(--wp--preset--font-size--text-sm, 0.875rem);
	font-weight: var(--wp--custom--font-weight--medium, 500);
	line-height: 1.25;
	color: inherit;
}

.drawer-submenu__group-title::before {
	content: "-";
	font-weight: var(--wp--custom--font-weight--regular, 400);
}

.drawer-submenu__tags {
	width: 100%;
	min-width: 0;
}

.drawer-submenu__tags .inline-list,
.drawer-submenu__tags .inline-list[data-separator="slash"] {
	--inline-list-row: max(
		calc(var(--wp--preset--font-size--text-xs) * 1.5),
		calc(var(--wp--preset--font-size--text-xs) * var(--wp--custom--line-height--narrow, 1.25))
	);
	--inline-list-row-gap: var(--wp--custom--atom--xs, 0.25rem);
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--wp--custom--atom--xs, 0.25rem);
	row-gap: var(--inline-list-row-gap);
	overflow: hidden;
	max-height: calc(2 * var(--inline-list-row) + var(--inline-list-row-gap) + 1px);
	font-size: var(--wp--preset--font-size--text-xs, 0.75rem);
	line-height: var(--wp--custom--line-height--narrow, 1.25);
}

/* 先頭アイコンなしのため __body ラップがない場合も flex-wrap で2行トリム */
.drawer-submenu__tags .inline-list__body {
	overflow: hidden;
	max-height: calc(2 * var(--inline-list-row) + var(--inline-list-row-gap) + 1px);
	row-gap: var(--inline-list-row-gap);
}

.drawer-submenu__tags .marker-text,
.drawer-submenu__tags a.marker-text {
	font-size: inherit;
	line-height: inherit;
}

/* --- type=news（No.02 timeline DL） --- */

.drawer-submenu--news {
	display: block;
	width: 100%;
}

.drawer-submenu__timeline {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--wp--custom--atom--rg, 0.5rem);
	width: 100%;
	margin: 0;
	padding: 0;
	border-top: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--jp-sans);
	color: inherit;
}

/* definition-list.css の PC border-top を打ち消し */
@media (min-width: 768px) {
	.drawer-submenu__timeline.definition-list,
	.drawer-submenu__timeline {
		border-top: 0;
	}
}

.drawer-submenu__timeline .definition-list__item {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--wp--custom--atom--rg, 0.5rem);
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
}

.drawer-submenu__timeline .definition-list__term,
.drawer-submenu__timeline .definition-list__desc {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: var(--wp--custom--font-weight--regular, 400);
	line-height: 1.25;
	letter-spacing: var(--wp--custom--letter-spacing--none, 0);
	box-sizing: border-box;
}

.drawer-submenu__timeline .definition-list__term {
	flex: 0 0 auto;
	width: 10ch; /* Y.m.d */
	font-size: var(--wp--preset--font-size--text-xs, 0.75rem);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.drawer-submenu__timeline .definition-list__desc {
	flex: 1 1 auto;
	min-width: 0;
	overflow: visible;
	font-size: var(--wp--preset--font-size--text-sm, 0.875rem);
}

/*
 * 1行トリムは .drawer-submenu__label 側。
 * display:inline 上書きすると data-hover-underline の ::after が効かないため、
 * hover.css の inline-block を維持したまま ellipsis する。
 * underline は bottom を内側に移し overflow:hidden で欠けないようにする。
 */
.drawer-submenu__timeline .drawer-submenu__link {
	display: block;
	max-width: 100%;
	overflow: visible;
}

.drawer-submenu__timeline .drawer-submenu__link[data-hover-underline] .drawer-submenu__label {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: top;
	padding-block-end: 1px;
}

.drawer-submenu__timeline .drawer-submenu__link[data-hover-underline] .drawer-submenu__label::after {
	bottom: 0;
}

.drawer-submenu__timeline .drawer-submenu__link .drawer-submenu__label-text {
	display: inline;
}