/*
 * #196: Page-specific Design System v2 cleanup layer.
 *
 * Loaded after the active page-specific stylesheet and before responsive fixes.
 * This keeps late page CSS from reintroducing rounded pill badges or legacy
 * label shapes while preserving intentional content-specific layout rules.
 */

.single-post .sidebar-list--compact a,
.category .sidebar-list--compact a,
.tag .sidebar-list--compact a,
.date .sidebar-list--compact a,
.tiptop-work-detail__meta a,
.tiptop-contact-form .required {
	border-radius: var(--tt-radius-none);
}

.single-post .sidebar-list--compact a,
.category .sidebar-list--compact a,
.tag .sidebar-list--compact a,
.date .sidebar-list--compact a,
.tiptop-work-detail__meta a {
	background: var(--tt-color-base);
	color: var(--tt-color-heading);
}

.tiptop-contact-form .required {
	background: transparent;
	color: var(--tt-color-muted);
}

/* #404: Content preview cards share one motion and meta contract. */
.post-card,
.work-card,
.front-blog-card,
.front-content-card,
.tiptop-blog-card {
	--tiptop-card-hover-y: 0px;
	--tiptop-card-image-hover-scale: 1;
	transition: transform var(--tt-motion-duration-reveal) var(--tt-motion-easing-immersive);
}

.post-card:hover,
.post-card:focus-within,
.post-card:focus-visible,
.work-card:hover,
.work-card:focus-within,
.work-card:focus-visible,
.front-blog-card:hover,
.front-blog-card:focus-within,
.front-blog-card:focus-visible,
.front-content-card:hover,
.front-content-card:focus-within,
.front-content-card:focus-visible,
.tiptop-blog-card:hover,
.tiptop-blog-card:focus-within,
.tiptop-blog-card:focus-visible {
	/* 承認済みモックに合わせ、カード画像のhover拡大率を1.025倍に統一。 */
	--tiptop-card-image-hover-scale: 1.025;
}

/* #644: Whole-card anchors share one additive class instead of coupling the
 * reset contract to three page-specific class systems. Focus-visible remains
 * owned by the existing page-level rules, which already win by specificity and
 * enqueue order. Front-content cards keep their valid multi-link markup, so the
 * title link stretches across only the otherwise-empty card area while nested
 * image/category links stay above it. */
.tiptop-card-link,
.front-content-card .post-card__title a {
	color: inherit;
	text-decoration: none;
}

.front-content-card {
	position: relative;
}

.front-content-card .post-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.front-content-card .post-card__image,
.front-content-card .front-content-card__terms a {
	position: relative;
	z-index: 1;
}

/* Arrow behavior remains an intentional page-level exception: News keeps its
 * non-nudging row arrow, while Works hides the redundant front-content arrow. */

/* Front cards keep scroll-stack transforms while consuming the shared hover variable. */
.front-blog-card {
	position: relative;
	transform:
		translateX(var(--tiptop-card-offset, 0px))
		translateY(calc(var(--tiptop-card-stack-y, 0px) + var(--tiptop-card-hover-y)))
		rotate(var(--tiptop-card-rotate, 0deg))
		scale(var(--tiptop-card-scale, 1));
	transform-origin: center;
	transition:
		opacity var(--tt-motion-duration-ui) ease,
		transform var(--tt-motion-duration-reveal) var(--tt-motion-easing-immersive);
	will-change: transform;
}

.front-blog-card:hover,
.front-blog-card:focus-within {
	transform:
		translateX(var(--tiptop-card-offset, 0px))
		translateY(calc(var(--tiptop-card-stack-y, 0px) + var(--tiptop-card-hover-y)))
		rotate(var(--tiptop-card-rotate, 0deg))
		scale(var(--tiptop-card-scale, 1));
}

.post-card__image img,
.front-blog-card .post-card__image img,
.front-content-card .post-card__image img,
.tiptop-blog-card .post-card__image img {
	transform: scale(var(--tiptop-card-image-hover-scale));
	transition: transform 0.4s ease;
}/* botanistofficial.com/special/10th_anniversary/ 参考：タイトル下線が左から伸びるhover。
 * .tiptop-blog-cardはタイトルにリンクを持たず(front-intro-list-unstyled.cssに既存の
 * 同種実装あり)のため対象外。 */
