/* ==========================================================================
   fff-foundation — 06-tablet.css
   タブレット（768〜1023px）専用の見た目差分

   ★ ルール: このファイルは「@media (min-width: 768px) and (max-width: 1023px)」
     1個だけ。タブレットで変えたい所だけを、ここに書く（PC=ベースを上書き）。
     スマホ（〜767px）とは 767/768 で隣接 → 絶対に重ならない。

   ★ root font-size 80%: rem 指定の文字・余白・gap が全部連動して縮む。
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {

    /* ===== root を 80% に縮小（タブレット全体スケール） ===== */
    html {
        font-size: 80%;
    }

    /* ===== Hero ブロック: 上下余白増 + 行間 & 要素間 gap 詰めて padding に空間を譲る ===== */
    .fff-block--hero .fff-block__content {
        padding-top: var(--fff-space-5);
        padding-bottom: var(--fff-space-5);
        gap: var(--fff-space-1);          /* 要素間: space-3(20px) → space-1(5px) */
    }
    .fff-block--hero .fff-block__lead {
        line-height: 1.4;                  /* 本文: normal(1.6) → 1.4 に詰める */
    }
    .fff-block__title--hero {
        line-height: 1;                    /* タイトル: tight → 1 にギュッと */
    }

    /* ===== Statement ブロック: lead 内の改行を消す + 横余白縮小 + lead-body 間詰め ===== */
    .fff-block--statement .fff-block__statement-lead br {
        display: none;
    }
    .fff-block--statement .fff-block__content {
        padding-left: 0;
        padding-right: 0;
        gap: var(--fff-space-1);   /* lead と body の間隔を詰める */
    }

    /* ===== PMV ブロック: row_span 4 になったので中央寄せ + auto余白を打ち消し ===== */
    .fff-block--pmv .fff-block__content {
        justify-content: center;        /* 上下中央寄せ（PC の flex-start を上書き） */
        gap: var(--fff-space-2);
    }
    .fff-block__pmv-title {
        margin-top: 0;                  /* PC の margin-top: var(--fff-space-4) を打ち消し */
        margin-bottom: 0;
    }
    .fff-block__pmv-lead {
        font-weight: bold;              /* タブレットでも太字（PC設定が 1024 限定になったため明示） */
        margin-top: 0;
        margin-bottom: 0;
        line-height: 1.3;
    }
    .fff-block__pmv-lead br {
        display: none;                  /* lead 内の明示改行を消す */
    }
    .fff-block__pmv-body {
        margin-bottom: 0;               /* PC の margin-bottom: auto を打ち消し */
        line-height: 1.5;
    }

    /* ===== Value Body ブロック: 左揃え + padding/gap/行間 詰め（PC用設定を打ち消し） ===== */
    .fff-block--value-body .fff-block__content {
        text-align: left;               /* PC の center を打ち消し */
        padding: var(--fff-space-2);    /* PC の space-4(40px) → space-2(10px) */
        gap: var(--fff-space-2);        /* 段落間 */
    }
    .fff-block--value-body p {
        line-height: 1.5;               /* PMV body と揃える */
    }

    /* ===== Table ブロック: 行間詰め（セルの padding と line-height を縮小） ===== */
    .fff-block__table th,
    .fff-block__table td {
        padding: var(--fff-space-1) 0;  /* space-2(10px) → space-1(5px) */
        line-height: 1.4;                /* normal(1.6) → 1.4 */
    }

    /* ===== Timeline ブロック: タブレットだけ縦線/dot 非表示 + 上揃え + 縦並び ===== */
    .fff-block--timeline .fff-block__content {
        justify-content: flex-start;    /* center → 上揃え（職歴から見える） */
    }
    .fff-block__timeline-list {
        padding-left: 0;                /* PC の dot 用左スペース除去 */
    }
    .fff-block__timeline-list::before,
    .fff-block__timeline-item::before {
        display: none;                  /* 縦線・dot 非表示 */
    }
    .fff-block__timeline-item {
        flex-direction: column;
        padding: 2px 0;                 /* space-1(5px) → 2px */
        gap: 0;
        line-height: 1.3;                /* 1.4 → 1.3 */
    }
    .fff-block__timeline-date {
        font-weight: bold;
    }
    .fff-block__timeline-career-list {
        line-height: 1.3;
    }

    /* ===== Profile ブロック: 中身を詰めて全文収める + 左カラム広げる ===== */
    .fff-block--profile .fff-block__content {
        gap: var(--fff-space-2);            /* 写真と本文の間 space-3 → space-2 */
    }
    .fff-block__profile-left {
        width: 45%;                          /* PC の 40% → 45%（右に余裕） */
    }
    .fff-block__profile-left .fff-block__profile-photo {
        width: 80%;                          /* 写真サイズ */
    }
    .fff-block__profile-left .fff-block__profile-credits {
        width: 100%;                         /* credits はカラムいっぱい */
    }
    /* SNS アイコン: タブレットでは小さく */
    .fff-block--profile .fff-block__profile-social {
        width: 32px;
        height: 32px;
    }
    .fff-block--profile .fff-block__profile-social svg {
        width: 16px;
        height: 16px;
    }
    .fff-block__profile-main {
        gap: var(--fff-space-1);            /* main 内 space-2 → space-1 */
    }
    .fff-block__profile-body {
        gap: var(--fff-space-1);            /* 段落間 space-2 → space-1 */
    }
    .fff-block__profile-body p {
        line-height: 1.4;                    /* normal(1.6) → 1.4 */
    }
    .fff-block__profile-role {
        margin-bottom: var(--fff-space-1);  /* space-2 → space-1 */
    }

    /* ===== row_span: タブレットでは Profile/Timeline を1段拡大（PHP はPC値 3/4）===== */
    .fff-block--profile {
        --row-span: 4 !important;       /* PC 3 → タブレット 4 */
    }
    .fff-block--timeline {
        --row-span: 5 !important;       /* PC 4 → タブレット 5 */
    }
}