/* =================================================================
 * c-pickup — フッター上 PICK UP（ピックアップ情報）セクション
 * Figma: 3321:74406 (Pick UP PC)
 *
 * 構成:
 *   .c-pickup                外側セクション（左右ガター・上余白）
 *   .c-pickup__inner          内側 1440 横並び（左ヘッダー + 右グリッド）
 *     ├─ .c-pickup__header   ヘッダー（JP / EN / アクセント）
 *     └─ .c-pickup__grid     3×2 グリッド（5セル + 右下空白）
 *         └─ .c-pickup__cell リンク全体
 *             ├─ .c-pickup__thumb サムネ画像
 *             └─ .c-pickup__caption  下部ラベル + LinkIcon
 *
 * 仕様:
 *   - PCファースト（Figma カード 320×120）
 *   - SP（≤1023.98px）は @media (max-width: 1023.98px) で縦積み・横スクロール
 * =================================================================*/

.c-pickup {
  width: 100%;
  padding: 0 70rem;
  margin-top: 80rem;
  box-sizing: border-box;
}

.c-pickup__inner {
  max-width: var(--footer-content-max);
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 56rem;
  box-sizing: border-box;
}

/* ---------- 左ヘッダー ---------- */
.c-pickup__header {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.c-pickup__title-ja {
  font-family: var(--font-jp);
  font-size: var(--fs-body);             /* 16px */
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-key);
}

.c-pickup__title-en {
  font-family: var(--font-en-condensed);
  font-size: var(--fs-h1-pc);            /* 56px */
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-default);
}

.c-pickup__title-accent {
  width: 60rem;
  height: 2rem;
  background-color: var(--color-key);
}

/* ---------- 右グリッド ---------- */
.c-pickup__grid {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(3, 320rem);
  grid-template-rows: repeat(2, 120rem);
  gap: 32rem;
}

.c-pickup__cell {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border: 1px solid var(--color-white);
  border-radius: 12rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

/* サムネ画像領域（カード上部 75px 相当） */
.c-pickup__thumb {
  flex: 1 0 0;
  width: 100%;
  background-color: var(--color-bg-01); /* #FBF9F8 */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 0;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 指示 5693:90668: hover時にサムネ 1.1x 拡大 */
.c-pickup__cell:hover .c-pickup__thumb { transform: scale(1.1); }

/* キャプション行（カード下部 45px） */
.c-pickup__caption {
  height: 45rem;
  padding: 8rem 12rem 8rem 16rem;
  display: flex;
  align-items: center;
  gap: 8rem;
  border-top: 1px solid rgba(217, 217, 217, 0.88);
}

.c-pickup__label {
  flex: 0 1 auto;                       /* テキスト幅に揃え hover下線がテキスト下に収まる */
  font-family: var(--font-jp);
  font-size: var(--fs-body);            /* 16px */
  font-weight: var(--fw-bold);
  line-height: var(--lh-loose);          /* 1.8 */
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-default);
  word-break: break-word;
  min-width: 0;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 0 2px;
  transition: background-size 0.3s ease-in-out;
}
.c-pickup__arrow { margin-left: auto; } /* label の flex:1 を外したので arrow を右端に */

/* 指示 5693:90577 / 90669: 左→右へ 2px アンダーラインがスライドイン (0.3s ease-in-out) */
.c-pickup__cell:hover .c-pickup__label { background-size: 100% 2px; }

/* 右端のリンク矢印（Figma 5058:312904 — 丸背景なしの斜め矢印 ↗）
   PC は ONLINE STORE / SP と揃えて斜め矢印（link-arrow.svg）。 */
.c-pickup__arrow {
  flex-shrink: 0;
  width: 14rem;                          /* Figma: LinkIcon vector ≒13px */
  height: 14rem;
  background-color: var(--color-key);
  -webkit-mask: url("/img/common/icons/link-arrow.svg") no-repeat center / contain;
          mask: url("/img/common/icons/link-arrow.svg") no-repeat center / contain;
}

/* =================================================================
 * PC 中間幅（1024–1439.98px）— Figma は 1440px 固定設計。
 * 1440px 未満では「ヘッダー＋56px＋320px×3」の固定塊(≈1300px)が収まらないため、
 * 構図・配置・比率を一切変えずブロック全体を等比縮小して画面幅に収める。
 *   - 内側を自然幅(max-content)にして親による見切れ(overflow)を回避
 *   - 縮小率は画面幅依存（CSS calc では長さ÷長さの無次元化が不可）なので
 *     pickup.blade.php 同梱スクリプトが zoom を算出してセットする
 *   - JS 不発時の保険として overflow-x:clip（横スクロール抑止）
 * =================================================================*/
@media (min-width: 1024px) and (max-width: 1439.98px) {
  .c-pickup {
    overflow-x: clip;
  }
  .c-pickup__inner {
    width: max-content;
    max-width: none;
    /* zoom は JS が算出（例: 1280px → ≈0.877）。未設定時は等倍 */
    zoom: var(--c-pickup-zoom, 1);
  }
}

/* =================================================================
 * SP（≤1023.98px）— Figma: footer_SP 3321:93537 / pick up 1932:16059
 *   縦 1 列・カード全幅・ヘッダー中央寄せ
 * =================================================================*/
@media (max-width: 1023.98px) {

  .c-pickup {
    padding: 0 16rem;
    margin-top: 48rem;
  }

  .c-pickup__inner {
    flex-direction: column;
    align-items: center;       /* Figma: items-center */
    gap: 20rem;
  }

  /* ヘッダーは中央寄せ */
  .c-pickup__header {
    align-items: center;
    text-align: center;
    gap: 8rem;
  }

  .c-pickup__title-en {
    font-size: 34rem;            /* Figma SP 見出し */
  }

  /* SP は 1 列縦積み・カードは全幅 */
  .c-pickup__grid {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 24rem;
  }

  /* カードは Figma の aspect 320:120 を踏襲（ラベル/矢印は PC と同寸） */
  .c-pickup__cell {
    aspect-ratio: 320 / 120;
  }

  /* 矢印チップは Figma LinkIcon の 14px */
  .c-pickup__arrow {
    width: 14rem;
    height: 14rem;
    /* SP は現状維持：従来の斜め矢印（link-arrow.svg）を据え置く */
    -webkit-mask-image: url("/img/common/icons/link-arrow.svg");
            mask-image: url("/img/common/icons/link-arrow.svg");
  }

  .c-pickup__arrow::before {
    width: 8rem;
    height: 8rem;
  }
}