/* ---------- Updates from Smartmed: homepage section, /updates/ listing and article pages ----------
   Generated by scripts/build_updates.py from content/updates. Screens reuse the browser chrome in
   product-screens.css; they keep their own interface colours. */

/* shared pieces */
.up-screen img{aspect-ratio:auto;object-fit:fill}
.up-screen-bare{overflow:hidden;border-radius:10px;box-shadow:0 12px 30px -20px var(--night), 0 0 0 1px var(--line)}
.up-screen-bare img{display:block;width:100%;height:auto}
.up-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0;font:600 var(--fs-label)/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.up-cat{color:var(--teal-ink)}
.up-meta time::before{content:"";display:inline-block;width:4px;height:4px;margin:0 14px 2px 0;border-radius:50%;background:currentColor;vertical-align:middle;opacity:.6}
.up-read{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font:600 var(--fs-small)/1.4 var(--sans);color:var(--ink);border-bottom:1px solid var(--line-strong);padding-bottom:2px}
.up-read span{display:inline-block}

/* cards: the title link stretches over the whole card, so the card is one link and one tab stop */
.up-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:clamp(28px, 3.4vw, 56px)}
.up-card article{position:relative;display:flex;flex-direction:column;height:100%;padding-top:22px;border-top:1px solid var(--line-strong)}
.up-card,.up-card article,.up-row article > *{min-width:0}
.up-card-shot, .up-row-shot{aspect-ratio:16 / 11;min-height:0}
.up-card-shot{margin-bottom:24px}
.up-card-shot > *, .up-row-shot > *{display:flex;flex-direction:column;height:100%}
.up-card-shot img, .up-row-shot img{flex:1;min-height:0;width:100%;object-fit:cover;object-position:top left}
.up-card .up-screen{box-shadow:0 10px 26px -22px var(--night)}
.up-card h3{margin:12px 0 0;font:600 var(--fs-h5)/1.25 var(--sans);letter-spacing:var(--track-snug);color:var(--ink)}
.up-card h3 a{color:inherit;text-decoration:none}
.up-card h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.up-card h3 a:focus-visible{outline:none}
.up-card article:has(a:focus-visible){outline:2px solid var(--teal-ink);outline-offset:8px;border-radius:4px}
.up-card p:not(.up-meta){margin:12px 0 0;color:var(--ink-2);line-height:1.5;max-width:46ch}
.up-card .up-read{margin-top:auto;padding-top:20px;align-self:flex-start;border-bottom:0}
.up-card .up-read{text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:5px}
.up-card:hover h3{color:var(--teal-ink)}
.up-card:hover .up-read{text-decoration-color:currentColor}
@media (prefers-reduced-motion: no-preference){
  .up-card .up-screen, .up-row .up-screen{transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
  .up-read span{transition:transform .3s var(--ease)}
  .up-card:hover .up-screen, .up-row:hover .up-screen{transform:translateY(-3px);box-shadow:0 18px 34px -24px var(--night)}
  .up-card:hover .up-read span, .up-row:hover .up-read span{transform:translate(2px, -2px)}
}

/* homepage section */
.up-section{background:var(--paper);border-top:1px solid var(--line)}
.up-section-head{display:grid;grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr);align-items:end;gap:32px;margin-bottom:clamp(40px, 5vw, 72px)}
.up-eyebrow{margin:0 0 16px;font:600 var(--fs-label)/1.4 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--teal-ink)}
.up-section-head h2{margin:0}
.up-section-aside{display:grid;justify-items:start;gap:18px}
.up-section-aside p{margin:0;max-width:36ch;color:var(--ink-2);line-height:1.5}
.up-section-aside .text-link{font-size:var(--fs-small)}

/* /updates/ listing */
.up-list-head .display{max-width:16ch}
.up-list{list-style:none;margin:0;padding:0 0 clamp(72px, 9vw, 128px)}
.up-row article{position:relative;display:grid;grid-template-columns:minmax(150px, .7fr) minmax(0, 1.6fr) minmax(0, 1.2fr);gap:clamp(24px, 3vw, 48px);align-items:start;padding:clamp(32px, 4vw, 48px) 0;border-top:1px solid var(--line-strong)}
.up-row:last-child article{border-bottom:1px solid var(--line-strong)}
.up-row-meta .up-meta{flex-direction:column;align-items:flex-start;gap:8px}
.up-row-meta .up-meta time::before{display:none}
.up-row h2{margin:0;font:600 var(--fs-h4)/1.2 var(--sans);letter-spacing:var(--track-snug)}
.up-row h2 a{color:var(--ink);text-decoration:none}
.up-row h2 a::after{content:"";position:absolute;inset:0;z-index:1}
.up-row h2 a:focus-visible{outline:none}
.up-row article:has(a:focus-visible){outline:2px solid var(--teal-ink);outline-offset:6px;border-radius:4px}
.up-row p:not(.up-meta){margin:14px 0 0;color:var(--ink-2);line-height:1.5;max-width:52ch}
.up-row .up-read{border-bottom:0;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:5px}
.up-row:hover h2 a{color:var(--teal-ink)}
.up-row:hover .up-read{text-decoration-color:currentColor}
.up-empty{padding-bottom:clamp(72px, 9vw, 128px);color:var(--ink-2)}

