/* =========================================================
   xxxxnese — components/media.css
   MEDIA SYSTEM — 後から画像を差し込むための共通枠
   ---------------------------------------------------------
   構造:
     <figure class="media media--xxx">
       <div class="media__placeholder">...仮表示...</div>
       <img src="..." class="media__img" />   ← 後から追加
     </figure>

   ポイント:
     - aspect-ratio でレイアウトが先に決まる
     - 画像が入るとプレースホルダーは自動で隠れる（下のルール）
     - object-fit: cover で画像が枠に収まる
   ========================================================= */
.media {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background-color: var(--color-placeholder-bg);
  aspect-ratio: 4 / 3; /* default */
}

/* Variants: aspect ratio */
.media--hero     { aspect-ratio: 16 / 7; }
.media--card     { aspect-ratio: 4 / 3; }
.media--feature  { aspect-ratio: 4 / 5; }
.media--full     { aspect-ratio: 21 / 9; }

.media__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.media__img.is-loaded { opacity: 1; }

/* 画像が入ったときにプレースホルダーを自動で隠す */
.media:has(.media__img) .media__placeholder {
  display: none;
}

/* Placeholder */
.media__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--color-placeholder-ink);
  background-color: var(--color-placeholder-bg);
  /* 薄い対角線パターンで「ここは画像が入る枠」と分かるように */
  background-image: linear-gradient(
    135deg,
    transparent 0,
    transparent 49.5%,
    rgba(0, 0, 0, 0.03) 49.5%,
    rgba(0, 0, 0, 0.03) 50.5%,
    transparent 50.5%,
    transparent 100%
  );
  background-size: 14px 14px;
}

.media__placeholder::before,
.media__placeholder::after {
  content: "";
  position: absolute;
  background: rgba(0, 0, 0, 0.06);
}

.media__placeholder::before {
  top: 16px; left: 16px; right: 16px; height: 1px;
}
.media__placeholder::after {
  bottom: 16px; left: 16px; right: 16px; height: 1px;
}

.media__placeholder-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  font-style: normal;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

.media__placeholder-sub {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.24em;
  font-style: normal;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 1;
}

/* =========================================================
   Responsive — media
   ========================================================= */

/* Mobile */
@media (max-width: 640px) {
  .media--card { aspect-ratio: 4 / 3; }
  .media--feature { aspect-ratio: 4 / 5; }
  .media--full { aspect-ratio: 4 / 3; }

  .media__placeholder-label {
    font-size: 10px;
  }
  .media__placeholder-sub {
    font-size: 9px;
  }
}