/* ==========================================================================
   MY KITCHEN — square illustrated CTA tiles.
   Replaces the text-and-arrow rows. Loaded AFTER hu-mkx-css so it wins.
   Class prefix mkq- (verified free, and avoids the -card/-tile/-tag/-pill/
   -badge suffix traps).
   ========================================================================== */

/* the panels themselves lift: more colour, more air, less pale wash */
#mkxSec .mkx-tile{
  padding:22px clamp(16px,2.4vw,22px) 24px !important;
  border-radius:26px !important;
}
/* Group headings (Plan, Cook, Enjoy…) were a small uppercase eyebrow at
   .78rem. Now the actual heading of each card (Sep 2026, her request). */
#mkxSec .mkx-tn{
  font-family:'Playfair Display',Georgia,serif !important;
  font-size:clamp(1.35rem,2.6vw,1.85rem) !important;
  font-weight:700 !important;
  letter-spacing:.005em !important;
  text-transform:none !important;
  line-height:1.15 !important;
  margin:0 0 2px !important;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
/* the tagline under it grows a little so the pairing still balances */
#mkxSec .mkx-tt{
  font-size:1rem !important; line-height:1.5 !important;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important;
}

/* two square tiles across inside each panel, one across on small phones */
#mkxSec .mkq-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
  margin-top:14px !important;
}
#mkxSec .mkx-tile.is-wide .mkq-grid{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}

#mkxSec .mkq-t{
  display:flex !important; flex-direction:column !important; align-items:stretch !important;
  gap:0 !important; width:100% !important; padding:0 !important; min-height:0 !important;
  background:#fff !important; border:1px solid rgba(36,52,71,.09) !important;
  border-radius:18px !important; overflow:hidden !important; cursor:pointer;
  box-shadow:0 4px 14px rgba(36,52,71,.07);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  text-align:left !important;
}
#mkxSec .mkq-t:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(36,52,71,.16);
  border-color:rgba(36,52,71,.16) !important;
}
#mkxSec .mkq-t:focus-visible{ outline:3px solid #CF9E3F; outline-offset:2px; }

/* the picture: a true square, whatever the column width */
#mkxSec .mkq-frame{
  display:block; width:100%; aspect-ratio:1/1; position:relative; overflow:hidden;
  background:#EEF4EC;
}
#mkxSec .mkq-art{ display:block; width:100%; height:100%; }
/* a supplied photograph fills the same square frame as a drawn tile */
#mkxSec .mkq-photo{ display:block; width:100%; height:100%; object-fit:cover; }

#mkxSec .mkq-l{
  display:block; padding:11px 12px 13px; font-size:.88rem; font-weight:800; line-height:1.35;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}

/* the arrow is gone — the picture is the affordance now */
#mkxSec .mkq-t .mkx-arw{ display:none !important; }

/* Quick tools and Kitchen inspiration were the same flat text rows, so they get
   a lift too rather than being left looking like the old design. */
#mkxSec .mkx-tool, #mkxSec .mkx-ic{
  border-radius:14px !important;
  border:1px solid rgba(36,52,71,.10) !important;
  box-shadow:0 3px 12px rgba(36,52,71,.06);
  transition:transform .16s ease, box-shadow .16s ease;
}
#mkxSec .mkx-tool:hover, #mkxSec .mkx-ic:hover{
  transform:translateY(-2px); box-shadow:0 10px 22px rgba(36,52,71,.12);
}

@media (max-width:1100px){
  #mkxSec .mkx-tile.is-wide .mkq-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:520px){
  #mkxSec .mkq-grid,
  #mkxSec .mkx-tile.is-wide .mkq-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; }
  #mkxSec .mkq-l{ padding:9px 10px 11px; font-size:.82rem; }
}

/* A wide group with five tiles gets five columns rather than four-plus-orphan. */
#mkxSec .mkx-tile.is-wide .mkq-grid.is-5{ grid-template-columns:repeat(5,minmax(0,1fr)) !important; }
@media (max-width:1100px){
  #mkxSec .mkx-tile.is-wide .mkq-grid.is-5{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}
@media (max-width:700px){
  #mkxSec .mkx-tile.is-wide .mkq-grid.is-5{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

/* Six tiles in a wide group read better as two rows of three than one row of six. */
#mkxSec .mkx-tile.is-wide .mkq-grid.is-6{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
@media (max-width:700px){
  #mkxSec .mkx-tile.is-wide .mkq-grid.is-6{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

/* Seven or more tiles in a wide group: four columns, wrapping naturally. */
#mkxSec .mkx-tile.is-wide .mkq-grid.is-7{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
@media (max-width:1100px){
  #mkxSec .mkx-tile.is-wide .mkq-grid.is-7{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}
@media (max-width:700px){
  #mkxSec .mkx-tile.is-wide .mkq-grid.is-7{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

/* Three tiles in a wide group: three columns, not four with a gap at the end. */
#mkxSec .mkx-tile.is-wide .mkq-grid.is-3{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
@media (max-width:700px){
  #mkxSec .mkx-tile.is-wide .mkq-grid.is-3{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}