/**
 * PEACE About 版型 v012 — 左文右圖／影片（about-media-box）
 * 載入於 peace-home / peace-media-player 之後，避免右欄媒體跑版
 */

/* 無下方三小卡時，縮小區塊底距 */
.ultimate-home .about-section .about-hero {
  margin-bottom: 0 !important;
}

/* 右欄不要置中，避免「大小看起來怪」 */
.ultimate-home .about-hero-visual {
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

@media (max-width: 900px) {
  .ultimate-home .about-hero {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .ultimate-home .about-hero-visual {
    order: -1;
    width: 100%;
    max-width: 100%;
  }
}

.ultimate-home .about-hero-visual .about-media-box {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.ultimate-home .about-media-box--embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 20px;
  background: #0b1424;
  border: 1px solid var(--peace-line, #eadfce);
  box-shadow: 0 12px 32px rgba(27, 39, 62, 0.1);
}

.ultimate-home .about-media-box--embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.ultimate-home .about-media-box--file {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #0b1424;
  border: 1px solid var(--peace-line, #eadfce);
  box-shadow: 0 12px 32px rgba(27, 39, 62, 0.1);
  line-height: 0;
}

.ultimate-home .about-media-box--file .about-media-video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(75vh, 620px);
  margin: 0;
  vertical-align: top;
}

.ultimate-home .about-media-box--image {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--peace-line, #eadfce);
  box-shadow: 0 12px 32px rgba(27, 39, 62, 0.1);
  aspect-ratio: 16 / 9;
  background: #f0ebe3;
}

.ultimate-home .about-media-box--image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ultimate-home .about-media-box--empty {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  border-radius: 20px;
  border: 1px dashed var(--peace-line, #eadfce);
  color: var(--peace-muted, #5a6478);
  font-weight: 700;
  background: linear-gradient(180deg, #fffaf3, #fff2e7);
}

@media (max-width: 900px) {
  .ultimate-home .about-media-box--file .about-media-video {
    max-height: min(70vh, 520px);
  }
}