/* ==========================================================================
   bcrl-core: テーマに依存しないブランド固有コンポーネント。
   - .bcrl-btn / .bcrl-cta-band / .bcrl-pillars / .bcrl-inline-cta
   - 親テーマが SWELL でも他テーマでも同じ見た目になることを優先する。
   ========================================================================== */

/* CSS 変数は SWELL 子テーマの overrides.css でも定義しているが、
   bcrl-core 単体で他テーマに移しても破綻しないようフォールバックを置く。 */
:root {
	--bcrl-color-navy: var(--bcrl-color-navy, #0e2a4e);
	--bcrl-color-navy-dark: var(--bcrl-color-navy-dark, #0a1f3a);
	--bcrl-color-ink: var(--bcrl-color-ink, #0f1419);
	--bcrl-color-muted: var(--bcrl-color-muted, #5a6573);
	--bcrl-color-line: var(--bcrl-color-line, #d8dce3);
	--bcrl-color-bg-soft: var(--bcrl-color-bg-soft, #f5f6f8);
	--bcrl-color-accent: var(--bcrl-color-accent, #b89668);
	--bcrl-color-accent-strong: var(--bcrl-color-accent-strong, #8d6c3f);
}

/* Buttons */
.bcrl-btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 0.5em;
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.2;
	padding: 14px 22px;
	border-radius: 4px;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.05s ease;
	border: 1px solid transparent;
	cursor: pointer;
}
.bcrl-btn:active { transform: translateY(1px); }

.bcrl-btn--primary {
	background: var(--bcrl-color-navy);
	color: #fff;
	border-color: var(--bcrl-color-navy);
}
.bcrl-btn--primary:hover { background: var(--bcrl-color-navy-dark); border-color: var(--bcrl-color-navy-dark); color: #fff; }

.bcrl-btn--outline {
	background: transparent;
	color: var(--bcrl-color-navy);
	border-color: var(--bcrl-color-navy);
}
.bcrl-btn--outline:hover { background: var(--bcrl-color-navy); color: #fff; }

/* Inline CTA */
.bcrl-inline-cta {
	margin: 48px 0;
	padding: 28px;
	border: 1px solid var(--bcrl-color-line);
	background: var(--bcrl-color-bg-soft);
	border-radius: 8px;
	text-align: center;
}
.bcrl-inline-cta__lead { margin: 0 0 16px; font-weight: 700; color: var(--bcrl-color-ink); }
.bcrl-inline-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* Inline CTA marker（記事中 <!-- CTA: ... --> の置換。auto版より軽い扱い） */
.bcrl-cta-marker {
	margin: 36px 0;
	text-align: center;
}
.bcrl-cta-marker--top { margin-top: 20px; }
.bcrl-cta-marker--bottom { margin-bottom: 20px; }
.bcrl-cta-marker .bcrl-btn { max-width: 100%; }

/* CTA Band */
.bcrl-cta-band {
	background: var(--bcrl-color-navy);
	color: #fff;
	padding: 56px 24px;
	margin: 48px 0;
	border-radius: 8px;
}
.bcrl-cta-band__inner {
	display: flex; align-items: center; justify-content: space-between; gap: 32px;
	flex-wrap: wrap;
	max-width: 1120px;
	margin: 0 auto;
}
.bcrl-cta-band__eyebrow {
	font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--bcrl-color-accent);
	margin: 0 0 8px;
}
.bcrl-cta-band__title { color: #fff; font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 0 0 8px; font-weight: 700; }
.bcrl-cta-band__desc { margin: 0; color: #d8e0ec; max-width: 520px; }
.bcrl-cta-band__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.bcrl-cta-band .bcrl-btn--primary { background: var(--bcrl-color-accent); border-color: var(--bcrl-color-accent); color: var(--bcrl-color-ink); }
.bcrl-cta-band .bcrl-btn--primary:hover { background: var(--bcrl-color-accent-strong); border-color: var(--bcrl-color-accent-strong); color: #fff; }
.bcrl-cta-band .bcrl-btn--outline { color: #fff; border-color: rgba(255,255,255,0.6); }
.bcrl-cta-band .bcrl-btn--outline:hover { background: #fff; color: var(--bcrl-color-navy); }

/* Pillars (shortcode) */
.bcrl-pillars {
	list-style: none; padding: 0; margin: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
}
.bcrl-pillars__item {
	background: #fff;
	border: 1px solid var(--bcrl-color-line);
	border-radius: 8px;
	padding: 28px 26px;
}
.bcrl-pillars__item h3 {
	font-size: 1.1rem;
	margin: 0 0 12px;
	color: var(--bcrl-color-navy);
}
.bcrl-pillars__item p { margin: 0 0 16px; }

/* Link arrow */
.bcrl-link-arrow {
	display: inline-flex; align-items: center; gap: 6px;
	color: var(--bcrl-color-navy);
	font-weight: 700;
	text-decoration: none;
}
.bcrl-link-arrow::after { content: "→"; transition: transform 0.2s ease; }
.bcrl-link-arrow:hover::after { transform: translateX(2px); }