/* Viden: an editorial index. The newest article leads as a wide feature,
   the rest follow as three quiet cards. */

.vd-head { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 96px); align-items: end; padding-top: calc(var(--head-h) + clamp(36px, 5vw, 80px)); padding-bottom: clamp(32px, 4vw, 56px); }
.vd-head h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 5.4vw, 5.2rem); line-height: 1; letter-spacing: -.02em; text-wrap: balance; }
.vd-intro p { color: var(--cream-2); font-size: 1.08rem; line-height: 1.75; }
.vd-intro p + p { margin-top: .9em; }

.vd-list { padding-top: 0; }
.vd-img { position: relative; display: block; overflow: hidden; }
.vd-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.9); transition: transform 1.4s var(--ease), filter .6s; }
.vd-body { display: flex; flex-direction: column; gap: 10px; }
.vd-kicker { font-size: .88rem; font-weight: 600; color: var(--latte); }
.vd-title { font-family: var(--serif); line-height: 1.1; color: var(--cream); }
.vd-dek { color: var(--cream-2); }
.vd-go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; font-weight: 700; color: var(--ember-hi); }
.vd-go::after { content: ''; width: 1.15em; height: 1.15em; background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transition: translate .3s var(--ease); }

.vd-feature { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); min-height: 440px; border-radius: 32px; overflow: hidden; background: var(--esp-2); text-decoration: none; box-shadow: inset 0 0 0 1px rgba(227, 161, 90, .16), 0 60px 120px -60px rgba(0, 0, 0, .95); transition: box-shadow .5s var(--ease); }
.vd-feature .vd-body { justify-content: center; padding: clamp(28px, 4vw, 64px); }
.vd-feature .vd-title { font-size: clamp(1.9rem, 3.2vw, 2.9rem); }
.vd-feature .vd-dek { max-width: 46ch; font-size: 1.06rem; }

.vd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 18px 0 0; padding: 0; list-style: none; }
.vd-card { display: grid; grid-template-rows: auto 1fr; height: 100%; border-radius: 28px; overflow: hidden; background: var(--esp-2); text-decoration: none; box-shadow: inset 0 0 0 1px rgba(227, 161, 90, .12); transition: box-shadow .5s var(--ease); }
.vd-card .vd-img { aspect-ratio: 16 / 10; }
.vd-card .vd-body { padding: 22px 24px 26px; }
.vd-card .vd-title { font-size: clamp(1.3rem, 1.8vw, 1.55rem); }

.vd-feature:hover, .vd-card:hover { box-shadow: 0 0 0 1.5px rgba(227, 161, 90, .55), 0 50px 100px -40px rgba(227, 161, 90, .4); }
.vd-feature:hover img, .vd-card:hover img { transform: scale(1.04); filter: brightness(1); }
.vd-feature:hover .vd-go::after, .vd-card:hover .vd-go::after { translate: 4px 0; }

.vd-ready { text-align: center; background: radial-gradient(closest-side at 50% 60%, rgba(227, 161, 90, .14), rgba(227, 161, 90, 0)); }
.vd-ready > p { max-width: 54ch; margin: 18px auto 0; color: var(--cream-2); font-size: 1.1rem; }
.vd-ready .cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; }

@media (max-width: 960px) {
  .vd-head, .vd-feature { grid-template-columns: 1fr; }
  .vd-feature .vd-img { aspect-ratio: 16 / 10; }
  .vd-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .vd-head { padding-top: calc(var(--head-h) + 24px); }
}
@media (prefers-reduced-motion: reduce) {
  .vd-img img { transition: none; }
}