/* ============================================
   page-room.css
   Room detail page styles (JP & EN)
   ============================================ */

.room-detail {
  padding: 40px 0;
}

.room-detail__name {
  text-align: center;
  padding-top: calc(var(--header-height) + var(--space-xl));
  padding-bottom: var(--space-md);
}

.room-detail__name h1 {
  font-size: 20px;
  letter-spacing: 0.15em;
}

.room-detail__floor {
  font-size: var(--text-sm);
  letter-spacing: 0.15em;
  margin-top: var(--space-xs);
}

.room-detail__hero {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: var(--bg, transparent);
}

.room-detail__hero img {
  animation: heroFadeIn 2s ease both;
  width: 939px;
  height: 626px;
  max-width: 100%;
  object-fit: cover;
  object-position: top;
}

.room-detail__desc {
  text-align: center;
  max-width: 560px;
  margin: var(--space-2xl) auto;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.room-detail__photos {
  max-width: 600px;
  margin: 140px auto var(--space-2xl);
}

.room-detail__photos img {
  width: 100%;
  margin-bottom: var(--space-lg);
}

.room-detail__caption {
  text-align: left;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  max-width: 560px;
  margin: 0 auto var(--space-2xl);
}

@media screen and (max-width: 768px) {
  .room-detail__hero img {
    /* 高さを固定せず、画像の比率（横位置）に合わせる */
    height: auto; 
    /* もしSPでも特定の高さにしたい場合は、ここで指定（例: 250px など） */
    aspect-ratio: 3 / 2; /* 画像が 3:2 の横長ならこれを入れるときれいです */
    
    /* アニメーションや幅の指定はPC版を継承（必要なら上書き） */
  }

  .room-detail__photos img {
    /* ギャラリー画像も横位置に合わせて調整が必要な場合 */
    height: auto;
    margin-bottom: var(--space-md);
  }
}