/* pages/video.css
   動画制作ページ（video.html「丸投げ動画制作所」）固有（p-video-）
   骨組みや部品は components.css にあり、ここにはこのページだけの調整を書く。
   c- のクラスの中身は上書きしない（同じ要素に p-video- のクラスを並べて付け足すだけ）。 */

/* 1. ヒーロー
   H1 は2行（「資料を渡すだけ。」「あとは丸投げでOK。」）。どちらも u-nowrap で折り返さないので、
   最長の行（「あとは丸投げでOK。」）が、320px の端末（H1 の幅 280px）でも収まる大きさにする（画面幅の 8.6%＝320px で約 27.5px）。
   上限は --fs-h1（clamp(32px, 4vw, 54px)）なので、375px 以上では共通の大きさのまま */
.p-video-hero__title {
  font-size: clamp(26px, min(var(--fs-h1), 8.6vw), 54px);
}

/* こんな方におすすめ：768px 以上は、左に写真、右に3つの条件を縦に並べる。SP は写真 → 条件の順に縦に積む。
   写真の枠は共通部品の c-photo-frame（3:2）。右の3枚が高いときは、その高さまで縦に伸びて切り抜く（幅は列いっぱいに固定する。
   比率つきの枠を縦に伸ばすと、幅が高さから決まって列からはみ出すため）。
   条件のカードは行を等分して高さをそろえ、見出しは左揃え（c-feature-card--middle で縦の中央） */
.p-video-recommend {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.p-video-recommend__photo {
  width: 100%;
}

@media (min-width: 768px) {
  .p-video-recommend {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 40px;
  }

  .p-video-recommend__photo {
    align-self: stretch;
  }

  .p-video-recommend__list {
    grid-auto-rows: 1fr;
  }
}

/* 丸投げの対応範囲：900px 以上は、左に4つのカード（2×2）、右に大きな写真（共通部品の c-photo-frame。カードの高さまで縦に伸びる）。
   900px 未満は、写真（16:9）→ カードの順に縦に積む（カードは768px 以上で2列、SP は1列）。
   写真は DOM の先頭に置く（SP で先に出す）。PC で右に置くのは、grid-template-areas の並びで決める */
.p-video-scope {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "media"
    "list";
  gap: 24px;
}

.p-video-scope__photo {
  --photo-pos: 28% 50%;
  grid-area: media;
  width: 100%;
}

.p-video-scope__list {
  grid-area: list;
}

@media (min-width: 900px) {
  .p-video-scope {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    grid-template-areas: "list media";
    gap: 40px;
  }

  .p-video-scope__photo {
    --photo-ratio: auto;
    align-self: stretch;
  }
}

/* ギャラリーで、作品名の下に添えるお客様名（作品名より小さく、補足の文字色。料金ページの制作例は price.css の p-price-client） */
.p-video-client {
  margin-top: -2px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-ink-2);
}