/* ==========================================================
   共通のコンポーネント（見出し・記事のカセット・ページ送り・動画）
   ========================================================== */

/* セクションの見出し（日本語＋英語の小見出し。下にオレンジの線） */
.c-section-title { margin: 0 0 var(--space-5); text-align: center; color: var(--c-secondary); font-size: var(--fz-xl); font-weight: 700; line-height: 1.4; text-wrap: balance; word-break: auto-phrase; } /* 見出しは文節の切れ目で折り返す */
.c-section-title::after { content: ''; display: block; width: 48px; height: 4px; margin: 12px auto 0; border-radius: 2px; background: var(--c-primary); }
.c-section-title__en { display: block; margin-top: 4px; color: var(--c-primary-dark); font-size: var(--fz-xs); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.c-section-title--small { font-size: var(--fz-lg); }
.l-section__more { margin: var(--space-4) 0 0; text-align: center; }

.c-btn--more { min-width: 240px; background: var(--c-secondary); color: var(--c-white); }
.c-btn--more::after { content: ''; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s; }
.c-btn--more:hover { background: var(--c-primary); color: var(--c-secondary); }
.c-btn--more:hover::after { transform: translateX(4px) rotate(45deg); }

/* 記事のカセット（横長。左に画像・右に文。全体がリンク） */
.c-cassette-list { display: grid; gap: var(--space-2); }
.c-cassette {
	position: relative;
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 12px;
	padding: 12px;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-md);
	transition: box-shadow 0.25s var(--ease), border-color 0.25s, transform 0.25s var(--ease);
}
.c-cassette:hover { border-color: var(--c-primary); box-shadow: var(--shadow-mid); transform: translateY(-2px); }
.c-cassette:focus-within { border-color: var(--c-primary); box-shadow: var(--ring); }
.c-cassette__media { position: relative; align-self: start; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 10px; background: var(--c-cream); }
.c-cassette__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); }
.c-cassette:hover .c-cassette__media img { transform: scale(1.05); }
.c-cassette__rank { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 10px 0 10px 0; background: var(--c-secondary); color: var(--c-white); font-size: var(--fz-sm); font-weight: 700; line-height: 1; }
.c-cassette__rank.is-top { background: var(--c-primary); color: var(--c-secondary); }
.c-cassette__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.c-cassette__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--fz-xs); color: var(--c-text-2); }
.c-cassette__date { line-height: 24px; }
.c-cassette__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0; font-size: 0.9375rem; line-height: 1.5; }
.c-cassette__link { color: var(--c-secondary); text-decoration: none; }
.c-cassette__link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } /* カセット全体を押せる */
.c-cassette__link:focus-visible { box-shadow: none; }
.c-cassette:hover .c-cassette__link { color: var(--c-primary-dark); }
.c-cassette__text { display: none; margin: 0; color: var(--c-text-2); font-size: var(--fz-sm); line-height: 1.7; }
.c-cassette__pv { display: inline-flex; align-items: center; gap: 4px; margin: auto 0 0; color: var(--c-primary-dark); font-size: var(--fz-xs); font-weight: 700; }
.c-cassette__pv .c-icon { width: 16px; height: 16px; color: currentColor; }

/* アイキャッチが無い記事: クリームの地にロゴ */
.c-thumb-default { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 8%; background: var(--c-cream); }
.c-thumb-default img { width: 100%; height: auto !important; object-fit: contain !important; }

@media (min-width: 768px) {
	.c-cassette { grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-2); }
	.c-cassette__title { -webkit-line-clamp: 2; font-size: 1.125rem; }
	.c-cassette__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
	.c-cassette__meta { font-size: var(--fz-sm); }
	.c-cassette__pv { font-size: var(--fz-sm); }
}

/* ページ送り */
.c-pager { margin-top: var(--space-4); }
.c-pager__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.c-pager__link { display: flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 8px; border: 1px solid var(--c-line); border-radius: var(--radius-pill); background: var(--c-white); color: var(--c-secondary); font-weight: 700; text-decoration: none; transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
a.c-pager__link:hover { border-color: var(--c-primary); background: var(--c-primary); color: var(--c-secondary); }
.c-pager__link.is-current { border-color: var(--c-secondary); background: var(--c-secondary); color: var(--c-white); }
.c-pager__link .c-icon { width: 20px; height: 20px; color: currentColor; }
.c-pager__gap { color: var(--c-text-2); }

.c-empty { margin: 0; padding: var(--space-6) var(--space-2); border: 1px dashed var(--c-line); border-radius: var(--radius-md); background: var(--c-white); color: var(--c-text-2); text-align: center; }

/* 動画（押すまで YouTube のプレーヤーを読み込まない。サムネイルと再生ボタン） */
.c-video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; border: 0; border-radius: var(--radius-sm); background: #000; cursor: pointer; }
.c-video__thumb { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease), opacity 0.3s; }
.c-video:hover .c-video__thumb { transform: scale(1.03); opacity: 0.9; }
.c-video__play { position: absolute; top: 50%; left: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)); transition: transform 0.2s; }
.c-video:hover .c-video__play { transform: translate(-50%, -50%) scale(1.1); }
.c-video__frame { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radius-sm); background: #000; }

@media (min-width: 768px) {
	.c-section-title { font-size: var(--fz-2xl); }
	.c-section-title--small { font-size: var(--fz-xl); }
}

@media (prefers-reduced-motion: reduce) {
	.c-cassette,
	.c-cassette__media img,
	.c-video__thumb,
	.c-video__play { transition: none; }
	.c-cassette:hover { transform: none; }
}