/* metro-grid — 타일 구도(초점·줌).
   격자/타일 크기 자체는 테마가 정한다(--bsp-* 토큰). 여기서는 항목별 구도만 책임진다.
   block.php 가 기본값이 아닐 때만 --bsp-metro-x/y/z 를 인라인으로 붙이므로,
   값이 없으면 중앙 기준 100%(=기존 동작)로 떨어진다. */
.bsp-metro__item {
  overflow: hidden;
}
.bsp-metro__item > img,
.bsp-metro__item > video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: var(--bsp-metro-x, 50%) var(--bsp-metro-y, 50%);
  transform: scale(var(--bsp-metro-z, 1));
  transform-origin: var(--bsp-metro-x, 50%) var(--bsp-metro-y, 50%);
}

/* ── 줄(밴드) 배치 ─────────────────────────────────────────────
   마크업은 타일 순서만 갖고, 배치는 여기서 레이아웃 프리셋별로 결정한다.
   단위 u = (컨테이너 폭 - 3gap) / 4 — 4칸 격자의 1칸. cqw 기반이라 풀블리드에서도 정확. */
.bsp-metro > .bsp-wrap { container-type: inline-size; }
.bsp-metro__bands {
  --gap: clamp(.5rem, 1.2cqw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.bsp-metro__band {
  --u: calc((100cqw - 3 * var(--gap)) / 4);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}
/* two-up — 대형 2 (각 2×2) */
.bsp-metro__band--two-up { grid-auto-rows: auto; }
.bsp-metro__band--two-up .bsp-metro__item { grid-column: span 2; grid-row: span 2; }
/* feature-left — 좌 대형 + 우상 소2 + 우하 와이드 */
.bsp-metro__band--feature-left { grid-auto-rows: auto; }
.bsp-metro__band--feature-left .bsp-metro__item:nth-child(1) { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.bsp-metro__band--feature-left .bsp-metro__item:nth-child(2) { grid-column: 3; grid-row: 1; }
.bsp-metro__band--feature-left .bsp-metro__item:nth-child(3) { grid-column: 4; grid-row: 1; }
.bsp-metro__band--feature-left .bsp-metro__item:nth-child(4) { grid-column: 3 / span 2; grid-row: 2; }
/* feature-right — 미러 */
.bsp-metro__band--feature-right { grid-auto-rows: auto; }
.bsp-metro__band--feature-right .bsp-metro__item:nth-child(1) { grid-column: 3 / span 2; grid-row: 1 / span 2; }
.bsp-metro__band--feature-right .bsp-metro__item:nth-child(2) { grid-column: 1; grid-row: 1; }
.bsp-metro__band--feature-right .bsp-metro__item:nth-child(3) { grid-column: 2; grid-row: 1; }
.bsp-metro__band--feature-right .bsp-metro__item:nth-child(4) { grid-column: 1 / span 2; grid-row: 2; }
/* full — 풀와이드 16:9 */
.bsp-metro__band--full { grid-template-columns: minmax(0, 1fr); }

/* quad — 소 4 (자동 배치, 각 1×1) */
.bsp-metro__band--quad { grid-auto-rows: auto; }
/* wide-pair — 와이드 2 (각 2×1) */
.bsp-metro__band--wide-pair { grid-auto-rows: auto; }
.bsp-metro__band--wide-pair .bsp-metro__item { grid-column: span 2; }

@media (max-width: 720px) {
  .bsp-metro__band { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  /* :nth-child(n) — 위 프리셋 배치 규칙과 동일 특이성으로 맞춰 뒤에서 이긴다 */
  .bsp-metro__band .bsp-metro__item:nth-child(n) { grid-column: auto; grid-row: auto; }
  .bsp-metro__band--full .bsp-metro__item:nth-child(n) { grid-column: 1 / -1; }
}

/* ── 블록 = 줄 하나 — 단독 밴드에도 gap 변수 부여, 연속 metro 블록은 줄 간격으로 붙인다 ── */
.bsp-metro__band { --gap: clamp(.5rem, 1.2cqw, 1.5rem); }
.bsp-metro:has(+ .bsp-metro) { padding-block-end: 0; }
.bsp-metro + .bsp-metro { padding-block-start: clamp(.5rem, 1.2vw, 1.5rem); }

/* ── 원본 비율(타일별) — 셀 형태는 유지하고 이미지를 자르지 않는다(구도 조정 미적용).
   이미지는 셀 상단에 붙고, 남는 공간은 배경 없이 비워 둔다. ── */
.bsp-metro__item--natural {
  background: none;
  border-radius: 0;
}
.bsp-metro__item--natural > img,
.bsp-metro__item--natural > video {
  height: auto;
  object-fit: fill;
  object-position: center top;
  transform: none;
}

/* ── tall — 좌(우) 대형 + 반대편 2×2 소형 4 (슬롯 5).
   행 구조 [u, u, auto]: 소형 2×2 는 위 두 행(정사각)에 밀착되고,
   대형만 3행을 차지해 자기 비율(9:16 등)만큼 아래로 길어진다(잉여는 3행이 흡수). ── */
.bsp-metro__band--tall-left,
.bsp-metro__band--tall-right { grid-auto-rows: auto; }
.bsp-metro__band--tall-left .bsp-metro__item:nth-child(1) { grid-column: 1 / span 2; grid-row: 1 / span 3; }
.bsp-metro__band--tall-left .bsp-metro__item:nth-child(2) { grid-column: 3; grid-row: 1; }
.bsp-metro__band--tall-left .bsp-metro__item:nth-child(3) { grid-column: 4; grid-row: 1; }
.bsp-metro__band--tall-left .bsp-metro__item:nth-child(4) { grid-column: 3; grid-row: 2; }
.bsp-metro__band--tall-left .bsp-metro__item:nth-child(5) { grid-column: 4; grid-row: 2; }
.bsp-metro__band--tall-right .bsp-metro__item:nth-child(1) { grid-column: 3 / span 2; grid-row: 1 / span 3; }
.bsp-metro__band--tall-right .bsp-metro__item:nth-child(2) { grid-column: 1; grid-row: 1; }
.bsp-metro__band--tall-right .bsp-metro__item:nth-child(3) { grid-column: 2; grid-row: 1; }
.bsp-metro__band--tall-right .bsp-metro__item:nth-child(4) { grid-column: 1; grid-row: 2; }
.bsp-metro__band--tall-right .bsp-metro__item:nth-child(5) { grid-column: 2; grid-row: 2; }

/* ── 고정 비율(타일별) — 지정 비율 박스로 표시(cover 크롭·구도 유지), 상단 정렬·배경 없음 ── */
.bsp-metro__item--ar {
  background: none;
}
.bsp-metro__item--ar > .bsp-metro__arbox {
  display: block;
  width: 100%;
  aspect-ratio: var(--bsp-metro-ar, auto);
  overflow: hidden;
}
.bsp-metro__item--ar .bsp-metro__arbox > img,
.bsp-metro__item--ar .bsp-metro__arbox > video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: var(--bsp-metro-x, 50%) var(--bsp-metro-y, 50%);
  transform: scale(var(--bsp-metro-z, 1));
  transform-origin: var(--bsp-metro-x, 50%) var(--bsp-metro-y, 50%);
}

/* ── tower — 좌(우) 세로 대형(전 행) + 반대편 위 정사각(2×2)·아래 와이드(2×1). 슬롯 3.
   행 [u,u,u,auto]: 기본 상태에서 세로 대형 = 3u+2g(자연 포트레이트), 비율 지정 시 auto 행이 흡수 ── */
.bsp-metro__band--tower-left,
.bsp-metro__band--tower-right { grid-auto-rows: auto; }
.bsp-metro__band--tower-left .bsp-metro__item:nth-child(1) { grid-column: 1 / span 2; grid-row: 1 / span 4; }
.bsp-metro__band--tower-left .bsp-metro__item:nth-child(2) { grid-column: 3 / span 2; grid-row: 1 / span 2; }
.bsp-metro__band--tower-left .bsp-metro__item:nth-child(3) { grid-column: 3 / span 2; grid-row: 3; }
.bsp-metro__band--tower-right .bsp-metro__item:nth-child(1) { grid-column: 3 / span 2; grid-row: 1 / span 4; }
.bsp-metro__band--tower-right .bsp-metro__item:nth-child(2) { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.bsp-metro__band--tower-right .bsp-metro__item:nth-child(3) { grid-column: 1 / span 2; grid-row: 3; }

/* 모바일 — 밴드 프리셋 해제, 1단 스택. (프리셋과 동일 specificity 로 뒤에 선언해 승리) */
@media (max-width: 720px) {
  .bsp-metro__band[class] {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }
  .bsp-metro__band[class] .bsp-metro__item {
    grid-column: auto;
    grid-row: auto;
  }
}