/* ════════════════════════════════════════════════════════════════════
   BIGBOSS PR BLOCKS — base.css
   ────────────────────────────────────────────────────────────────────
   pr_page (CPT) 専用の共通CSS。全 sc-* ブロックで読み込まれる。

   想定DOM構造:
   ──────────────
     <main class="pr-page-main">                ← レイアウト境界（フル幅）
       [ACF/WP 自動生成ラッパー × N]            ← display: block のまま、
                                                   全 spacing/sizing をリセット
         <section class="bsc-XXX pr-block">    ← 実質的なブロック境界
           <div class="sc-container">           ← 中央寄せ + max-width: 1500px
             <div class="bsc-XXX__inner">      ← セクション内コンテンツ
               …
             </div>
           </div>
         </section>
     </main>

   設計ルール:
   ──────────────
     - 各ブロックの背景色・テキスト色は ブロック自身の style.css で
       `.bsc-XXX { background: var(--bb-...); }` のように設定する。
     - ラッパー div は本CSSで完全に透明化されるため、無視してよい。
     - 共通レイアウト .sc-container / .sc-inner はここで定義。
     - 上下余白は .sc-inner の padding-block で統一。

   目次:
   ──────────────
     1. デザイントークン
     2. グローバルリセット
     3. メインコンテナ & ラッパー透過化
     4. ブロック共通レイアウト (.pr-block / .sc-container / .sc-inner)
     5. 共通ユーティリティ (eyebrow, button)
     6. エディタープレビュー
     7. TOPBAR / SITE FOOTER (header_staffs_choice 共用)
==================================================================== */


/* ════════════════════════════════════════════════════════════════════
   1. デザイントークン
   ──────────────────────────────────────────────────────────────────
   テーマレイヤー (例: .pr-theme--acoustic) で上書きできる。
==================================================================== */
:root {
    /* Color */
    --bb-black:        #0c0c0c;
    --bb-off-black:    #141414;
    --bb-dark:         #1e1e1e;
    --bb-dark-mid:     #2a2a2a;
    --bb-mid:          #444444;
    --bb-gray:         #888888;
    --bb-gray-light:   #bbbbbb;
    --bb-border:       #2e2e2e;
    --bb-border-light: #e4e4e0;
    --bb-off-white:    #f5f5f0;
    --bb-white:        #ffffff;

    /* Accent (デフォルト: 桜) */
    --bb-accent:       #e8547a;
    --bb-accent-dark:  #c4325c;
    --bb-accent-tint:  #fdf0f4;

    /* Typography */
    --bb-font-display: 'Bebas Neue', sans-serif;
    --bb-font-body:    'Noto Sans JP', sans-serif;
    --bb-font-mono:    'DM Mono', monospace;

    /* Body / Intro テキスト —— 全ブロック共通の本文サイズをトークン化。
       値を変えるならここをいじるだけで全ブロックに一括反映される。 */
    --bb-intro-font-size:   16px;
    --bb-intro-line-height: 1.9;
    --bb-intro-color:       rgba(26, 18, 12, 0.7);
    --bb-intro-color-dark:  rgba(244, 236, 224, 0.7);   /* ダーク背景ブロック用 */

    /* Radius */
    --bb-radius-sm: 4px;
    --bb-radius-md: 8px;
    --bb-radius-lg: 16px;

    /* Motion */
    --bb-transition: 0.2s ease;
}


/* ════════════════════════════════════════════════════════════════════
   2. グローバルリセット
   ──────────────────────────────────────────────────────────────────
   staffs-choice.css は pr_page では読み込まれない設計のため、
   body のブラウザデフォルト margin (8px) 等をここでリセットする。
==================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* staffs-choice.css と同一の img リセット。
   サイト全体で画像はオリジナル比率維持、
   ボックスに合わせる場合は cover でクロップされる前提。 */
img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}


