/* 
 * Knock.io Top Page Specific Styles (home.css)
 * Ensures safety for subpages by isolated loading.
 */

/* ====================================
   1. Typography & Margin Pacing
   ==================================== */

/* ====================================
   ヒーロー: 中央揃え・シンプル
   ==================================== */
.home-page .hero {
  text-align: center;
  padding: 140px 24px 48px;
  max-width: 960px;
  position: relative;
  z-index: 1;
  margin: 0 auto;
}

.home-page .hero h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.6;
  margin-bottom: 1rem;
  letter-spacing: 0.08em;
  color: var(--text-main);
  font-weight: 600;
}

.home-page .hero h2 .text-gradient {
  font-weight: 700;
}

.home-page .hero-desc {
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

/* ====================================
   2. Services Grid — リズミカル可変カラム
   ==================================== */

/* サービスセクション — お知らせとの間隔を確保 */
#services {
  position: relative;
  z-index: 1;
  padding-top: 120px;
}

/* セクションヘッダー — コンパクト化 */
.home-page .section-header {
  margin-bottom: 24px;
}

.home-page .section-header h2 {
  font-size: 1.4rem;
  font-weight: 600;
}

/* セクション間余白 — メリハリ */
.home-page .section-padding {
  padding: 48px 24px;
}

/* 行ラッパー共通 */
.services-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 1200px;
  margin: 0 auto;
}

.grid-row {
  display: grid;
  gap: 0;
  border-bottom: 1px solid var(--border-light);
}

.grid-row:last-child {
  border-bottom: none;
}

/* 1カラム行（最優先カード） */
.grid-row-1 { grid-template-columns: 1fr; }

/* 1カラム行内のカードは横並びレイアウト */
.grid-row-1 .luxury-card {
  display: flex;
  align-items: center;
  gap: 40px;
}
.grid-row-1 .lux-icon {
  float: none;
  flex-shrink: 0;
  margin: 0;
}
.grid-row-1 .lux-icon svg {
  width: 200px;
  height: 200px;
}
.grid-row-1 .lux-content {
  flex: 1;
}

/* スマホでは縦並びに戻す */
@media (max-width: 767px) {
  .grid-row-1 .luxury-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .grid-row-1 .lux-icon svg {
    width: 120px;
    height: 120px;
  }
}

/* 2カラム行 */
.grid-row-2 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .grid-row-2 { grid-template-columns: repeat(2, 1fr); }
}

/* 3カラム行 */
.grid-row-3 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .grid-row-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-row-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ====================================
   2b. Luxury Card
   ==================================== */

.luxury-card {
  display: block;
  background-color: transparent;
  position: relative;
  text-decoration: none;
  color: var(--text-main);
  padding: 48px 40px;
  overflow: hidden;
}

/* 隣接カード間の縦仕切り（PC時のみ） */
@media (min-width: 768px) {
  .luxury-card + .luxury-card {
    border-left: 1px solid var(--border-light);
  }
}



/* ホバー: リンクカードのみ有効 */
a.luxury-card:hover {
  background-color: var(--teal-bg-subtle);
  cursor: pointer;
}

/* 非リンクカード: ホバー演出なし */
div.luxury-card {
  cursor: default;
}

/* ====================================
   2c. Card Inner Elements
   ==================================== */

/* SVGアイコン — floatで事業名の左に配置 */
.lux-icon {
  float: left;
  margin-right: 20px;
  margin-bottom: 8px;
}

.lux-icon svg {
  width: 80px;
  height: 80px;
  display: block;
}

/* コンテンツ */
.lux-content {
  display: block;
}

/* カテゴリラベル */
.lux-cat {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent-coral);
  letter-spacing: 0.2em;
  margin-bottom: 12px;
}

/* タイトル（明朝体で和の品格） */
.lux-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: 0.1em;
  margin-bottom: 14px;
  line-height: 1.5;
}

