/* ============================================================
   Crit Lab — /blog/ list page styles
   Depends on: common.css (variables, shell, buttons, final CTA)
   ============================================================ */

.blog-page .section{padding-top:clamp(40px,5vw,80px);padding-bottom:clamp(40px,5vw,80px);}
.blog-page .section-head{margin-bottom:clamp(22px,2.6vw,32px);}
.blog-page .section-head>p{max-width:850px;margin-top:16px;color:#53534d;line-height:1.95;}
.blog-page .section-soft{background:transparent;max-width:none;}
.blog-page .section-soft>*{max-width:var(--content-max);margin-left:auto;margin-right:auto;}
.blog-page .bl-feature-section{padding-top:clamp(32px,4vw,60px);}

/* ---- page header (no photo FV — this is an index page) ---- */
.bl-hero{position:relative;padding:clamp(46px,6vw,88px) var(--section-x) clamp(34px,4vw,56px);border-bottom:1px solid rgba(0,5,1,.14);}
.bl-hero-inner{max-width:var(--content-max);margin:0 auto;}
.bl-hero h1{margin:12px 0 0;font-size:clamp(30px,3.6vw,48px);font-weight:700;line-height:1.3;}
.bl-hero-lead{margin:18px 0 0;max-width:720px;font-size:1rem;line-height:1.95;color:#4a4a43;}
.bl-hero-rule{display:block;width:56px;height:4px;background:var(--yellow);margin-top:26px;}

/* ---- category filter ---- */
.bl-filter{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.bl-filter-label{font-size:.83rem;font-weight:700;color:#55554e;margin-right:4px;}
.bl-chip{display:inline-flex;align-items:center;min-height:44px;padding:8px 20px;border:1px solid rgba(0,5,1,.35);border-radius:999px;background:transparent;font-size:.88rem;font-weight:700;line-height:1.3;transition:background-color .2s,color .2s,border-color .2s;}
.bl-chip:hover{background:rgba(0,5,1,.06);}
.bl-chip[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--yellow);}
.bl-count{margin-left:auto;font-size:.83rem;color:#55554e;}

/* ---- featured article ---- */
.bl-feature.bl-card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,3.4vw,52px);align-items:center;}
.bl-feature .bl-thumb{width:100%;border-radius:18px;}
.bl-feature-body h2{margin:14px 0 0;font-size:clamp(21px,2.1vw,29px);font-weight:700;line-height:1.55;}
.bl-feature-meta{margin-top:14px;}
.bl-title-link{color:inherit;text-decoration:none;}
.bl-feature-body p{margin:16px 0 0;font-size:.97rem;line-height:1.95;color:#4a4a43;}
.bl-feature-pin{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border-radius:999px;background:var(--yellow);font-size:.76rem;font-weight:700;}

/* ---- article grid ---- */
.bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.6vw,34px) clamp(18px,2vw,26px);}
.bl-card{display:flex;flex-direction:column;}
.bl-grid .bl-card .bl-meta{order:1;margin:0 0 12px;}
.bl-grid .bl-card .bl-thumb{order:2;width:100%;}
.bl-grid .bl-card h3{order:3;margin-top:12px;}
.bl-grid .bl-card .bl-excerpt{order:4;}
.bl-grid .bl-card .bl-related{order:5;}
.bl-card.is-hidden{display:none;}
.bl-thumb{position:relative;display:block;aspect-ratio:3/2;border-radius:14px;overflow:hidden;background:repeating-linear-gradient(135deg,#f1efe5,#f1efe5 11px,#e7e4d8 11px,#e7e4d8 22px);}
.bl-thumb img{width:100%;height:100%;object-fit:cover;}
.bl-thumb .ph{position:absolute;inset:0;display:grid;place-items:center;padding:14px;text-align:center;font-size:.76rem;line-height:1.6;color:#5d5a51;}
.bl-meta{display:flex;align-items:center;gap:10px;margin-top:16px;}
.bl-cat{display:inline-block;padding:3px 12px;border-radius:999px;background:var(--yellow);font-size:.74rem;font-weight:700;}
.bl-date{font-family:"Poppins",sans-serif;font-size:.8rem;color:#67665f;}
.bl-card h3{margin:10px 0 0;font-size:1.08rem;font-weight:700;line-height:1.65;}
.bl-card h3 a{color:inherit;text-decoration:none;}
.bl-card h3 a:hover{text-decoration:underline;text-underline-offset:4px;}
.bl-excerpt{margin:10px 0 0;font-size:.9rem;line-height:1.9;color:#55554e;}
.bl-related{display:flex;align-items:center;gap:7px;margin-top:14px;padding-top:12px;border-top:1px dashed rgba(0,5,1,.2);font-size:.82rem;}
.bl-related .lbl{flex:0 0 auto;color:#67665f;}
.bl-related a{font-weight:700;}
.bl-empty{padding:26px 0;font-size:.92rem;color:#55554e;}
.bl-empty[hidden]{display:none;}

/* ---- pagination ---- */
.bl-pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:clamp(34px,4vw,56px);}
.bl-pager a,.bl-pager span{display:grid;place-items:center;min-width:46px;min-height:46px;padding:0 14px;border-radius:10px;border:1px solid rgba(0,5,1,.28);font-family:"Poppins",sans-serif;font-size:.95rem;font-weight:600;text-decoration:none;color:var(--text);}
.bl-pager a:hover{background:rgba(0,5,1,.06);}
.bl-pager .is-current{background:var(--text);border-color:var(--text);color:var(--yellow);}
.bl-pager .is-gap{border:0;min-width:24px;color:#67665f;}

/* ---- service guide (blog → service LP) ---- */
.bl-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.bl-guide-card{display:flex;align-items:center;gap:14px;padding:18px 20px;background:var(--white);border:1px solid #deddd5;border-radius:12px;text-decoration:none;color:var(--text);font-size:.95rem;font-weight:500;}
.bl-guide-card:hover{background:#fffdf3;}
.bl-guide-icon{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--yellow);}
.bl-guide-icon svg{width:24px;height:24px;}
.bl-guide-card .t{flex:1;line-height:1.6;}
.bl-guide-card .arrow{font-size:.62rem;color:var(--blue-text);}

/* ---- sidebar-less aside blocks ---- */
.bl-aside{display:block;max-width:850px;}
.bl-aside h3{font-size:1.12rem;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid var(--yellow);}
.bl-ranking{counter-reset:rk;}
.bl-ranking li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;padding:15px 0;border-bottom:1px solid rgba(0,5,1,.12);}
.bl-ranking li::before{counter-increment:rk;content:counter(rk);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--text);color:var(--yellow);font-family:"Poppins",sans-serif;font-size:.82rem;font-weight:600;}
.bl-ranking a{font-size:.94rem;line-height:1.7;font-weight:700;color:var(--text);text-decoration:none;}
.bl-ranking a:hover{text-decoration:underline;text-underline-offset:4px;}
.bl-ranking .d{display:block;margin-top:4px;font-family:"Poppins",sans-serif;font-size:.78rem;color:#67665f;font-weight:400;}
.bl-cats{display:flex;flex-wrap:wrap;gap:8px;}
.bl-cats a{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:8px 16px;background:var(--white);border:1px solid #deddd5;border-radius:999px;font-size:.86rem;font-weight:500;text-decoration:none;color:var(--text);}
.bl-cats a:hover{background:#fffdf3;}
.bl-cats b{font-family:"Poppins",sans-serif;font-size:.78rem;color:#67665f;font-weight:600;}

/* ---- provisional notice ---- */
.bl-note{padding:20px 24px;background:#fff;border:1px solid #deddd5;border-left:5px solid var(--blue);}
.bl-note p{font-size:.92rem;line-height:1.9;}
.bl-badge{display:inline-block;margin-right:8px;padding:2px 10px;border-radius:999px;background:var(--blue);color:#fff;font-size:.72rem;font-weight:700;vertical-align:1px;}
.bl-note-after-grid{margin-top:clamp(30px,3.4vw,44px);}
.bl-note-after-aside{margin-top:clamp(26px,3vw,38px);}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1024px){
  .bl-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bl-feature.bl-card{grid-template-columns:1fr;}
  .bl-guide{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:860px){
  .bl-aside{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .bl-grid{grid-template-columns:1fr;gap:26px;}
  .bl-guide{grid-template-columns:1fr;}
  .bl-count{margin-left:0;width:100%;}
  .bl-grid .bl-card{display:flex;gap:0;}
  .bl-grid .bl-card .bl-thumb{width:100%;aspect-ratio:3/2;border-radius:10px;}
  .bl-meta{gap:8px;flex-wrap:wrap;}
  .bl-grid .bl-card h3{margin-top:10px;font-size:.98rem;}
  .bl-excerpt,.bl-related{display:none;}
  .bl-feature.bl-card{display:block;}
  .bl-feature .bl-feature-meta{margin-top:14px;}
  .bl-feature.bl-card .bl-thumb{aspect-ratio:3/2;border-radius:14px;}
  .bl-feature.bl-card .bl-excerpt,.bl-feature.bl-card .bl-related{display:block;}
  .bl-pager a,.bl-pager span{min-width:44px;min-height:44px;padding:0 10px;font-size:.88rem;}
}
@media (prefers-reduced-motion:reduce){
  .bl-chip{transition:none;}
}