/* ════════════════════════════════════════════════════════════════════
   3. メインコンテナ & ラッパー透過化
   ──────────────────────────────────────────────────────────────────
   .pr-page-main          : フル幅レイアウト境界（single-pr_page.php 由来）
   各種ラッパー div         : ACF / WordPress / テーマが自動挿入する div を
                             すべて「透明な箱」化する。中の <section.pr-block>
                             が事実上のレイアウト要素になるよう、wrapperには
                             サイズ・余白・gap を持たせない。
==================================================================== */
.pr-page-main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;

    /* テーマの theme.json 由来の root padding を打ち消し */
    --wp--style--root--padding-left:   0;
    --wp--style--root--padding-right:  0;
    --wp--style--root--padding-top:    0;
    --wp--style--root--padding-bottom: 0;
}

/* the_content() 直後に WordPress が挿入する可能性があるラッパー */
.pr-page-main > .entry-content,
.pr-page-main > .wp-block-post-content,
/* ACF Pro / register_block_type が生成する自動ラッパー */
.pr-page-main [class*="wp-block-bigboss-"],
/* WordPress のレイアウトコンテナ */
.pr-page-main [class*="wp-container"],
.pr-page-main .wp-block-group,
.pr-page-main .wp-block-columns {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    gap: 0 !important;
}


/* ════════════════════════════════════════════════════════════════════
   4. ブロック共通レイアウト
   ──────────────────────────────────────────────────────────────────
   .pr-block      : 各ブロックの <section>。事実上のレイアウト境界。
   .sc-container  : max-width 1500px の中央寄せ。各ブロック内で使う。
   .sc-inner      : 上下余白（padding-block）を統一。breakpoint で拡大。
==================================================================== */
.pr-block {
    position: relative;
    width: 100%;
    /* 各ブロックの background / color はそれぞれの style.css で定義 */
}

.pr-block .sc-container {
    width: 100%;
    max-width: 1500px;
    margin-inline: auto;
    padding-inline: 20px;
}

.pr-block .sc-inner {
    padding-block: 64px;
}

@media (min-width: 768px) {
    .pr-block .sc-inner {
        padding-block: 88px;
    }
}

@media (min-width: 1200px) {
    .pr-block .sc-inner {
        padding-block: 112px;
    }
}


/* ════════════════════════════════════════════════════════════════════
   5. 共通ユーティリティ
   ──────────────────────────────────────────────────────────────────
   - アイブロウ (eyebrow): ブロック上部の小さな英文ラベル + 横棒
   - ボタン (sc-btn):       primary / outline / dark バリアント
==================================================================== */

/* ── アイブロウ ──────────────────────────────────────────────── */
.pr-block .sc-eyebrow-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.pr-block .sc-eyebrow-line {
    display: block;
    width: 36px;
    height: 1px;
    background: var(--bb-accent);
    flex-shrink: 0;
}

.pr-block .sc-eyebrow {
    font-family: var(--bb-font-mono);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--bb-accent);
    font-weight: 500;
}

/* ── 見出し（規約）──────────────────────────
   .sc-heading       … メイン見出し（ディスプレイフォント + clamp）
   .sc-heading--sm   … リスト・サブセクション用の小見出し
   color: inherit でセクションの色設定に追従します。
─────────────────────────────────────────────── */
.pr-block .sc-heading {
    font-family: var(--bb-font-display);
    font-size: clamp(28px, 4.4vw, 60px);
    line-height: 1.1;
    font-weight: var(--bb-display-weight, 500);
    letter-spacing: var(--bb-heading-tracking, -0.01em);
    color: inherit;
    margin: 0 0 20px;
    text-wrap: balance;
}

.pr-block .sc-heading--lg {
    font-family: var(--bb-font-display);
    font-size: clamp(24px, 3.4vw, 44px);
    line-height: 1.4;
    font-weight: var(--bb-display-weight, 500);
    letter-spacing: var(--bb-heading-tracking, -0.01em);
    color: inherit;
    margin: 0 0 16px;
    text-wrap: balance;
}

