/* =========================================================================
   STUDIO FOR RENT — inner page
   Hero/crumb/consult come from vbs.css / folds.css (shared, unmodified).
   Each list section below uses a different visual language on purpose —
   icon tiles, a tick checklist, a numbered strip, a chip cloud, plan
   cards — so the page doesn't read as the same icon grid repeated five
   times. The two real photos are fixed-height so they line up regardless
   of their native aspect ratio.
   ========================================================================= */

.vbs-hero .sfr-hero-body {
  margin: -1.25rem 0 1.25rem;
  max-width: 58ch;
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--ink-mid);
}
.sfr-hero-addr {
  display: flex;
  align-items: flex-start;
  gap: 0.55em;
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
  max-width: 42ch;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-quiet);
}
.sfr-hero-addr svg { flex: none; width: 1.1em; height: 1.1em; margin-top: 0.15em; color: var(--gold); }

/* --- shared section chrome ---------------------------------------------------
   This page stacks six content sections back to back, not the two or three
   a homepage fold has room for — the shared --fold-y (up to 6.5rem top and
   bottom, so ~13rem between two sections) reads as excessive at that
   density. A tighter, page-local rhythm keeps the sections distinct without
   the page turning into mostly whitespace. */
.sfr-section {
  position: relative;
  padding: clamp(2.25rem, 4.5vw, 3.75rem) var(--gutter);
  background: var(--void);
}
.sfr-section--alt { background: var(--surface); }
.sfr-section-inner { max-width: var(--page); margin: 0 auto; }
.sfr-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 clamp(1.25rem, 2.5vw, 1.875rem);
}
.sfr-h {
  margin: 0;
  font-family: var(--font-poster);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.005em;
  color: var(--ink);
}
.sfr-h--sm { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.sfr-sub { margin: 0.5rem 0 0; max-width: 46ch; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-quiet); }

/* --- real-photo showcase, right under the hero -----------------------------
   Fixed height (not aspect-ratio) on purpose: the poster and the gear photo
   are different native shapes, and a percentage aspect-ratio scales with
   each column's own width — on unequal columns that makes the two boxes
   different heights. A shared clamp() height keeps them identical at every
   viewport regardless of column width or source image shape. */
.sfr-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.sfr-gallery-figure {
  margin: 0;
  position: relative;
  height: clamp(220px, 28vw, 340px);
  overflow: hidden;
  border-radius: var(--r-md);
  border: var(--hair) solid rgba(var(--white-rgb), 0.13);
}
.sfr-gallery-figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease); }
.sfr-gallery-figure:hover img { transform: scale(1.045); }
.sfr-gallery-figure figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.5rem 1.25rem 1rem;
  font-size: var(--fs-nano);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72));
}

/* --- icon-tile feature grid (Why Choose / Why Professionals only) ---------- */
.sfr-tiles {
  display: grid;
  grid-template-columns: repeat(var(--sfr-cols, 2), minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 1px;
  background: rgba(var(--white-rgb), 0.1);
  border: var(--hair) solid rgba(var(--white-rgb), 0.1);
  border-radius: var(--r-md);
  overflow: hidden;
}
.sfr-tile {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 4.75rem;
  padding: clamp(1rem, 2vw, 1.35rem);
  background: var(--void);
  transition: background-color var(--t-1) var(--ease);
}
.sfr-section--alt .sfr-tile { background: var(--surface); }
.sfr-tile:hover { background: rgba(var(--gold-rgb), 0.07); }
.sfr-tile-ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: rgba(var(--gold-rgb), 0.12);
  color: var(--gold);
}
.sfr-tile-ico svg { width: 1.2rem; height: 1.2rem; }
.sfr-tile span { font-size: var(--fs-sm); line-height: 1.4; color: var(--ink); }

/* red variant — used on "Why Choose Our Studio?" only, to set it apart from
   the gold icon tiles used elsewhere on the page */
.sfr-tiles--red .sfr-tile-ico { background: rgba(var(--brand-rgb), 0.16); color: var(--brand-lit); }
.sfr-tiles--red .sfr-tile:hover { background: rgba(var(--brand-rgb), 0.09); }

/* --- real photo + tick checklist (What the Space Offers) -------------------
   .course-list is the homepage's own checklist bullet (folds.css, used on
   the course cards) — reused here next to a real studio photo, so this
   section reads as plain text-and-photo rather than another icon grid. */
.sfr-offers-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.sfr-offers-media {
  margin: 0;
  height: clamp(260px, 32vw, 380px);
  overflow: hidden;
  border-radius: var(--r-md);
  border: var(--hair) solid rgba(var(--white-rgb), 0.13);
}
.sfr-offers-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sfr-checklist {
  columns: 2;
  column-gap: clamp(2rem, 4vw, 3.5rem);
}
.sfr-offers-grid .sfr-checklist { columns: 1; }
.sfr-checklist li { break-inside: avoid; }

