/* =========================================================
   KARI — brand.css（niejta / floreisen ページ共通の見た目）
   共通の色・フォント・タイトル・横線・online store・モーションは style.css にあります。
   ---------------------------------------------------------
   1. 設定値（写真の並び）
   2. ページ全体（縦にスクロールするページ）
   3. 写真グリッド
   4. ブランドごとの違い（横線の左端）
   5. タブレット・スマートフォン
   ========================================================= */


/* ---------------------------------------------------------
   1. 設定値
   --------------------------------------------------------- */
.page-brand {
  --grid-left: 8.66vw;           /* 写真グリッドの左端 */
  --grid-right: 82.09vw;         /* 写真グリッドの右端（横線の右端と同じ） */
  --grid-top: 54.22vh;           /* 1行目の写真の上端 */
  --grid-columns: 4;             /* 1行の枚数 */
  --grid-gap: 3.03vw;            /* 写真どうしの間隔（縦も横も同じ） */
  --grid-bottom: 16vh;           /* いちばん下の写真の下の余白 */
  --photo-ratio: 4 / 5;          /* 写真の縦横比 */
}


/* ---------------------------------------------------------
   2. ページ全体
   --------------------------------------------------------- */
.page-brand {
  position: relative;
  min-height: 100vh;
}


/* ---------------------------------------------------------
   3. 写真グリッド（4列 × 3行）
   --------------------------------------------------------- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gap);
  width: calc(var(--grid-right) - var(--grid-left));
  margin: 0 0 0 var(--grid-left);
  padding: var(--grid-top) 0 var(--grid-bottom);
  list-style: none;
}
.photo-item img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--photo-ratio);
  object-fit: cover;
  background: var(--color-image-placeholder);
}


/* ---------------------------------------------------------
   4. ブランドごとの違い
   floreisen はタイトルが長いので、横線の左端を少し右へ
   --------------------------------------------------------- */
.page--floreisen {
  --line-left: 12.75vw;
}


/* ---------------------------------------------------------
   5. タブレット・スマートフォン
   PCと同じ並び（タイトル・横線・online store・写真）のまま、
   写真の列数を減らします（タブレット2列・スマートフォン1列）。
   --------------------------------------------------------- */
/* タブレット（画面幅761〜1199px）：写真は2列 */
@media (min-width: 761px) and (max-width: 1199px) {
  .page-brand { --grid-columns: 2; }
}

/* スマートフォン（画面幅760px以下）：写真は1列
   KARI・メニュー・タイトルの位置は style.css の共通設定です */
@media (max-width: 760px) {
  .page-brand {
    --grid-columns: 1;
    --grid-left: var(--page-padding);
    --grid-right: calc(100vw - var(--page-padding));
    --grid-top: 74.06vw;             /* 1枚目の写真の上位置 */
    --grid-gap: 16vw;                /* 写真と写真の間 */
    --grid-bottom: 24vw;             /* いちばん下の余白 */
    --line-top: 68.44vw;             /* 横線の高さ */
    --line-left: 13.39vw;            /* 横線の左端（niejta） */
    --line-right: calc(100vw - var(--page-padding));
    --store-right: 93.78vw;          /* online store の右端 */
    --font-size-store: 2.47vw;
  }
  .page--floreisen { --line-left: 18.61vw; }   /* floreisen は文字数が多いので少し右から */
  .page-brand .page-line {
    height: var(--sp-line-weight);
    background: var(--sp-line-color);
  }
  .page-brand .store-link {
    top: calc(var(--line-top) - 4.3vw);   /* 横線の少し上 */
    padding-top: 0;
  }
}

/* ---------------------------------------------------------
   ページ出現モーションの順番（動きは style.css の共通設定）
   タイトル → 横線 → online store・写真 の順に、ごく小さな時間差で現れます
   （写真の時間差は main.js の「スクロールで現れる写真」で付けています）
   --------------------------------------------------------- */
.page-brand .page-title { --enter-order: 0; }
.page-brand .page-line  { --enter-order: 1; }
.page-brand .store-link { --enter-order: 2; }