/* My Kitchen — "Plan. Cook. Nourish. Together." panel, above the Meal Planner block.
   Built from her mockup, recoloured into the HU palette (the mockup's blush accents
   would break the no-pink rule). Fully responsive, no fixed heights, no images. */
/* cap upscaling at the art's native width so it never goes soft */
#huKitchenReact .hu-mk-hero-img{ display:block; width:100%; max-width:1983px; height:auto; margin:0 auto; }
#huMkHero{ margin:0 0 28px; font-family:'Nunito',system-ui,sans-serif; }
#huMkHero *{ box-sizing:border-box; }

/* ---- top: title + quick actions, with the hydration card alongside ---- */
#huMkHero .mkh-top{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:22px; align-items:start; }
#huMkHero .mkh-title{ margin:0 0 6px; font-family:'Playfair Display',Georgia,serif; font-weight:700;
  font-size:clamp(2rem,4.4vw,3.1rem); line-height:1.05;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important; }
#huMkHero .mkh-swash{ display:block; width:min(280px,60%); height:10px; margin:0 0 12px; color:#7D9E77; }
#huMkHero .mkh-sr{ position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; margin:0; padding:0; border:0; }
#huMkHero .mkh-sub{ margin:0 0 20px; font-size:clamp(1rem,1.5vw,1.15rem); line-height:1.6;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important; }
#huMkHero .mkh-sub b{ font-weight:800; color:#243447 !important; -webkit-text-fill-color:#243447 !important; }

#huMkHero .mkh-quick{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; margin-bottom:16px; }
/* small arrow CTA on the hydration card, matching the quick-card arrow */
#huMkHero .mkh-hyd-go{ display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(18,33,58,.14); background:#fff;
  font-family:inherit; font-size:1.15rem; line-height:1; transition:transform .2s, background .2s, border-color .2s;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important; }
#huMkHero .mkh-hyd-go:hover{ background:#EEF4EC; border-color:#C9DAC6; transform:translateX(3px); }
#huMkHero .mkh-hyd-go:focus-visible{ outline:3px solid #CF9E3F; outline-offset:2px; }
#huMkHero .mkh-q{ display:flex; align-items:center; gap:13px; width:100%; text-align:left; cursor:pointer;
  border:1px solid rgba(18,33,58,.10); border-radius:18px; padding:15px 17px; background:#FBF8F2;
  font-family:inherit; transition:transform .2s, box-shadow .2s, border-color .2s; }
#huMkHero .mkh-q:nth-child(2){ background:#EEF4EC; }
#huMkHero .mkh-q:hover{ transform:translateY(-2px); border-color:rgba(18,33,58,.2);
  box-shadow:0 10px 26px rgba(36,52,71,.08); }
#huMkHero .mkh-q:focus-visible{ outline:3px solid #CF9E3F; outline-offset:2px; }
#huMkHero .mkh-q-ic{ flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:#fff; border:1px solid rgba(18,33,58,.08); font-size:1.15rem; }
#huMkHero .mkh-q-b{ min-width:0; flex:1; }
#huMkHero .mkh-q-t{ display:block; font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important; }
#huMkHero .mkh-q-d{ display:block; margin-top:3px; font-size:.88rem; line-height:1.4;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important; }
#huMkHero .mkh-q-ar{ flex:none; color:#7D9E77; font-size:1.1rem; line-height:1; transition:transform .2s; }
#huMkHero .mkh-q:hover .mkh-q-ar{ transform:translateX(3px); }

#huMkHero .mkh-quote{ display:flex; align-items:center; justify-content:center; gap:10px; text-align:center;
  border:1.5px dashed #C9DAC6; border-radius:20px; padding:15px 20px; background:#FBF8F2;
  font-family:'Playfair Display',Georgia,serif; font-size:clamp(1.02rem,1.8vw,1.3rem);
  color:#243447 !important; -webkit-text-fill-color:#243447 !important; }
#huMkHero .mkh-quote span{ color:#7D9E77; }

/* ---- hydration card ---- */
#huMkHero .mkh-hyd{ border:1px solid rgba(18,33,58,.10); border-radius:22px; padding:20px; background:#F2F7F7; }
#huMkHero .mkh-hyd-ic{ width:42px; height:42px; border-radius:13px; display:grid; place-items:center;
  background:#fff; border:1px solid rgba(18,33,58,.08); font-size:1.2rem; margin-bottom:12px; }
#huMkHero .mkh-hyd-t{ margin:0 0 4px; font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important; }
#huMkHero .mkh-hyd-d{ margin:0 0 14px; font-size:.88rem; line-height:1.55;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important; }
#huMkHero .mkh-cups{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
#huMkHero .mkh-cup{ width:22px; height:26px; border-radius:4px 4px 9px 9px; border:1.5px solid #A9C6C4; background:#fff; }
#huMkHero .mkh-cup.is-on{ background:#A9C6C4; }