.pr-block .sc-heading--md {
    font-family: var(--bb-font-display);
    font-size: clamp(22px, 2.8vw, 34px);
    line-height: 1.2;
    font-weight: var(--bb-display-weight, 500);
    letter-spacing: -0.01em;
    color: inherit;
    margin: 0 0 12px;
    text-wrap: balance;
}

.pr-block .sc-heading--sm {
    font-family: var(--bb-font-body);
    font-size: clamp(20px, 3.5vw, 30px);
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: inherit;
    margin: 0 0 8px;
    text-wrap: balance;
}

/* ── 共通 intro テキスト ──────────────────────────────
   .sc-intro       : 各セクション見出し下のリード文 / 本文。
   .sc-intro--dark : ダーク背景ブロック用の色トークン上書き。
   使い方:
     <p class="bsc-XXX__intro sc-intro">本文…</p>
     <p class="bsc-XXX__intro sc-intro sc-intro--dark">ダーク版</p>
   サイズを一括変更したい場合は --bb-intro-font-size トークンを調整する。
──────────────────────────────────────────────────────── */
.pr-block .sc-intro {
    font-size: var(--bb-intro-font-size);
    line-height: var(--bb-intro-line-height);
    color: var(--bb-intro-color);
    margin: 0;
}

.pr-block .sc-intro--dark {
    color: var(--bb-intro-color-dark);
}

/* 複数段落になったときの段落間余白 */
.pr-block .sc-intro + .sc-intro {
    margin-top: 1em;
}

/* ── ボタン ──────────────────────────────────────────────────── */
.pr-block .sc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-family: var(--bb-font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    border-radius: var(--bb-radius-sm);
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: var(--bb-transition);
    white-space: nowrap;
}

.pr-block .sc-btn--primary {
    background: var(--bb-accent);
    color: var(--bb-white);
    border-color: var(--bb-accent);
}
.pr-block .sc-btn--primary:hover {
    background: var(--bb-accent-dark);
    border-color: var(--bb-accent-dark);
}

.pr-block .sc-btn--outline {
    background: transparent;
    color: var(--bb-white);
    border-color: rgba(255,255,255,.4);
}
.pr-block .sc-btn--outline:hover {
    border-color: var(--bb-white);
}

.pr-block .sc-btn--dark {
    background: var(--bb-black);
    color: var(--bb-white);
    border-color: var(--bb-black);
}
.pr-block .sc-btn--dark:hover {
    background: var(--bb-dark-mid);
}

.pr-block .sc-btn--lg {
    padding: 16px 36px;
    font-size: 14px;
}


/* ── ブロック共通ヘッダー (.sc-header) ────────────────────
   各ブロックの <header> に .sc-header を付与すると、
   「ヘッダー画像」オプションを使えるようになる。
   画像ありのときは .sc-header--with-image を追加し、
   PC: 2カラム（左=テキスト / 右=画像）、
   スマホ: 1カラム（eyebrow → heading → image → intro）になる。
   画像なしのときは従来通りの1カラム表示。

   使い方（テンプレート）:
     <header class="bsc-{name}__header sc-header<?php echo $image ? ' sc-header--with-image' : ''; ?>">
         <div class="sc-eyebrow-wrap">...</div>
         <h2 class="bsc-{name}__heading sc-heading--lg sc-header__heading">...</h2>
         <?php if ($image): ?>
         <figure class="sc-header__image"><img src="..." alt="..." loading="lazy"></figure>
         <?php endif; ?>
         <div class="sc-header__intro">
             <?php echo bsc_paragraphs($intro, 'bsc-{name}__intro sc-intro'); ?>
         </div>
     </header>
─────────────────────────────────────────────────────────────── */
.pr-block .sc-header {
    margin-bottom: 48px;
}

/* @media (min-width: 768px) {
    .pr-block .sc-header {
        margin-bottom: 64px;
    }
} */

