/* ============================================================
   MATTO BLOG — blog article styles
   ============================================================ */

.brxe-post-content {

  /* ---------- Texto base ---------- */

  h1, h2, h3 {
    font-family: var(--fd);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -1px;
    line-height: 1;
    color: var(--color-dark);          /* #2B2626 espresso */
  }

  h1 { font-size: var(--fs-heading-1); margin-bottom: var(--space-6); }
  h2 { font-size: var(--fs-heading-2); margin: var(--space-7) 0 var(--space-4); }
  h3 { font-size: var(--fs-heading-3); margin: var(--space-6) 0 var(--space-3); letter-spacing: 0; }

  p, li {
    font-family: var(--fdu);
    font-size: var(--fs-body);
    line-height: 1.8;
    color: rgba(43, 38, 38, 0.8);      /* espresso al 80% */
  }

  p { margin-bottom: var(--space-5); }

  ul, ol { padding-left: 24px; margin-bottom: var(--space-5); }
  li { margin-bottom: var(--space-2); }

  strong { font-weight: 700; color: var(--color-dark); }

  a {
    color: var(--red);                  /* #C13623 borgoña */
    text-decoration: underline;
    text-underline-offset: 3px;

    &:hover { opacity: 0.65; }
  }

  /* ---------- Eyebrow + headline ----------
     El eyebrow ES el h-tag real (SEO). El headline va debajo
     como <p class="headline">, visual, sin jerarquía. */

 h1.mtt-eyebrow, h2.mtt-eyebrow, h3.mtt-eyebrow {
    font-family: var(--fu) !important;
    font-size: var(--fs-eyebrow) !important;
    font-weight: 500 !important;
    letter-spacing: 2.2px !important;
    text-transform: uppercase !important;
    line-height: 1.4 !important;
    color: var(--red) !important;
    margin: 0 0 var(--space-2) !important;
  }

  .headline {
    font-family: var(--fd);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.05;
    font-size: var(--fs-heading-1);
    color: var(--color-dark);
    margin: 0 0 var(--space-5);
  }

  .post-intro {
    font-family: var(--fdu);
    font-size: var(--fs-body-lead);
    line-height: 1.6;
    color: var(--color-dark);
  }

  /* ---------- Review quote ---------- */

  blockquote.blog-review-quote {
    position: relative;
    margin: var(--space-7) 0;
    padding: clamp(3rem, 8vw, 5rem) var(--space-5) var(--space-6);
    border-left: 0;
    border-top: 1px solid rgba(43, 38, 38, 0.15);
    border-bottom: 1px solid rgba(43, 38, 38, 0.15);
    font-family: var(--fdu);
    font-style: italic;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.35;
    color: var(--red);                  /* borgoña: premium y legible */
    text-align: center;

    &::before {
      content: "\201C";
      position: absolute;
      top: var(--space-4);
      left: 50%;
      transform: translateX(-50%);
      font-size: clamp(3rem, 7vw, 5rem);
      line-height: 1;
      color: #A8873A;                   /* dorado, solo decorativo */
    }

    cite {
      display: block;
      margin-top: var(--space-4);
      font-family: var(--fu);
      font-style: normal;
      font-size: var(--fs-caption);
      letter-spacing: 1.98px;
      text-transform: uppercase;
      color: rgba(43, 38, 38, 0.55);

      a { color: inherit; }
    }
  }

  /* ---------- Imagen ---------- */

  img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: var(--space-7) auto 0;
    border-radius: 4px;
  }

  figcaption {
    font-family: var(--fu);
    font-size: var(--fs-caption);
    text-align: center;
    color: rgba(43, 38, 38, 0.55);
    margin: var(--space-3) 0 var(--space-6);
  }
}

/* ---------- Highlight box ("in short") ---------- */

.blog-highlight {
  margin: var(--space-7) 0;
  padding: var(--space-5);
  background: rgba(193, 54, 35, 0.06);  /* borgoña al 6% */
  border-left: 2px solid var(--red);
  border-radius: 4px;

  h2, h3 { margin: 0 0 var(--space-3); font-size: var(--fs-heading-3); }
  ul { margin: 0; }
  p:last-child { margin-bottom: 0; }
}

/* ---------- Panel grid ---------- */

.blog-panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-5);
  margin: var(--space-7) 0;

  .blog-panel {
    padding: var(--space-5);
    border: 1px solid rgba(43, 38, 38, 0.14);
    border-radius: 4px;
    background: rgba(43, 38, 38, 0.03);
  }

  h3 { margin-top: 0; }
  p:last-child { margin-bottom: 0; }
}

/* ---------- Menu card (fixed-price menus) ----------
   White card, gold border, centred. Same type as body text. */

.blog-menu {
  max-width: 800px;
  margin: var(--space-7) auto;
  padding: clamp(2rem, 6vw, 3.5rem);
  background: #fff;
  border: 1px solid #d9c8a1;
  border-radius: 4px;
  text-align: center;
  font-family: var(--fdu);
  font-size: var(--fs-body);
  line-height: 1.8;

  h3 {
    margin: 24px 0 12px;
    font: 500 var(--fs-label) var(--fu);
    letter-spacing: .25em;
    text-transform: uppercase;
    color: #b89a54;

    &:first-child { margin-top: 0; }
  }

  ul { padding: 0; margin: 0 0 24px; list-style: none; }

  li {
    padding: 16px 0;
    border-bottom: 1px solid rgba(184, 154, 84, .2);

    &:last-child { border-bottom: 0; }
  }

  b {
    display: block;
    font-size: var(--fs-body-lead);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #2b2626;
  }

  span { display: block; }

  .blog-menu__note {
    margin: 24px 0 0;
    font: 500 var(--fs-label) var(--fu);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #b89a54;
  }
}

/* ---------- CTA (uno por artículo, antes del boilerplate)
   Bloque rojo invertido: funciona igual sobre fondo claro.
   Patrón sacado de .btn--primary-lg de la home. */

.blog-dark-cta {
  background-color: var(--red);         /* #C13623 borgoña */
  padding: clamp(2rem, 5vw, 4.5rem);
  margin: var(--space-7) 0;
  border-radius: 4px;
  text-align: center;

  h2 {
    margin: 0 0 var(--space-4);
    color: var(--color-cream);
  }

  p {
    max-width: 38rem;
    margin: 0 auto var(--space-5);
    color: rgba(237, 227, 191, 0.9);
  }

  a.blog-dark-cta__button {
    display: inline-block;
    padding: 18px 40px;
    font-family: var(--fu);
    font-weight: 500;
    font-size: var(--fs-label);
    letter-spacing: 1.98px;
    text-transform: uppercase;
    text-decoration: none;
    background-color: var(--color-cream);
    color: var(--red);
    border-radius: 4px;
    transition: transform 0.2s ease;

    &:hover { opacity: 1; transform: translateY(-2px); }
  }

  @media (max-width: 478px) {
    padding: 2rem 1.5rem;

    a.blog-dark-cta__button { width: 100%; }
  }
}

/* ---------- FAQ ---------- */

.blog-faq {
  strong { color: var(--red); }
  p { margin-bottom: var(--space-2); }
  p + p { margin-bottom: var(--space-6); }
}

/* ---------- Related articles ----------
   Always last, after the FAQ. Hairline on top, simple list. */

.blog-related {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(43, 38, 38, 0.15);

  h3 { margin-top: 0; }

  ul {
    padding-left: 24px;
    margin-bottom: 0;
  }
}