/* =========================================================
   Blog - Mateusz Dyduch (707 Media). Depends on styles.css.
   ========================================================= */

.blog-hero{
  background:
    radial-gradient(80% 110% at 82% -5%,rgba(47,166,79,.20),transparent 55%),
    linear-gradient(180deg,var(--forest) 0%,var(--forest-900) 100%);
  color:#fff;padding:clamp(140px,18vh,200px) 0 clamp(48px,7vw,88px);position:relative;overflow:hidden;
}
.blog-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line-dark-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark-soft) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(70% 60% at 70% 30%,#000,transparent 75%);opacity:.5}
.blog-hero .wrap{position:relative;z-index:2}
.blog-hero .eyebrow{color:var(--mint-bright)}
.blog-hero h1{margin:20px 0 0;color:#fff;max-width:16ch}
.blog-hero h1 .hl{color:var(--mint-bright)}
.blog-hero p.lead{color:rgba(255,255,255,.76);max-width:56ch;margin-top:22px}

.blog-body{padding:clamp(56px,8vw,110px) 0 clamp(72px,10vw,130px);background:var(--paper)}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.post-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.post-grid{grid-template-columns:1fr}}

.post{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.post:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.post .thumb{aspect-ratio:16/10;position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--forest-700),var(--forest-900))}
.post .thumb .cat{position:absolute;left:14px;top:14px;z-index:2;
  background:rgba(14,36,29,.6);backdrop-filter:blur(6px);border:1px solid var(--line-dark);
  border-radius:100px;padding:6px 13px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mint-bright)}
.post .thumb .glyph{position:absolute;inset:0;display:grid;place-items:center;color:rgba(143,227,166,.5)}
.post .thumb .glyph svg{width:64px;height:64px}
.post .pbody{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.post .meta{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.post h2{font-size:1.24rem;font-weight:700;letter-spacing:-.02em;margin:12px 0 10px;line-height:1.2}
.post p{color:var(--muted);font-size:14.5px;margin:0 0 20px}
.post .more{margin-top:auto;font-weight:600;font-size:14px;color:var(--emerald-600);display:inline-flex;align-items:center;gap:7px}
.post.soon{pointer-events:none}
.post.soon .thumb{filter:saturate(.7)}
.post.soon .more{color:var(--muted)}

.blog-note{margin-top:clamp(40px,5vw,64px);text-align:center;background:var(--sand-200);
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(30px,4vw,48px)}
.blog-note h3{font-weight:700;font-size:1.4rem;color:var(--forest);margin-bottom:10px}
.blog-note p{color:var(--muted);max-width:52ch;margin:0 auto 22px}