/* =====================================================================
   Explore & Grow — permanent evergreen Kids Corner area
   Used by: kids.html (clickable "Keep Growing!" graphic) and
            explore-and-grow.html (activities hub).
   Own file on purpose: never touches styles.css or the monthly
   Kids Corner Spotlight / campaign styling.
   ===================================================================== */
:root{
  --eg-green:#3f7d3a;
  --eg-green-deep:#2c5a2a;
  --eg-blue:#1f6fb5;
  --eg-sky:#e6f4fc;
  --eg-leaf:#eaf3df;
  --eg-heart:#d9556b;
}

/* ---------- Kids Corner main page: the clickable graphic ---------- */
.eg-banner-section{padding-top:6px;padding-bottom:30px;border-bottom:none;}
.eg-banner-wrap{max-width:1100px;margin:0 auto;padding:0 20px;}
.eg-banner{
  display:block;width:100%;line-height:0;text-decoration:none;
  transition:transform .22s ease, box-shadow .22s ease;
  -webkit-tap-highlight-color:transparent;
}
.eg-banner img{display:block;width:100%;height:auto;} /* exact ratio, never cropped */
@media (hover:hover){
  .eg-banner:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(44,90,42,.25);}
}
.eg-banner:focus-visible{outline:4px solid var(--gold);outline-offset:4px;}

/* ---------- Explore & Grow page ---------- */
.eg-page{background:#fffdf7;}
.eg-wrap{max-width:980px;margin:0 auto;padding:0 22px;}

.eg-hero{
  position:relative;text-align:center;overflow:hidden;padding:54px 0 96px;
  background:linear-gradient(180deg,var(--eg-sky) 0%,#f6fbef 66%,#eaf3df 100%);
}
.eg-hero::before{
  content:'';position:absolute;top:-80px;right:-60px;width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle,#ffe58a 0 45%,rgba(255,229,138,0) 72%);
}
.eg-kicker{
  display:inline-block;font-family:'Oswald',sans-serif;font-size:14px;font-size:clamp(12px,3.2vw,15px);
  letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--eg-green-deep);
  background:rgba(255,255,255,.7);border:2px dashed #8dbb7c;border-radius:30px;padding:8px 18px;
}
.eg-hero h1{
  font-family:'Playfair Display',serif;font-weight:900;line-height:1.1;margin:20px 0 16px;
  font-size:3rem;font-size:clamp(2.2rem,7.5vw,3.8rem);color:var(--eg-blue);
}
.eg-hero h1 span{color:var(--eg-green);}
.eg-hero{padding-left:0;}
.eg-welcome{max-width:640px;margin:0 auto;font-size:1.15rem;line-height:1.8;color:var(--ink);}
.eg-chips{display:flex;flex-wrap:wrap;justify-content:center;margin-top:24px;}
.eg-chip{
  font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  padding:8px 18px;margin:5px;border-radius:30px;background:#fff;border:2px solid;
}
.eg-chip.c1{color:#3f7d3a;border-color:#a9d08e;}
.eg-chip.c2{color:#c23a7a;border-color:#f0a9cb;}
.eg-chip.c3{color:#1f6fb5;border-color:#a3cdee;}
.eg-chip.c4{color:#d9741a;border-color:#f3c18f;}
.eg-grass{
  position:absolute;left:0;right:0;bottom:0;height:44px;
  background:
    radial-gradient(circle at 10px 44px,var(--eg-green) 0 16px,transparent 17px) 0 0/28px 44px repeat-x,
    radial-gradient(circle at 24px 44px,#5a9a4e 0 14px,transparent 15px) 0 0/28px 44px repeat-x;
}

/* Activities */
.eg-section{padding:46px 0 70px;}
.eg-section-head{text-align:center;margin-bottom:28px;}
.eg-section-head .eg-small{
  display:block;font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--eg-green-deep);margin-bottom:6px;
}
.eg-section-head h2{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(1.5rem,4.4vw,2.1rem);margin:0;color:var(--ink);}

/* One card per activity. To add an activity, copy a whole .eg-card block. */
.eg-grid{display:grid;grid-template-columns:1fr;gap:28px;}
.eg-card{
  display:flex;align-items:center;
  background:#fff;border:2px solid var(--gold);border-radius:16px;padding:26px;position:relative;
  box-shadow:0 8px 22px rgba(63,125,58,.10);
}
.eg-card-body{flex:1 1 auto;min-width:0;}
.eg-card-thumb{flex:0 0 200px;width:200px;margin-right:28px;background:#fff;border:1px solid var(--rule);padding:6px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.12);}
.eg-card-thumb img{display:block;width:100%;height:auto;} /* full image, never cropped */
.eg-badge{
  display:inline-block;font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:#fff;background:#e0457b;border-radius:30px;padding:6px 14px;margin-bottom:10px;
}
.eg-card h3{font-family:'Playfair Display',serif;font-weight:900;font-size:2rem;font-size:clamp(1.7rem,5vw,2.3rem);line-height:1.1;margin:0 0 6px;color:var(--eg-green);text-transform:uppercase;}
.eg-card h3 span{color:var(--eg-heart);}
.eg-tagline{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:700;font-size:1.3rem;color:var(--ink);margin:0 0 8px;}
.eg-question{font-weight:600;color:var(--eg-green-deep);font-size:1.05rem;margin:0 0 10px;}
.eg-card p.eg-desc{font-size:1.02rem;line-height:1.7;margin:0 0 18px;}
.eg-card .btn{background:var(--eg-green);color:#fff;}
.eg-card .btn:hover{background:var(--eg-green-deep);}
.eg-more{text-align:center;margin-top:34px;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.25rem;color:#5b6a4f;}

/* Closing */
.eg-closing{padding:46px 0 52px;text-align:center;background:linear-gradient(180deg,#eaf3df 0%,#dcebc9 100%);border-top:4px solid var(--gold);}
.eg-closing h2{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(1.5rem,5vw,2.2rem);color:var(--eg-green-deep);margin:0 0 20px;}
.eg-closing .btn.ghost{border:2px solid var(--eg-green-deep);color:var(--eg-green-deep);background:#fff;}
.eg-closing .btn.ghost:hover{background:var(--eg-leaf);}

@media (max-width:700px){
  .eg-hero{padding:44px 0 90px;}
  .eg-card{flex-direction:column;padding:22px 18px;text-align:center;}
  .eg-card-thumb{flex:0 0 auto;width:210px;max-width:100%;margin:0 auto 20px;}
}
@media (max-width:480px){
  .eg-banner-wrap{padding:0 10px;}
}