/*
 * Blanky Work – Base Styles
 *
 * CSS変数・リセット・基底スタイル・共通コンポーネント
 *
 * @package blanky-work
 */

/* ============================================================
   CSS Variables
   ============================================================ */
:root {
	--work-off-white: var(--wp--preset--color--background, #F8F8F6);
	--work-deep-navy: var(--wp--preset--color--foreground, #1A2A4A);
	--work-muted-gold: var(--wp--preset--color--accent, #B89C6F);
	--work-muted-gold-text: var(--wp--preset--color--muted, #7D6838);
	--work-white: var(--wp--preset--color--surface, #FFFFFF);
	--work-deep-navy-rgb: var(--wp--custom--work-deep-navy-rgb, 26, 42, 74);
	--work-muted-gold-rgb: var(--wp--custom--work-muted-gold-rgb, 184, 156, 111);
	--work-text-muted: rgba(var(--work-deep-navy-rgb), 0.7);
	--work-text-faint: rgba(var(--work-deep-navy-rgb), 0.73);
	--work-border-gold: rgba(var(--work-muted-gold-rgb), 0.18);
	--work-font-serif: Georgia, 'Times New Roman', Times, serif;
	--work-font-sans: 'Avenir Next', Avenir, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
	--work-max-w: 1280px;
}

/* ============================================================
   blanky テーマのオーバーライド
   ============================================================ */
.blanky-work-main.blanky-main.wp-block-group {
	padding: 0;
	max-width: none;
}

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100svh;
}

.blanky-main.wp-block-group {
	flex: 1;
}

.blanky-work-main>.alignfull {
	max-width: none;
	width: 100%;
}

/* ============================================================
   共通セクション
   ============================================================ */
.work-section-eyebrow {
	font-family: var(--work-font-sans);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--work-muted-gold-text);
	margin-bottom: 1.25rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.work-section-eyebrow::before {
	content: '';
	display: block;
	width: 2rem;
	height: 1px;
	background: var(--work-muted-gold);
	flex-shrink: 0;
}

.work-section-heading {
	font-family: var(--work-font-serif);
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 400;
	line-height: 1.1;
}

.work-section-heading em {
	font-style: italic;
	font-weight: 300;
}

/* ============================================================
   共通ボタン
   ============================================================ */
.work-btn-fill a {
	display: inline-block;
	padding: 1.1rem 2.5rem;
	background-image: linear-gradient(to right, var(--work-muted-gold) 50%, var(--work-deep-navy) 50%);
	background-color: var(--work-deep-navy);
	background-size: 200%;
	background-position: right center;
	color: var(--work-white);
	font-family: var(--work-font-sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-position 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-btn-fill a:hover {
	background-position: left center;
}

.work-btn-text-arrow a {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--work-font-sans);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	color: var(--work-deep-navy);
	text-decoration: none;
	transition: gap 0.25s;
}

.work-btn-text-arrow a:hover {
	gap: 1.25rem;
}

/* 矢印を ::after で描画（装飾のため代替テキストは空にする） */
.work-btn-text-arrow a::after {
	content: '→';
	content: '→' / '';
}

/* 旧マークアップ（リンク内に矢印 span あり）では二重表示を防ぐ */
.work-btn-text-arrow a:has(span)::after {
	content: none;
}

/* ============================================================
   Focus Indicator
   ============================================================ */
.blanky-work-main :focus-visible {
	outline: 2px solid var(--work-muted-gold);
	outline-offset: 2px;
}