/* ==========================================================================
   KQ LEARNING STUDIO — home.css
   Homepage-only sections: hero, category grid, Miranda intro, newsletter, CTA.
   ========================================================================== */

/* ============ HERO ============ */
.kq-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(170deg, #EAF4F0 0%, var(--kq-cream) 62%);
  padding-block:clamp(48px,7vw,88px) clamp(56px,8vw,96px);
}
.kq-hero__inner{
  display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(32px,5vw,64px);
  align-items:center;
}
.kq-hero h1{font-size:clamp(2.05rem, 5vw, 3.35rem); margin-bottom:1.1rem;}
.kq-hero h1 em{font-style:normal; color:var(--kq-coral-dk);}
.kq-hero__lede{font-size:clamp(1.05rem,1.8vw,1.22rem); color:var(--kq-slate); max-width:52ch;}

/* Always three across. As a flex-wrap row the third stat dropped to its own
   line as soon as the column got tight, which read as a mistake. */
.kq-hero__proof{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(.75rem, 2vw, 1.75rem);
  margin-top:2.25rem; padding-top:1.75rem; border-top:1px solid var(--kq-line);
}
.kq-hero__proof div{display:flex; flex-direction:column; min-width:0;}
.kq-hero__proof strong{
  font-family:var(--kq-display); font-size:clamp(1.2rem, 2.1vw, 1.5rem);
  color:var(--kq-mint-dk); line-height:1.1;
}
.kq-hero__proof span{
  font-size:clamp(.76rem, 1.1vw, .85rem); color:var(--kq-slate);
  font-weight:600; line-height:1.35; text-wrap:balance;
}

/* Hero art — a loose fan of real printables. Each image is exactly 1000x960
   from scripts/make-product-images.py, so the declared ratio reserves the right
   box and nothing shifts as they load. Not lazy-loaded: it's above the fold. */
.kq-hero__art{position:relative; min-height:400px;}
.kq-herocard{
  position:absolute; margin:0; width:52%; border-radius:14px; overflow:hidden;
  background:#fff; border:1px solid rgba(255,255,255,.9);
  box-shadow:0 3px 8px rgba(43,42,40,.07), 0 18px 40px rgba(43,42,40,.14);
}
.kq-herocard img{width:100%; aspect-ratio:1000/960; object-fit:cover; display:block;}
.kq-herocard--1{top:0;      left:0;    transform:rotate(-6deg); z-index:2;}
.kq-herocard--2{top:24%;    right:0;   transform:rotate(5deg);  z-index:3;}
.kq-herocard--3{bottom:0;   left:14%;  transform:rotate(2deg);  z-index:1;}
.kq-hero__blob{
  position:absolute; inset:16% 10% 16% 10%; border-radius:50%;
  background:var(--kq-mint); opacity:.16; filter:blur(10px);
}

@media (max-width:880px){
  .kq-hero__inner{grid-template-columns:1fr;}
  /* width:100% is load-bearing. margin-inline:auto cancels the grid item's
     default stretch, and every child here is position:absolute, so without an
     explicit width the box collapses to zero and the collage vanishes. */
  .kq-hero__art{
    width:100%; max-width:460px; margin-inline:auto;
    min-height:360px; order:-1;
  }
}
@media (max-width:520px){
  .kq-hero__art{min-height:340px;}
  .kq-herocard{width:53%;}
  .kq-herocard--3{left:10%;}
}

/* ============ FREEBIE BAND ============
   Also carries the "calm down corner" keyword, which no longer has a category
   of its own — there was only ever one product behind it. */
.kq-freeband{
  display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(24px,4vw,48px);
  align-items:center;
}
.kq-freeband__art{
  display:block; border-radius:var(--kq-radius); overflow:hidden;
  border:1px solid var(--kq-line); box-shadow:var(--kq-shadow); background:#fff;
  transition:transform .18s ease;
}
.kq-freeband__art:hover{transform:translateY(-3px);}
.kq-freeband__art img{width:100%; aspect-ratio:1000/960; object-fit:cover; display:block;}
@media (max-width:760px){
  .kq-freeband{grid-template-columns:1fr;}
  .kq-freeband__art{max-width:260px; margin-inline:auto; order:-1;}
}