/**
 * Mercado Mayor — "Sobre Nosotros" page
 * ---------------------------------------------------------------------------
 * Body copy only. The video hero and the centred section heading come from
 * css/custom/page-hero.css, which this file is loaded after.
 *
 * The page is three editor paragraphs. Before this, they rendered as a plain
 * left-aligned column inside a 1560px shell, which read as broken rather than
 * minimal. The fix is a single centred measure with a clear entry point: the
 * opening paragraph is treated as a standfirst, the middle sets the detail, and
 * the closing belief statement is set apart.
 *
 * All of it keys off paragraph position, not added markup, so the copy stays
 * editable in the block editor and nothing is duplicated in PHP.
 */

/* ========================================================================
   BODY COPY
   ======================================================================== */
.mm-about__body{
  /* One measure for the whole column. This also has to beat the 76ch cap that
     b2b-marketplace.css §12 puts on `.entry-content > p` site-wide — the
     wrapper owns the width here, so the per-paragraph cap is released below. */
  max-width: 64ch;
  margin: 0 auto;
  padding-bottom: clamp(16px, 2vw, 32px);
}

/* font-family needs !important to beat `body.ctypo p { font-family: Cuprum }`,
   which the typography customizer prints after every stylesheet — see the note
   at the top of page-hero.css. */
.mm-about__body > p{
  max-width: none;
  margin: 0 0 1.15em;
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-md);
  line-height: 1.75;
  color: var(--mm-ink-muted);
  text-wrap: pretty;   /* avoids short last lines; ignored where unsupported */
}

.mm-about__body > p:last-child{
  margin-bottom: 0;
}

/* -- Opening paragraph reads as a standfirst ---------------------------- */
.mm-about__body > p:first-of-type{
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.6;
  font-weight: 400;
  color: var(--mm-ink);
  margin-bottom: 1.4em;
}

/* -- Closing belief statement, set apart -------------------------------- */
/* Position-based, so it degrades quietly: if more paragraphs are added later
   the emphasis simply moves to whichever one ends the section. The :not()
   guard keeps it from firing when there is only a single paragraph, which
   would otherwise be styled as both the lead and the closer at once. */
.mm-about__body > p:last-of-type:not(:first-of-type){
  margin-top: clamp(20px, 2.4vw, 32px);
  padding-top: clamp(20px, 2.4vw, 32px);
  border-top: 1px solid var(--mm-border);
  font-family: var(--mm-font-display) !important;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--mm-ink);
  text-align: center;
}

/* The source copy carries empty <sup></sup> footnote markers left over from
   wherever it was pasted from; they add stray inline boxes. */
.mm-about__body sup:empty{
  display: none;
}

/* Images or embeds dropped into the page later should not be trapped inside
   the text measure. */
.mm-about__body > figure,
.mm-about__body > .wp-block-image,
.mm-about__body > .wp-block-embed{
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.mm-about__body img{
  height: auto;
  max-width: 100%;
  border-radius: var(--mm-radius);
}

/* ========================================================================
   MOBILE
   ========================================================================
 * The side gutter itself comes from b2b-marketplace.css §12a, which now applies
 * at every width. What is left here is the type: at 375px a 19px standfirst on
 * a ~44 character line was too heavy against the 15px body below it, so the two
 * are brought closer together and the closing statement is de-emphasised a step.
 */
@media (max-width: 599px){
  .mm-about__body > p{
    font-size: var(--mm-text-base);
    line-height: 1.7;
  }

  .mm-about__body > p:first-of-type{
    font-size: var(--mm-text-md);
    line-height: 1.65;
    margin-bottom: 1.2em;
  }

  .mm-about__body > p:last-of-type:not(:first-of-type){
    font-size: var(--mm-text-md);
    line-height: 1.55;
    text-align: left;   /* centred serif over 3+ short lines reads as ragged */
  }
}