/*
Theme Name: Learn with Mabel (Kadence Child)
Template: kadence
Version: 1.0
Description: Custom blog listing redesign for learn.meetmabel.ai, built on the Kadence parent theme.
*/

/* ====== Design tokens ====== */
:root{
  --lwm-cream:#F7F1E7;
  --lwm-white:#FFFFFF;
  --lwm-ink:#1E211D;
  --lwm-ink-soft:#6E6A5F;
  --lwm-terracotta:#C15E39;
  --lwm-terracotta-deep:#A54B2B;
  --lwm-mint-bg:#E3F0E3;
  --lwm-mint-text:#1F5C3D;
  --lwm-border:#E8E1D0;
}

/* Scope everything to the blog listing wrapper so we never touch other pages */
.lwm-blog{
  background:var(--lwm-cream);
  font-family:'Inter', sans-serif;
  color:var(--lwm-ink);
  padding-bottom:20px;
}
.lwm-blog *{box-sizing:border-box;}
.lwm-blog a{text-decoration:none; color:inherit;}

/* ---------- Hero ---------- */
.lwm-hero{max-width:1200px; margin:0 auto; padding:56px 32px 40px;}
.lwm-pill{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--lwm-mint-bg); color:var(--lwm-mint-text);
  font-size:0.82rem; font-weight:600;
  padding:6px 14px; border-radius:20px;
  margin-bottom:18px;
}
.lwm-hero h1{
  font-size:clamp(2rem, 3.6vw, 2.9rem);
  font-weight:800; line-height:1.1;
  letter-spacing:-0.01em;
  margin:0 0 14px; max-width:16ch;
}
.lwm-hero p{
  color:var(--lwm-ink-soft); font-size:1.05rem; line-height:1.55;
  max-width:56ch; margin:0 0 28px;
}
.lwm-filters{display:flex; flex-wrap:wrap; gap:10px;}
.lwm-filter{
  font-size:0.85rem; font-weight:500;
  padding:8px 16px; border-radius:20px;
  border:1px solid var(--lwm-border);
  background:var(--lwm-white); color:var(--lwm-ink-soft);
}
.lwm-filter.active{background:var(--lwm-ink); color:var(--lwm-white); border-color:var(--lwm-ink);}
.lwm-filter:hover{border-color:var(--lwm-terracotta-deep); color:var(--lwm-terracotta-deep);}

/* ---------- Featured post ---------- */
.lwm-featured-wrap{max-width:1200px; margin:0 auto; padding:0 32px 8px;}
.lwm-featured{
  display:grid; grid-template-columns:1fr 1.05fr;
  background:var(--lwm-white); border:1px solid var(--lwm-border);
  border-radius:20px; overflow:hidden;
}
.lwm-featured-media{
  position:relative; min-height:300px;
  background-size:cover; background-position:center;
}
.lwm-featured-media.lwm-no-image{
  background:linear-gradient(180deg, rgba(30,33,29,0) 45%, rgba(30,33,29,.55) 100%),
             linear-gradient(135deg, #E7B98E, #C15E39 65%, #8C3F22);
}
.lwm-featured-tag{
  position:absolute; top:18px; left:18px;
  background:var(--lwm-white); color:var(--lwm-terracotta-deep);
  font-size:0.78rem; font-weight:700;
  padding:6px 14px; border-radius:16px;
}
.lwm-featured-body{padding:40px 44px; display:flex; flex-direction:column; justify-content:center;}
.lwm-meta-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:0.85rem; color:var(--lwm-ink-soft); margin-bottom:16px;
}
.lwm-meta-cat{color:var(--lwm-mint-text); font-weight:600;}
.lwm-meta-row .lwm-dot{width:3px; height:3px; border-radius:50%; background:var(--lwm-ink-soft);}
.lwm-featured-body h2{font-size:1.6rem; font-weight:700; line-height:1.24; margin:0 0 14px;}
.lwm-featured-body p{color:var(--lwm-ink-soft); font-size:1rem; line-height:1.55; margin:0 0 22px; max-width:46ch;}
.lwm-read-link{color:var(--lwm-terracotta-deep); font-weight:600; font-size:0.92rem; display:inline-flex; align-items:center; gap:6px; width:fit-content;}
.lwm-read-link:hover{color:var(--lwm-terracotta);}

/* ---------- Grid ---------- */
.lwm-grid-wrap{max-width:1200px; margin:0 auto; padding:48px 32px 20px;}
.lwm-grid-label{font-size:1.15rem; font-weight:700; margin:0 0 22px;}
.lwm-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;}
.lwm-card{
  background:var(--lwm-white); border:1px solid var(--lwm-border);
  border-radius:18px; padding:22px;
  display:flex; flex-direction:column;
  transition:box-shadow .15s ease, transform .15s ease;
}
.lwm-card:hover{box-shadow:0 8px 22px rgba(30,33,29,.06); transform:translateY(-2px);}
.lwm-card-meta{display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:0.78rem; color:var(--lwm-ink-soft); margin-bottom:12px;}
.lwm-card-cat{color:var(--lwm-mint-text); font-weight:600;}
.lwm-card-meta .lwm-dot{width:3px; height:3px; border-radius:50%; background:var(--lwm-ink-soft);}
.lwm-card h3{font-size:1.08rem; font-weight:700; line-height:1.3; margin:0 0 10px;}
.lwm-card p{color:var(--lwm-ink-soft); font-size:0.88rem; line-height:1.5; margin:0 0 16px; flex:1;}
.lwm-card .lwm-read-link{font-size:0.85rem;}

/* ---------- Pagination ---------- */
.lwm-pagination{max-width:1200px; margin:0 auto; padding:24px 32px 72px; display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap;}
.lwm-pagination a, .lwm-pagination span{
  min-width:36px; height:36px; border-radius:50%;
  border:1px solid var(--lwm-border);
  display:flex; align-items:center; justify-content:center;
  font-size:0.85rem; color:var(--lwm-ink-soft); font-weight:500;
  padding:0 6px;
}
.lwm-pagination .current{background:var(--lwm-terracotta); color:var(--lwm-white); border-color:var(--lwm-terracotta);}
.lwm-pagination a:hover{border-color:var(--lwm-terracotta-deep); color:var(--lwm-terracotta-deep);}

/* ---------- No-posts state ---------- */
.lwm-empty{padding:60px 32px; text-align:center; color:var(--lwm-ink-soft);}

@media (max-width:860px){
  .lwm-featured{grid-template-columns:1fr;}
  .lwm-featured-media{min-height:220px;}
  .lwm-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:600px){
  .lwm-grid{grid-template-columns:1fr;}
  .lwm-featured-body{padding:28px 26px;}
}