/* ==========================================================================
   KQ LEARNING STUDIO — subpage.css
   Shared chrome for about / resources / contact / blog / 404.
   ========================================================================== */

.kq-pagehead{
  background:linear-gradient(170deg,#EAF5F9 0%, var(--kq-cream) 70%);
  padding-block:clamp(40px,6vw,72px) clamp(36px,5vw,60px);
  border-bottom:1px solid var(--kq-line);
}
.kq-pagehead h1{font-size:clamp(1.9rem,4.4vw,2.9rem); margin-bottom:.85rem;}
.kq-pagehead .kq-lede{max-width:58ch;}

/* Breadcrumb */
.kq-crumbs{font-size:.85rem; color:var(--kq-slate); margin-bottom:1rem;}
.kq-crumbs a{color:var(--kq-slate); text-decoration:none;}
.kq-crumbs a:hover{color:var(--kq-blue-dk); text-decoration:underline;}
.kq-crumbs span{margin-inline:.45rem; opacity:.6;}

/* Long-form prose column */
.kq-prose{max-width:68ch;}
.kq-prose h2{font-size:clamp(1.35rem,2.6vw,1.75rem); margin:2.5rem 0 .85rem;}
.kq-prose h2:first-child{margin-top:0;}
.kq-prose h3{font-size:1.12rem; margin:1.75rem 0 .5rem;}
.kq-prose p{margin-bottom:1.1rem; color:var(--kq-slate);}
.kq-prose p strong{color:var(--kq-ink);}
.kq-prose ul{margin:0 0 1.4rem 1.15rem; color:var(--kq-slate);}
.kq-prose li{margin-bottom:.55rem;}
.kq-prose li::marker{color:var(--kq-pink-mid);}

/* Pull quote */
.kq-pull{
  border-left:4px solid var(--kq-pink); background:var(--kq-sand);
  padding:1.4rem 1.6rem; border-radius:0 var(--kq-radius-sm) var(--kq-radius-sm) 0;
  margin:1.75rem 0; font-family:var(--kq-display); font-size:1.08rem; line-height:1.5;
}

/* Resource category detail blocks */
.kq-reslist{display:flex; flex-direction:column; gap:clamp(18px,2.6vw,26px);}
.kq-res{display:grid; grid-template-columns:64px 1fr; gap:1.4rem; align-items:start;}
.kq-res__icon{
  display:grid; place-items:center; width:64px; height:64px; border-radius:16px;
  font-size:1.75rem; background:var(--kq-sand);
}
.kq-res:nth-child(4n+1) .kq-res__icon{background:#FFF3F6;}
.kq-res:nth-child(4n+2) .kq-res__icon{background:#EAF5F9;}
.kq-res:nth-child(4n+3) .kq-res__icon{background:#FFF9E8;}
.kq-res:nth-child(4n+4) .kq-res__icon{background:#EDF7F1;}
.kq-res h2{font-size:1.22rem; margin-bottom:.45rem; scroll-margin-top:90px;}
.kq-res p{font-size:.96rem; color:var(--kq-slate); margin-bottom:1.1rem; max-width:64ch;}
/* Sticky header would otherwise cover the heading on an in-page jump. */
.kq-res{scroll-margin-top:90px;}

/* Product links. Two columns once there's room — the seasonal group has 12. */
.kq-prods{
  list-style:none; margin:0; display:grid; gap:.1rem;
  grid-template-columns:repeat(auto-fill, minmax(min(290px, 100%), 1fr));
}
.kq-prods li{margin:0; display:flex; align-items:baseline; gap:.5rem;}
.kq-prods a{
  display:inline-block; padding:.42rem 0; font-size:.95rem; font-weight:600;
  color:var(--kq-blue-dk); text-decoration:none;
}
.kq-prods a::before{content:'→'; margin-right:.5rem; color:var(--kq-pink-mid);}
.kq-prods a:hover{color:var(--kq-pink-dk); text-decoration:underline; text-underline-offset:3px;}
.kq-prods__free{
  font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:var(--kq-green); border-radius:999px; padding:.16em .6em;
}

/* Jump nav on the resources page head */
.kq-jump{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.75rem;}
.kq-jump a{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.87rem; font-weight:600; text-decoration:none; color:var(--kq-ink);
  background:#fff; border:1px solid var(--kq-line); border-radius:999px; padding:.42em 1em;
}
.kq-jump a:hover{border-color:var(--kq-blue-dk); color:var(--kq-blue-dk);}
.kq-jump span{
  font-size:.75rem; color:var(--kq-slate); background:var(--kq-sand);
  border-radius:999px; padding:.05em .5em;
}

@media (max-width:780px){
  .kq-res{grid-template-columns:52px 1fr; gap:1rem;}
  .kq-res__icon{width:52px; height:52px; font-size:1.4rem;}
}

/* Contact cards */
.kq-contact{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); gap:clamp(16px,2.4vw,24px);}
.kq-contact__item{display:flex; flex-direction:column; text-align:center; align-items:center;}
.kq-contact__icon{
  display:grid; place-items:center; width:56px; height:56px; border-radius:50%;
  font-size:1.5rem; background:var(--kq-sand); margin-bottom:1rem;
}
.kq-contact__item h2{font-size:1.08rem; margin-bottom:.4rem;}
.kq-contact__item p{font-size:.93rem; color:var(--kq-slate); margin-bottom:1rem; flex:1;}

/* Blog placeholder */
.kq-soon{text-align:center; padding-block:clamp(40px,6vw,72px);}
.kq-soon__icon{font-size:3rem; margin-bottom:1rem;}
.kq-soon h2{font-size:clamp(1.4rem,3vw,1.9rem); margin-bottom:.75rem;}
.kq-soon p{color:var(--kq-slate); max-width:52ch; margin:0 auto 1rem;}
.kq-topics{
  display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center;
  list-style:none; margin-top:1.75rem;
}
.kq-topics li{
  font-size:.88rem; font-weight:600; color:var(--kq-blue-dk);
  background:#fff; border:1px solid var(--kq-line); border-radius:999px; padding:.45em 1.1em;
}

/* 404 */
.kq-404{text-align:center; padding-block:clamp(60px,10vw,120px);}
.kq-404__code{
  font-family:var(--kq-display); font-size:clamp(3.5rem,12vw,6rem);
  color:var(--kq-blue); line-height:1; margin-bottom:.5rem;
}

/* ============ FREE PRINTABLE LANDING PAGE ============ */
.kq-free__inner{
  display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,5vw,56px); align-items:start;
}
.kq-free__preview{position:sticky; top:98px;}
.kq-free__mock{
  display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; place-items:center;
  aspect-ratio:3/4; padding:1.5rem; font-size:clamp(1.75rem,4vw,2.5rem);
  background:linear-gradient(160deg,#EAF5F9,#FFF3F6);
  border:1px solid var(--kq-line); border-radius:var(--kq-radius);
}
.kq-free__caption{
  margin-top:.85rem; font-size:.85rem; color:var(--kq-slate); text-align:center;
}
.kq-free__interim{
  margin-top:2rem; padding:clamp(20px,3vw,28px);
  background:var(--kq-sand); border:1px dashed var(--kq-line);
  border-radius:var(--kq-radius);
}
.kq-free__interim h2{margin-top:0; font-size:1.2rem;}
.kq-free__interim p{margin-bottom:0;}
.kq-news--inline{margin-top:2rem; text-align:left;}
.kq-news--inline p{margin-inline:0;}
.kq-news--inline .kq-news__form{margin-inline:0; justify-content:flex-start;}
@media (max-width:820px){
  .kq-free__inner{grid-template-columns:1fr;}
  .kq-free__preview{position:static; max-width:300px; margin-inline:auto;}
}