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

.kq-pagehead{
  background:linear-gradient(170deg,#EAF4F0 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-mint-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-coral-mid);}

/* Pull quote */
.kq-pull{
  border-left:4px solid var(--kq-coral); 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;
}

/* ============ RESOURCES: CATEGORY SECTIONS + PRODUCT CARDS ============
   Every product gets its own card rather than a line in a list. The page is
   the site's main SEO surface, so each one carries artwork, a description in
   the words a teacher would search, and a direct link. */
.kq-catsec{margin-bottom:clamp(44px,6vw,72px); scroll-margin-top:90px;}
.kq-catsec:last-child{margin-bottom:0;}
.kq-catsec__head{max-width:62ch; margin-bottom:clamp(20px,3vw,30px);}
.kq-catsec__head h2{
  font-size:clamp(1.35rem,2.8vw,1.8rem); margin-bottom:.5rem; scroll-margin-top:90px;
}
.kq-catsec__head p{color:var(--kq-slate); font-size:.98rem;}

.kq-prodgrid{
  display:grid; gap:clamp(16px,2.2vw,22px);
  grid-template-columns:repeat(auto-fill, minmax(min(250px,100%), 1fr));
}
.kq-prod{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--kq-white); border:1px solid var(--kq-line);
  border-radius:var(--kq-radius); box-shadow:var(--kq-shadow);
  transition:transform .18s ease, box-shadow .18s ease;
}
.kq-prod:hover{transform:translateY(-3px); box-shadow:0 6px 12px rgba(43,42,40,.06), 0 18px 36px rgba(43,42,40,.10);}
.kq-prod__img{
  width:100%; aspect-ratio:1000/960; object-fit:cover; display:block;
  background:var(--kq-sand); border-bottom:1px solid var(--kq-line);
}
.kq-prod__img--none{
  background:repeating-linear-gradient(45deg, var(--kq-sand), var(--kq-sand) 7px,
             #fff 7px, #fff 14px);
}
.kq-prod__body{display:flex; flex-direction:column; flex:1; padding:clamp(14px,2vw,18px);}
.kq-prod__name{
  font-size:1rem; line-height:1.3; margin-bottom:.45rem; color:var(--kq-ink);
}
.kq-prod__desc{
  font-size:.9rem; line-height:1.5; color:var(--kq-slate); flex:1; margin-bottom:1rem;
}
.kq-prod__foot{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  flex-wrap:wrap; margin-top:auto;
}
.kq-prod__grade{
  font-size:.76rem; font-weight:700; color:var(--kq-mint-dk);
  background:var(--kq-sand); border-radius:999px; padding:.25em .75em;
}
.kq-prod__link{
  margin-left:auto; font-size:.88rem; font-weight:700; color:var(--kq-mint-dk);
  text-decoration:none; white-space:nowrap;
}
.kq-prod__link::after{content:' \2192';}
.kq-prod:hover .kq-prod__link{color:var(--kq-coral-dk); text-decoration:underline; text-underline-offset:3px;}
.kq-prod__free{
  display:inline-block; vertical-align:middle; margin-left:.35rem;
  font-family:var(--kq-ui); font-size:.66rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:var(--kq-brown); border-radius:999px; padding:.2em .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-mint-dk); color:var(--kq-mint-dk);}
.kq-jump span{
  font-size:.75rem; color:var(--kq-slate); background:var(--kq-sand);
  border-radius:999px; padding:.05em .5em;
}

/* 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-mint-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);
  /* The light mint tint reads as decoration but this is real text, and at
     2.17:1 it missed even the 3:1 large-text floor. mint-mid only reaches
     2.89, so this needs the full -dk. */
  color:var(--kq-mint-dk); line-height:1; margin-bottom:.5rem;
}

/* ============ FREE PRINTABLES PAGE ============ */
.kq-freebies{display:flex; flex-direction:column; gap:clamp(20px,3vw,30px);}
.kq-freebie{display:grid; grid-template-columns:300px 1fr; gap:clamp(22px,3.5vw,40px); align-items:center;}
.kq-freebie__img{
  width:100%; aspect-ratio:1000/960; object-fit:cover; display:block;
  border:1px solid var(--kq-line); border-radius:14px; background:var(--kq-sand);
}
.kq-freebie__body{min-width:0;}
.kq-freebie__body h2{font-size:clamp(1.3rem,2.4vw,1.65rem); margin-bottom:.6rem;}
.kq-freebie__body p{color:var(--kq-slate); margin-bottom:.9rem;}
.kq-freebie__meta{
  display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; margin:1.1rem 0 0;
}
.kq-freebie__meta li{
  font-size:.78rem; font-weight:600; color:var(--kq-slate);
  background:var(--kq-sand); border-radius:999px; padding:.3em .85em;
}
.kq-freebie__meta li strong{color:var(--kq-mint-dk);}
.kq-freebie .kq-btn-row{margin-top:1.3rem;}
@media (max-width:760px){
  .kq-freebie{grid-template-columns:1fr; gap:1.2rem;}
  .kq-freebie__img{max-width:340px;}
}

/* Newsletter block, when it gets switched on, sits inline on this page. */
.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;}