/* ==========================================================================
   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, #EAF5F9 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-pink-dk);}
.kq-hero__lede{font-size:clamp(1.05rem,1.8vw,1.22rem); color:var(--kq-slate); max-width:52ch;}

.kq-hero__proof{
  display:flex; flex-wrap:wrap; gap:1.5rem 2.25rem; margin-top:2.25rem;
  padding-top:1.75rem; border-top:1px solid var(--kq-line);
}
.kq-hero__proof div{display:flex; flex-direction:column;}
.kq-hero__proof strong{
  font-family:var(--kq-display); font-size:1.5rem; color:var(--kq-blue-dk); line-height:1.1;
}
.kq-hero__proof span{font-size:.85rem; color:var(--kq-slate); font-weight:600;}

/* Hero art — a stack of "feeling cards", built in CSS so there's no image
   dependency. Replace with a real product mockup once covers are available. */
.kq-hero__art{position:relative; min-height:340px;}
.kq-feelcard{
  position:absolute; width:150px; padding:1.1rem 1rem; border-radius:var(--kq-radius);
  background:#fff; box-shadow:var(--kq-shadow); text-align:center;
  font-family:var(--kq-display); font-weight:600; font-size:.95rem;
}
.kq-feelcard span{display:block; font-size:2rem; line-height:1; margin-bottom:.45rem;}
.kq-feelcard--1{top:8%;  left:2%;  transform:rotate(-7deg);  background:#FFF3F6;}
.kq-feelcard--2{top:0;    right:6%; transform:rotate(5deg);   background:#EAF5F9;}
.kq-feelcard--3{bottom:6%;left:16%; transform:rotate(4deg);   background:#FFF9E8;}
.kq-feelcard--4{bottom:14%;right:2%;transform:rotate(-5deg);  background:#EDF7F1;}
.kq-hero__blob{
  position:absolute; inset:18% 12% 18% 12%; border-radius:50%;
  background:var(--kq-blue); opacity:.16; filter:blur(8px);
}

@media (max-width:880px){
  .kq-hero__inner{grid-template-columns:1fr;}
  .kq-hero__art{min-height:300px; order:-1;}
}
@media (max-width:520px){
  .kq-hero__art{min-height:250px;}
  .kq-feelcard{width:124px; font-size:.85rem; padding:.9rem .8rem;}
  .kq-feelcard span{font-size:1.6rem;}
}

/* ============ 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:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; place-items:center;
  padding:1.5rem; aspect-ratio:1; font-size:clamp(1.6rem,3.5vw,2.4rem);
  background:#fff; border:1px solid var(--kq-line); border-radius:var(--kq-radius);
  box-shadow:var(--kq-shadow);
}
@media (max-width:760px){
  .kq-freeband{grid-template-columns:1fr;}
  .kq-freeband__art{max-width:260px; margin-inline:auto; order:-1;}
}