/* ============================================================
   OUTDOOR RESORT.notes — Feature（旅のおすすめ情報）
   Ported from prototypes:
     archive → orn0419/trip/feat_latest0419.html
     single  → orn0419/trip/katori_latest0419.html
   Design tokens aliased to theme.json presets, scoped to .l-feature.
   Header offset handled by shared .l-page (common.css: 206px / 222px@900).
   Archive rules scoped .p-feature-archive, single rules .p-feature-single
   so the differing .section-head / .section-title never collide.
   ============================================================ */

.l-feature {
	--forest:       var(--wp--preset--color--primary);
	--forest-mid:   var(--wp--preset--color--primary-mid);
	--forest-light: var(--wp--preset--color--primary-light);
	--cream:        var(--wp--preset--color--bg-gray);
	--paper:        var(--wp--preset--color--bg);
	--sand:         var(--wp--preset--color--bg-sand);
	--charcoal:     var(--wp--preset--color--text);
	--muted:        var(--wp--preset--color--text-muted);
	--white:        var(--wp--preset--color--white);
	--line:         rgba(14, 61, 46, 0.10);
	--line-soft:    rgba(14, 61, 46, 0.07);
	--shadow:       0 10px 24px rgba(14, 61, 46, 0.05);
	--serif:        var(--wp--preset--font-family--serif);
	--sans:         var(--wp--preset--font-family--base);
}

/* =====================================================================
   ARCHIVE  (.p-feature-archive)
   ===================================================================== */
.p-feature-archive .shell { max-width: 980px; margin: 0 auto; }

/* 加藤さん指摘（Editor's Pick削除で右上が空いた）是正：Editor's Pick枠だった右カラム(minmax(340px,1.14fr))は
   No.53で削除済みで.intro-featureの子要素が.intro-copy一つだけになったが、2カラムgridが残ったままだったため
   右側が空白のまま確保されていた（実測でintro-featureの右.86〜1.14fr相当が常に空だったのと一致）。
   1カラム化してintro-copy（説明文・カテゴリチップ）をコンテンツ幅いっぱいに広げる。 */
.p-feature-archive .intro-feature {
	display: block;
}
.p-feature-archive .intro-copy { padding: 8px 0 0; }
.p-feature-archive .intro-kicker {
	font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
	color: rgba(14, 61, 46, 0.54); margin-bottom: 10px;
}
.p-feature-archive .intro-title {
	font-family: var(--serif);
	line-height: 1.78; font-weight: 300; letter-spacing: 0.04em;
	color: #31322e;
}
.p-feature-archive .intro-copy p {
	margin-top: 10px; font-size: 13px; line-height: 1.92; color: #5c5b55;
}

.p-feature-archive .category-strip {
	margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap;
}
.p-feature-archive .category-chip {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 34px; padding: 0 14px;
	border-radius: 999px; border: 1px solid rgba(14, 61, 46, 0.10);
	background: rgba(255,255,255,0.82);
	font-size: 10px; letter-spacing: 0.12em; color: #56615a;
	transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
	cursor: pointer;
}
.p-feature-archive .category-chip:hover,
.p-feature-archive .category-chip.is-active {
	transform: translateY(-1px); box-shadow: 0 6px 14px rgba(14, 61, 46, 0.04);
}
.p-feature-archive .category-chip[data-filter="all"] {
	border-color: rgba(14, 61, 46, 0.10); background: rgba(255,255,255,0.86); color: #56615a;
}
.p-feature-archive .category-chip[data-filter="all"]:hover,
.p-feature-archive .category-chip[data-filter="all"].is-active {
	border-color: rgba(14, 61, 46, 0.18); background: rgba(14, 61, 46, 0.05); color: var(--forest);
}
.p-feature-archive .category-chip[data-filter="tourism"] {
	border-color: rgba(111, 155, 129, 0.22); background: rgba(111, 155, 129, 0.08); color: #4f6758;
}
.p-feature-archive .category-chip[data-filter="tourism"]:hover,
.p-feature-archive .category-chip[data-filter="tourism"].is-active {
	border-color: rgba(111, 155, 129, 0.36); background: rgba(111, 155, 129, 0.16); color: #345442;
}
.p-feature-archive .category-chip[data-filter="gourmet"] {
	border-color: rgba(199, 166, 117, 0.22); background: rgba(199, 166, 117, 0.10); color: #735f3d;
}
.p-feature-archive .category-chip[data-filter="gourmet"]:hover,
.p-feature-archive .category-chip[data-filter="gourmet"].is-active {
	border-color: rgba(199, 166, 117, 0.36); background: rgba(199, 166, 117, 0.18); color: #5f4a27;
}
.p-feature-archive .category-chip[data-filter="souvenir"] {
	border-color: rgba(177, 137, 154, 0.22); background: rgba(177, 137, 154, 0.10); color: #6d5060;
}
.p-feature-archive .category-chip[data-filter="souvenir"]:hover,
.p-feature-archive .category-chip[data-filter="souvenir"].is-active {
	border-color: rgba(177, 137, 154, 0.36); background: rgba(177, 137, 154, 0.18); color: #5a3f4f;
}

