/* ==========================================================================
   コーポレートの小さな部品
   - c-tag（Figma c-tag 7:65）: 分類のタグ。点の色＝事業の色（--paint／--care／--it。ほかは灰色）
   - c-works-card（16:52）: 施工事例のカード — template-parts/corporate/works-card.php
   - c-news-item（16:44）: お知らせの1行 — template-parts/corporate/news-item.php
   - c-faq-item（39:161）: よくある質問の1問 — template-parts/corporate/faq-item.php
   - c-no-photo（177:4549）: 写真がない人の枠
   ========================================================================== */

/* ---------- c-tag ---------- */
.c-tag {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-2xs) 14px var(--space-2xs) var(--space-sm); /* 14 は Figma の値 */
	font: var(--text-label-s);
	letter-spacing: var(--ls-label-s);
	color: var(--color-text-primary);
	white-space: nowrap;
	background: var(--color-bg-subtle);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-full);
}

.c-tag__dot {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	background: var(--color-text-tertiary);
	border-radius: var(--radius-full);
}

.c-tag--paint .c-tag__dot { background: var(--color-business-paint); }
.c-tag--care .c-tag__dot { background: var(--color-business-care); }
.c-tag--it .c-tag__dot { background: var(--color-business-it); }

/* ---------- c-works-card ---------- */
.c-works-card {
	display: flex;
	flex-direction: column;
	gap: 20px; /* Figma の値 */
	height: 100%;
	color: var(--color-text-primary);
	text-decoration: none;
	border-radius: var(--radius-md);
}

.c-works-card__media {
	position: relative;
	display: flex;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--color-bg-subtle);
	border-radius: 12px; /* Figma の値 */
}

.c-works-card__half {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.c-works-card__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s;
}

.c-works-card__half--before .c-works-card__photo {
	filter: grayscale(1);
}

.c-works-card__seam {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 3px;
	background: var(--color-bg-canvas);
	transform: translateX(-50%);
}

.c-works-card__label {
	position: absolute;
	top: var(--space-sm);
	padding: 2px 10px; /* Figma の値 */
	font: var(--text-en-caption);
	letter-spacing: var(--ls-en-caption);
	color: var(--color-text-on-brand);
	border-radius: var(--radius-sm);
}

.c-works-card__label--before {
	left: var(--space-sm);
	background: var(--color-bg-inverse);
}

.c-works-card__label--after {
	right: var(--space-sm);
	background: var(--color-bg-brand);
}

.c-works-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs) var(--space-sm);
}

.c-works-card__area {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	font: var(--text-label-s);
	letter-spacing: var(--ls-label-s);
	color: var(--color-text-tertiary);
}

.c-works-card__pin {
	width: 16px;
	height: 16px;
}

.c-works-card__title {
	font: var(--text-h5);
	letter-spacing: var(--ls-h5);
	transition: color 0.2s;
}

@media (hover: hover) {
	.c-works-card:hover .c-works-card__title {
		color: var(--color-text-brand);
	}

	.c-works-card:hover .c-works-card__photo {
		transform: scale(1.04);
	}
}

/* ---------- c-news-item ---------- */
.c-news-item {
	display: flex;
	align-items: center;
	gap: var(--space-xl);
	padding: 28px var(--space-xs); /* 28 は Figma の値 */
	color: var(--color-text-primary);
	text-decoration: none;
	border-bottom: 1px solid var(--color-border-default);
}

.c-news-item__body {
	display: flex;
	flex: 1;
	align-items: center;
	gap: var(--space-xl);
	min-width: 0;
}

.c-news-item__meta {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--space-xl);
	min-width: 228px; /* 日付 96 + 間 32 + 分類 100（4文字の「お知らせ」の幅）。「採用」など短い分類でも題名の位置をそろえる */
}

.c-news-item__date {
	width: 96px;
	font: var(--text-en-date);
	letter-spacing: var(--ls-en-date);
	color: var(--color-text-tertiary);
}

.c-news-item__title {
	flex: 1;
	min-width: 0;
	font: var(--text-body-bold);
	letter-spacing: var(--ls-body-bold);
	transition: color 0.2s;
}

.c-news-item__arrow {
	width: 20px;
	height: 20px;
	color: var(--color-text-brand);
}

@media (hover: hover) {
	.c-news-item:hover .c-news-item__title {
		color: var(--color-text-brand);
	}
}

/* ---------- c-faq-item ---------- */
.c-faq-item {
	border-bottom: 1px solid var(--color-border-default);
}

.c-faq-item__q {
	margin: 0;
	font: inherit;
}

.c-faq-item__button {
	display: flex;
	align-items: center;
	gap: 20px; /* Figma の値 */
	width: 100%;
	padding: 28px 0; /* Figma の値 */
	color: var(--color-text-primary);
	text-align: left;
	background: none;
	border: 0;
}

.c-faq-item__mark {
	flex-shrink: 0;
	font: var(--text-en-h3);
	letter-spacing: var(--ls-en-h3);
	color: var(--color-text-brand);
}

.c-faq-item__mark--a {
	color: var(--color-text-tertiary);
}

.c-faq-item__question {
	flex: 1;
	min-width: 0;
	font: var(--text-h5);
	letter-spacing: var(--ls-h5);
}

.c-faq-item__toggle {
	display: flex;
	flex-shrink: 0;
	font-size: 24px;
	color: var(--color-text-brand);
}

.c-faq-item__minus,
.c-faq-item.is-open .c-faq-item__plus {
	display: none;
}

.c-faq-item.is-open .c-faq-item__minus {
	display: inline-block;
}

.c-faq-item__a {
	display: flex;
	align-items: flex-start;
	gap: 20px; /* Figma の値 */
	margin-top: -12px; /* 質問と答えの間を 16 に（Figma の値） */
	padding-bottom: 28px; /* Figma の値 */
}

.c-faq-item__a[hidden] {
	display: none;
}

.c-faq-item__answer {
	flex: 1;
	min-width: 0;
	font: var(--text-body);
	letter-spacing: var(--ls-body);
	color: var(--color-text-secondary);
}

.c-faq-item__answer > * + * {
	margin-top: 1em;
}

@media (hover: hover) {
	.c-faq-item__button:hover .c-faq-item__question {
		color: var(--color-text-brand);
	}
}

/* ---------- c-no-photo ---------- */
.c-no-photo {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px; /* Figma の値 */
	background: var(--neutral-200); /* Figma の値（Primitives を直接使っている） */
}

.c-no-photo__icon {
	width: 72px;
	height: 78px;
}

.c-no-photo__label {
	font: var(--text-en-caption);
	letter-spacing: 0.12em; /* Figma の値 */
	color: var(--color-text-secondary);
}

/* ---------- SP ---------- */
@media (max-width: 767px) {
	.c-works-card__media {
		aspect-ratio: 335 / 288; /* Figma の SP の値 */
	}

	.c-news-item {
		gap: var(--space-sm);
		padding: var(--space-lg) var(--space-2xs);
	}

	.c-news-item__body {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px; /* Figma の値 */
	}

	.c-news-item__meta {
		gap: var(--space-sm);
		min-width: 0;
	}

	.c-news-item__date {
		width: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.c-works-card__photo,
	.c-works-card__title,
	.c-news-item__title {
		transition: none;
	}
}