/* ==========================================================================
   MODOM — MODOM 36 product page (ATELIER)
   Page-specific: animated stats grid, proportional layout bar + zones,
   build-up layer-card grid. Premium page components come from premium.css,
   shared components from components.css.
   ========================================================================== */

/* --- 03 Parameters — interactive switcher ----------------------------------- */
.params {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2.5rem, 1rem + 5vw, 5.5rem);
  align-items: start;
}
.params__display { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.params__value {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3rem, 2rem + 4.5vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-height: 1em;
  white-space: nowrap;
}
.params__unit { font-size: 0.32em; font-family: var(--sans); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.params__label {
  display: block;
  margin-top: var(--space-16);
  font-size: 0.82rem; font-weight: var(--weight-bold);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
/* Auto-cycle progress underline */
.params__progress {
  display: block;
  margin-top: var(--space-24);
  width: min(260px, 70%);
  height: 2px;
  background: var(--line-warm);
  border-radius: 999px;
  overflow: hidden;
}
.params__progress span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; }
.params__progress span.is-running { animation: params-progress var(--cycle, 3.6s) linear forwards; }
@keyframes params-progress { to { width: 100%; } }

.params__list { list-style: none; }
.params__row {
  width: 100%;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-20);
  padding: var(--space-16) var(--space-8);
  border-bottom: 1px solid var(--line-warm);
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: padding var(--dur-base) var(--ease-out);
}
.params__row::before {
  content: "";
  position: absolute; left: 0; top: 50%; translate: 0 -50%;
  width: 3px; height: 0;
  background: var(--accent); border-radius: 999px;
  transition: height var(--dur-base) var(--ease-out);
}
.params__row-label {
  font-size: 0.95rem; font-weight: var(--weight-bold); letter-spacing: -0.02em;
  color: var(--muted);
  transition: color var(--dur-base);
}
.params__row-val {
  font-family: var(--serif); font-size: 1.05rem; letter-spacing: -0.02em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color var(--dur-base);
}
.params__row:hover .params__row-label { color: var(--ink); }
.params__row.is-active { padding-left: var(--space-16); }
.params__row.is-active::before { height: 60%; }
.params__row.is-active .params__row-label { color: var(--ink); }
.params__row.is-active .params__row-val { color: var(--accent); }

/* --- 04 Layout — proportional plan bar + zone cards ------------------------ */
.dispo__bar {
  display: flex;
  gap: 4px;
  height: 76px;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: clamp(2rem, 1.4rem + 2vw, 3rem);
}
.dispo__seg {
  flex: 0 0 var(--w);
  display: flex; align-items: flex-end;
  padding: var(--space-12) var(--space-16);
  border-radius: 6px;
  transform-origin: left center;
}
.dispo__seg span {
  font-size: 0.8rem; font-weight: var(--weight-bold); letter-spacing: -0.01em;
  color: rgba(23, 20, 17, 0.72);
  white-space: nowrap;
}
.dispo__seg--day   { background: linear-gradient(135deg, #dcc9ae, #c9ad88); }
.dispo__seg--bath  { background: linear-gradient(135deg, #c3cfd8, #9fb4c4); }
.dispo__seg--night { background: linear-gradient(135deg, #cdbfae, #b39a82); }

/* Segments grow once the bar scrolls in (IntersectionObserver adds .is-in) */
.js .dispo__bar .dispo__seg { transform: scaleX(0); transition: transform 1.1s var(--ease-out); }
.js .dispo__bar.is-in .dispo__seg { transform: scaleX(1); }
.js .dispo__bar .dispo__seg:nth-child(2) { transition-delay: 0.25s; }
.js .dispo__bar .dispo__seg:nth-child(3) { transition-delay: 0.45s; }
@media (prefers-reduced-motion: reduce) {
  .js .dispo__bar .dispo__seg { transform: none !important; transition: none; }
}

.dispo__zones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-20);
}
.dispo__zone {
  position: relative;
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  overflow: hidden;
}
.dispo__dot { position: absolute; inset: 0 auto 0 0; width: 6px; }
.dispo__dot--day   { background: linear-gradient(180deg, #dcc9ae, #c9ad88); }
.dispo__dot--bath  { background: linear-gradient(180deg, #c3cfd8, #9fb4c4); }
.dispo__dot--night { background: linear-gradient(180deg, #cdbfae, #b39a82); }
.dispo__zone-head { display: flex; align-items: center; gap: var(--space-16); }
.dispo__zone-head .fc-badge { flex: none; width: 44px; height: 44px; }
.dispo__zone-head .fc-badge i { font-size: 17px; }
.dispo__tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; color: var(--accent); }
.dispo__zone h3 { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; letter-spacing: -0.04em; margin-top: 2px; }
.dispo__zone p { margin-top: var(--space-16); font-size: 0.88rem; font-weight: 600; line-height: 1.55; color: var(--muted); }
.dispo__zones .dispo__zone:nth-child(2) { transition-delay: 90ms; }
.dispo__zones .dispo__zone:nth-child(3) { transition-delay: 180ms; }

.dispo__terrace {
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  display: flex; align-items: center; gap: var(--space-12);
  font-size: 0.92rem; font-weight: 600; color: var(--muted);
}
.dispo__terrace i { color: var(--accent); font-size: 15px; }

/* --- 06 Build-up slider ------------------------------------------------------ */
.bslider { overflow: hidden; }
.bslider__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-24);
  padding: var(--space-20) var(--space-24);
  border-bottom: 1px solid var(--line-warm);
}
.bslider__tabs { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.bslider__tab {
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  background: var(--panel-2);
  color: var(--muted);
  padding: 0.5rem 1rem;
  font-size: 0.8rem; font-weight: var(--weight-bold); letter-spacing: -0.01em;
  cursor: pointer;
  transition: color var(--dur-base), border-color var(--dur-base), background var(--dur-base);
}
.bslider__tab:hover { color: var(--ink); border-color: #c6b49f; }
.bslider__tab.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.bslider__stage {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: stretch;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

/* Cross-section visual — slabs built by JS from the active panel's layers */
.bslider__visual {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-height: 320px;
}
.bslider__slab {
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 6px 16px rgba(46, 35, 27, 0.12), var(--bevel);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.bslider__slab.is-hot { transform: scaleX(1.03); box-shadow: 0 10px 24px rgba(46, 35, 27, 0.2), var(--bevel); }

.bslider__panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  padding-bottom: var(--space-16);
}
.bslider__panel-head h3 { font-family: var(--sans); font-size: 0.96rem; font-weight: 800; letter-spacing: -0.025em; color: var(--ink); }
.bslider__panel .layer { padding-inline: 0; cursor: default; }

/* JS on: one panel at a time; JS off: everything stacked and readable */
.js .bslider__panel { display: none; }
.js .bslider__panel.is-active { display: block; }
.no-js .bslider__bar, html.no-js .bslider__visual { display: none; }
.no-js .bslider__panel + .bslider__panel { margin-top: var(--space-32); }

/* --- Responsive --------------------------------------------------------------- */
@media (max-width: 900px) {
  .params { grid-template-columns: 1fr; gap: var(--space-40); }
  .params__display { margin-top: var(--space-32); }
  .dispo__zones { grid-template-columns: 1fr; }
  .bslider__stage { grid-template-columns: 1fr; }
  .bslider__visual { min-height: 0; }
  .bslider__slab { height: 22px; }
  .bslider__bar { flex-direction: column; align-items: flex-start; gap: var(--space-16); }
  /* Arrows first, tab pills below them */
  .bslider__bar .gslider__nav { order: -1; align-self: flex-end; }
  .dispo__bar { height: 64px; }
}
@media (max-width: 560px) {
  /* Small screens: labels inside segments get tight — keep only the bar */
  .dispo__seg span { font-size: 0.68rem; }
}