/* ==========================================================================
   TEYLL — 制作実績（page-teyll-works.php。Figma 06 TEYLL の 1345:93527・SP 1394:98291）
   - CASE：絞り込みのボタン（高さ 48・カプセル。選んでいるもの＝白に Ring の輪 2px、ほか＝白に線）→ 40 → 実績と見本のカード（幅 588 の2列・高さをそろえる）
     → 40 → 「Instagram を見る」と注意書き
   - INDUSTRY：業種のカード3枚（白・角 32・写真 352×220・カード全体がリンク）
   - SP：絞り込みは折り返して2行（横にスクロールさせない）・カードは縦に1列（写真の高さ 168）・業種のカードも縦に（写真の高さ 190）
   カードの見た目は component-cards.css の c-teyll-works-card（トップと同じ部品）
   ========================================================================== */
.p-teyll-works-list__body {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* ---------- 絞り込み ---------- */
.p-teyll-works-list__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.p-teyll-works-list__filter-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	border: 1px solid transparent;
	border-radius: var(--radius-full);
	background:
		linear-gradient(var(--teyll-bg-canvas), var(--teyll-bg-canvas)) padding-box,
		linear-gradient(var(--teyll-border-default), var(--teyll-border-default)) border-box;
	font: var(--text-teyll-label);
	font-size: 14px; /* SP も 14（Figma） */
	letter-spacing: var(--ls-teyll-label);
	color: var(--teyll-text-secondary);
	cursor: pointer;
	transition: color 0.2s ease;
}

.p-teyll-works-list__filter-button:hover {
	color: var(--teyll-text-primary);
}

.p-teyll-works-list__filter-button[aria-pressed="true"] {
	border-width: 2px;
	padding-inline: 23px; /* 輪が 2px になっても幅が変わらないように */
	background:
		linear-gradient(var(--teyll-bg-canvas), var(--teyll-bg-canvas)) padding-box,
		var(--teyll-gradient-ring) border-box;
	color: var(--teyll-text-primary);
}

/* ---------- 実績と見本のカード（2列・高さをそろえる） ---------- */
.p-teyll-works-list__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-teyll-works-list__card {
	flex: none; /* トップの横送りの幅（440）を外す */
	min-width: 0;
}

.p-teyll-works-list__card[hidden] {
	display: none;
}

.p-teyll-works-list__external {
	display: inline-block;
	margin-left: 4px;
	vertical-align: -0.12em;
	color: var(--teyll-text-secondary);
}

.p-teyll-works-list__empty {
	padding: 40px 24px;
	border-radius: var(--radius-teyll-card);
	background: var(--teyll-bg-canvas);
	font: var(--text-teyll-body);
	letter-spacing: var(--ls-teyll);
	color: var(--teyll-text-secondary);
	text-align: center;
}

.p-teyll-works-list__empty[hidden] {
	display: none;
}

/* ---------- Instagram と注意書き ---------- */
.p-teyll-works-list__more {
	display: flex;
	align-items: center;
	gap: 32px;
}

.p-teyll-works-list__instagram {
	flex: none;
}

.p-teyll-works-list__note {
	font: var(--text-teyll-caption);
	letter-spacing: var(--ls-teyll);
	color: var(--teyll-text-secondary);
}

/* ---------- INDUSTRY（業種ごとのつくり方） ---------- */
.p-teyll-works-industry__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-teyll-works-industry__item {
	display: flex;
}

.p-teyll-works-industry__card {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 16px 16px 24px;
	border-radius: var(--radius-teyll-card);
	background: var(--teyll-bg-canvas);
	color: var(--teyll-text-primary);
	text-decoration: none;
}

.p-teyll-works-industry__photo {
	display: block;
	flex: none;
	height: 220px;
	overflow: hidden;
	border-radius: 24px;
	background: var(--teyll-bg-subtle);
}

.p-teyll-works-industry__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.p-teyll-works-industry__card:hover .p-teyll-works-industry__photo img {
	transform: scale(1.04);
}

.p-teyll-works-industry__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	padding: 24px 8px 0;
}

.p-teyll-works-industry__title {
	font: var(--text-teyll-h3);
	letter-spacing: var(--ls-teyll);
}

.p-teyll-works-industry__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: auto;
}

.p-teyll-works-industry__text {
	font: var(--text-teyll-body-s);
	letter-spacing: var(--ls-teyll);
	color: var(--teyll-text-secondary);
}

/* ---------- 狭い PC ---------- */
@media (max-width: 1023px) {
	.p-teyll-works-list__more {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.p-teyll-works-industry__list {
		grid-template-columns: minmax(0, 1fr);
		max-width: 560px;
	}
}

/* ---------- SP ---------- */
@media (max-width: 767px) {
	.p-teyll-works-list__body {
		gap: 32px;
	}

	.p-teyll-works-list__filter {
		gap: 8px;
	}

	.p-teyll-works-list__filter-button {
		padding-inline: 16px;
	}

	.p-teyll-works-list__filter-button[aria-pressed="true"] {
		padding-inline: 15px;
	}

	.p-teyll-works-list__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.p-teyll-works-list__more {
		align-items: stretch;
	}

	.p-teyll-works-list__instagram-id {
		display: none; /* SP は「Instagram を見る」だけ（読み上げはボタンの aria-label で全文） */
	}

	.p-teyll-works-industry__list {
		gap: 16px;
		max-width: none;
	}

	.p-teyll-works-industry__photo {
		height: 190px;
		border-radius: 20px;
	}

	.p-teyll-works-industry__body {
		padding: 16px 8px 0;
	}
}