/**
 * MP Blocks - MP Two Columns Text block styles
 *
 * @author    Maxime Potier <contact@maximepotier.fr>
 * @copyright 2026 Maxime Potier
 * @license   Commercial - All rights reserved
 */

.mp2col-block {
  width: 100%;
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
  /* Vertical spacing harmonized with the other standalone MP Blocks
     sections (MP Reassurance, MP Category Products, MP Brand Slider all
     use the same 1.5rem) - this block previously had none at all. */
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

/* "Layout: contained" setting - boxes the block within the site's standard
   container width, same convention as the other MP Blocks. */
@media (min-width: 1420px) {
  .mp2col-block--contained {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }
}

.mp2col-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mp2col-gap, 40px);
}

.mp2col-row--valign-top {
  align-items: flex-start;
}

.mp2col-row--valign-center {
  align-items: center;
}

.mp2col-row--valign-bottom {
  align-items: flex-end;
}

.mp2col-col {
  flex: 1 1 280px;
  min-width: 0;
  /* Account for the row gap so both columns still add up to 100% width
     instead of overflowing (browsers support calc() with CSS vars here). */
  max-width: calc(var(--mp2col-col-width, 50%) - (var(--mp2col-gap, 40px) / 2));
  line-height: 1.6;
}

.mp2col-col--text-center {
  text-align: center;
}

.mp2col-col--text-right {
  text-align: right;
}

.mp2col-col > *:last-child {
  margin-bottom: 0;
}

.mp2col-block h2 {
  font-size: 1.15em;
  font-weight: 700;
  color: #212529;
  margin: 0 0 .6em 0;
  line-height: 1.3;
  break-after: avoid;
}

.mp2col-block p {
  font-size: 14px;
  line-height: 1.7;
  color: #333;
}

@media (max-width: 767px) {
  .mp2col-row {
    flex-direction: column;
  }

  .mp2col-col {
    max-width: 100%;
    flex-basis: 100%;
  }
}