.p-feature-archive .card-meta {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
}
.p-feature-archive .card-tag {
	display: inline-flex; align-items: center; padding: 5px 8px; border-radius: 999px;
	background: rgba(93, 202, 165, 0.10); color: rgba(14, 61, 46, 0.74);
	font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
}
.p-feature-archive .card-date {
	font-size: 9px; letter-spacing: 0.07em; color: rgba(42, 42, 40, 0.48);
}
.p-feature-archive .card-read {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 11px; letter-spacing: 0.1em; color: var(--forest);
}
.p-feature-archive .card-read::after { content: '→'; }

/* section head (archive variant: baseline-aligned split) */
.p-feature-archive .section-head {
	margin-top: 26px; display: flex; align-items: end; justify-content: space-between; gap: 18px;
}
.p-feature-archive .section-kicker {
	font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
	color: rgba(14, 61, 46, 0.52); margin-bottom: 8px;
}
.p-feature-archive .section-title {
	font-family: var(--serif);
	line-height: 1.72; font-weight: 300; letter-spacing: 0.03em; color: #364039;
}
/* card grid */
.p-feature-archive .feature-grid {
	margin-top: 16px; display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.p-feature-archive .feature-card {
	background: rgba(255,255,255,0.92);
	border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
	transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
	box-shadow: 0 8px 22px rgba(14, 61, 46, 0.035);
	color: inherit; display: flex; flex-direction: column;
}
.p-feature-archive .feature-card:hover {
	transform: translateY(-2px); box-shadow: 0 14px 30px rgba(14, 61, 46, 0.08); background: var(--paper);
}
.p-feature-archive .feature-card-image { aspect-ratio: 4/3; overflow: hidden; background: var(--sand); }
.p-feature-archive .feature-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.p-feature-archive .feature-card:hover img { transform: scale(1.03); }
.p-feature-archive .feature-card-body {
	padding: 14px 14px 16px; display: flex; flex-direction: column; min-height: 190px;
}
.p-feature-archive .card-title {
	font-family: var(--serif); font-size: 14px; line-height: 1.66;
	font-weight: 300; letter-spacing: 0.02em; color: #31322e; margin-bottom: 8px;
}
.p-feature-archive .card-copy {
	font-size: 11.5px; line-height: 1.82; color: #64635d; margin-bottom: 12px; flex: 1;
}
.p-feature-archive .card-read { margin-top: auto; }

/* empty state */
.p-feature-archive .feature-empty {
	margin-top: 40px; padding: 40px 24px; text-align: center;
	color: var(--muted); font-size: 13px; letter-spacing: 0.06em;
}

/* JS-hidden card during chip filtering */
.p-feature-archive .feature-card[hidden] { display: none !important; }

/* =====================================================================
   SINGLE  (.p-feature-single)
   ===================================================================== */
.p-feature-single.l-page { padding-bottom: 108px; }
.p-feature-single .article-shell { max-width: 980px; margin: 0 auto; }
/* No.43: サイドバー(article-side)を廃止し記事本文を単一カラムで中央寄せ */
.p-feature-single .article-grid {
	display: block; max-width: 660px; margin: 0 auto;
}
.p-feature-single .article-main { min-width: 0; }

.p-feature-single .article-series {
	display: block; margin-bottom: 14px; font-family: var(--serif);
	font-size: 14px; line-height: 1.8; letter-spacing: 0.06em; color: rgba(14, 61, 46, 0.76);
}
.p-feature-single .article-title {
	font-family: var(--serif);
	line-height: 1.78; font-weight: 300; letter-spacing: 0.015em; color: #31322e;
}
.p-feature-single .article-title-area {
	padding-bottom: 28px; margin-bottom: 34px; border-bottom: 1px solid rgba(14, 61, 46, 0.09);
}
.p-feature-single .article-main-visual {
	margin-bottom: 34px; border-radius: 22px; overflow: hidden;
	background: #f2efe9; box-shadow: 0 10px 24px rgba(34, 49, 42, 0.045);
}
/* No.29: 詳細ページのアイキャッチはアップロード原寸比で表示（固定16/9トリミング解除）。 */
.p-feature-single .article-main-visual img,
.p-feature-single .article-main-visual .wp-block-post-featured-image img { display: block; width: 100%; height: auto; object-fit: unset; }

/* article body = wp:post-content */
.p-feature-single .article-body {
	background: rgba(255,255,255,0.54);
	border: 1px solid rgba(14, 61, 46, 0.05);
	border-radius: 24px; padding: 30px 32px 38px; backdrop-filter: blur(4px);
}
.p-feature-single .article-body p {
	font-size: 15px; color: #43433e; margin-top: 16px; line-height: 1.96;
}
.p-feature-single .article-body > *:first-child,
.p-feature-single .article-body .entry-content > *:first-child { margin-top: 0; }
.p-feature-single .article-body .entry-content > p:first-of-type { font-size: 15.5px; line-height: 2.02; }
/* authored h2 headings become sections (matches prototype .article-section head) */
.p-feature-single .article-body h2 {
	margin-top: 60px; scroll-margin-top: 200px;
	display: flex; align-items: center; gap: 12px;
	font-variant-numeric: lining-nums proportional-nums; font-feature-settings: "lnum" 1, "pnum" 1;
	font-weight: 300; letter-spacing: 0.02em; line-height: 1.9; color: #3b433f;
}
.p-feature-single .article-body h2::before {
	content: ''; width: 28px; height: 1px; background: rgba(14, 61, 46, 0.16); flex-shrink: 0;
}
.p-feature-single .article-body h3 {
	margin-top: 34px;
	letter-spacing: 0.02em; line-height: 1.8; color: #415047;
}
.p-feature-single .article-body img,
.p-feature-single .article-body .wp-block-image img { border-radius: 18px; }
.p-feature-single .article-body .wp-block-gallery { gap: 14px; margin-top: 20px; }
.p-feature-single .article-body figcaption {
	font-size: 13px; color: rgba(42, 42, 40, 0.52); line-height: 1.65; letter-spacing: 0.04em;
}
.p-feature-single .article-body a:not(.wp-element-button) {
	color: var(--orn-link-color, #E08A3C); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; border-bottom: 0; transition: color .2s ease;
}
.p-feature-single .article-body a:not(.wp-element-button):hover { color: #bf6f27; }

/* sidebar cards (meta / auto TOC / note) */
.p-feature-single .article-side-card {
	background: rgba(255,255,255,0.8);
	border: 1px solid rgba(14, 61, 46, 0.06);
	border-radius: 20px; padding: 20px 18px; backdrop-filter: blur(5px);
}
.p-feature-single .article-side-card + .article-side-card { margin-top: 16px; }
.p-feature-single .side-title {
	font-family: var(--serif); font-size: var(--wp--preset--font-size--card-sm); color: #445049;
	letter-spacing: 0.05em; margin-bottom: 12px;
}
.p-feature-single .side-meta-row {
	display: flex; align-items: center; justify-content: flex-start; text-align: left;
	gap: 8px; flex-wrap: wrap; margin-bottom: 14px;
}
.p-feature-single .side-meta-row:last-child { margin-bottom: 0; }
.p-feature-single .side-kicker {
	display: inline-flex; align-items: center; min-height: 26px; padding: 0 12px;
	border-radius: 999px; background: rgba(93, 202, 165, 0.14);
	border: 1px solid rgba(93, 202, 165, 0.22); color: rgba(14, 61, 46, 0.76);
	font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
}
.p-feature-single .side-date { font-size: 11px; color: rgba(42, 42, 40, 0.54); letter-spacing: 0.07em; }
/* auto-generated TOC (feature-filter.js) */
.p-feature-single .side-toc { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.p-feature-single .side-toc li { margin: 0; }
.p-feature-single .side-toc a {
	display: flex; align-items: flex-start; gap: 10px;
	font-size: 13px; color: #55615a; line-height: 1.7;
	transition: color .2s ease, transform .2s ease;
}
.p-feature-single .side-toc a::before { content: '・'; color: rgba(14, 61, 46, 0.56); flex-shrink: 0; }
.p-feature-single .side-toc a:hover { color: var(--forest); transform: translateX(3px); }
.p-feature-single .side-note { font-size: 12px; color: rgba(42, 42, 40, 0.58); line-height: 1.9; }

/* back-to-archive */
.p-feature-single .article-back { margin-top: 40px; display: flex; justify-content: center; }
.p-feature-single .article-back a {
	display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 26px;
	border-radius: 999px; background: rgba(255, 255, 255, 0.88);
	border: 1px solid rgba(14, 61, 46, 0.12); color: #445049;
	font-size: 12px; letter-spacing: 0.1em; transition: transform .2s ease, border-color .2s ease;
}
.p-feature-single .article-back a:hover { transform: translateY(-1px); border-color: rgba(14, 61, 46, 0.2); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1120px) {
	.p-feature-single .article-grid { max-width: 100%; }
}
@media (max-width: 900px) {
	.p-feature-archive .feature-grid { grid-template-columns: 1fr; gap: 16px; }
	.p-feature-archive .feature-card-body { min-height: 0; }
	.p-feature-archive .section-head { flex-direction: column; align-items: flex-start; }
	.p-feature-single.l-page { padding-bottom: 84px; }
	.p-feature-single .article-title { line-height: 1.72; }
	.p-feature-single .article-title-area { margin-bottom: 24px; padding-bottom: 22px; }
	.p-feature-single .article-body { padding: 22px 18px 26px; border-radius: 18px; }
	.p-feature-single .article-body .wp-block-gallery { grid-template-columns: 1fr; gap: 14px; }
}


/* inline TOC under the featured image */
.p-feature-single .article-toc {
	margin: -12px 0 30px;
	background: rgba(255,255,255,0.82);
	border: 1px solid rgba(14, 61, 46, 0.07);
	border-radius: 20px;
	padding: 20px 22px;
}
.p-feature-single .article-toc[hidden] { display: none !important; }

/* No.18 施設名タグ（feature_facility）。カテゴリ名の横にアウトライン系ピルで区別表示。 */
.p-feature-archive .card-tag--facility {
	background: transparent;
	color: rgba(14, 61, 46, 0.74);
	border: 1px solid rgba(93, 202, 165, 0.5);
	text-transform: none;
	letter-spacing: 0.04em;
}

/* No.18 記事詳細（single-feature）側 施設名タグ（feature_facility・複数可）のピル表示。 */
.p-feature-single .article-facility-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.p-feature-single .article-facility-tags .wp-block-post-terms__separator { display: none; }
.p-feature-single .article-facility-tags a {
	display: inline-flex; align-items: center; padding: 5px 8px;
	border-radius: 999px; background: transparent; border: 1px solid rgba(93, 202, 165, 0.5);
	color: rgba(14, 61, 46, 0.74); font-size: 9px; letter-spacing: 0.04em;
}