/* ==========================================================================
   Sections shared by TOP and the subpages (template-parts/sections-shared/).
   Identical in the Figma comps 「TOP - 2/11」, 「/improvement - 2/11」, 「/company - 2/11」.
   Page-specific spacing overrides live in assets/css/pages/{page}.css.
   Mobile first; desktop layout from 1024px.
   ========================================================================== */

/* --- CHALLENGES ---------------------------------------------------------
   Card = 32px top padding + icon 120×110 + title + text (Figma "Onayami"). */
.p-challenges__list {
	display: grid;
	gap: var(--space-4);
	text-align: center;
}

.p-challenges__item {
	padding-top: var(--space-8);
}

.p-challenges__image {
	width: auto;
	height: 110px; /* 120 × 110 (TOP), 150 × 110 icons (/development) */
	margin-inline: auto;
}

/* No title (Figma 「/development」): text 22 under the icon */
.p-challenges__image + .p-challenges__text {
	margin-top: 22px;
}

.p-challenges__title {
	margin-top: 22px;
	font-size: 16px;
}

.p-challenges__text {
	margin-top: 6px;
	font-size: var(--fs-text);
}

@media (min-width: 768px) {
	.p-challenges__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-4) var(--space-6);
	}
}

@media (min-width: 1024px) {
	.p-challenges .c-section-head {
		margin-bottom: var(--space-12);
	}

	.p-challenges__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--space-8);
	}
}

/* --- APPROACH ------------------------------------------------------------
   Mobile: vertical — number | rule with dots | content.
   Desktop: horizontal — number, dot on a shared rule, content.
   --details (/improvement/): 「主な支援内容」 list under each step. */
.p-approach .c-section-head {
	margin-bottom: var(--space-16); /* 64px on mobile too (Figma SP) */
}

/* Figma SP: 20px side gutters, number box 90 centered, rule at 113, content from 160 */
.p-approach__steps {
	--num-col: 113px;
	position: relative;
	max-width: 560px;
	margin-inline: auto;
}

@media (max-width: 767.98px) {
	.p-approach__steps {
		max-width: none;
		margin-inline: calc(20px - var(--container-padding));
	}
}

.p-approach__steps::before {
	content: "";
	position: absolute;
	top: 10px;
	bottom: 0;
	left: calc(var(--num-col) - 0.5px);
	width: 1px;
	background-color: var(--c-primary);
}

.p-approach__step {
	position: relative;
	display: grid;
	grid-template-columns: var(--num-col) 1fr;
	/* 47 (Figma SP 375); narrower on 360 screens so 「ヒアリングとデータによる」 still fits one line */
	column-gap: calc(47px - max(0px, 375px - 100vw));
	padding-bottom: 23px; /* 133px row pitch (Figma SP) */
}

.p-approach__step:last-child {
	padding-bottom: 0;
}

.p-approach__num {
	width: 90px;
	font-family: var(--font-en);
	font-size: 40px;
	font-weight: 100;
	line-height: 1;
	text-align: center;
	color: var(--c-primary);
}

.p-approach__dot {
	position: absolute;
	top: 7px;
	left: calc(var(--num-col) - 3px);
	width: 6px;
	height: 6px;
	background-color: var(--c-primary);
	border-radius: 50%;
}

.p-approach__label {
	font-family: var(--font-en);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--c-text-muted);
}

.p-approach__title {
	font-size: 24px;
	font-weight: 500;
}

.p-approach__text {
	margin-top: var(--space-2);
	font-size: var(--fs-text);
}

/* 「主な支援内容」 (Figma /improvement: rule #DDE3EA, label 13/700 #9EA6AE, items 14px
   with a 4px dot). SP (Figma SP): 12 above the rule, 12 below it, label → list 4, no gap
   between items; steps 40 apart; lead → steps 48. */
.p-approach--details .c-section-head {
	margin-bottom: var(--space-12);
}

.p-approach--details .p-approach__step {
	padding-bottom: var(--space-10);
}

