/* Rental space page (/rental-spaces/) variants of the shared components.
   Page Hero, sections, tables and lists have one definition in site.css. */

/* Hero: copy left, main photo right; price and button under the copy */
.rs-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  grid-template-areas:
    "copy photo"
    "book photo";
  column-gap: 56px;
  align-items: start;
}
.rs-hero-copy { grid-area: copy; min-width: 0; }
.rs-hero-photo { grid-area: photo; min-width: 0; margin: 0; }
.rs-hero-book { grid-area: book; min-width: 0; }
.rs-hero .page-hero .label,
.rs-hero .label { margin-bottom: 40px; }
.rs-hero h1 { max-width: none; font-size: clamp(30px, 3.1vw, 40px); }
.rs-nowrap { display: inline-block; }
.rs-hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.42;
  object-fit: cover;
  object-position: 50% 30%;
  background: var(--soft);
}
.rs-facts {
  display: flex;
  flex-wrap: wrap;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.7;
}
.rs-facts li + li::before { content: "／"; margin: 0 .35em; }
.rs-price { margin: 40px 0 0; }
.rs-price strong {
  display: block;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.5;
}
.rs-price span { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; }
.rs-hero-btn { margin: 28px 0 0; }
.rs-hero-book .fine-note { margin-top: 14px; }

/* In-page links */
.rs-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin: 0 0 56px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.rs-jump .text-link { font-size: 13px; }
.rs-basics { padding-top: 56px; }

/* Use-case blocks: photo and text side by side, alternating */
.rs-use {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  padding: 88px 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 96px;
}
.rs-use:first-child { padding-top: 0; border-top: 0; }
.rs-use:last-child { padding-bottom: 0; }
.rs-use--flip .rs-use-photo { order: 2; }
.rs-use-photo { min-width: 0; margin: 0; }
.rs-use-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 2px;
  background: var(--soft);
}
.rs-use-photo figcaption { margin-top: 10px; color: var(--muted); font-size: 12px; letter-spacing: .04em; }
.rs-use-body { min-width: 0; }
.rs-use-body .label { margin-bottom: 18px; }
.rs-use-body h2 {
  margin: 0 0 20px;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.55;
  font-weight: 600;
  letter-spacing: .025em;
}
.rs-use-text { margin: 0 0 28px; color: var(--muted); font-size: 15px; line-height: 2; }
.rs-use-body .fine-note { margin-top: 14px; }
#basics, #facility, #access, #voice { scroll-margin-top: 76px; }

/* Voice + mid-page CTA */
.section-intro p.rs-review-link { margin-top: 18px; }
.rs-voice-list { margin-top: 20px; }
.rs-cta { margin-top: 44px; }
.rs-cta .fine-note { margin-top: 14px; }

/* Facility photos below the lists */
.rs-facility-photos { margin-top: 56px; }

/* Mobile fixed booking bar: hidden until JS shows it, desktop never shows it */
.rs-sticky { display: none; }

@media (max-width: 820px) {
  .rs-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "copy"
      "photo"
      "book";
    row-gap: 0;
  }
  .rs-hero-photo { margin-top: 36px; }
  .rs-hero-photo img { aspect-ratio: 2.1; }
  .rs-price { margin-top: 32px; }
  .rs-use { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 64px 0; }
  .rs-use--flip .rs-use-photo { order: 0; }
}

@media (max-width: 620px) {
  .rs-hero .label { margin-bottom: 28px; }
  .rs-hero h1 { font-size: 30px; }
  .rs-hero .page-lede { font-size: 15px; }
  .rs-hero-photo { margin-top: 30px; }
  .rs-hero-photo img { aspect-ratio: 1.65; }
  .rs-price strong { font-size: 22px; }
  .rs-jump { gap: 10px 22px; margin-bottom: 44px; }
  .rs-basics { padding-top: 40px; }
  .rs-use { padding: 52px 0; scroll-margin-top: 116px; }
  .rs-use-body h2 { font-size: 23px; }
  #basics, #facility, #access, #voice { scroll-margin-top: 106px; }
  .rs-facility-photos { margin-top: 44px; }

  .rs-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(247, 247, 245, .96);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
  }
  .rs-sticky[hidden] { display: none; }
  .rs-sticky-price { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
  .rs-sticky-price span { display: block; }
  .rs-sticky .btn { flex-shrink: 0; padding: 14px 20px; font-size: 12.5px; }
  /* 固定バーの実高さはJSが --rs-sticky-h に入れる(文字拡大・折り返し時も本文が隠れない) */
  html.has-sticky-cta { scroll-padding-bottom: calc(var(--rs-sticky-h, 80px) + 16px); }
  html.has-sticky-cta body { padding-bottom: var(--rs-sticky-h, 80px); }
}

@media (max-width: 360px) {
  /* 狭い幅では料金とボタンを縦に並べ、どちらも隠れないようにする */
  .rs-sticky { flex-direction: column; align-items: stretch; gap: 8px; }
  .rs-sticky-price span { display: inline; }
  .rs-sticky-price span + span::before { content: "／"; margin: 0 .3em; }
  .rs-sticky .btn { justify-content: center; }
}