/* article pages */
.up-article-head{padding:calc(var(--header-h) + clamp(48px, 8vw, 112px)) 0 clamp(32px, 4vw, 56px)}
.up-article-head .wrap > *{max-width:880px;margin-inline:auto}
.up-crumb{display:flex;gap:10px;margin-bottom:24px;color:var(--ink-3)}
.up-crumb a{color:inherit;text-decoration:none}
.up-crumb a:hover{text-decoration:underline}
.up-article-head h1{margin:0;font-size:var(--fs-h1);line-height:1.05;text-wrap:balance}
.up-dateline{margin-top:22px;font-size:var(--fs-small);color:var(--ink-3)}
.up-updated::before{content:"·";margin:0 8px}
.up-intro{margin-top:22px;font:500 var(--fs-h5)/1.45 var(--sans);letter-spacing:var(--track-body);color:var(--ink-2);text-wrap:pretty}
.up-lead{max-width:1200px;margin-bottom:clamp(48px, 6vw, 88px)}
.up-body{display:grid;grid-template-columns:minmax(0, 1fr) min(68ch, 100%) minmax(0, 1fr);padding-bottom:clamp(64px, 8vw, 112px)}
.up-body > *{grid-column:2;min-width:0}
.up-body > .up-figure, .up-body > .up-screen{grid-column:1 / -1;width:100%;max-width:1040px;justify-self:center;margin:40px 0 8px}
.up-body h2{margin:48px 0 0;font:600 var(--fs-h4)/1.2 var(--sans);letter-spacing:var(--track-snug);color:var(--ink)}
.up-body h3{margin:32px 0 0;font:600 var(--fs-h5)/1.3 var(--sans);letter-spacing:var(--track-snug);color:var(--ink)}
.up-body > h2:first-child{margin-top:0}
.up-body p, .up-body ul, .up-body ol{margin:16px 0 0;color:var(--ink-2);font-size:var(--fs-lead);line-height:1.6}
.up-body ul, .up-body ol{padding-left:24px}
.up-body li + li{margin-top:8px}
.up-body li::marker{color:var(--teal-ink)}
.up-body strong{color:var(--ink);font-weight:600}
.up-body a{color:var(--teal-ink);text-underline-offset:3px;overflow-wrap:anywhere}
.up-figure{margin:0}
.up-figure figcaption{margin-top:14px;font-size:var(--fs-small);line-height:1.5;color:var(--ink-3);text-align:center}
.up-closing{margin-top:56px;padding:clamp(24px, 3vw, 36px);border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.up-closing p{margin:0;font-size:var(--fs-body);color:var(--ink)}
.up-closing .btn{margin-top:20px;max-width:100%;white-space:normal}
.up-closing .btn-solid, .up-closing .btn-solid:hover{color:#fff}
.up-more{padding:clamp(56px, 7vw, 96px) 0 clamp(72px, 9vw, 128px);border-top:1px solid var(--line)}
.up-more-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:clamp(28px, 3vw, 44px)}
.up-more-head h2{margin:0;font:600 var(--fs-h3)/1.1 var(--sans);letter-spacing:var(--track-tight)}
.up-more-head .text-link{font-size:var(--fs-small)}
.up-cards-more{grid-template-columns:repeat(2, minmax(0, 1fr))}

@media (max-width:1100px){
  .up-row article{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr)}
  .up-row-meta{grid-column:1 / -1}
  .up-row-meta .up-meta{flex-direction:row;gap:6px 14px}
}
@media (max-width:900px){
  .up-cards, .up-cards-more{grid-template-columns:minmax(0,1fr);gap:44px;max-width:620px}
}
@media (max-width:760px){
  .up-section-head{grid-template-columns:1fr;gap:20px}
  .up-row article{grid-template-columns:minmax(0,1fr);gap:18px}
  .up-row-shot{order:-1}
  .up-more-head{flex-direction:column;gap:12px}
  .up-intro{font-size:var(--fs-lead)}
  .up-body p, .up-body ul, .up-body ol{font-size:var(--fs-body)}
  .up-body > .up-figure, .up-body > .up-screen{margin-top:32px}
}
@media (max-width:420px){
  .up-screen .product-browser-tab{min-width:0}
  .up-screen .product-window-end, .up-screen .product-new-tab{display:none}
}