/**
 * about-us.css
 * Seção "Quem somos" do design system (marmitissima-design, assets/css/about-us.css)
 * montada com elementos comuns do PageBuilder + classes CSS (Avançado > Classes CSS):
 *
 *   Linha (Row, "Contained") ............ mm-about
 *     Coluna 1
 *       Imagem ........................... mm-about__media
 *     Coluna 2
 *       Texto ("Quem somos") ............. mm-about__eyebrow
 *       Título (Heading) ................. mm-about__title
 *       Texto (parágrafo) ................ mm-about__text
 *       Texto (lista com marcadores) ..... mm-about__highlights
 *
 * Valores em px (o design usa rem com raiz 16px; no Magento a raiz é 10px).
 * !important só onde o PageBuilder grava estilo inline/por id na linha.
 */
.mm-about {
  --mm-about-accent: #ed3237;
  --mm-about-accent-dark: #be282c;
  --mm-about-accent-soft: #fde6e7;
  --mm-about-text: #201e1e;
  --mm-about-text-secondary: #6e6c6c;
  --mm-about-border: #e4e4e4;
  padding-top: 72px !important;
  padding-bottom: 72px !important;
  background-color: #ffffff;
  font-family: 'Manrope', sans-serif;
}

/* ===== Grid: foto | conteúdo (1fr / 1.05fr, 64px de espaço) =====
   O tema dá margin 0 -15px ao grupo de colunas (calha do grid) contando com
   padding 15px nas colunas — aqui o espaço é o gap, então os dois saem. */
.mm-about .pagebuilder-column-group {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.mm-about .pagebuilder-column-line {
  display: flex;
  align-items: center;
  gap: 64px;
}

.mm-about .pagebuilder-column {
  justify-content: center;
  min-width: 0;
  padding: 0 !important;
}

.mm-about .pagebuilder-column:nth-child(1) {
  flex: 1 1 0 !important;
  width: auto !important;
}

.mm-about .pagebuilder-column:nth-child(2) {
  flex: 1.05 1 0 !important;
  width: auto !important;
}

/* ===== Foto (com forma vermelha em camada atrás) ===== */
.mm-about .mm-about__media,
.mm-about__media {
  position: relative;
  margin: 0;
  border: 0 !important;
  /* O tema corta a <figure> da Imagem do PageBuilder (overflow:hidden) —
     a forma vermelha fica 24px pra fora, então precisa aparecer. */
  overflow: visible !important;
}

.mm-about__media::before {
  content: '';
  position: absolute;
  inset: 24px -24px -24px 24px;
  z-index: 0;
  background-color: var(--mm-about-accent);
  border-radius: 24px;
}

.mm-about__media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: none;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 24px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* ===== "Quem somos" ===== */
.mm-about__eyebrow,
.mm-about__eyebrow p {
  margin: 0;
}

.mm-about__eyebrow p,
.mm-about__eyebrow:not(:has(p)) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mm-about-accent-dark);
}

.mm-about__eyebrow p::before,
.mm-about__eyebrow:not(:has(p))::before {
  content: '';
  width: 20px;
  height: 2px;
  background-color: var(--mm-about-accent);
}

/* ===== Título ===== */
.mm-about__title,
.mm-about__title h1,
.mm-about__title h2,
.mm-about__title h3,
.mm-about__title h4,
.mm-about__title h5,
.mm-about__title h6 {
  margin: 0 0 20px;
  font-family: 'Manrope', sans-serif;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: #000000;
  text-transform: none;
}

.mm-about__title h1,
.mm-about__title h2,
.mm-about__title h3,
.mm-about__title h4,
.mm-about__title h5,
.mm-about__title h6 {
  margin: 0;
}

/* O editor do título costuma gravar <span style="font-size:..."> e <strong> —
   o tamanho/peso da seção vale sempre. */
.mm-about__title * {
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}

/* ===== Parágrafo ===== */
.mm-about__text p,
.mm-about__text:not(:has(p)) {
  max-width: 48ch;
  margin: 0 0 32px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--mm-about-text-secondary);
}

/* ===== Destaques (lista com marcadores → linhas com ícone de check) ===== */
.mm-about__highlights ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mm-about__highlights li {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid var(--mm-about-border);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--mm-about-text);
}

.mm-about__highlights li::before {
  content: '';
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--mm-about-accent-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 13l4 4L19 7' stroke='%23be282c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
}

/* ===== Responsivo ===== */
@media (max-width: 1024px) {
  .mm-about .pagebuilder-column-line {
    flex-wrap: wrap;
    gap: 40px;
  }

  .mm-about .pagebuilder-column:nth-child(1),
  .mm-about .pagebuilder-column:nth-child(2) {
    flex: 1 1 100% !important;
  }

  .mm-about__media {
    width: 100%;
    max-width: 460px;
    margin-inline: auto !important;
  }

  .mm-about__title,
  .mm-about__title h1,
  .mm-about__title h2,
  .mm-about__title h3,
  .mm-about__title h4,
  .mm-about__title h5,
  .mm-about__title h6 {
    font-size: 30.4px;
  }
}

@media (max-width: 768px) {
  .mm-about {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .mm-about__media::before {
    inset: 16px -12px -16px 16px;
  }

  .mm-about__title,
  .mm-about__title h1,
  .mm-about__title h2,
  .mm-about__title h3,
  .mm-about__title h4,
  .mm-about__title h5,
  .mm-about__title h6 {
    font-size: 25.6px;
  }

  .mm-about__text p,
  .mm-about__text:not(:has(p)) {
    max-width: none;
  }
}