.p-approach--details .p-approach__step:last-child {
	padding-bottom: 0;
}

.p-approach__support {
	/* SP = Figma SP */
	--support-gap: var(--space-3);
	--support-pad: var(--space-3);
	--support-inset: 0px;
	--support-label-align: left;
	--support-list-gap: var(--space-1);
	--support-item-gap: 0px;

	margin: var(--support-gap) var(--support-inset) 0;
	padding-top: var(--support-pad);
	border-top: 1px solid var(--c-border);
}

.p-approach__support-label {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--c-text-subtle);
	text-align: var(--support-label-align);
}

.p-approach__support-list {
	display: grid;
	gap: var(--support-item-gap);
	margin-top: var(--support-list-gap);
	padding: 0;
	list-style: none;
	font-size: var(--fs-text);
	text-align: left;
}

.p-approach__support-list li {
	position: relative;
	padding-left: 12px; /* dot 4 + gap 8 */
}

.p-approach__support-list li::before {
	content: "";
	position: absolute;
	top: calc(0.8em - 2px); /* centered on the first line (line-height 1.6) */
	left: 0;
	width: 4px;
	height: 4px;
	background-color: currentColor;
	border-radius: 50%;
}

@media (min-width: 1024px) {
	.p-approach__steps {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		column-gap: 35px;
		max-width: none;
	}

	/* Rule from the 1st to the 5th dot (column centers), through the dot centers */
	.p-approach__steps::before {
		top: 120.3px; /* number 76.8 + gap 40 + dot radius 4 − 0.5 */
		bottom: auto;
		left: calc((100% - 140px) / 10);
		right: calc((100% - 140px) / 10);
		width: auto;
		height: 1px;
	}

	.p-approach__step {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 0;
		text-align: center;
	}

	.p-approach__num {
		width: auto;
		font-size: 64px;
		line-height: 1.2;
	}

	.p-approach__dot {
		position: relative;
		top: auto;
		left: auto;
		width: 8px;
		height: 8px;
		margin-block: var(--space-10);
	}

	/* Column 200 → list block 168 wide (16px inset), 24px under the step text */
	.p-approach--details .p-approach__body {
		align-self: stretch;
	}

	.p-approach--details .c-section-head {
		margin-bottom: var(--head-gap);
	}

	.p-approach--details .p-approach__step {
		padding-bottom: 0;
	}

	.p-approach__support {
		--support-gap: var(--space-6);
		--support-pad: var(--space-6);
		--support-inset: var(--space-4);
		--support-label-align: center;
		--support-list-gap: var(--space-3);
		--support-item-gap: 2px;
	}
}

/* --- PROFILE ------------------------------------------------------------
   SP (Figma TOP SP + /company SP): 44px side padding. */
@media (max-width: 1023.98px) {
	.p-profile > .l-container {
		padding-inline: 44px;
	}
}

.p-profile__head {
	text-align: center;
}

.p-profile__name {
	margin-top: 6px;
	font-size: 28px;
}

.p-profile__role {
	margin-top: var(--space-4);
	font-size: 16px;
}

.p-profile__bio {
	max-width: 724px;
	margin: var(--space-8) auto 0;
	font-size: var(--fs-text);
	text-align: justify;
}

.p-profile__bio p + p {
	margin-top: 1.6em; /* one blank line */
}

.p-profile__link {
	display: flex; /* no line-box strut around the link */
	justify-content: center;
	margin-top: var(--space-8);
}

/* 44px tap target, laid out as the 22px line of the comp */
.p-profile__link a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: var(--tap-min);
	margin-block: -11px;
	font-size: var(--fs-text);
	font-weight: 500;
	color: var(--c-primary);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.p-profile__link a:hover {
	color: var(--c-primary-dark);
}

.p-profile__link-icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}

@media (min-width: 1024px) {
	.p-profile__name {
		font-size: 32px;
	}

	.p-profile__bio {
		margin-top: var(--space-12);
	}

	.p-profile__link {
		margin-top: var(--space-12);
	}
}