/**
 * Shared components: buttons, section heading block.
 * Sourced from Figma Components (node 4:26 Button, node 5:19 Section
 * Heading) via get_design_context on live instances (9:24 Hero CTA,
 * 27:514 Header "お問い合わせ" button, 9:72 Section Heading).
 */

/* -- Button (variant=Primary|Outline, size=MD) -- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 32px;
	border-radius: var(--radius-full);
	border: none;
	font: 700 16px/1 var(--font-sans); /* Label */
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.btn__icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.btn--primary {
	background-color: var(--color-brand-primary);
	color: var(--color-text-inverse);
}

.btn--primary:hover {
	opacity: 0.9;
}

.btn--outline {
	background-color: transparent;
	color: var(--color-text-accent);
	border: 1.5px solid var(--color-brand-primary);
	padding: 14.5px 32px; /* keep same outer box height once the 1.5px border is added */
}

.btn--outline:hover {
	background-color: var(--color-state-tint-hover);
}

.btn--sm {
	padding: 12px 24px;
	font: 700 14px/1 var(--font-sans); /* Label S */
}

.btn--sm.btn--outline {
	padding: 10.5px 24px;
}

.btn--sm .btn__icon {
	width: 16px;
	height: 16px;
}

.btn:focus-visible {
	outline: 3px solid var(--color-brand-primary);
	outline-offset: 2px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
	opacity: 0.4;
	pointer-events: none;
	cursor: not-allowed;
}

/* Outline button on a brand/primary (blue) background — e.g. Contact CTA's
   secondary button (Figma node 28:402;56:286: white 1.5px border, text/inverse). */
.btn--outline-inverse {
	background-color: transparent;
	color: var(--color-text-inverse);
	border: 1.5px solid var(--color-bg-base);
	padding: 14.5px 32px;
}

.btn--outline-inverse:hover {
	background-color: rgb(255 255 255 / 0.1);
}

/* -- Page Title (breadcrumb + heading): shared by Services and Contact -- */

.page-title {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--block-gap);
	padding: var(--section-py) var(--container-px);
}

.page-title__inner {
	display: flex;
	flex-direction: column;
	gap: var(--block-gap);
	width: 100%;
	max-width: 1120px;
}

.breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 400 14px/1.7 var(--font-sans);
}

.breadcrumb a {
	color: var(--color-text-accent);
	text-decoration: underline;
}

.breadcrumb__current {
	color: var(--color-text-primary);
}

.page-title--narrow .page-title__inner {
	max-width: 800px;
}

/* -- Section Heading (eyebrow label + 2-line heading + lead paragraph) -- */

.section-heading {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.section-heading__title-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.section-heading--center {
	align-items: center;
	text-align: center;
}

/* -- Sign Bubble (node 33:802): pill + tail, centered above the service cards -- */

.sign-bubble {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
}

.sign-bubble__pill {
	display: inline-flex;
	padding: 6px 20px;
	margin-bottom: -1px;
	background-color: var(--color-brand-primary);
	border-radius: var(--radius-full);
	font: 700 24px/1.5 var(--font-sans);
	color: var(--color-text-inverse);
	letter-spacing: 0.96px; /* 4% of 24px */
}

.sign-bubble__tail {
	width: 20px;
	height: 14px;
}

/* -- Service Card (node 27:107): Row (<720) / Tile (>=720) -- */

.service-card-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.service-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 16px 18px 18px;
	background-color: var(--color-bg-base);
	border: 1px solid var(--color-border-base);
	border-radius: var(--radius-lg);
	text-decoration: none;
}

.service-card__icon {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
}

.service-card__icon svg {
	width: 100%;
	height: 100%;
}

.service-card__text {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.service-card__title {
	font: 700 15px/1.5 var(--font-sans);
	color: var(--color-text-primary);
}

/* The 6 categories use different onomatopoeia fonts/sizes, so a single
   line renders at a different height per card — without a shared
   min-height here, the description below ends up starting at a
   different Y position card to card (most visible in the Wide 3-col
   grid, where cards sit side by side). Sized to the tallest single
   line among all six (node 03, Stick 48/63px). */
.service-card .ono-typewriter-wrap {
	min-height: 56px;
}

.service-card__arrow {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

@container site (min-width: 720px) {
	.service-card-list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}

	.service-card {
		flex-direction: column;
		align-items: center;
		text-align: center;
		height: 100%;
	}

	.service-card .ono-typewriter-wrap {
		min-height: 74px;
	}

	.service-card__arrow {
		display: none;
	}
}

/* -- Promise (node 28:352): shared between Home and the Services page -- */

.promise {
	position: relative;
	overflow: clip;
	background-color: var(--color-bg-ash);
	padding: var(--section-py) var(--container-px);
}

.promise__photo {
	position: absolute;
	inset: 0;
	overflow: clip;
	background-repeat: no-repeat;
	background-position: right center;
	background-size: cover;
	opacity: 0.15;
}

.promise__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgb(232 236 241 / 0) 0%,
		rgb(232 236 241 / 0.35) 45%,
		rgb(232 236 241 / 0.9) 85%,
		rgb(232 236 241) 100%
	);
}

.promise__band {
	position: relative;
	max-width: 1120px;
	margin-inline: auto;
}