/* 説明文 — floatクリアで全幅表示 */
.lux-desc {
  font-size: 0.9rem;
  line-height: 1.9;
  color: var(--text-main);
  clear: left;
}

/* 矢印（リンクカード専用、常に表示） */
a.luxury-card .lux-arrow {
  margin-top: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--teal-primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* 非リンクカードは矢印を非表示 */
div.luxury-card .lux-arrow {
  display: none;
}

/* Coming Soon カード */
.lux-coming-soon {
  opacity: 0.6;
}

.lux-coming-soon .lux-arrow.lux-arrow-muted {
  display: inline-flex;
  margin-top: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* Recommended バッジ — tealベース */
.lux-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--teal-primary);
  border: 1px solid rgba(15, 118, 110, 0.2);
  padding: 3px 10px;
}

/* セクションヘッダ — 和の装飾 */
.luxury-subtitle {
  color: var(--teal-primary);
  letter-spacing: 0.3em;
}

.luxury-heading {
  font-family: var(--font-serif);
  color: var(--text-main);
  letter-spacing: 0.1em;
}


/* ====================================
   3. CEO Message Section
   ==================================== */

/* セクション全体 — 薄いティールで他セクションから差別化 */
.ceo-section {
  background: linear-gradient(180deg, #f0fafa 0%, #e8f5f4 100%);
  padding: 96px 48px;
  position: relative;
  overflow: hidden;
}

/* セクション全体 */
.ceo-section {
  position: relative;
  background-color: #f0fafa;
  /* グラデーション（上が不透明→下が薄い）でSVG線画を上だけ隠す */
  background-image:
    linear-gradient(180deg,
      #f0fafa 0%,
      #f0fafa 25%,
      rgba(240,250,250,0.8) 50%,
      rgba(232,245,244,0.55) 100%
    ),
    url('./images/city-lineart.svg');
  background-size: auto, 100% auto;
  background-position: center, bottom center;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: normal, multiply;
  padding: 96px 48px;
  overflow: hidden;
}


/* さらに画像をティール系に寄せるためのオーバーレイ */
.ceo-section::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--teal-primary);
  opacity: 0.05;
  mix-blend-mode: color;
  pointer-events: none;
  z-index: 0;
}

/* 以前のSVG背景ハックは完全削除（要素自体がないため不要ですがクラスはそのまま削除） */

/* 背景の大型装飾引用符 */
.ceo-section::before {
  content: '\201C';
  position: absolute;
  top: -40px;
  left: 40px;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 28rem;
  line-height: 1;
  color: var(--teal-primary);
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
}

/* コンテナ */
.home-page .ceo-block {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  z-index: 1;
}

/* セクションタイトル — 大きく */
.home-page .ceo-message h3 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-main);
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-light);
}

/* 本文 */
.home-page .ceo-message {
  padding: 0;
  margin: 0;
  text-align: left;
  max-width: none;
}

.home-page .ceo-message p {
  display: block;
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 2;
  margin-bottom: 20px;
  padding-left: 0;
  border-left: none;
}

/* 最終段落 — 締めの言葉 */
.home-page .ceo-message p:last-child {
  font-size: 0.9rem;
  color: var(--text-main);
  font-weight: 500;
  margin-top: 12px;
}

@media (max-width: 768px) {
  .ceo-section {
    padding: 64px 24px;
  }
}

/* ダークモード: CEOセクション背景の上書き */
[data-theme="dark"] .ceo-section {
  background-color: #0d2626;
  background-image:
    linear-gradient(180deg,
      #0d2626 0%,
      #0d2626 25%,
      rgba(13, 38, 38, 0.8) 50%,
      rgba(13, 38, 38, 0.55) 100%
    ),
    url('./images/city-lineart.svg');
}



/* お知らせ — 白背景100%幅 */
.news-compact {
  background: var(--card-bg);
  width: 100%;
  padding: 24px 24px;
}

.news-compact-inner {
  max-width: 800px;
  margin: 0 auto;
}

.news-compact-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}