/*
Theme Name: Tornos Brand Base
Theme URI: https://tornos.co.jp/
Author: Tornos Co., Ltd.
Description: Evolve / Octopus 等、ブランドサイト共通基盤テーマ。既存TORNOS本体サイト(tornos.co.jp)とは別物であり、本体サイトのテーマとは独立して管理する。単独では使用せず、必ず子テーマ(tornos-child-*)経由で使用する。
Version: 0.1.0-draft
License: Proprietary
Text Domain: tornos-brand-base

★このテーマ単体はステージング検証用です。本番サーバーへの適用は正式仕様確定後に別途行ってください。
★既存のTORNOS本体サイト(実店舗/卸売り/EC元サイト)のテーマとは完全に別のテーマです。本体サイトのテーマには一切触れていません。
*/

/* ==========================================================
   ブランド差分吸収用 CSS変数(デフォルト値)
   子テーマの style.css で上書きすることを前提とした構造。
   @ASSUMPTION 数値・カラーコードはすべて仮の値。
   ========================================================== */
:root {
  --brand-color-primary: #0f4c5c;
  --brand-color-accent: #ff8c42;
  --brand-color-text: #222222;
  --brand-color-bg: #ffffff;
  --brand-font-heading: "Noto Sans JP", sans-serif;
  --brand-font-body: "Noto Sans JP", sans-serif;
  --brand-container-width: 1120px;
}

body {
  color: var(--brand-color-text);
  background: var(--brand-color-bg);
  font-family: var(--brand-font-body);
}

a {
  color: var(--brand-color-primary);
}

.btn-primary {
  background: var(--brand-color-primary);
  color: #fff;
  border: none;
  padding: 0.8em 1.6em;
  border-radius: 4px;
}

.btn-accent {
  background: var(--brand-color-accent);
  color: #fff;
}

/* ==========================================================
   header.php / footer.php / index.php(不具合修正で追加)用の最小スタイル
   ========================================================== */
