/* ScoreStory — knowledge: the overview pages and the articles */

/* Shared by both: author avatar and byline */
.avatar{flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--navy),var(--green));color:#fff;font-family:'Fraunces',serif;font-weight:600;font-size:1rem;letter-spacing:.02em}
.article-meta{display:flex;align-items:center;gap:12px}
.article-author{display:block;font-weight:600;font-size:.95rem;color:var(--ink)}
.article-sub{display:block;font-size:.85rem;color:var(--muted)}

/* Overview */
.kn-hero{padding:72px 0 96px;background:radial-gradient(90% 60% at 100% 0%,rgba(19,163,125,.10),transparent 60%),var(--white)}
.kn-hero-head{max-width:760px;margin:0 auto 56px;text-align:center}
.kn-hero-head .eyebrow{justify-content:center}
.kn-title{font-size:clamp(2.3rem,4.6vw,3.6rem);color:var(--navy);margin-top:20px}
.kn-lede{font-size:1.12rem;color:var(--muted);margin:20px auto 0;max-width:56ch}
.kn-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.kn-card{display:flex;flex-direction:row;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .25s ease, box-shadow .25s ease}
.kn-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.kn-card-cover{flex:0 0 55%}
.kn-card-cover img{display:block;width:100%;height:100%;min-height:340px;object-fit:cover;object-position:62% 50%}
.kn-card-body{padding:40px 40px 42px;display:flex;flex-direction:column;justify-content:center;gap:16px;flex:1}
.kn-card h2{font-size:clamp(1.8rem,2.8vw,2.3rem);color:var(--navy)}
.kn-card p{color:var(--muted);font-size:.98rem}
.kn-card-more{margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.92rem;color:var(--green-deep)}
.kn-card:hover .kn-card-more svg{transform:translateX(3px)}
.kn-card-more svg{transition:transform .2s ease}

/* Article */
/* Full-width cover with the title over it. The photo sits behind a navy
   gradient that deepens towards the bottom, where the text is, so the white
   title stays legible whatever the photo has in that spot. */
.article-hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:clamp(460px,42vw,680px);overflow:hidden;background:var(--navy)}
.article-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(13,32,73,.10) 0%,rgba(13,32,73,.38) 45%,rgba(13,32,73,.90) 100%)}
.article-cover{position:absolute;inset:0;z-index:-2}
.article-cover img{display:block;width:100%;height:100%;object-fit:cover;object-position:62% 40%}
.article-head{max-width:900px;padding-top:120px;padding-bottom:56px;text-align:center}
.article-head .article-meta{justify-content:center;text-align:left;margin-top:28px}
.article-back.eyebrow{justify-content:center;color:#fff}
.article-back.eyebrow:hover{color:var(--green-tint)}
.article-title{font-size:clamp(2.3rem,4.8vw,3.8rem);color:#fff;margin-top:20px;text-shadow:0 2px 24px rgba(13,32,73,.45)}
.article-hero .article-author{color:#fff}
.article-hero .article-sub{color:rgba(255,255,255,.82)}
.article-hero .avatar{box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.article-body{max-width:760px;padding-top:56px;padding-bottom:24px;font-size:1.1rem;line-height:1.75;color:var(--ink)}
.article-body p{margin-bottom:1.3em}
.article-body p.article-lead{font-size:1.32rem;line-height:1.6;color:var(--navy);font-weight:500;margin-bottom:1.6em}
.article-body h2{font-size:clamp(1.6rem,2.6vw,2rem);color:var(--navy);margin:1.9em 0 .7em}
.article-body em{color:var(--green-deeper)}
.article-body blockquote{margin:2em 0;padding:28px 32px;border-left:4px solid var(--green);border-radius:0 var(--radius) var(--radius) 0;background:var(--green-tint)}
.article-body blockquote p{margin:0;font-family:'Fraunces',serif;font-weight:500;font-size:clamp(1.3rem,2.2vw,1.6rem);line-height:1.4;color:var(--navy)}

/* Closing call to action, below every article. Same box as the why page's
   (waarom.css), kept per page as AGENTS.md asks for CTA blocks. */
.knowledge-cta{padding:48px 0 96px}
.knowledge-cta-box{text-align:center;background:linear-gradient(155deg,var(--navy) 0%,var(--green) 100%);border-radius:28px;padding:56px 32px;color:#fff;box-shadow:var(--shadow-lg)}
.knowledge-cta-box h2{font-size:clamp(1.9rem,3.4vw,2.6rem);max-width:22ch;margin:0 auto}
.knowledge-cta-box p{color:rgba(255,255,255,.86);font-size:1.06rem;margin:14px auto 28px;max-width:52ch}
.knowledge-cta-back{display:block;margin-top:22px;color:rgba(255,255,255,.86);font-weight:500;font-size:.92rem;text-decoration:underline;text-underline-offset:3px}
.knowledge-cta-back:hover{color:#fff}

@media(max-width:900px){
  .kn-card{flex-direction:column}
  .kn-card-cover{flex:none}
  .kn-card-cover img{height:auto;aspect-ratio:16/9;min-height:0}
  .kn-card-body{padding:28px 28px 30px}
  .kn-card h2{font-size:1.6rem}
}
@media(max-width:560px){
  .kn-hero{padding:48px 0 68px}
  .article-hero{min-height:440px}
  .article-head{padding-top:96px;padding-bottom:40px}
  .article-body{font-size:1.03rem;padding-top:40px}
  .article-body p.article-lead{font-size:1.15rem}
  .article-body blockquote{padding:22px 22px}
  .knowledge-cta-box{padding:44px 22px}
}

/* Screenshots inside an article (product updates): the app as it looks in
   the reader's language, from src/images/blog/<lang>/. A .phone figure is a
   phone-width screen and is not stretched to the column. */
.article-body figure{margin:2.2em 0}
.article-body figure img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow)}
.article-body figure.phone img{width:auto;max-width:min(100%,340px);margin:0 auto}
.article-body figure.narrow img{width:auto;max-width:min(100%,520px);margin:0 auto}
.article-body figcaption{margin-top:.8em;font-size:.92rem;line-height:1.5;color:var(--muted);text-align:center}