.post-card__title a {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0% 1px;
	transition: background-size 0.4s ease;
}

.post-card:hover .post-card__title a,
.post-card:focus-within .post-card__title a,
.post-card:focus-visible .post-card__title a {
	background-size: 100% 1px;
}

/* .front-blog-cardはカード全体が1つのリンクでタイトル自体にaを持たず、タイトルは
 * ellipsis省略(base-system.css)の前提でwidth:fit-contentにできないため、省略担当の
 * h3(.post-card__title)とは別に、中の文字だけを包むinline要素(span)へ下線を掛ける。
 * inlineはbackground-sizeの100%が「テキスト自身の幅」になるため、fit-content指定は不要。 */
.front-blog-card__title-text {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0% 1px;
	transition: background-size 0.4s ease;
}

.front-blog-card:hover .front-blog-card__title-text,
.front-blog-card:focus-within .front-blog-card__title-text {
	background-size: 100% 1px;
}

/* Newsも front-blog-card と同じ「カード全体が1つのリンク、タイトルは別要素」構造
 * (template-parts/content-news-row.php) のため、同じinline span下線パターンを適用
 * （2026-07-28、トップのリンクホバーをBlogと統一）。 */
.tiptop-news-item__title-text {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0% 1px;
	transition: background-size 0.4s ease;
}

.tiptop-news-item:hover .tiptop-news-item__title-text,
.tiptop-news-item:focus-within .tiptop-news-item__title-text {
	background-size: 100% 1px;
}

/* ============================================================
   標準モードはタイトル下線hoverを持たない（2026-08-07・オーナー確定「一覧も止める」）
   モックのhoverは実質「ナビの下線／実績カードの画像ズーム／ニュース行の背景＋矢印／
   ボタンの塗り替え」だけで、カードのタイトル下線は無い。トップだけ止めると一覧と
   挙動が割れるため、標準モードでは全ページ一律に止める。
   実測で標準モードに下線が生きていたのは、ニュース一覧・実績一覧・トップの3箇所
   （ブログ一覧の下線はイマーシブ限定スコープで、もともと標準には出ていなかった）。
   イマーシブは下線hoverを維持する＝ここはモード差分。
   ============================================================ */
body.tiptop-standard-system .post-card:hover .post-card__title a,
body.tiptop-standard-system .post-card:focus-within .post-card__title a,
body.tiptop-standard-system .post-card:focus-visible .post-card__title a,
body.tiptop-standard-system .front-blog-card:hover .front-blog-card__title-text,
body.tiptop-standard-system .front-blog-card:focus-within .front-blog-card__title-text,
body.tiptop-standard-system .tiptop-news-item:hover .tiptop-news-item__title-text,
body.tiptop-standard-system .tiptop-news-item:focus-within .tiptop-news-item__title-text {
	background-size: 0% 1px;
}

.post-card__meta,
.front-blog-card .post-card__meta,
.front-content-card .post-card__meta,
.tiptop-blog-card .post-card__meta,
.tiptop-news-item__date,
.tiptop-news-item__terms {
	color: var(--tt-color-muted);
	font-size: var(--tt-text-meta);
	font-weight: 500;
	letter-spacing: calc(0.05em + var(--tt-letter-add));
	line-height: var(--tt-leading-tight, 1.4);
}

/* #404: work-card meta holds an optional category span alongside the date;
 * lay them out with a gap instead of a literal separator character. */
.work-card .post-card__meta {
	display: flex;
	align-items: baseline;
	gap: var(--tt-space-2);
}

@media (prefers-reduced-motion: reduce) {
	.post-card,
	.work-card,
	.front-blog-card,
	.front-content-card,
	.tiptop-blog-card,
	.post-card__image img,
	.front-blog-card .post-card__image img,
	.front-content-card .post-card__image img,
	.tiptop-blog-card .post-card__image img {
		transition: none;
	}

	.post-card:hover,
	.post-card:focus-within,
	.work-card:hover,
	.work-card:focus-within,
	.front-blog-card:hover,
	.front-blog-card:focus-within,
	.front-content-card:hover,
	.front-content-card:focus-within,
	.tiptop-blog-card:hover,
	.tiptop-blog-card:focus-within {
		transform: none;
	}
}