.site-header__inner {
  max-width: var(--brand-container-width);
  margin: 0 auto;
  padding: 1.2rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.site-header__title {
  font-family: var(--brand-font-heading);
  font-weight: bold;
  font-size: 1.1rem;
}
.site-footer__inner {
  max-width: var(--brand-container-width);
  margin: 0 auto;
  padding: 2rem 1.5rem;
  color: #888;
  font-size: 0.85rem;
}
.tornos-index-fallback {
  max-width: var(--brand-container-width);
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

/* ==========================================================
   ecc_story(商品紹介ページ)用の最小レイアウト
   ★正式仕様準拠:価格・在庫・購入UIのクラスはここに一切存在しない。
   ★色・見出しフォントはブランド差分変数を使い、ブランドごとに自動追従する。
   ========================================================== */
.ecc-story-page {
  max-width: var(--brand-container-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.ecc-story-hero {
  text-align: center;
  padding: 3rem 0;
}

.ecc-story-hero h1 {
  font-family: var(--brand-font-heading);
  color: var(--brand-color-primary);
}

/* ヒーロー画像(Hero Image)の表示サイズ調整(2026-09-09〜)
   PC:高さを抑えて見切れを防ぐ。スマホはさらに低め。
   2026-09-19「次回修正方針」:HEROをタイトル・タグラインが写真の上に重なる
   「1枚のファーストビュー」に再構成。full-bleedは親の.ecc-series-hero__visualが担当し、
   .ecc-story-hero__mediaはその中の等倍レイヤーになる。 */
.ecc-series-hero__visual {
  position: relative;
  margin-top: 0.9rem;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}
.ecc-story-hero__media {
  width: 100%;
  height: 60vh;
  max-height: 580px;
  overflow: hidden;
}

.ecc-story-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* タイトル・タグラインを写真の上に重ねる(下から黒のグラデーションで視認性を確保)。
   写真自体は白黒のまま、テキストは白でコントラストを付ける。 */
.ecc-series-hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 2rem 1.5rem 2.2rem;
  text-align: center;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.18) 48%, rgba(0, 0, 0, 0) 72%);
}
.ecc-series-hero .ecc-series-hero__overlay h1 {
  font-family: var(--brand-font-heading);
  color: #fff;
  font-size: 2.4rem;
  letter-spacing: 0.02em;
  margin: 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
.ecc-series-hero .ecc-series-hero__overlay .ecc-series-hero__tagline {
  margin-top: 0.5rem;
  font-size: 1.1rem;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

@media (max-width: 640px) {
  .ecc-story-hero__media {
    height: 40vh;
    max-height: 320px;
  }
  .ecc-series-hero__overlay { padding: 1.2rem 1.2rem 1.5rem; }
  .ecc-series-hero .ecc-series-hero__overlay h1 { font-size: 1.7rem; }
}

.ecc-story-section {
  margin: 2.5rem 0;
}

.ecc-story-section h2 {
  color: var(--brand-color-primary);
  border-bottom: 2px solid var(--brand-color-accent);
  display: inline-block;
  padding-bottom: 0.25rem;
}

.ecc-story-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.ecc-story-section--shop {
  text-align: center;
  padding: 2rem 0;
}

/* ==========================================================
   仮トップページ(front-page.php)用の最小レイアウト
   ★方針(維持):ダミー文言は使わない。実データがある要素のみ表示されるため、
   このCSSはレイアウトの骨格のみを担当する(空の装飾ボックスは作らない)。
   ========================================================== */
.tornos-front-page .ph {
  border: 1px solid #ddd;
  overflow: hidden;
}
.tornos-front-page .ph img { display: block; width: 100%; height: 100%; object-fit: cover; }

.front-hero {
  background: var(--brand-color-primary);
  color: #fff;
  padding: 4.5rem 1.5rem 3.5rem;
}
.front-hero__kicker { color: #cfe3e6; font-size: 0.85rem; margin-bottom: 0.8rem; }
.front-hero h1 { font-family: var(--brand-font-heading); font-size: 2.2rem; max-width: 16ch; margin: 0; }
.front-hero__lead { max-width: 42ch; color: #dfeef0; margin-top: 1rem; }

.front-philosophy {
  max-width: var(--brand-container-width);
  margin: 0 auto;
  padding: 3.5rem 1.5rem;
}
.front-label { color: var(--brand-color-primary); font-size: 0.85rem; margin-bottom: 0.6rem; }
.front-label.accent { color: var(--brand-color-accent); }

.front-products {
  max-width: var(--brand-container-width);
  margin: 0 auto;
  padding: 3.5rem 1.5rem;
}
.front-products__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.8rem; }
.front-products__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.front-product-card { border: 1px solid #ddd; padding: 0 0 1.2rem; }
.front-product-card .ph { aspect-ratio: 4/5; border: none; border-bottom: 1px solid #ddd; }
.front-product-card h3 { margin: 1rem 1.2rem 0.6rem; font-size: 1.05rem; }
.front-product-card .text-link { margin: 0 1.2rem; }

.front-lower {
  border-top: 1px solid #ddd;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.front-lower__block { padding: 2.4rem 1.8rem; border-right: 1px solid #ddd; }
.front-lower__block:last-child { border-right: none; }

.text-link { color: var(--brand-color-primary); border-bottom: 1px solid var(--brand-color-primary); padding-bottom: 0.15rem; font-size: 0.92rem; }
.text-link.disabled { color: #999; border-bottom: 1px dashed #ccc; }

/* ==========================================================
   ecc_story シリーズ/ブランドページ(2026-09-09・案A)
   AquaCap等、シリーズ全体を紹介するページ共通のレイアウト。
   価格・カラー・在庫・購入UIのクラスはここに一切存在しない。
   ========================================================== */
.ecc-series-page { overflow-x: hidden; }

/* ==========================================================
   Evolve全体ビジュアル方針(2026-09-19追加)
   Story側(ecc_story = ブランドページ)は白・黒・グレーのみを
   基本UIカラーとし、TOP/HEROは白黒写真、スクロール後の商品写真は
   フルカラーで見せる。EC側(WooCommerce商品ページ)はこの変数の
   対象外とし、従来どおりブランドカラー(--brand-color-primary/accent)
   ＋フルカラー商品写真＋価格/在庫/カラー/購入導線を維持する。
   AquaCap以降、Goggles/Weight Belt等の新規シリーズページにも
   body.single-ecc_story スコープにより自動的に適用される。
   ========================================================== */
body.single-ecc_story {
  --story-color-ink: #1a1a1a;
  --story-color-sub: #555555;
  --story-color-line: #dcdcdc;
  --story-color-surface: #ffffff;
}

/* 01 HERO(白黒写真が基本)
   2026-09-19「次回修正方針」:HERO画像がある場合は、タイトル・タグラインを写真の上に
   重ねて「1枚のファーストビュー」として再構成(オーバーレイのスタイルは上のブロックを参照)。
   HERO画像が無い場合のみ、この従来どおりの文字だけのフォールバック表示になる。 */
.ecc-series-hero {
  text-align: center;
  padding: 2.2rem 1.5rem 0;
}
.ecc-series-hero h1 {
  font-family: var(--brand-font-heading);
  color: var(--story-color-ink, var(--brand-color-primary));
  font-size: 2.4rem;
  letter-spacing: 0.02em;
  margin: 0;
}
.ecc-series-hero__tagline {
  margin-top: 0.5rem;
  font-size: 1.1rem;
  color: var(--story-color-ink, var(--brand-color-text));
}
.ecc-series-hero__subcopy {
  max-width: 34ch;
  margin: 1.1rem auto 0;
  padding-bottom: 1.8rem;
  color: var(--story-color-sub, #555);
  line-height: 1.9;
}
/* HEROの写真は白黒が基本(2026-09-19方針)。スクロール後の商品写真(02以降)はフルカラーのまま。 */
.ecc-story-hero__media img {
  filter: grayscale(100%);
}

/* セクション共通(PCは余白広め・白/黒/グレーのみで構成)
   2026-09-19「次回修正方針」で全体の余白を整理:基本paddingを5.5rem→4.5remに縮小
   (HERO/WHAT IS/THE MODELSは各セクションで個別にさらに縮小済み) */
.ecc-series-section {
  max-width: var(--brand-container-width);
  margin: 0 auto;
  padding: 4.5rem 2rem;
  background: var(--story-color-surface, #fff);
}
/* 英字見出しは小さなeyebrowに統一し、日本語コピー・写真を主役にする(2026-09-19)。
   JP見出し(WHAT IS / DESIGNED FOR WATER)がある場合は .ecc-series-headline を別途使う。
   それ以外(WHY/THE MODELS/FIND YOURS/CHOOSE YOURS/LIFE WITH)は、この
   eyebrowクラスをh2に直接付けて、資料っぽい強い見出しにならないようにする。 */
.ecc-series-section h2.ecc-series-eyebrow,
.ecc-series-eyebrow {
  font-family: var(--brand-font-heading);
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #888;
  margin: 0 0 2rem;
}
.ecc-series-headline {
  text-align: center;
  font-family: var(--brand-font-heading);
  font-size: 1.9rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--story-color-ink, #1a1a1a);
  margin: 0 auto 3rem;
  max-width: 20ch;
}

/* 02 WHAT IS(実画面デザインQA・2026-09-19で調整:
   ・「WHAT IS AQUACAP」は英字の小見出し(eyebrow)に格下げ
   ・確定コピーの日本語見出しをセクションの主見出しとして大きく表示
   ・左右(画像/本文)の構成・読み幅は維持したまま、セクション上下余白をやや縮める */
.ecc-series-whatis { padding-top: 3.5rem; padding-bottom: 3.5rem; }
/* 見出しは共通クラス(.ecc-series-eyebrow / .ecc-series-headline)を使用(2026-09-19統一) */
.ecc-series-whatis__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 3.5rem;
  align-items: center;
}
.ecc-series-whatis__media img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block; }
.ecc-series-whatis__body { max-width: 46ch; font-size: 1.02rem; line-height: 2; color: #444; }
.ecc-series-whatis__body p { margin: 0 0 1.3rem; }

/* 03 WHY(実画面デザインQA・2026-09-19で調整:
   ・列数は実際の項目数に応じてテンプレート側でインライン指定する(下のgrid-template-columnsは
     フォールバック値)。項目数と列数を一致させることでカード間隔を均等にする
   ・4画像の高さを統一:THE MODELSと同じ理由(img要素のwidth/height属性がaspect-ratioを
     上書きしてしまう)でheight:autoを明示する
   ・ラベル・本文の開始位置を揃える:カードをflex columnにして、画像高さを揃えた分だけ
     ラベルの開始位置も自動的に揃うようにする */
.ecc-series-why__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* フォールバック。実際はテンプレート側で項目数に応じて上書き */
  gap: 1.6rem;
  text-align: center;
}
.ecc-series-why__card { display: flex; flex-direction: column; align-items: center; }
.ecc-series-why__media img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; display: block; }
.ecc-series-why__label { font-weight: bold; letter-spacing: 0.05em; margin-top: 0.9rem; margin-bottom: 0.3rem; }
.ecc-series-why__text { font-size: 0.85rem; color: #666; margin: 0; line-height: 1.7; }

/* 04 THE MODELS(商品写真を主役に。縦長すぎない比率。見出し開始位置を揃える)
   実画面デザインQA(2026-09-19)での調整:
   ・画像サイズを少し抑える(4:3→3:2。幅に対して低めの比率にする)
   ・3モデルの画像高さを揃える:wp_get_attachment_imageが出力するimgのwidth/height属性が
     ブラウザに拾われてaspect-ratioが無視されるケースがあるため、height:autoを明示して
     必ずCSS側のaspect-ratioで高さが決まるようにする(3モデルとも確実に同じ高さになる)
   ・セクション全体の上下余白をやや縮める(前後の空白整理・2026-09-19でさらに縮小)
   ・モデル名をより雑誌的な見出しに(letter-spacingを広げ、サイズを上げる) */
.ecc-series-models { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.ecc-series-models__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  align-items: start;
}
.ecc-series-model-card { text-align: left; display: flex; flex-direction: column; height: 100%; }
.ecc-series-model-card__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  display: block;
}
/* キャッチ・本文の開始位置を揃える:見出し(モデル名)の上マージンを画像直後で統一する。
   ファッション誌のマストヘッド風に、letter-spacingを広げ少し大きめにする。 */
.ecc-series-model-card h3 {
  font-family: var(--brand-font-heading);
  letter-spacing: 0.12em;
  margin: 1.6rem 0 0.5rem;
  font-size: 1.25rem;
}
.ecc-series-model-card__catch { font-weight: bold; margin: 0 0 0.7rem; }
/* 本文が下で詰まって見えないよう、行間と下側の余白を確保 */
.ecc-series-model-card__desc { color: #666; font-size: 0.92rem; line-height: 1.85; margin: 0 0 1.4rem; flex-grow: 1; }

/* 05 FIND YOURS(2026-09-19:枠線・ボックス感を減らし、静かな比較に) */
.ecc-series-find__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
.ecc-series-find__card {
  padding-top: 1.6rem;
  border-top: 1px solid var(--story-color-line, #ddd);
  text-align: center;
}
.ecc-series-find__card h3 { font-family: var(--brand-font-heading); letter-spacing: 0.05em; margin: 0 0 0.6rem; font-size: 1rem; }
.ecc-series-find__card p { color: #666; margin: 0; font-size: 0.92rem; line-height: 1.7; }

/* 06 DESIGNED FOR WATER(見出しは共通クラス.ecc-series-eyebrow/.ecc-series-headlineを使用) */
.ecc-series-water { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.ecc-series-water__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.ecc-series-water__media img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block; }
.ecc-series-water__title { font-weight: bold; margin: 0.8rem 0 0.2rem; }
.ecc-series-water__text { color: #666; font-size: 0.88rem; margin: 0; line-height: 1.7; }

/* 07 LIFE WITH */
.ecc-series-life__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}
.ecc-series-life__item img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }

/* 08 CHOOSE YOURS(2026-09-19:「SHOPまでは静かに、最後だけ黒い導線を強く」の方針。
   このセクションのeyebrowだけは他セクションよりくっきり濃くし、CTAボタンも一回り大きくする) */
.ecc-series-choose { text-align: center; padding-top: 4rem; }
.ecc-series-choose h2.ecc-series-eyebrow { color: var(--story-color-ink, #1a1a1a); letter-spacing: 0.3em; }
.ecc-series-choose__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
}
.ecc-series-choose__card { text-align: center; }
.ecc-series-choose__media img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block; }
.ecc-series-choose__name { font-family: var(--brand-font-heading); letter-spacing: 0.05em; margin: 1rem 0 1rem; }
.ecc-series-choose__card .ecc-button { display: inline-block; }
/* SHOP導線ボタンはevolve-commerce-core側の色(--ecc-ink/--ecc-accent)を
   Story側では上書きし、白/黒/グレーのみにする(プラグイン本体は無改変)。
   ページ内で最も強いコントラストの要素として、他のボタンよりも一回り大きくする。 */
body.single-ecc_story .ecc-button {
  background: var(--story-color-ink, #1a1a1a);
  color: #fff;
  padding: 1rem 2.2rem;
  font-size: 0.98rem;
  letter-spacing: 0.08em;
}
body.single-ecc_story .ecc-button:hover,
body.single-ecc_story .ecc-button:focus-visible {
  background: #444444;
  color: #fff;
}

/* ---- タブレット ---- */
@media (max-width: 900px) {
  /* WHYはPC側で項目数に応じた列数をインライン指定しているため、!importantで確実に上書きする */
  .ecc-series-why__grid { grid-template-columns: repeat(3, 1fr) !important; }
  .ecc-series-models__grid,
  .ecc-series-find__grid,
  .ecc-series-water__grid,
  .ecc-series-life__grid,
  .ecc-series-choose__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- モバイル(縦積み) ---- */
@media (max-width: 640px) {
  .ecc-series-hero { padding: 2rem 1.2rem 0; }
  .ecc-series-hero h1 { font-size: 1.7rem; }
  .ecc-series-section { padding: 2.8rem 1.2rem; }
  .ecc-series-whatis__grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .ecc-series-whatis__body { max-width: none; }
  .ecc-series-why__grid { grid-template-columns: repeat(2, 1fr) !important; }
  .ecc-series-models__grid,
  .ecc-series-find__grid,
  .ecc-series-water__grid,
  .ecc-series-choose__grid { grid-template-columns: 1fr; }
  .ecc-series-life__grid { grid-template-columns: repeat(2, 1fr); }
}