/* =========================================================
   SA BLOG — Frontend styles (.bl-* selectors)
   For [sa_blog] shortcode + standard WP blog views
   ========================================================= */

:root {
  --sa-teal:#589C9D;
  --sa-teal-deep:#4F6C70;
  --sa-cream:#E8EEEE;
  --sa-sand:#DAD0C6;
  --sa-ink:#0a0a0a;
  --sa-muted:#6b6b6b;
  --sa-line:rgba(10,10,10,.1);
  --sa-fhead:'Qochy','Cormorant Garamond','Playfair Display',Georgia,serif;
  --sa-fbody:'SF Pro Display',-apple-system,BlinkMacSystemFont,'Inter',sans-serif;
}

/* FEATURED ARTICLE */
.bl-featured{background:#fff;padding:100px 40px 60px;}
.bl-featured-inner{max-width:1240px;margin:0 auto;}
.bl-featured-head{text-align:center;margin-bottom:48px;}
.bl-featured-head .eyebrow{
  font-family:var(--sa-fbody);font-size:12px;letter-spacing:3px;text-transform:uppercase;
  color:var(--sa-teal-deep);margin-bottom:16px;
}
.bl-featured-head h2{
  font-family:var(--sa-fhead);font-size:clamp(32px,4vw,52px);font-weight:400;color:var(--sa-ink);margin:0;
}
.bl-featured-head h2 .it{font-style:italic;color:var(--sa-teal);}
.feat-card{
  display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;
  text-decoration:none;color:inherit;transition:transform .4s ease;
}
.feat-card:hover{transform:translateY(-3px);}
.feat-card .feat-img{position:relative;overflow:hidden;background:var(--sa-cream);aspect-ratio:4/3;}
.feat-card .feat-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease;}
.feat-card:hover .feat-img img{transform:scale(1.04);}
.feat-card .chip{
  display:inline-block;background:var(--sa-teal);color:#fff;
  padding:6px 14px;font-family:var(--sa-fbody);font-size:10px;letter-spacing:2px;
  text-transform:uppercase;font-weight:700;margin-bottom:18px;
}
.feat-card h3{
  font-family:var(--sa-fhead);font-size:clamp(28px,3.2vw,42px);
  font-weight:400;line-height:1.15;color:var(--sa-ink);margin:0 0 18px;
}
.feat-card h3 .it{font-style:italic;color:var(--sa-teal-deep);}
.feat-card p{font-size:15px;line-height:1.8;color:var(--sa-muted);margin:0 0 20px;}
.feat-card .meta{
  display:flex;gap:16px;align-items:center;font-family:var(--sa-fbody);
  font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--sa-muted);
}
.feat-card .meta .dot{width:3px;height:3px;background:var(--sa-muted);border-radius:50%;}
.feat-card .read-link{
  display:inline-flex;align-items:center;gap:10px;margin-top:28px;
  font-family:var(--sa-fbody);font-size:12px;font-weight:700;
  letter-spacing:2.5px;text-transform:uppercase;color:var(--sa-ink);
}
.feat-card .read-link .btn-arrow{
  width:16px;height:16px;display:inline-block;
  background-image:url('/wp-content/uploads/2026/04/right-arrow.png');
  background-repeat:no-repeat;background-position:center;background-size:contain;
  filter:brightness(0);transition:transform .25s ease;
}
.feat-card:hover .read-link .btn-arrow{transform:translateX(5px);}

