/* PHOMI — blog listing, category pages and articles.
   Depends on the tokens + .wrap / .eyebrow / .h-section / .btn in styles.css. */

/* ─── Hero (matches .ref-hero) ─── */
.blog-hero{ padding:56px 0; background:var(--ink); color:#fff }
.blog-hero-title{
  font-family:var(--f-sans);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:.98;
  font-size:clamp(40px,7vw,96px);
  margin:0 0 20px;
  color:#fff;
}
.blog-hero-title em{
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.01em;
}
.blog-hero-sub{
  font-size:clamp(16px,1.35vw,20px);
  line-height:1.55;
  color:rgba(255,255,255,.74);
  max-width:64ch;
  margin:0;
}

/* ─── Filters (matches .ref-filter / .ref-pill) ─── */
.blog-list{ padding:32px 0 96px; background:var(--paper) }
.blog-filter{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  padding:8px 0 28px;
  border-bottom:1px solid var(--line-soft);
  margin-bottom:40px;
}
.blog-filter-label{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.blog-pills{ display:flex; gap:8px; flex-wrap:wrap }
.blog-pill{
  font-family:var(--f-sans);
  font-size:14px;
  line-height:1;
  color:var(--ink-2);
  background:var(--stone);
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 16px;
  transition:background .2s var(--easing), color .2s var(--easing), border-color .2s var(--easing);
}
.blog-pill:hover{ border-color:var(--primary-deep) }
.blog-pill.is-active{ background:var(--ink); color:var(--paper); border-color:var(--ink) }

/* ─── Cards ─── */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
/* Same card as the Tooted collections (.col-card in category.css). */
.blog-card{
  border-radius:8px;
  overflow:hidden;
  background:var(--paper);
  box-shadow:var(--shadow-soft);
  transition:box-shadow .4s var(--easing), transform .4s var(--easing);
}
.blog-card:hover{ box-shadow:var(--shadow-soft-hover) }
.blog-card-link{ display:flex; flex-direction:column; height:100%; color:inherit }
.blog-card-media{
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:linear-gradient(135deg,var(--stone-2),var(--sand));
}
.blog-card-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s var(--easing);
}
.blog-card:hover .blog-card-media img{ transform:scale(1.05) }
.blog-card-body{ display:flex; flex-direction:column; gap:14px; flex:1; padding:22px 22px 24px }
.blog-card-meta{
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  line-height:1.5;
  color:var(--muted);
}
.blog-dot{ margin:0 6px; opacity:.6 }
.blog-card-title{
  font-family:var(--f-sans);
  font-weight:500;
  font-size:26px;
  letter-spacing:-.018em;
  line-height:1.08;
  color:var(--ink);
  margin:-6px 0 0;
}
.blog-card-excerpt{ font-size:15px; line-height:1.55; color:var(--ink-2); margin:0 }
.blog-card-foot{
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.blog-card-arrow{
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:42px;
  height:42px;
  border-radius:999px;
  background:var(--stone);
  color:var(--ink);
  transition:background .25s var(--easing), color .25s var(--easing);
}
.blog-card-arrow svg{ width:14px; height:14px }
.blog-card:hover .blog-card-arrow{ background:var(--primary); color:var(--ink) }

/* ─── Pagination + empty state ─── */
.blog-pagination{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin-top:64px;
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.06em;
}
.blog-pagination .page-numbers{ padding:10px 14px; border:1px solid var(--line); color:var(--ink-2) }
.blog-pagination a.page-numbers:hover{ border-color:var(--primary-deep) }
.blog-pagination .current{ background:var(--ink); border-color:var(--ink); color:var(--paper) }
.blog-pagination .dots{ border-color:transparent }
.blog-empty{ padding:64px 0; color:var(--muted) }
.blog-empty-title{
  font-family:var(--f-sans);
  font-weight:500;
  font-size:clamp(26px,3vw,40px);
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0 0 10px;
}

/* ─── Article ─── */
.blog-article{ padding:60px 0 80px; background:var(--paper) }
.blog-article-head,
.blog-article-image,
.blog-prose{ max-width:880px; margin-left:auto; margin-right:auto }
.blog-article-head .eyebrow{ margin-bottom:18px }
.blog-article-head .eyebrow a:hover{ color:var(--primary-deep) }
.blog-article-head .h-section{ font-size:clamp(34px,4.2vw,60px); margin:0 0 36px }
.blog-article-image{ margin-bottom:40px }
.blog-article-image img{ display:block; width:100%; height:auto }
.blog-prose{ font-size:18px; line-height:1.7; color:var(--ink-2) }
.blog-prose p,
.blog-prose ul,
.blog-prose ol{ margin:0 0 20px }
.blog-prose ul,
.blog-prose ol{ padding-left:22px }
.blog-prose h2,
.blog-prose h3{
  font-family:var(--f-sans);
  font-weight:500;
  letter-spacing:-.015em;
  line-height:1.2;
  color:var(--ink);
  margin:40px 0 14px;
}
.blog-prose h2{ font-size:clamp(25px,2.4vw,34px) }
.blog-prose h3{ font-size:22px }
.blog-prose a{ color:var(--primary-deep); border-bottom:1px solid currentColor }
.blog-prose img{ max-width:100%; height:auto }
.blog-prose figure{ margin:32px 0 }
.blog-prose iframe{ max-width:100% }

.blog-prose ul{ list-style:disc }
.blog-prose ol{ list-style:decimal }
.blog-prose li{ margin-bottom:8px }
.blog-prose figcaption{ margin-top:10px; font-size:14px; line-height:1.5; color:var(--muted) }
.blog-prose .wp-block-table{ overflow-x:auto; -webkit-overflow-scrolling:touch }
.blog-prose table{ width:100%; min-width:620px; border-collapse:collapse; font-size:15px; line-height:1.5 }
.blog-prose th,
.blog-prose td{ padding:12px 14px 12px 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:top }
.blog-prose th{ font-weight:500; color:var(--ink) }

/* ─── Article in the Paigaldusjuhend layout (paigaldus.css) ─── */
.blog-post-hero{ position:relative; isolation:isolate; overflow:hidden }
.blog-post-hero.has-image{
  display:flex;
  align-items:flex-end;
  min-height:clamp(420px,64vh,680px);
  padding:96px 0 56px;
}
.blog-post-hero-img{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
}
.blog-post-hero.has-image::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(15,20,25,.38) 0%,rgba(15,20,25,.62) 48%,rgba(15,20,25,.9) 100%);
}
.blog-post-meta{ color:rgba(255,255,255,.74); margin-bottom:18px }
.blog-post-meta a:hover{ color:#fff }
.blog-post-title{ font-size:clamp(36px,5.2vw,76px); line-height:1.02; max-width:22ch }
.blog-post-hero .man-sub{ color:rgba(255,255,255,.84) }

.blog-layout--single{ grid-template-columns:minmax(0,880px); justify-content:center }
.man-chapter.blog-chapter{ scroll-margin-top:96px }
.man-chapter.blog-intro p:first-child{ font-size:clamp(18px,1.5vw,21px); line-height:1.5; color:var(--ink) }
.man-chapter.blog-chapter p + p{ margin-top:14px }
.man-chapter.blog-chapter p{ font-size:16.5px; line-height:1.65 }
.man-chapter.blog-chapter h3,
.man-chapter.blog-chapter h3:first-of-type{
  font-size:20px;
  font-weight:500;
  letter-spacing:-.012em;
  line-height:1.25;
  text-transform:none;
  max-width:44ch;
  margin:36px 0 10px;
}
.man-chapter.blog-chapter a{ color:var(--primary-deep); border-bottom:1px solid currentColor }
.man-chapter.blog-chapter ul,
.man-chapter.blog-chapter ol{ display:flex; flex-direction:column; gap:12px; max-width:66ch; margin:20px 0; list-style:none }
.man-chapter.blog-chapter li{ font-size:16px; line-height:1.55; color:var(--ink-2) }
.man-chapter.blog-chapter ul > li{ display:flex; gap:12px }
.man-chapter.blog-chapter ul > li::before{ content:"—"; color:var(--sand); flex-shrink:0 }
.man-chapter.blog-chapter ol{ counter-reset:blog-step; gap:0 }
.man-chapter.blog-chapter ol > li{
  counter-increment:blog-step;
  position:relative;
  padding:20px 0 20px 56px;
  border-top:1px solid var(--line);
}
.man-chapter.blog-chapter ol > li:last-child{ border-bottom:1px solid var(--line) }
.man-chapter.blog-chapter ol > li::before{
  content:counter(blog-step,decimal-leading-zero);
  position:absolute;
  left:0;
  top:18px;
  font-family:var(--f-mono);
  font-size:20px;
  color:var(--sand);
}
.man-chapter.blog-chapter figure{ margin:32px 0; max-width:66ch }
.man-chapter.blog-chapter figure img{ display:block; width:100%; height:auto }
.man-chapter.blog-chapter figcaption{
  margin-top:10px;
  font-family:var(--f-mono);
  font-size:11px;
  line-height:1.6;
  letter-spacing:.04em;
  color:var(--muted);
}
.man-chapter.blog-chapter .wp-block-table{ max-width:none; overflow-x:auto; -webkit-overflow-scrolling:touch }
.man-chapter.blog-chapter table{ width:100%; min-width:640px; border-collapse:collapse }
.man-chapter.blog-chapter th{
  font-family:var(--f-mono);
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:left;
  padding:0 16px 12px 0;
  border:0;
  border-bottom:1px solid var(--ink);
}
.man-chapter.blog-chapter td{
  font-size:14.5px;
  line-height:1.5;
  color:var(--ink-2);
  padding:14px 16px 14px 0;
  border:0;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.man-chapter.blog-chapter td:first-child{ font-weight:500; color:var(--ink); white-space:nowrap }
.man-chapter.blog-chapter .wp-block-table thead,
.man-chapter.blog-chapter .wp-block-table tfoot{ border:0 }

/* In-stock sidebar (.blog-stock): paigaldus.css, shared with the Paigaldusjuhend. */

/* ─── Related + CTA ─── */
.blog-related{ padding:72px 0; background:var(--stone) }
.blog-related-title{
  font-family:var(--f-sans);
  font-weight:500;
  font-size:clamp(26px,3vw,40px);
  letter-spacing:-.025em;
  margin:0 0 36px;
}
/* Same cyan glow as the front page's .certs band. */
.blog-cta{ position:relative; overflow:hidden; padding:72px 0; background:var(--ink); color:#fff }
.blog-cta::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(60% 50% at 80% 20%, rgba(119,199,208,.18), transparent 60%),
    radial-gradient(50% 40% at 10% 90%, rgba(119,199,208,.08), transparent 60%);
}
.blog-cta .wrap{ position:relative; z-index:1 }
.blog-cta-title{
  font-family:var(--f-sans);
  font-weight:500;
  font-size:clamp(30px,4vw,56px);
  letter-spacing:-.03em;
  line-height:1.04;
  margin:0 0 14px;
}
.blog-cta-sub{ color:rgba(255,255,255,.74); margin:0 0 28px; font-size:17px }

@media (max-width:880px){
  .blog-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:560px){
  .blog-grid{ grid-template-columns:minmax(0,1fr) }
  .blog-article{ padding:40px 0 56px }
  .blog-prose{ font-size:17px }
}

/* Card hover: lift, shadow and image zoom share one duration and curve. */
.blog-card{
  transition:box-shadow .7s var(--ease-soft);
}
.blog-card-media img{ transition:transform .7s var(--ease-soft) }
.blog-card:hover .blog-card-media img{ will-change:transform }
.blog-card-arrow{ transition:background .7s var(--ease-soft), color .7s var(--ease-soft) }
@media (prefers-reduced-motion:reduce){
  .blog-card,.blog-card-media img,.blog-card-arrow{ transition:none }
}