.promise__content {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.promise__title {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

@container site (min-width: 720px) {
	.promise__band {
		/* Caps the whole content band so it doesn't keep stretching on
		   very wide screens — matches Stance's own 1280px cap. */
		max-width: 1280px;
	}

	.promise__content {
		gap: 32px;
		/* Keep text confined to roughly the left half of the band —
		   without it, removing the manual line breaks lets paragraphs
		   reflow to fill the full width. The band above handles overall
		   centering; this stays left-aligned within it (no auto margin). */
		max-width: 640px;
	}
}

/* -- Contact Option (node 56:89): Row (<720) / Tile (>=720) -- */

.contact-cta__options {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.contact-option {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 20px 14px;
	background-color: var(--color-bg-base);
	border: 2px solid var(--color-brand-primary);
	border-radius: var(--radius-lg);
	text-decoration: none;
}

.contact-option__icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: var(--radius-full);
	background-color: var(--color-state-tint-hover);
}

.contact-option__icon-wrap svg {
	width: 24px;
	height: 24px;
}

.contact-option__text {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.contact-option__title-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.contact-option__title {
	font: 700 20px/1.4 var(--font-sans);
	color: var(--color-text-primary);
}

.contact-option__arrow {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

@container site (min-width: 720px) {
	.contact-cta__options {
		flex-direction: row;
	}

	.contact-option {
		flex: 1 1 0;
		flex-direction: column;
		text-align: center;
	}

	.contact-option__title-row {
		flex-direction: row-reverse;
		justify-content: center;
	}
}

/* -- Contact CTA (node 28:401): brand/primary panel, "全ページ共通" -- */

.contact-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding: var(--section-py) var(--container-px);
	background-color: var(--color-bg-base);
}

.contact-cta__areas {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	max-width: 640px;
	text-align: center;
}

.contact-cta__areas-title {
	font: 700 14px/1.7 var(--font-sans);
	color: var(--color-text-primary);
}

.contact-cta__areas-list {
	font: 400 14px/1.7 var(--font-sans);
	color: var(--color-text-primary);
}

.contact-cta__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--block-gap);
	width: 100%;
	max-width: 1120px;
	padding: 28px 14px;
	border-radius: var(--radius-lg);
	background-color: var(--color-brand-primary);
	overflow: clip;
}

.contact-cta__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url(../img/patterns/dots-on-primary.png);
	background-size: 16px 16px;
	background-repeat: repeat;
	opacity: 0.25;
}

.contact-cta__heading,
.contact-cta__options,
.contact-cta__secondary {
	position: relative;
}

.contact-cta__heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}

.contact-cta__secondary {
	width: 100%;
}

@container site (min-width: 720px) {
	.contact-cta__secondary {
		width: auto;
		min-width: 320px;
	}
}

/* -- Podcast section (9:187 lemon-stripe bg, "RADIO番組"): shared by the
   home page and the podcast CPT archive.
   Named .podcast-intro (not .podcast) because WordPress's post_class()
   adds the bare post type slug "podcast" to every podcast CPT <article>
   — a plain .podcast rule was leaking this lemon-stripe background onto
   the single episode template. -- */

.podcast-intro {
	position: relative;
	padding: var(--section-py) var(--container-px);
	background-color: var(--color-brand-accent);
	background-image: repeating-linear-gradient(
		-65deg,
		rgb(255 255 255 / 0.5) 0 6px,
		transparent 6px 26px
	);
}

.podcast__row {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 28px;
	max-width: 1280px;
	margin-inline: auto;
	padding: 20px;
	background-color: var(--color-bg-base);
	border: 1px solid var(--color-border-base);
	border-radius: var(--radius-lg);
}

.podcast__artwork {
	width: 100%;
	max-width: 310px;
	aspect-ratio: 1 / 1;
	border: 1.124px solid var(--color-brand-primary);
	border-radius: 9px;
	overflow: clip;
}

.podcast__artwork img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.podcast__copy {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.podcast__kicker {
	font: 500 16px/1.4 var(--font-sans);
	margin: 0;
}

.podcast__kicker-en {
	font-family: var(--font-dm-sans);
	font-style: italic;
}

.podcast__title {
	margin: 0;
}

.podcast__title img {
	width: 240px;
	height: auto;
}

.podcast__platforms {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

@container site (min-width: 720px) {
	.podcast__row {
		flex-direction: row;
		align-items: flex-start;
	}

	.podcast__artwork {
		width: 315px;
		flex-shrink: 0;
	}

	.podcast__title img {
		width: 340px;
	}
}

/* -- Onomatopoeia typewriter loop (see ideal_craftsman_onomatopoeia()):
   the invisible "ghost" (full word) and the animated text share one grid
   cell, so the ghost's natural size reserves the box's height/width even
   while the visible text is empty or mid-animation. -- */

.ono-typewriter-wrap {
	display: grid;
}

.ono-typewriter-wrap > * {
	grid-area: 1 / 1;
}

.ono-typewriter-ghost {
	visibility: hidden;
}

/* Shrinks every word in the rotation (not just the long one) so the set
   stays visually consistent — see ideal_craftsman_onomatopoeia(). Used on
   敷地と外まわり, whose "ベチャベチャ" (6 chars) wraps at the normal size. */
.ono-typewriter--compact {
	font-size: 32px;
}

@container site (min-width: 720px) {
	.ono-typewriter--compact {
		font-size: 42px;
	}
}