/* media — 全幅画像セクション2種
   p-media-cover  : img 1440x560（Figma 3191:33050）
   p-media-collage: img 1440x934 コラージュ（Figma 3191:33449） */

/* --- p-media-cover --- */
.p-media-cover__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 560; /* Figma実測 */
  object-fit: cover;
}

/* 高さ違い（Figma実測: 事業紹介 3191:24150 は 640、下層FV下は 420） */
.p-media-cover--h640 .p-media-cover__image { aspect-ratio: 1440 / 640; }
.p-media-cover--h420 .p-media-cover__image { aspect-ratio: 1440 / 420; }

/* --- p-media-collage --- */
.p-media-collage {
  display: flex;
  flex-direction: column;
}

.p-media-collage__top {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 420; /* Figma実測 1440×420 */
  object-fit: cover;
}

.p-media-collage__grid {
  display: flex;
  gap: var(--space-8);
  padding-top: var(--space-8);
  background: var(--color-primary); /* #3E3A39 */
}

.p-media-collage__main {
  flex: 1;
  min-width: 0;
}

.p-media-collage__main img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 718 / 508; /* Figma実測 */
  object-fit: cover;
  object-position: bottom;
}

.p-media-collage__column {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.p-media-collage__row {
  display: flex;
  gap: var(--space-8);
}

/* 3枚を等幅で分割（Figma: flex 1 0 0）。
   img は width/height 属性を持つため height を明示しないと属性値が効いて
   aspect-ratio が無視される（縦が原寸のまま伸びる）。height: auto は必須。 */
.p-media-collage__row img {
  display: block;
  flex: 1;
  min-width: 0;
  height: auto;
  aspect-ratio: 505 / 357; /* Figma実測 */
  object-fit: cover;
}

/* 残りの高さを埋める枠（Figma: flex 1 0 0）。
   中の img は absolute。static のままだと img の実寸高さが
   カラムの内在高さに加算され、左の大画像（718/508）より縦が伸びてしまう。 */
.p-media-collage__wide {
  position: relative;
  flex: 1;
  min-height: 0;
}

.p-media-collage__wide img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- SP（767px以下・inferred: SPフレーム未提供のため暫定） --- */
@media (max-width: 767px) {
  .p-media-collage__grid {
    flex-direction: column;
  }

  /* 縦積みでは「残りの高さ」が無くなるため、枠自体を比率で持たせる */
  .p-media-collage__wide {
    flex: none;
    aspect-ratio: var(--ratio-2-1);
  }
}