/* worthly.si — blog layer: animated cards, article typography.
   Cards lift in 3D on hover and reveal in a stagger as they scroll into view;
   every effect is transform/opacity only and switches off under reduced-motion. */

.blog-hero{padding:var(--sp-7) 0 var(--sp-5);border-bottom:1px solid var(--line)}
.blog-hero .eyebrow{color:var(--ink-2);background:var(--brand-050);border-color:var(--brand-100)}
.blog-hero .eyebrow a{color:var(--brand-700)}
.blog-hero h1{font-size:clamp(30px,4vw,44px);letter-spacing:-.02em;margin:var(--sp-4) 0 var(--sp-3);max-width:22ch}
.blog-hero p{color:var(--ink-2);max-width:62ch;font-size:var(--fs-lg)}
.blog-meta{display:flex;gap:var(--sp-4);flex-wrap:wrap;color:var(--muted);font-size:var(--fs-sm);margin-top:var(--sp-4)}

.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5);padding:var(--sp-7) 0}
@media(max-width:980px){.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.card-grid{grid-template-columns:1fr;gap:var(--sp-4)}}

.bcard{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);transform-style:preserve-3d;
  transition:transform var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease),border-color var(--t-med) var(--ease)}
.bcard::after{content:"";position:absolute;inset:0;border-radius:var(--r-lg);pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(31,91,255,.10),transparent 62%);
  transition:opacity var(--t-med) var(--ease)}
.bcard:hover,.bcard:focus-within{transform:translateY(-6px) rotateX(2.4deg);box-shadow:var(--sh-3);border-color:var(--brand-100)}
.bcard:hover::after,.bcard:focus-within::after{opacity:1}
.bcard .shot{position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,#0A1230,#14336F)}
.bcard .shot img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.01);
  transition:transform 600ms var(--ease),filter var(--t-med) var(--ease)}
.bcard:hover .shot img{transform:scale(1.055)}
.bcard .tag{position:absolute;left:var(--sp-4);top:var(--sp-4);padding:6px 10px;border-radius:999px;font:600 11px/1 var(--sans);
  letter-spacing:.06em;text-transform:uppercase;color:#0A1230;background:rgba(255,255,255,.92);backdrop-filter:blur(6px)}
.bcard .body{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);flex:1}
.bcard h2{font-size:19px;line-height:1.28;letter-spacing:-.01em;margin:0}
.bcard h2 a{color:var(--ink);text-decoration:none}
.bcard h2 a:hover{color:var(--brand)}
.bcard .excerpt{color:var(--ink-2);font-size:var(--fs-sm);line-height:1.55;margin:0;flex:1}
.bcard .foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-top:var(--sp-2)}
.bcard .date{color:var(--muted);font-size:var(--fs-xs);font-family:var(--mono)}
.bcard .read{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:var(--fs-sm);color:var(--brand);text-decoration:none;
  min-height:36px;padding:0 var(--sp-3);border-radius:999px;border:1px solid transparent;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),gap var(--t-fast) var(--ease)}
.bcard .read:hover{background:var(--brand-050);border-color:var(--brand-100);gap:12px}
.bcard .read svg{transition:transform var(--t-fast) var(--ease)}
.bcard .read:hover svg{transform:translateX(2px)}
[data-stagger]>*{opacity:0;transform:translateY(14px)}
[data-stagger].in>*{opacity:1;transform:none;transition:opacity 520ms var(--ease),transform 520ms var(--ease)}
[data-stagger].in>*:nth-child(2){transition-delay:80ms}
[data-stagger].in>*:nth-child(3){transition-delay:160ms}
[data-stagger].in>*:nth-child(4){transition-delay:240ms}
[data-stagger].in>*:nth-child(5){transition-delay:320ms}
[data-stagger].in>*:nth-child(6){transition-delay:400ms}

/* ── single article ─────────────────────────────────────────────────── */
/* The whole article — eyebrow, title, standfirst, cover and body — is one card, so the page
   background stays visible on both sides and the reading column has a visible edge.
   The card width IS the measure: nothing inside needs its own max-width. */
