/* inSona EU · views/markets.css · area B (scoped under .v-markets)
   New local pieces, both drawn from the brand idea (the day as light on a wall):
   .dtrack  the day as a 24 h rail (unlit at night, the four published scenes by day) with the 2×22 px sun-line at the room's hour
   .hlist   the market's four hours as pressable rows that turn the day ring */

.v-markets .crumbs-wrap{padding-top:28px}

/* ---------- the day rail ---------- */
.v-markets .dtrack{position:relative;height:30px;margin-top:10px}
.v-markets .dtrack .rail{position:absolute;left:0;right:0;top:14px;height:6px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(60,30,10,.08)}
.v-markets .dtrack .sun{position:absolute;top:6px;left:var(--p,30%);width:2px;height:22px;margin-left:-1px;background:#FBF6F2;border-radius:1px;box-shadow:0 0 0 1px rgba(43,38,34,.45),0 2px 6px rgba(60,30,15,.25);transition:left var(--t-light) var(--ease-light)}
.v-markets .dscale{display:flex;justify-content:space-between;font:400 12px/1 var(--sans);color:var(--ink-3);margin-top:4px}

/* ======================= overview ======================= */
.v-markets .mk-rooms{padding-top:40px}
.v-markets .mk-rooms h1{max-width:9em}
.v-markets .mk-lede{margin:24px 0 40px}
.v-markets .mk-rooms .rooms{align-items:start}
.v-markets .mk-rooms .fcol{position:sticky;top:96px}
.v-markets .mk-rooms .frame>img,.v-markets .mk-rooms .frame>.ph{transition:opacity .3s ease}
.v-markets .mk-rooms .rlist a{grid-template-columns:minmax(0,1fr) auto 14px}
.v-markets .mk-rooms .rlist .go{grid-row:1/3;grid-column:3;align-self:center;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-15px;color:var(--ink-2);transition:color var(--t-ui),transform var(--t-ui)}
.v-markets .mk-rooms .rlist .go svg{width:14px;height:10px}
.v-markets .mk-rooms .rlist a.on .go{color:var(--ink)}
@media (hover:hover){.v-markets .mk-rooms .rlist a:hover .go{transform:translateX(3px)}}
/* the day readout is the frame's foot (a .morning card, 24 px in), with the photo's tag sitting just above it */
.v-markets .mk-rooms .rooms .frame{display:flex;flex-direction:column;justify-content:flex-end}
.v-markets .mk-rooms .rooms .frame>.tag{position:relative;left:auto;bottom:auto;align-self:flex-start;margin:0 16px 16px}
.v-markets .mk-rooms .frame>.mk-under{position:relative;left:auto;right:auto;bottom:auto;padding:20px 24px 18px}
.v-markets .mk-under .dtrack{margin-top:6px}
.v-markets .mk-now{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.v-markets .mk-now b{font:300 30px/1 var(--sans);letter-spacing:-.4px}
.v-markets .mk-now span{font:400 15px/1.35 var(--sans);color:var(--ink-2)}
.v-markets .mk-hint{margin-top:14px;max-width:42em}

/* ---------- closing consultation band (overview + every market) ---------- */
.v-markets .mk-close{padding-top:56px}
.v-markets .band{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px 64px;align-items:end;background:var(--card);border-radius:var(--r-frame);box-shadow:var(--sh);padding:56px 64px}
.v-markets .band .lede{margin-top:16px;max-width:38em}
.v-markets .band .cnote{display:flex;align-items:center;gap:12px;margin-top:18px;font:500 15px/1.4 var(--sans);color:var(--ink)}
.v-markets .band .cnote .bandi,.v-markets .band .cnote svg{flex:none}
.v-markets .band .alt{margin-top:20px;font:400 15px/1.5 var(--sans);color:var(--ink-2)}
.v-markets .band .acts{display:flex;gap:12px;flex-wrap:wrap}

/* ======================= market page ======================= */
/* ---------- hero: copy left, the room right with its card as the frame's foot ---------- */
.v-markets .mk-hero{padding:24px 0 64px}
.v-markets .sec{padding:64px 0}
.v-markets .mk-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,620px);gap:88px;align-items:start}
.v-markets .mk-hero .copy{padding-top:64px}
.v-markets .mk-hero h1{max-width:9.5em}
.v-markets .mk-hero .lede{margin-top:28px;max-width:30em}
.v-markets .mk-hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
.v-markets .mk-hero .frame{height:min(700px,calc(100vh - 170px));min-height:580px}
.v-markets .mk-hero .frame>img,.v-markets .mk-hero .frame>.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v-markets .mk-card .now{min-height:0;margin-top:8px}
.v-markets .mk-card .k em{margin-left:8px}
.v-markets .mk-card .dtrack{margin-top:6px}
.v-markets .mk-photo{margin-top:10px;font:400 13px/1.35 var(--sans);color:var(--ink-2)}
.v-markets .mk-card .honest{margin-top:4px}

