/* ASMR タグフィルター: 特集ページ(/feature/{slug}/) 専用CSS
   スコープは .asmr-feature 配下のみ。カード・グリッド・並び順・件数表示は
   既存 asmr-filter.css のクラス(.asmr-filter__grid 等)をそのまま再利用し、
   ここでは特集ページ固有の要素(導入文・条件チップ・関連特集)だけを最小限で追加する。
   新しい色コードは増やさない。 */

.asmr-feature {
	/* asmr-filter.css の .asmr-filter で定義されている値と同一(--asmr-filter-accent等)。
	   特集ページは[asmr_filter]ショートコードの.asmr-filterラッパーの外側にあるため、
	   同じCSS変数をここで再定義して、asmr-filter.css側の.asmr-filter__grid/__pagination等の
	   カード・ページネーション共通ルールが特集ページでも同じ配色になるようにする
	   (色の値自体は増やしていない、既存値の再スコープ)。 */
	--asmr-filter-border: #e3e3e3;
	--asmr-filter-bg: #ffffff;
	--asmr-filter-bg-soft: #f7f7f7;
	--asmr-filter-accent: #d63864;
	--asmr-filter-text: #333333;
	max-width: 100%;
}

.asmr-feature__intro {
	max-width: 780px;
	margin: 0.75em 0 1.25em;
	line-height: 1.9;
	color: #444444;
}

.asmr-feature__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-bottom: 1em;
}

