/* ════════════════════════════════════════════════════════
   MaisonVoxel — The Smart Pot (load after site.css)
   Same light-gallery system as the homepage. The page's one
   memorable object is the phone: a CSS miniature of the
   companion app in its real crème theme.
   ════════════════════════════════════════════════════════ */

/* ── Section scaffolding ─────────────────────────────── */
.stap, .sapp, .sritual, .sdoctor, .sgift, .sspecs {
  padding: clamp(4.5rem, 10vw, 9rem) var(--gutter);
}
.sapp > *, .sritual > * { max-width: var(--max); margin-inline: auto; }
.stap, .sdoctor, .sgift, .sspecs {
  display: grid;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
}
.stap p, .sdoctor p, .sgift p { margin-top: 1.5rem; color: var(--moss); max-width: 46ch; }

/* every photo / the video share one treatment */
.stap__media, .sdoctor__img, .sgift__img, .sspecs__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--linen);
}

/* ── Hero (smart-pot specifics) ──────────────────────── */
.shero .hero__title { max-width: 10ch; line-height: 1.05; } /* "p" of pot clears "k" of knows */
.shero .hero__lede { max-width: 38ch; }

/* ── The tap (video loop, image left) ────────────────── */
.stap { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); padding-top: clamp(2.5rem, 6vw, 6rem); }
.stap__media { aspect-ratio: 3 / 4; }

/* ── What a tap opens ────────────────────────────────── */
.sapp { background: var(--linen); }
.sapp__grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: center;
}

/* The phone — the companion app's crème theme in miniature */
.phone {
  width: clamp(15rem, 22vw, 17.5rem);
  aspect-ratio: 9 / 18.5;
  padding: 0.55rem;
  border-radius: 2.4rem;
  background: var(--forest);
  box-shadow: 0 30px 60px rgba(40, 51, 31, 0.22), 0 6px 16px rgba(40, 51, 31, 0.12);
  justify-self: center;
}
.phone__screen {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.4rem 1.1rem 1.1rem;
  border-radius: 1.9rem;
  overflow: hidden;
  background: #f0ede4;
  color: #23281e;
  font-family: var(--font-text);
}
.phone__screen::before { /* camera notch */
  content: "";
  position: absolute; top: 0.55rem; left: 50%;
  translate: -50%;
  width: 5.5rem; height: 1.1rem;
  border-radius: 999px;
  background: var(--forest);
}
.phone__topbar { margin-top: 1.1rem; }
.phone__brand { width: 5.5rem; color: #23281e; } /* the real app shows the wordmark too */
.phone__plant, .phone__sheet, .phone__log {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(30, 33, 27, 0.05), 0 5px 16px rgba(30, 33, 27, 0.07);
}
.phone__plant { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem; }
.phone__avatar { /* the plant's portrait, as in step 3 */
  width: 2.6rem; height: 2.6rem;
  flex: none;
  border-radius: 50%;
  background: #46693a url("../assets/img/smart/smart-blanc.webp") 50% 22% / 230% auto no-repeat;
}
.phone__names { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.phone__names strong { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.phone__names small { font-size: 0.62rem; font-style: italic; color: rgba(35, 40, 30, 0.6); }
.phone__pill {
  align-self: flex-start;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(185, 138, 62, 0.4);
  background: rgba(185, 138, 62, 0.14);
  color: #6f5224;
  font-size: 0.72rem;
}
.phone__streak { font-size: 0.68rem; color: rgba(35, 40, 30, 0.65); }
.phone__sheet { display: flex; flex-direction: column; gap: 0.55rem; padding: 0.8rem 0.9rem; }
.phone__sheet div { display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.72rem; }
.phone__sheet span { flex: none; width: 1.4em; text-align: center; } /* labels line up */
.phone__sheet em, .phone__log em { font-style: normal; color: rgba(35, 40, 30, 0.78); }
.phone__log { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.7rem 0.9rem; font-size: 0.68rem; }
.phone__log div { display: flex; align-items: center; gap: 0.5rem; }
.phone__log i { width: 0.4rem; height: 0.4rem; flex: none; border-radius: 50%; background: var(--brass); }
.phone__btn {
  margin-top: auto;
  padding: 0.7rem;
  border-radius: 999px;
  background: var(--forest);
  color: var(--cream-on-forest);
  text-align: center;
  font-size: 0.74rem;
  font-weight: 600;
}
.phone__tabs {
  display: flex;
  justify-content: space-around;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(35, 40, 30, 0.1);
  font-size: 0.66rem;
  font-weight: 500;
  color: rgba(35, 40, 30, 0.5);
}
.phone__tabs .is-on { color: #23281e; border-bottom: 2px solid var(--brass); padding-bottom: 0.2rem; }

.sfeatures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.25rem) clamp(1.75rem, 4vw, 4rem);
}
.sfeatures li { border-top: 1px solid var(--forest); padding-top: 1.25rem; }
.sfeatures h3 { font-size: 1.5rem; }
.sfeatures p { margin-top: 0.5rem; color: var(--moss); font-size: 0.9375rem; max-width: 36ch; }

/* ── The first tap ───────────────────────────────────── */
.sritual .steps { margin-top: 0; }

/* ── Plant doctor (full-bleed linen band, content on the page grid) ── */
.sdoctor {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  max-width: none;
  padding-inline: max(var(--gutter), (100% - var(--max)) / 2);
  background: var(--linen);
}
.sdoctor .sdoctor__note { font-size: 0.875rem; }

/* ── The gift (image left) ───────────────────────────── */
.sgift { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
.sgift .link { margin-top: 1.25rem; }

/* ── Good to know (image right) ──────────────────────── */
.sspecs { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); padding-top: 0; }
.sspecs__img { order: 1; object-position: 50% 35%; } /* both pots in frame */

/* ── Closing image: keep both pots and the mirror in frame ── */
.smart .finale { object-position: 75% 20%; }

/* ── Footer owner line ───────────────────────────────── */
.sfoot-owner { margin-top: 1.5rem; font-size: 0.9375rem; color: rgba(239, 234, 223, 0.78); }
.sfoot-owner a { color: var(--cream-on-forest); text-underline-offset: 0.25em; }

/* ════ Responsive ════════════════════════════════════ */
@media (max-width: 1080px) {
  .sapp__grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .stap, .sdoctor, .sgift, .sspecs { grid-template-columns: 1fr; }
  /* one column: text and media alternate, so no two photos ever touch */
  .stap__media { order: 1; }
  .sdoctor__img { order: -1; }
  .sspecs__img { order: 0; }
  .stap__media, .sdoctor__img, .sgift__img, .sspecs__img { max-width: 32rem; justify-self: center; }
}

@media (max-width: 640px) {
  .sfeatures { grid-template-columns: 1fr; }
}