/**
 * Mercado Mayor — "Carrera" page
 * ---------------------------------------------------------------------------
 * Value-card grid only. The video hero and the centred section heading moved
 * to css/custom/page-hero.css once "Sobre Nosotros" reused the same pattern —
 * this file is loaded after it and only owns what is specific to this page.
 *
 * The four cards come from the block editor, which writes its sizing straight
 * into `style="..."` attributes. Inline styles beat any stylesheet, so most of
 * the geometry below needs !important — that is why it is here rather than in
 * the block itself.
 */

/* ========================================================================
   VALUE CARDS — compact 4-up grid
   ========================================================================
 * The block markup is two .wp-block-column stacks of two cards each, which
 * forced a 2-up layout. With the shell now up to 1560px wide that made each
 * card ~700px across — far too big for one heading and three lines.
 *
 * `display: contents` on the column wrappers lifts the four cards out of their
 * stacks and makes them direct children of the grid, so the row can be four
 * across on a desktop and still collapse cleanly. No block markup changes, so
 * the cards stay editable in the editor.
 */
.mm-values .wp-block-columns{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.3vw, 20px);
  align-items: stretch;
  margin: 0;
}

.mm-values .wp-block-column{
  display: contents;
}

/* The editor's spacer blocks are redundant once the grid owns the spacing */
.mm-values .wp-block-spacer{
  display: none !important;
  height: 0 !important;
}

/* ---- Card shell ----
   overflow:hidden clips the accent bar to the rounded corners. */
.mm-values .wp-block-group{
  position: relative;
  overflow: hidden;
  height: 100%;
  padding: 20px 18px !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04) !important;
  background: var(--mm-surface);
  transition: border-color .3s var(--mm-ease),
              box-shadow .3s var(--mm-ease),
              transform .3s var(--mm-ease);
}

/* Accent bar wipes across the top on hover */
.mm-values .wp-block-group::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mm-accent), #F87171);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s var(--mm-ease);
}

.mm-values .wp-block-group:hover{
  border-color: transparent !important;
  box-shadow: 0 12px 28px rgba(17, 24, 39, .10) !important;
  transform: translateY(-3px);
}

.mm-values .wp-block-group:hover::before{
  transform: scaleX(1);
}

.mm-values .wp-block-group__inner-container{
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ---- Icon chip ----
   The editor renders a 40px tinted square inline, so these need !important.
   It flips to solid accent with a white glyph on hover. */
.mm-values .wp-block-group__inner-container > div:first-child{
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background-color: #FBEEEC !important;
  margin-bottom: 14px !important;
  flex: 0 0 auto;
  transition: background-color .3s var(--mm-ease),
              transform .3s var(--mm-ease);
}

.mm-values .wp-block-group:hover
  .wp-block-group__inner-container
  > div:first-child{
  background-color: var(--mm-accent) !important;
  transform: scale(1.05);
}

/* CSS beats the SVG's stroke="#DC2626" presentation attribute */
.mm-values .wp-block-group svg{
  width: 17px;
  height: 17px;
  stroke: var(--mm-accent);
  transition: stroke .3s var(--mm-ease);
}

.mm-values .wp-block-group:hover svg{
  stroke: #fff;
}

/* ---- Type ----
   The editor writes font-size:20px / 15px inline on these, hence !important on
   the sizes. font-family needs it too, because the card titles are <h3> and the
   typography customizer prints `body.ctypo h3 { font-family: Chewy }` after
   every stylesheet — see the note at the top of page-hero.css. */
.mm-values .wp-block-heading{
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 10px !important;
  font-family: var(--mm-font-display) !important;
  font-size: var(--mm-text-lg) !important;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
}

/* Rule under the title, widening on hover */
.mm-values .wp-block-heading::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--mm-accent);
  transition: width .35s var(--mm-ease);
}

.mm-values .wp-block-group:hover .wp-block-heading::after{
  width: 48px;
}

.mm-values .wp-block-group p{
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-sm) !important;
  line-height: 1.6 !important;
  color: var(--mm-ink-muted) !important;
}

/* ========================================================================
   RESPONSIVE
   ========================================================================
 * Explicit even splits rather than auto-fit: with exactly four cards, letting
 * the browser choose would land on an unbalanced 3 + 1 row at some widths.
 */
@media (max-width: 1199px){
  .mm-values .wp-block-columns{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* One column on phones. The cards read as full-bleed slabs before the shell
   gained a real side gutter (b2b-marketplace.css §12a) — with that in place they
   sit inset from the edges, and the tighter padding here keeps each one to a
   compact block rather than a screenful. */
@media (max-width: 599px){
  .mm-values .wp-block-columns{
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .mm-values .wp-block-group{
    padding: 15px 14px !important;
    border-radius: 10px !important;
  }
  .mm-values .wp-block-group__inner-container > div:first-child{
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    margin-bottom: 10px !important;
  }
  .mm-values .wp-block-group svg{
    width: 15px;
    height: 15px;
  }
  .mm-values .wp-block-heading{
    font-size: var(--mm-text-md) !important;
    padding-bottom: 8px;
    margin-bottom: 8px !important;
  }
}