/* ==========================================================================
   Heading Design Components - 共通見出しコンポーネント
   ========================================================================== */

/* Base heading component - セクションメインタイトル */
:where(.c-heading) {
  position: relative;
  font-size: var(--wp--preset--font-size--4-xl);
  letter-spacing: var(--wp--custom--letter-spacing--xl);
  font-weight: var(--wp--custom--font-weight--bold);
}
:where(.c-heading__center) {
  text-align: center;
}
/* 日本語メインタイトル */
:where(.c-heading__ja) {
}

/* 英語サブタイトル */
:where(.c-heading__en) {
  display: block;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--primary);
  font-weight: var(--wp--custom--font-weight--normal);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* 装飾ライン付きバージョン */
:where(.c-heading--line) {
  padding-bottom: var(--wp--preset--spacing--xs);
}

:where(.c-heading--line::after) {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 8rem;
  height: 0.3rem;
  background: var(--wp--preset--color--primary-500);
  border-radius: var(--wp--custom--border-radius--full);
}

/* グラデーションバージョン */
:where(.c-heading--gradient) {
  background: linear-gradient(
    135deg,
    var(--wp--preset--color--primary-700) 0%,
    var(--wp--preset--color--primary-300) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 白文字バージョン（ダーク背景用） */
:where(.c-heading--white) {
  color: var(--wp--preset--color--white);
}

:where(.c-heading--white .c-heading__en) {
  opacity: 0.7;
}

/* サイズバリエーション */
:where(.c-heading--xs) {
  font-size: var(--wp--preset--font-size--heading-xs);
}

:where(.c-heading--sm) {
  font-size: var(--wp--preset--font-size--heading-sm);
}

:where(.c-heading--md) {
  font-size: var(--wp--preset--font-size--heading-md);
}

:where(.c-heading--lg) {
  font-size: var(--wp--preset--font-size--heading-lg);
}

:where(.c-heading--xl) {
  font-size: var(--wp--preset--font-size--heading-xl);
}

/* ==========================================================================
   Subtitle Component - サブタイトルコンポーネント（subtitle.cssから統合）
   ========================================================================== */

/* Base subtitle component */
:where(.c-subtitle) {
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: var(--wp--custom--font-weight--semibold);
  color: var(--wp--preset--color--secondary);
  margin-bottom: var(--wp--preset--spacing--3-xl);
  line-height: var(--wp--custom--line-height--snug);
  letter-spacing: 0.02em;
}

/* Alignment variations */
:where(.c-subtitle--left) {
  text-align: left;
}

:where(.c-subtitle--center) {
  text-align: center;
}

:where(.c-subtitle--right) {
  text-align: right;
}

/* Size variations */
:where(.c-subtitle--small) {
  font-size: clamp(
    var(--wp--preset--font-size--base),
    2.5vw,
    var(--wp--preset--font-size--xl)
  );
  margin-bottom: var(--wp--preset--spacing--2-xl);
}

:where(.c-subtitle--large) {
  font-size: clamp(
    var(--wp--preset--font-size--heading-4),
    3.5vw,
    var(--wp--preset--font-size--heading-2)
  );
  margin-bottom: var(--wp--preset--spacing--3-xl);
}

/* Color variations */
:where(.c-subtitle--primary) {
  color: var(--wp--preset--color--primary);
}

:where(.c-subtitle--brand) {
  color: var(--wp--preset--color--primary);
}

:where(.c-subtitle--dark) {
  color: var(--wp--preset--color--basic-text);
}

:where(.c-subtitle--light) {
  color: var(--wp--preset--color--basic-text);
}

/* Style variations */
:where(.c-subtitle--underline) {
  position: relative;
  padding-bottom: var(--wp--preset--spacing--xs);
}

:where(.c-subtitle--underline::after) {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: var(--wp--preset--color--primary-600);
  border-radius: var(--wp--custom--border-radius--sm);
}

:where(.c-subtitle--center.c-subtitle--underline::after) {
  left: 50%;
  transform: translateX(-50%);
}

:where(.c-subtitle--right.c-subtitle--underline::after) {
  left: auto;
  right: 0;
}

/* With icon */
:where(.c-subtitle--with-icon) {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
}

:where(.c-subtitle__icon) {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--wp--preset--color--primary-600);
}

/* Animation effects */
:where(.c-subtitle--fade-in) {
  opacity: 0;
  animation: fadeInUp 0.8s ease-out forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Section Number Component - セクション番号コンポーネント
   ========================================================================== */

:where(.c-section-number) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  background: var(--wp--preset--color--primary-100);
  color: var(--wp--preset--color--primary-700);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--font-weight--bold);
  border-radius: var(--wp--custom--border-radius--full);
  margin-bottom: var(--wp--preset--spacing--20);
}