.pr-block .sc-header__image {
    margin: 16px 0 20px;
    border-radius: var(--bb-radius-md);
    overflow: hidden;
}

.pr-block .sc-header__image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

@media (min-width: 768px) {
    .pr-block .sc-header--with-image {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "eyebrow image"
            "heading image"
            "intro   image";
        grid-template-rows: auto auto 1fr;
        column-gap: 48px;
        align-items: start;
    }
    .pr-block .sc-header--with-image > .sc-eyebrow-wrap      { grid-area: eyebrow; }
    .pr-block .sc-header--with-image > .sc-header__heading   { grid-area: heading; }
    .pr-block .sc-header--with-image > .sc-header__image     {
        grid-area: image;
        margin: 0;
        align-self: center;
    }
    .pr-block .sc-header--with-image > .sc-header__intro     { grid-area: intro; }
}


/* ════════════════════════════════════════════════════════════════════
   6. エディタープレビュー
   ──────────────────────────────────────────────────────────────────
   各 render.php が is_preview 時に出力する .pr-block__badge と、
   ブロックエディタ内の特殊調整。
==================================================================== */

/* バッジ（編集画面でブロックを識別しやすくするためのラベル） */
.pr-block__badge {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bb-accent, #e8547a);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 18px;
    border-radius: 20px;
    z-index: 10;
    white-space: nowrap;
    letter-spacing: .06em;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(232,84,122,.4);
}

/* エディタープレビュー用調整 */
.editor-styles-wrapper .pr-block .sc-inner {
    padding-block: 40px;
}


/* ════════════════════════════════════════════════════════════════════
   7. TOPBAR / SITE FOOTER (header_staffs_choice 共用)
   ──────────────────────────────────────────────────────────────────
   header-staffs_choice.php / footer-staffs_choice.php が
   pr_page でも使われるため、ここで .sc-topbar / .sc-site-footer を
   --bb-* トークンで定義する。
   （staffs-choice.css は pr_page で読み込まれないため、本CSSが
   topbar / footer のスタイルを担保する）
==================================================================== */

/* ── TOPBAR ──────────────────────────────────────────────────── */
.sc-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(12, 12, 12, .92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--bb-border);
}

.sc-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    max-width: 1500px;
    margin-inline: auto;
    padding-inline: 20px;
}

@media (min-width: 768px) {
    .sc-topbar__inner {
        padding-inline: 40px;
    }
}

.sc-topbar__logo {
    display: flex;
    align-items: center;
}

/* ロゴ画像はグローバル img reset (width:100%; height:auto) に従う。
   staffs-choice.css と同一のリザルトを得るため、ここでの個別指定は行わない。 */

.sc-topbar__cta {
    font-size: 12px;
    font-weight: 700;
    background: var(--bb-accent);
    color: var(--bb-white);
    padding: 8px 16px;
    border-radius: var(--bb-radius-sm);
    transition: var(--bb-transition);
    white-space: nowrap;
    text-decoration: none;
}

.sc-topbar__cta:hover {
    background: var(--bb-accent-dark);
    color: var(--bb-white);
}

/* ── SITE FOOTER ─────────────────────────────────────────────── */
.sc-site-footer {
    background: var(--bb-off-black);
    color: var(--bb-gray);
    padding: 32px 0;
    border-top: 1px solid var(--bb-border);
}

.sc-site-footer__inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    text-align: center;
    max-width: 1500px;
    margin-inline: auto;
    padding-inline: 20px;
}

@media (min-width: 768px) {
    .sc-site-footer__inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
        padding-inline: 40px;
    }
}

.sc-site-footer__logo {
    font-family: var(--bb-font-display);
    font-size: 16px;
    letter-spacing: .1em;
    color: var(--bb-white);
}

.sc-site-footer__copy {
    font-family: var(--bb-font-mono);
    font-size: 10px;
    letter-spacing: .08em;
}