/* FILTER CHIPS */
.bl-filters{background:#fff;padding:32px 40px 0;}
.bl-filters-wrap{
  max-width:1240px;margin:0 auto;
  display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;
  padding:28px 0;border-top:1px solid var(--sa-line);border-bottom:1px solid var(--sa-line);
}
.bl-filter-btn{
  -webkit-appearance:none !important;appearance:none !important;
  border-radius:0 !important;cursor:pointer !important;outline:none !important;
  padding:10px 22px !important;font-family:var(--sa-fbody) !important;
  font-size:11.5px !important;font-weight:600 !important;letter-spacing:2px !important;
  text-transform:uppercase;color:var(--sa-muted) !important;
  background:transparent !important;
  border:1px solid transparent !important;transition:all .2s ease;
  white-space:nowrap;
}
.bl-filter-btn:hover{color:var(--sa-ink) !important;border-color:var(--sa-line) !important;}
.bl-filter-btn.active{
  background:var(--sa-ink) !important;color:#fff !important;border-color:var(--sa-ink) !important;
}

/* GRID */
.bl-grid-wrap{background:#fff;padding:60px 40px 100px;}
.bl-grid-inner{max-width:1240px;margin:0 auto;}
.bl-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:40px 32px;
  transition:opacity .25s ease;
}
.bl-card{
  display:flex;flex-direction:column;background:#fff;
  text-decoration:none;color:inherit;transition:transform .35s ease;
}
.bl-card:hover{transform:translateY(-4px);}
.bl-card .bl-img{
  position:relative;overflow:hidden;background:var(--sa-cream);aspect-ratio:4/3;margin-bottom:20px;
}
.bl-card .bl-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease;}
.bl-card:hover .bl-img img{transform:scale(1.05);}
.bl-card .bl-chip{
  position:absolute;top:14px;left:14px;
  background:rgba(255,255,255,.95);backdrop-filter:blur(6px);
  color:var(--sa-ink);padding:6px 12px;font-family:var(--sa-fbody);font-size:10px;
  letter-spacing:2px;text-transform:uppercase;font-weight:700;
}
.bl-card .bl-date{
  font-family:var(--sa-fbody);font-size:11px;letter-spacing:2px;
  text-transform:uppercase;color:var(--sa-muted);margin-bottom:10px;
}
.bl-card h4{
  font-family:var(--sa-fhead);font-size:22px;font-weight:500;line-height:1.25;
  color:var(--sa-ink);margin:0 0 12px;transition:color .2s;
}
.bl-card:hover h4{color:var(--sa-teal-deep);}
.bl-card p{font-size:14.5px;line-height:1.7;color:var(--sa-muted);margin:0 0 14px;}
.bl-card .bl-foot{
  margin-top:auto;padding-top:10px;
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--sa-fbody);font-size:11px;letter-spacing:2px;
  text-transform:uppercase;color:var(--sa-muted);
}
.bl-card .bl-foot .read{color:var(--sa-teal);font-weight:700;}

/* PAGINATION */
.bl-pagination{
  margin-top:64px;display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;
}
.bl-pagination .page-btn,.bl-pagination .page-num{
  -webkit-appearance:none !important;appearance:none !important;
  border-radius:0 !important;cursor:pointer !important;outline:none !important;
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--sa-line) !important;background:transparent !important;
  font-family:var(--sa-fbody) !important;font-size:13px !important;color:var(--sa-ink) !important;
  font-weight:500;transition:all .2s ease;
}
.bl-pagination .page-btn:hover:not([disabled]),
.bl-pagination .page-num:hover:not(.active){background:var(--sa-cream) !important;}
.bl-pagination .page-num.active{
  background:var(--sa-ink) !important;color:#fff !important;border-color:var(--sa-ink) !important;
}
.bl-pagination .page-btn[disabled]{opacity:.35;cursor:not-allowed !important;}
.bl-pagination .page-ellipsis{color:var(--sa-muted);padding:0 6px;}

/* RESPONSIVE */
@media (max-width:1024px){
  .feat-card{grid-template-columns:1fr;gap:32px;}
  .bl-grid{grid-template-columns:repeat(2,1fr);gap:36px 28px;}
}
@media (max-width:860px){
  .bl-featured{padding:64px 20px 40px;}
  .bl-filters{padding:20px;}
  .bl-grid-wrap{padding:40px 20px 64px;}
  .bl-grid{grid-template-columns:1fr;gap:32px;}
}