/* ---- four action cards ---- */
#huMkHero .mkh-cards{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:22px; }
#huMkHero .mkh-card{ display:flex; flex-direction:column; text-align:left; cursor:pointer; width:100%;
  border:1px solid rgba(18,33,58,.10); border-radius:22px; padding:20px; background:#fff; font-family:inherit;
  transition:transform .2s, box-shadow .2s, border-color .2s; }
#huMkHero .mkh-card:hover{ transform:translateY(-3px); border-color:rgba(18,33,58,.2);
  box-shadow:0 14px 34px rgba(36,52,71,.10); }
#huMkHero .mkh-card:focus-visible{ outline:3px solid #CF9E3F; outline-offset:2px; }
#huMkHero .mkh-c-ic{ width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  font-size:1.25rem; margin-bottom:13px; background:#EEF4EC; }
#huMkHero .mkh-card:nth-child(2) .mkh-c-ic{ background:#F4EFE2; }
#huMkHero .mkh-card:nth-child(3) .mkh-c-ic{ background:#EDF1F6; }
#huMkHero .mkh-card:nth-child(4) .mkh-c-ic{ background:#F2F7F7; }
#huMkHero .mkh-c-t{ margin:0 0 6px; font-family:'Playfair Display',Georgia,serif; font-size:1.06rem; font-weight:700;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important; }
#huMkHero .mkh-c-d{ margin:0 0 16px; font-size:.86rem; line-height:1.6;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important; }
#huMkHero .mkh-c-go{ margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:7px;
  border-radius:999px; padding:9px 17px; font-size:.83rem; font-weight:800;
  background:#243447; color:#fff !important; -webkit-text-fill-color:#fff !important; }
#huMkHero .mkh-tag{ display:inline-block; margin-left:8px; border-radius:999px; padding:2px 9px;
  font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  background:#F4EFE2; color:#8A6A2F !important; -webkit-text-fill-color:#8A6A2F !important; }

/* ---- what's for dinner ---- */
#huMkHero .mkh-dinner{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:18px;
  border:1px solid rgba(18,33,58,.10); border-radius:22px; padding:20px 22px; background:#FBF8F2; }
#huMkHero .mkh-d-ic{ flex:none; width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background:#fff; border:1px solid rgba(18,33,58,.08); font-size:1.3rem; }
#huMkHero .mkh-d-b{ flex:1 1 260px; min-width:0; }
#huMkHero .mkh-d-t{ margin:0 0 4px; font-family:'Playfair Display',Georgia,serif; font-size:1.1rem; font-weight:700;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important; }
#huMkHero .mkh-d-d{ margin:0; font-size:.88rem; line-height:1.55;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important; }
#huMkHero .mkh-d-btn{ flex:none; cursor:pointer; border:0; border-radius:999px; padding:11px 22px;
  font-family:inherit; font-size:.86rem; font-weight:800; background:#243447;
  color:#fff !important; -webkit-text-fill-color:#fff !important; transition:background .2s; }
#huMkHero .mkh-d-btn:hover{ background:#31465F; }
#huMkHero .mkh-d-btn:focus-visible{ outline:3px solid #CF9E3F; outline-offset:2px; }

/* ---- responsive ---- */
@media (max-width:1024px){
  #huMkHero .mkh-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px){
  #huMkHero .mkh-top{ grid-template-columns:minmax(0,1fr); }
  #huMkHero .mkh-hyd{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
  #huMkHero .mkh-hyd-ic{ margin-bottom:0; }
  #huMkHero .mkh-hyd-b{ flex:1 1 220px; min-width:0; }
  #huMkHero .mkh-hyd-d{ margin-bottom:0; }
  #huMkHero .mkh-cups{ margin-bottom:0; }
}
@media (max-width:620px){
  #huMkHero .mkh-quick{ grid-template-columns:minmax(0,1fr); }
  #huMkHero .mkh-cards{ grid-template-columns:minmax(0,1fr); }
  #huMkHero .mkh-swash{ width:70%; }
  #huMkHero .mkh-dinner{ padding:18px; }
  #huMkHero .mkh-d-btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  #huMkHero .mkh-q, #huMkHero .mkh-card, #huMkHero .mkh-q-ar, #huMkHero .mkh-d-btn, #huMkHero .mkh-hyd-go{ transition:none !important; }
  #huMkHero .mkh-q:hover, #huMkHero .mkh-card:hover{ transform:none; }
}