.asmr-feature__chip {
	display: inline-flex;
	align-items: center;
	padding: 0.35em 0.9em;
	border-radius: 999px;
	background: var( --asmr-filter-accent, #d63864 );
	color: #fff;
	font-size: 0.85em;
	text-decoration: none;
	line-height: 1.5;
	max-width: 100%;
	overflow-wrap: break-word;
}

.asmr-feature__chip:hover {
	filter: brightness( 0.92 );
}

.asmr-feature__chip--nolink {
	background: var( --asmr-filter-bg-soft, #f7f7f7 );
	color: var( --asmr-filter-text, #333333 );
	border: 1px solid var( --asmr-filter-border, #e3e3e3 );
}

.asmr-feature__section-ttl {
	font-size: 1.1em;
	font-weight: bold;
	margin: 1.5em 0 0.75em;
	padding-top: 0.75em;
	border-top: 1px solid var( --asmr-filter-border, #e3e3e3 );
}

.asmr-feature__popular .asmr-feature__section-ttl {
	border-top: none;
	padding-top: 0;
}

/* 関連特集: 軽量なリンクリスト(画像なし)。 */
.asmr-feature__related {
	margin: 2em 0 1em;
	padding-top: 1em;
	border-top: 1px solid var( --asmr-filter-border, #e3e3e3 );
}

.asmr-feature__related-ttl {
	font-size: 1.05em;
	font-weight: bold;
	margin: 0 0 0.75em;
}

.asmr-feature__related-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.asmr-feature__related-item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: 0.75em 1em;
	border: 1px solid var( --asmr-filter-border, #e3e3e3 );
	border-radius: 8px;
	background: #fff;
	text-decoration: none;
	color: var( --asmr-filter-text, #333333 );
}

.asmr-feature__related-item a:hover {
	background: var( --asmr-filter-bg-soft, #f7f7f7 );
}

.asmr-feature__related-title {
	font-weight: bold;
}

.asmr-feature__related-count {
	flex: 0 0 auto;
	font-size: 0.85em;
	color: #777777;
}

/* Find導線CTA(特集ページ下部)は既存 .asmr-find-nav--tag と同じ横並びレイアウトを再利用する。 */
.asmr-find-nav--feature .asmr-find-nav__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25em 1.5em;
}

.asmr-find-nav--feature .asmr-find-nav__title,
.asmr-find-nav--feature .asmr-find-nav__text {
	flex: 1 1 100%;
}

@media screen and ( min-width: 780px ) {
	.asmr-find-nav--feature .asmr-find-nav__title,
	.asmr-find-nav--feature .asmr-find-nav__text {
		flex: 1 1 auto;
		margin-bottom: 0;
	}
	.asmr-find-nav--feature .asmr-find-nav__button {
		flex: 0 0 auto;
		margin-left: auto;
	}
}

@media screen and ( max-width: 599px ) {
	.asmr-feature__related-item a {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.3em;
	}
}

/* ==========================================================================
   特集一覧ページ(/feature/)・トップページ人気特集・Find下部・サイドバー・個別特集
   下部リンクで共通利用する「特集ハブ」導線群。CSS変数は .asmr-feature と同じ値を
   再宣言して使う(新しい色コードは増やさない)。
   ========================================================================== */

.asmr-feature-hub {
	--asmr-filter-border: #e3e3e3;
	--asmr-filter-bg: #ffffff;
	--asmr-filter-bg-soft: #f7f7f7;
	--asmr-filter-accent: #d63864;
	--asmr-filter-text: #333333;
	max-width: 100%;
}

.asmr-feature-hub__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 1.25em;
	margin: 1.5em 0;
}

/* トップページ人気特集・Findページ下部で共通利用する4列グリッド。 */
.asmr-feature-hub__grid--homepage,
.asmr-feature-hub__grid--find {
	grid-template-columns: repeat( 4, 1fr );
}

/* 特集一覧ページ(/feature/)本体のグリッドのみ。代表作品画像付きカードは
   トップページ/Find下部の人気特集(--homepage/--find)より少ない列数のほうが
   画像が見やすいため、一覧ページ専用の修飾クラスで2列に固定する
   (--homepage/--findのレイアウトには影響しない)。 */
.asmr-feature-hub__grid--hub {
	grid-template-columns: repeat( 2, 1fr );
}

.asmr-feature-hub__card {
	display: flex;
	flex-direction: column;
	padding: 1.1em 1.2em;
	border: 1px solid var( --asmr-filter-border, #e3e3e3 );
	border-radius: 8px;
	background: var( --asmr-filter-bg, #ffffff );
}

/* 代表作品画像付きカード(一覧ページのみ)。画像をカード上部いっぱいに表示するため、
   カード本体の余白は画像下の.asmr-feature-hub__card-body側へ移す。画像が無い
   カード(.asmr-feature-hub__card--has-imageなし)は従来どおり上のルールのみで、
   高さ・余白とも変更していない。 */
.asmr-feature-hub__card--has-image {
	padding: 0;
	overflow: hidden;
}

.asmr-feature-hub__card-image {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 1.414 / 1;
	overflow: hidden;
	background: var( --asmr-filter-bg-soft, #f7f7f7 );
}

.asmr-feature-hub__card-image-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.25s ease;
}

.asmr-feature-hub__card-image:hover .asmr-feature-hub__card-image-img {
	transform: scale( 1.04 );
}

.asmr-feature-hub__card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 1.1em 1.2em;
}

.asmr-feature-hub__card-title {
	font-size: 1em;
	font-weight: bold;
	margin: 0 0 0.5em;
	line-height: 1.5;
	overflow-wrap: break-word;
}

.asmr-feature-hub__card-title a {
	color: inherit;
	text-decoration: none;
}

.asmr-feature-hub__card-title a:hover {
	text-decoration: underline;
}

.asmr-feature-hub__card-desc {
	flex: 1 0 auto;
	margin: 0 0 0.75em;
	font-size: 0.9em;
	line-height: 1.7;
	color: #444444;
	overflow-wrap: break-word;
}

.asmr-feature-hub__card-count {
	margin: 0 0 0.75em;
	font-size: 0.85em;
	color: #777777;
}

.asmr-feature-hub__card-link {
	display: inline-block;
	align-self: flex-start;
	margin-top: auto;
	padding: 0.5em 1.1em;
	border: 1px solid var( --asmr-filter-accent, #d63864 );
	border-radius: 999px;
	color: var( --asmr-filter-accent, #d63864 );
	text-decoration: none;
	font-size: 0.9em;
}

.asmr-feature-hub__card-link:hover {
	background: var( --asmr-filter-accent, #d63864 );
	color: #fff;
}

/* トップページ: 人気のR18 ASMR特集 */
.asmr-feature-hub--homepage {
	margin: 2em 0;
	padding: 1.5em;
	background: var( --asmr-filter-bg-soft, #f7f7f7 );
	border: 1px solid var( --asmr-filter-border, #e3e3e3 );
	border-radius: 8px;
}

.asmr-feature-hub__home-heading,
.asmr-feature-hub__find-heading {
	font-size: 1.15em;
	font-weight: bold;
	margin: 0 0 0.5em;
}

.asmr-feature-hub__home-intro,
.asmr-feature-hub__find-text {
	margin: 0 0 1em;
	color: #444444;
	line-height: 1.8;
}

.asmr-feature-hub__home-all,
.asmr-feature-hub__find-all {
	display: inline-block;
	margin-top: 1em;
	color: var( --asmr-filter-accent, #d63864 );
	text-decoration: underline;
	font-size: 0.9em;
}

/* Findページ下部: 人気の組み合わせから探す(カード表示。ピルリンク一覧だった旧実装は
   STAGE3でカードグリッドへ置き換え。find_enabledは元々一度も本番で有効化していないため
   既存表示への影響は無い)。 */
.asmr-feature-hub--find {
	margin: 2em 0 0;
	padding-top: 1.5em;
	border-top: 1px solid var( --asmr-filter-border, #e3e3e3 );
}

/* サイドバー: 人気のR18 ASMR特集(SWELLの既存ウィジェット見出しスタイル .c-widget を踏襲) */
.asmr-feature-hub-sidebar .asmr-feature__related-list {
	margin-top: 0.75em;
}

.asmr-feature-hub-sidebar__all {
	display: block;
	margin-top: 0.75em;
	font-size: 0.85em;
	color: var( --asmr-filter-accent, #d63864 );
	text-decoration: underline;
}

/* ショートコードブロックとしてSWELLの既存ウィジェット枠(.c-widget)内に設置した場合、
   このブロック自体の.c-widget枠が二重(入れ子)になるのを防ぐ。自動挿入時は
   .c-widgetの直下に他ウィジェットと並んで置かれるだけで入れ子にならないため、
   このセレクタ(祖先にも.c-widgetが必要)には影響しない。 */
.c-widget .asmr-feature-hub-sidebar.c-widget {
	border: 0;
	background: none;
	box-shadow: none;
	padding: 0;
	margin: 0;
}

/* 個別特集ページ下部: 特集一覧へ戻る */
.asmr-feature-hub__backlink {
	margin: 1.5em 0 0;
	font-size: 0.9em;
}

.asmr-feature-hub__backlink a {
	color: var( --asmr-filter-accent, #d63864 );
	text-decoration: underline;
}

@media screen and ( max-width: 960px ) {
	.asmr-feature-hub__grid,
	.asmr-feature-hub__grid--homepage,
	.asmr-feature-hub__grid--find {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media screen and ( max-width: 599px ) {
	.asmr-feature-hub__grid,
	.asmr-feature-hub__grid--homepage,
	.asmr-feature-hub__grid--find {
		grid-template-columns: 1fr;
	}
	.asmr-feature-hub--homepage {
		padding: 1.1em;
	}
}