/*
 * ラヴカ・リィカ / 制作：みろん
 * 全体の配置・文字の最終調整。style.css の後に読み込む。
 * 立ち絵が準備中でも、画像掲載後と同じ領域を確保する。
 */

/* 左右の重さと、セクション共通の幅・余白を揃える。 */
.hero-inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
}
.hero-copy,
.hero-visual,
.profile-copy {
  min-width: 0;
}
.section {
  padding-block: clamp(80px, 8vw, 112px);
}
.section-heading {
  margin-bottom: 44px;
}
.heading-note {
  display: inline-block;
  font-size: 12px;
}

/* PCはプロフィールを左右同幅に。透過の全身立ち絵も窮屈にしない。 */
.profile-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 64px);
  align-items: center;
}
.portrait-placeholder {
  width: 100%;
  max-width: none;
  height: clamp(600px, 53vw, 680px);
  min-height: 0;
  margin: 0;
}
.portrait-placeholder strong {
  font-size: clamp(34px, 3.6vw, 48px);
  line-height: 1.25;
}
/* 立ち絵受領後は、この枠内へ画像を置けば切らずに全身を収められる。 */
.portrait-placeholder > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
.profile-copy h3 {
  margin: 20px 0;
  font-size: clamp(25px, 2.5vw, 30px);
  letter-spacing: .07em;
}
.bio {
  font-size: 14px;
  line-height: 2.3;
  margin-bottom: 28px;
}
.facts > div {
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 18px;
  padding-block: 17px;
}
.facts dt { font-size: 10px; }
.facts dd { font-size: 13px; overflow-wrap: anywhere; }
.profile-soon { font-size: 11px; }
.visual-previews { margin-top: 44px; }

/* 短い案内文・リンク名の大小を、各欄で統一。 */
.stream-intro { margin-top: 0; }
.stream-intro p span,
.platform-link small,
.social-caption { font-size: 12px; }
.movie-placeholder p { font-size: 12px; }
.contact-note { margin-top: 44px; }

/* タブレットでは、立ち絵とプロフィールを細い2列に押し込まない。 */
@media (min-width: 701px) and (max-width: 900px) {
  .profile-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }
  .portrait-placeholder {
    max-width: 560px;
    height: 640px;
    margin-inline: auto;
  }
  .profile-copy {
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
  }
}

@media (max-width: 700px) {
  .hero { padding-bottom: 104px; }
  .hero-inner { gap: 12px; }
  .hero-visual {
    width: 100%;
    height: 380px;
    margin: 12px 0 0;
  }
  .hero-sd { height: 310px; }
  .sonar-one {
    width: min(320px, 82vw);
    height: min(320px, 82vw);
    max-width: 100%;
  }
  .sonar-two {
    width: min(250px, 64vw);
    height: min(250px, 64vw);
  }
  .hero-signature { width: 94px; right: 0; bottom: 0; }
  .visual-tag { left: 0; bottom: 24px; }
  .cross-top { right: 0; top: 16px; }
  .cross-bottom { left: 0; bottom: 28px; }
  .section { padding-block: 68px; }
  .section-heading { margin-bottom: 32px; }
  .section-heading h2 {
    font-size: clamp(23px, 6.2vw, 28px);
    letter-spacing: .07em;
  }
  .heading-note { font-size: 11px; }
  .profile-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .portrait-placeholder {
    width: 100%;
    max-width: none;
    height: clamp(460px, 132vw, 620px);
    margin: 0;
  }
  .portrait-placeholder strong { font-size: 36px; }
  .profile-copy h3 { font-size: 26px; }
  .bio { font-size: 13px; line-height: 2.25; }
  .facts > div {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 14px;
    padding-block: 16px;
  }
  .facts dd { font-size: 12px; }
  .visual-previews { margin-top: 36px; }
  .stream-intro { padding-bottom: 24px; gap: 12px; }
  .stream-intro p span,
  .platform-link small,
  .social-caption,
  .movie-placeholder p { font-size: 11px; }
  .stream-intro img { flex-shrink: 0; }
  .contact-note { margin-top: 36px; }
}

@media (max-width: 370px) {
  .hero-visual { width: 100%; height: 330px; margin: 8px 0 0; }
  .hero-sd { height: 270px; }
  .hero-signature { width: 78px; }
  .facts > div { grid-template-columns: 74px minmax(0, 1fr); gap: 12px; }
}