/* --- numbered strip (Available Use Cases), in the same bordered-panel
   language as the chip-cloud panel above it, rather than five numbers
   floating loose on the page background ---------------------------------- */
.sfr-nums-panel {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: rgba(var(--white-rgb), 0.1);
  border: var(--hair) solid rgba(var(--white-rgb), 0.1);
  border-radius: var(--r-md);
  overflow: hidden;
}
.sfr-num {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  background: var(--void);
  transition: background-color var(--t-1) var(--ease);
}
.sfr-num:hover { background: rgba(var(--gold-rgb), 0.07); }
.sfr-num-i {
  margin: 0;
  font-family: var(--font-poster);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 400;
  color: var(--gold);
}
.sfr-num-body { margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink); }

/* --- pill / chip cloud, in a bordered panel --------------------------------
   A plain two-column list of headings and pills on the bare page background
   read as unfinished — nothing anchored it as a section. Wrapping both
   columns in one bordered panel, with a divider and a colour-coded accent
   bar per heading (gold for "suitable for", red for "ideal for"), gives it
   the same visual weight as the icon-tile and plan-card sections. */
.sfr-eyebrow-wrap { display: flex; justify-content: center; margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem); }
.sfr-suitable-panel {
  border: var(--hair) solid rgba(var(--white-rgb), 0.12);
  border-radius: var(--r-md);
  background: rgba(var(--white-rgb), 0.025);
  overflow: hidden;
}
.sfr-chip-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sfr-chip-col { padding: clamp(1.75rem, 3.5vw, 2.75rem); }
.sfr-chip-col + .sfr-chip-col { border-left: var(--hair) solid rgba(var(--white-rgb), 0.12); }
.sfr-chip-col-h { display: flex; align-items: center; gap: 0.75rem; }
.sfr-chip-col-h::before { content: ''; flex: none; width: 3px; height: 1.5em; border-radius: 2px; background: var(--gold); }
.sfr-chip-col:last-child .sfr-chip-col-h::before { background: var(--brand-lit); }
.sfr-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.35rem 0 0; padding: 0; list-style: none; }
.sfr-chip {
  padding: 0.55em 1.1em;
  border: var(--hair) solid rgba(var(--white-rgb), 0.18);
  border-radius: var(--r-pill);
  font-size: var(--fs-nano);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-mid);
  background: rgba(var(--white-rgb), 0.03);
  transition: border-color var(--t-1) var(--ease), color var(--t-1) var(--ease);
}
.sfr-chip:hover { border-color: rgba(var(--gold-rgb), 0.55); color: var(--ink); }

/* --- rental plan cards --------------------------------------------------------- */
.sfr-plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.8vw, 1.35rem);
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}
.sfr-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  padding: clamp(1.5rem, 2.6vw, 2rem) clamp(1.25rem, 2.4vw, 1.75rem) clamp(1.25rem, 2.4vw, 1.75rem);
  border: var(--hair) solid rgba(var(--white-rgb), 0.14);
  border-radius: var(--r-md);
  background: rgba(var(--white-rgb), 0.025);
  overflow: hidden;
  transition: border-color var(--t-1) var(--ease), transform var(--t-1) var(--ease);
}
/* the same gold-to-red accent used on the "who it's for" panel, so the two
   redesigned sections read as one system rather than two one-off ideas */
.sfr-plan::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--brand-lit));
}
.sfr-plan:hover { border-color: rgba(var(--gold-rgb), 0.5); transform: translateY(-3px); }
.sfr-plan-ico {
  display: flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background: rgba(var(--gold-rgb), 0.12);
  color: var(--gold);
}
.sfr-plan-ico svg { width: 1.3rem; height: 1.3rem; }
.sfr-plan-h { margin: 0; font-family: var(--font-poster); font-size: 1.05rem; font-weight: 400; color: var(--ink); }

@media (max-width: 900px) {
  .sfr-chip-groups { grid-template-columns: minmax(0, 1fr); }
  .sfr-chip-col + .sfr-chip-col { border-left: 0; border-top: var(--hair) solid rgba(var(--white-rgb), 0.12); }
  .sfr-offers-grid { grid-template-columns: minmax(0, 1fr); }
  .sfr-nums-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .sfr-gallery-grid { grid-template-columns: minmax(0, 1fr); }
  .sfr-gallery-figure { height: clamp(200px, 55vw, 280px); }
  .sfr-offers-media { height: clamp(200px, 55vw, 280px); }
  .sfr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sfr-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sfr-checklist { columns: 1; }
  .sfr-nums-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .sfr-tiles { grid-template-columns: minmax(0, 1fr) !important; }
  .sfr-plans { grid-template-columns: minmax(0, 1fr); }
  .sfr-nums-panel { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .sfr-gallery-figure img, .sfr-plan { transition: none; }
}