/* inSona EU · views/home.css (foundation) — scoped under .v-home */

/* ---------- hero ---------- */
.v-home .hero{padding:32px 0 128px}
.v-home .hero .wrap{display:grid;grid-template-columns:minmax(0,580px) minmax(0,1fr);gap:88px;align-items:start}
/* the text column sits centred against the card (the card itself doesn't move) */
.v-home .hero .copy{order:2;align-self:center}
.v-home .hero .copy p.body{margin-top:28px;max-width:46ch;color:var(--ink-2)}
.v-home .hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
.v-home .hero .fig{order:1}
.v-home .hero .short{display:none}
.v-home .hero .short .s2{display:none}
.v-home .hero .frame{height:min(760px,calc(100vh - 128px));min-height:600px;background:#BFAE9C}
.v-home .hero .frame>img,.v-home .hero .frame>.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 34%;transition:filter var(--t-light) var(--ease-light)}
/* light layers for "First light" (driven by the moment script; inert here) */
.v-home .unband,.v-home .boost,.v-home .predawn{position:absolute;inset:0;pointer-events:none;opacity:0}
.v-home .unband,.v-home .boost{-webkit-mask:url(../../img/hero-bandmask.png) 50% 34%/cover no-repeat;mask:url(../../img/hero-bandmask.png) 50% 34%/cover no-repeat}
.v-home .unband{background:#5A4F49}
.v-home .boost{background:linear-gradient(100deg,#FFD7AE,#FFE6C8);mix-blend-mode:screen}
.v-home .predawn{background:linear-gradient(90deg,rgba(16,22,31,0) 80%,#10161F 90%),radial-gradient(30% 34% at 92% 26%,#1A2232,rgba(26,34,50,0) 100%),linear-gradient(180deg,#2D3A52,#4A5468);mix-blend-mode:multiply}

/* ---------- the day (text column top-aligned to the ring's top tick) ---------- */
.v-home .day{padding-top:120px}
.v-home .day .grid{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:88px;align-items:start}
.v-home .day .txt{padding-top:48px}
.v-home .day .lede{margin-top:20px}
.v-home .day .src{margin-top:28px;font:400 14px/1.5 var(--sans);color:var(--ink-2);max-width:30em}
.v-home .day .sunline{margin-top:10px;font:500 14px/1.5 var(--sans);color:var(--ink)}

/* ring legend: one shared fill; the current scene carries a 2 px amber ring */
.v-home .day .sched i{background:var(--inset)!important}
.v-home .day .sched button[aria-pressed="true"] i,
.v-home .day .sched button[aria-pressed="true"]:hover i{box-shadow:0 0 0 2px #E08A3C}

/* ---------- evidence ---------- */
.v-home .notes{margin-top:32px}
/* the three targets set at one size */
.v-home .rx .v,.v-home .rx .v.sm{font-size:64px;letter-spacing:-1.2px}

/* ---------- rooms ---------- */
.v-home .allrooms{margin-top:20px;font:400 16px/1.4 var(--sans)}

/* ---------- project ---------- */
.v-home .proj h2{font-size:36px;letter-spacing:-.6px;line-height:1.1;margin-top:0}

/* ---------- products: opens on the four names ---------- */
.v-home .ranges{border-top:1px solid var(--line)}
.v-home .ranges li{border-bottom:1px solid var(--line)}
.v-home .ranges a{display:grid;grid-template-columns:1fr auto;gap:6px 24px;padding:20px 12px;margin:0 -12px;text-decoration:none;border-radius:16px;transition:background-color var(--t-ui)}
@media (hover:hover){.v-home .ranges a:hover{background:var(--card)}}
.v-home .ranges h3{font-size:36px;letter-spacing:-.6px;line-height:1.1}
.v-home .ranges p{grid-column:1/-1;color:var(--ink-2);font-size:17px;line-height:27px;max-width:34em}
.v-home .ranges .sp{font:400 14px/1.3 var(--sans);color:var(--ink-2);text-align:right;align-self:center}
.v-home .products .lede{margin-top:28px}

/* ---------- consultation ---------- */
.v-home .consult{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:88px;align-items:start}
.v-home .consult .lede{margin-top:20px}
.v-home .consult .alt{margin-top:28px;font:400 15px/1.5 var(--sans);color:var(--ink-2)}

/* ---------- responsive ---------- */
@media (max-width:1240px){
  .v-home .hero .wrap{gap:56px}
  .v-home .day .grid{gap:48px}
  .v-home .consult{gap:56px}
}
@media (max-width:1100px){
  .v-home .day .grid{grid-template-columns:1fr}
  .v-home .day .txt{padding-top:0}
}
@media (max-width:980px){
  .v-home .hero{padding:20px 0 80px}
  .v-home .hero .wrap{grid-template-columns:1fr;gap:0}
  .v-home .hero .copy{display:contents}
  .v-home .hero h1{order:1}
  .v-home .hero .copy .short{order:2;display:block;margin-top:12px;color:var(--ink-2)}
  .v-home .hero .fig{order:3;margin-top:24px}
  .v-home .hero .copy p.body{order:4;margin-top:32px}
  .v-home .hero .ctas{order:5}
  .v-home .hero .frame{height:auto;min-height:0;display:flex;flex-direction:column}
  .v-home .hero .frame>img,.v-home .hero .frame>.ph{position:relative;height:220px;inset:auto}
  .v-home .unband,.v-home .predawn,.v-home .boost{bottom:auto;height:220px}
  .v-home .hero .frame>.morning{position:relative;left:auto;right:auto;bottom:auto}
  .v-home .day{padding-top:80px}
  .v-home .consult{grid-template-columns:1fr;gap:40px}
}
@media (max-width:600px){
  .v-home .hero .ctas .pill{flex:1 1 auto}
  .v-home .day{padding-top:64px}
  .v-home .ranges h3{font-size:28px}
  .v-home .proj h2{font-size:30px;margin-top:0}
  /* the fold subtitle already says the body's first line: the partner line joins the subtitle, and the body drops out */
  .v-home .hero .copy p.body{display:none}
  .v-home .hero .short .s2{display:inline}
}