/* ---------- by the hour: four rows that turn the ring ---------- */
.v-markets .mk-hours .grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:88px;align-items:start}
.v-markets .mk-hours .txt{padding-top:28px}
.v-markets .mk-hours .lede{margin-top:20px}
.v-markets .hlist{margin-top:36px;border-top:1px solid var(--line)}
.v-markets .hlist li{border-bottom:1px solid var(--line);padding:4px 0}
.v-markets .hlist li>*{position:relative}
.v-markets .hlist button{width:100%;display:grid;grid-template-columns:76px 44px minmax(0,1fr);gap:4px 20px;align-items:center;text-align:left;padding:14px 16px;border-radius:16px;transition:background-color var(--t-ui)}
.v-markets .hlist .tm{font:300 28px/1 var(--sans);letter-spacing:-.4px}
.v-markets .hlist i{display:block;width:44px;height:10px;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(60,30,10,.08);transition:box-shadow var(--t-ui)}
.v-markets .hlist .tx{display:block}
.v-markets .hlist .tx .sc{display:block;font:400 13px/1.3 var(--sans);color:var(--ink-2)}
.v-markets .hlist .tx b{display:block;font:500 17px/1.35 var(--sans);color:var(--ink);margin-top:2px}
.v-markets .hlist .cp{margin:-4px 0 0;padding:0 16px 16px 176px;font:400 16px/1.55 var(--serif);color:var(--ink-2);max-width:none}
.v-markets .hlist li{position:relative}
.v-markets .hlist li:before{content:"";position:absolute;inset:4px 0;border-radius:16px;background:transparent;transition:background-color var(--t-ui)}
.v-markets .hlist li.on:before{background:var(--sel)}
.v-markets .hlist button[aria-pressed="true"] i{box-shadow:0 0 0 2px var(--page),0 0 0 3.5px var(--ink)}
@media (hover:hover){.v-markets .hlist li:not(.on):hover:before{background:var(--card)}}
.v-markets .ringcol .dialwrap{padding:0}
.v-markets .ringcol .dial .read .s{font:500 13px/1.2 var(--sans)}
.v-markets .ringcol .src{width:320px;max-width:100%;margin:24px auto 0;padding-top:14px;border-top:1px solid var(--line-2);font:400 13px/1.5 var(--sans);color:var(--ink-2)}
.v-markets .ringcol .src .n{color:var(--ink)}

/* ---------- two-column text sections: heading left, content right ---------- */
.v-markets .cgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 96px;align-items:start}
.v-markets .cgrid .hd{position:sticky;top:calc(var(--hdr) + 32px)}
.v-markets .cgrid .hd .lede{margin-top:20px}

/* ---------- the evening half ---------- */
.v-markets .mk-eve .split{align-items:center}
.v-markets .mk-eve .lede{margin-top:20px}
.v-markets .eread{display:flex;gap:18px;align-items:flex-start;margin-top:32px;padding-top:20px;border-top:1px solid var(--line);font:400 15px/1.45 var(--sans);color:var(--ink-2)}
.v-markets .eread i{flex:none;width:72px;height:12px;border-radius:6px;margin-top:5px;box-shadow:inset 0 0 0 1px rgba(60,30,10,.08)}
.v-markets .eread b{display:block;font-weight:500;color:var(--ink)}

/* ---------- prescription ---------- */
.v-markets .mk-rx .txt .lede{margin-top:20px}
.v-markets .mk-rx .rx{margin-top:0}
.v-markets .research{margin-top:36px;padding-top:20px;border-top:1px solid var(--line)}
.v-markets .research .rl{margin-bottom:8px}
.v-markets .research p:not(.rl){font-size:17px;line-height:27px;max-width:34em}

/* ---------- ranges and products ---------- */
.v-markets .rglist{border-top:1px solid var(--line)}
.v-markets .rg{border-bottom:1px solid var(--line);padding:8px 0 16px}
.v-markets .rh{display:grid;grid-template-columns:minmax(0,1fr) auto 14px;gap:16px;align-items:center;padding:16px 12px;margin:0 -12px;text-decoration:none;border-radius:16px;transition:background-color var(--t-ui)}
.v-markets .rh .kind{font:400 14px/1.3 var(--sans);color:var(--ink-2)}
.v-markets .rh .arr{width:14px;height:10px;color:var(--ink-2)}
.v-markets .pl li a{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:9px 12px;margin:0 -12px;border-radius:12px;text-decoration:none;font:400 15px/1.4 var(--sans);transition:background-color var(--t-ui)}
.v-markets .pl .ref{font-weight:500}
.v-markets .pl .ty{color:var(--ink-2);font-size:14px;text-align:right}
@media (hover:hover){.v-markets .rh:hover,.v-markets .pl li a:hover{background:var(--card)}}