.post-card{
  width:min(760px,calc(100% - 32px));margin:var(--sp-5) auto 0;background:#fff;
  border:1px solid var(--line);border-radius:24px;
  box-shadow:0 1px 2px rgba(12,23,51,.05),0 28px 56px -40px rgba(12,23,51,.5);
  overflow:hidden;
}
.post-card .post-head{padding:var(--sp-6) var(--sp-6) 0}
.post-card .post-body{padding:var(--sp-5) var(--sp-6) var(--sp-7);max-width:none}
/* Inside a white article card the closing CTA needs its own tint to stay a card. */
.post-card .post-cta{background:#F7F9FE;border-color:var(--brand-100)}
@media(max-width:700px){
  .post-card{border-radius:18px;margin-top:var(--sp-4)}
  .post-card .post-head{padding:var(--sp-5) var(--sp-4) 0}
  .post-card .post-body{padding:var(--sp-4) var(--sp-4) var(--sp-5)}
}
.post-head{padding:var(--sp-7) 0 var(--sp-5)}
.post-head h1{font-size:clamp(28px,3.6vw,42px);letter-spacing:-.02em;line-height:1.14;margin:var(--sp-4) 0 var(--sp-3);max-width:26ch}
.post-head .standfirst{font-size:var(--fs-lg);color:var(--ink-2);max-width:62ch}
.post-cover{margin:var(--sp-6) 0 0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-2);background:#0A1230}
.post-cover img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.post-body{padding:var(--sp-6) 0 var(--sp-7);max-width:72ch}
.post-body h2{font-size:24px;letter-spacing:-.01em;margin:var(--sp-6) 0 var(--sp-3)}
.post-body h3{font-size:18px;margin:var(--sp-5) 0 var(--sp-2)}
.post-body p,.post-body li{color:var(--ink-2);line-height:1.72;font-size:16.5px}
.post-body p{margin:0 0 var(--sp-4)}
.post-body ul,.post-body ol{margin:0 0 var(--sp-4);padding-left:1.2em}
.post-body li{margin-bottom:var(--sp-2)}
.post-body strong{color:var(--ink)}
.post-body a{color:var(--brand);text-underline-offset:3px}
.post-body code{font-family:var(--mono);font-size:.92em;background:var(--brand-050);padding:2px 6px;border-radius:6px;color:var(--brand-700)}
.post-body blockquote{margin:var(--sp-5) 0;padding:var(--sp-4) var(--sp-5);border-left:3px solid var(--brand);background:var(--brand-050);
  border-radius:0 var(--r-md) var(--r-md) 0;color:var(--ink)}
.post-body table{width:100%;border-collapse:collapse;font-size:15px;margin:var(--sp-4) 0}
.post-body th,.post-body td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left}
.post-body th{background:#F9FBFE;font-weight:600}
/* The closing CTA is a plain white card with a border, so it reads as a card and not as one
   more paragraph; on a dark screen it takes the card colour instead of glowing white. */
.post-cta{margin:var(--sp-7) 0 0;padding:var(--sp-6);border-radius:var(--r-lg);border:1px solid var(--line);
  background:#fff;box-shadow:0 1px 2px rgba(12,23,51,.05),0 16px 34px -26px rgba(12,23,51,.45);
  display:flex;gap:var(--sp-5);align-items:center;justify-content:space-between;flex-wrap:wrap}
.post-cta p{margin:0;color:var(--ink-2);max-width:46ch}
/* the CTA link is .btn: keep the label white — .post-body a would otherwise paint it brand-blue on brand-blue */
.post-cta .btn{color:#fff}
.post-cta .btn:hover,.post-cta .btn:focus{color:#fff}
.related{padding:var(--sp-6) 0 var(--sp-7);border-top:1px solid var(--line)}
.related h2{font-size:18px;margin:0 0 var(--sp-5)}
.related .card-grid{padding:0}
@media(prefers-reduced-motion:reduce){
  .bcard,.bcard .shot img,[data-stagger]>*{transition:none!important;transform:none!important}
  [data-stagger]>*{opacity:1}
}
@media(prefers-color-scheme:dark){
  /* a white card would glow on a dark screen: same border, card colour instead of #fff */
  .post-card{background:var(--card);border-color:var(--line-2);
    box-shadow:0 1px 2px rgba(0,0,0,.35),0 28px 56px -40px rgba(0,0,0,.75)}
  .post-cta{background:var(--card);border-color:var(--line-2);
    box-shadow:0 1px 2px rgba(0,0,0,.35),0 18px 36px -26px rgba(0,0,0,.7)}
  .post-card .post-cta{background:#0E1836}
}