/* ==========================================================================
   Item Title Component - アイテムタイトルコンポーネント
   ========================================================================== */

:where(.c-item-title) {
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--font-weight--semibold);
  color: var(--wp--preset--color--gray-900);
  line-height: var(--wp--custom--line-height--tight);
  margin-bottom: var(--wp--preset--spacing--base);
}

/* 左ボーダー付きバージョン */
:where(.c-item-title--border) {
  position: relative;
  padding-left: var(--wp--preset--spacing--20);
}

:where(.c-item-title--border::before) {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.4rem;
  height: 80%;
  background: var(--wp--preset--color--primary-500);
  border-radius: var(--wp--custom--border-radius--small);
}

/* ==========================================================================
   Badge Component - バッジコンポーネント
   ========================================================================== */

:where(.c-badge) {
  display: inline-block;
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--base);
  background: var(--wp--preset--color--primary-100);
  color: var(--wp--preset--color--primary-700);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--font-weight--semibold);
  border-radius: var(--wp--custom--border-radius--full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* バッジバリエーション */
:where(.c-badge--success) {
  background: var(--wp--preset--color--success);
  color: var(--wp--preset--color--white);
}

:where(.c-badge--warning) {
  background: var(--wp--preset--color--warning);
  color: var(--wp--preset--color--gray-900);
}

:where(.c-badge--error) {
  background: var(--wp--preset--color--error);
  color: var(--wp--preset--color--white);
}

/* ==========================================================================
   Category Label Component - カテゴリラベルコンポーネント
   ========================================================================== */

:where(.c-category) {
  display: inline-block;
  padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--sm);
  background: var(--wp--preset--color--gray-200);
  color: var(--wp--preset--color--basic-text);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--font-weight--medium);
  border-radius: var(--wp--custom--border-radius--small);
}

:where(.c-category--primary) {
  background: var(--wp--preset--color--primary-100);
  color: var(--wp--preset--color--primary-700);
}

/* Components moved to dedicated files: card.css and list.css */

/* ==========================================================================
   Meta Info Component - メタ情報コンポーネント
   ========================================================================== */

:where(.c-meta) {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--base);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--basic-text);
}

:where(.c-meta__date) {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--sm);
}

:where(.c-meta__date::before) {
  content: "";
  width: 1.6rem;
  height: 1.6rem;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999999"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/></svg>')
    no-repeat center;
  background-size: contain;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

/* ==========================================================================
   Heading 002 Component - 中央寄せタイトルコンポーネント
   ========================================================================== */

/* Base centered heading */
:where(.c-heading-002) {
  position: relative;
  text-align: center;
}

/* Japanese Title */
:where(.c-heading-002__ja) {
  display: block;
  font-size: clamp(2.8rem, 4vw, 3.6rem);
  font-weight: var(--wp--custom--font-weight--bold);
  color: var(--wp--preset--color--primary);
  line-height: 1.4;
  margin-bottom: var(--wp--preset--spacing--sm);
  letter-spacing: 0.02em;
}

/* English Subtitle */
:where(.c-heading-002__en) {
  display: block;
  font-size: 1.4rem;
  font-weight: var(--wp--custom--font-weight--medium);
  color: var(--wp--preset--color--primary-700);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: var(--wp--preset--spacing--20);
}

/* Underline decoration */
:where(.c-heading-002::after) {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: var(--wp--preset--color--primary-700);
  border-radius: var(--wp--custom--border-radius--small);
}

/* Gradient variant */
:where(.c-heading-002--gradient .c-heading-002__ja) {
  background: linear-gradient(
    135deg,
    var(--wp--preset--color--primary-700) 0%,
    var(--wp--preset--color--primary-500) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Left aligned variant */
:where(.c-heading-002--left) {
  text-align: left;
}

:where(.c-heading-002--left::after) {
  left: 0;
  transform: none;
}

/* No line variant */
:where(.c-heading-002--no-line::after) {
  display: none;
}

/* Large variant */
:where(.c-heading-002--large .c-heading-002__ja) {
  font-size: clamp(3.2rem, 5vw, 4.2rem);
}

:where(.c-heading-002--large .c-heading-002__en) {
  font-size: 1.6rem;
}

/* Small variant */
:where(.c-heading-002--small .c-heading-002__ja) {
  font-size: clamp(2.4rem, 3vw, 2.8rem);
}

:where(.c-heading-002--small .c-heading-002__en) {
  font-size: 1.2rem;
}

/* With decoration */
:where(.c-heading-002--decorated) {
  position: relative;
  padding: var(--wp--preset--spacing--xs) 0;
}

:where(.c-heading-002--decorated::before) {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  background: radial-gradient(
    circle,
    var(--wp--preset--color--primary-100) 0%,
    transparent 70%
  );
  border-radius: 50%;
}