/* ---------- related project ---------- */
.v-markets .mk-proj h2{margin-top:32px}
.v-markets .pstep{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.v-markets .pstep>.n{font:300 24px/1.2 var(--sans)}
.v-markets .pstep h3{font-size:21px;line-height:1.25}
.v-markets .pstep p{margin-top:6px;color:var(--ink-2);font-size:17px;line-height:27px}
.v-markets .ph-note{margin-top:16px}

/* ---------- questions ---------- */
.v-markets .mk-faq .dets{min-width:0}

/* ======================= responsive ======================= */
@media (max-width:1240px){
  .v-markets .mk-hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:56px}
  .v-markets .mk-hours .grid{gap:48px;grid-template-columns:minmax(0,1fr) 340px}
  .v-markets .cgrid{gap:40px 56px}
}
@media (max-width:980px){
  .v-markets .sec{padding:48px 0}
  .v-markets .crumbs-wrap{padding-top:20px}
  .v-markets .mk-hero{padding:16px 0 72px}
  .v-markets .mk-hero .wrap{grid-template-columns:1fr;gap:0}
  .v-markets .mk-hero .copy{display:contents}
  .v-markets .mk-hero h1{order:1}
  .v-markets .mk-hero .lede{order:2;margin-top:16px}
  .v-markets .mk-hero .fig{order:3;margin-top:28px}
  .v-markets .mk-hero .ctas{order:4;margin-top:28px}
  .v-markets .mk-hero .frame{height:auto;min-height:0;display:flex;flex-direction:column}
  .v-markets .mk-hero .frame>img,.v-markets .mk-hero .frame>.ph{position:relative;height:220px;inset:auto}
  .v-markets .mk-hero .frame>.morning{position:relative;left:auto;right:auto;bottom:auto;border-radius:0}
  .v-markets .mk-hours .grid{grid-template-columns:1fr;gap:40px}
  .v-markets .mk-hours .txt{padding-top:0}
  .v-markets .cgrid{grid-template-columns:1fr}
  .v-markets .cgrid .hd{position:static}
  .v-markets .band{grid-template-columns:1fr;padding:40px 32px}
  /* overview: headline → lede → room frame → list */
  .v-markets .mk-rooms{padding-top:24px}
  .v-markets .mk-rooms .rooms{gap:0}
  .v-markets .mk-rooms .rooms>div:first-child{display:contents}
  .v-markets .mk-rooms h1{order:1}
  .v-markets .mk-rooms .mk-lede{order:2;margin:16px 0 28px}
  .v-markets .mk-rooms .fcol{order:3;position:static;margin-bottom:28px}
  .v-markets .mk-rooms .rlist{order:4}
  .v-markets .mk-rooms .rooms .frame{aspect-ratio:auto;height:auto;padding-top:240px}
  .v-markets .mk-rooms .rooms .frame>img,.v-markets .mk-rooms .rooms .frame>.ph{bottom:auto;height:240px}
  .v-markets .mk-rooms .rooms .frame>.tag{position:absolute;left:10px;right:10px;bottom:calc(100% - 230px);margin:0;max-width:none}
  .v-markets .mk-rooms .frame>.mk-under{border-radius:0}
}
@media (max-width:600px){
  .v-markets .mk-hero .ctas .pill{flex:1 1 auto}
  .v-markets .mk-photo{display:none}
  .v-markets .mk-card .now{margin-top:4px}
  .v-markets .hlist button{grid-template-columns:60px 32px minmax(0,1fr);gap:4px 14px;padding:14px 10px}
  .v-markets .hlist .cp{padding:2px 10px 14px;font-size:15px}
  .v-markets .hlist .tm{font-size:22px}
  .v-markets .hlist i{width:32px}
  .v-markets .rh .kind{display:none}
  .v-markets .pl li a{grid-template-columns:52px minmax(0,1fr)}
  .v-markets .pl .ty{grid-column:2;text-align:left;margin-top:-4px}
  .v-markets .band{padding:32px 22px}
  .v-markets .band .acts .pill{flex:1 1 auto}
  .v-markets .mk-now b{font-size:24px}
  .v-markets .mk-rooms .rooms .frame{padding-top:220px}
  .v-markets .mk-rooms .rooms .frame>img,.v-markets .mk-rooms .rooms .frame>.ph{height:220px}
  .v-markets .mk-rooms .rooms .frame>.tag{bottom:calc(100% - 210px)}
  .v-markets .mk-rooms .frame>.mk-under{padding:16px 18px 14px}
}
@media (prefers-reduced-motion:reduce){
  .v-markets .dtrack .sun{transition:none}
}