/**
 * InformationCard.css — port 1:1 de
 * `mx-cms/src/components/InformationCard/style.ts` + los `Typography` del
 * index.tsx.
 *
 * Tipografía del tema `standard`:
 *   body.xl = 20px · ls **sm 0.5** · lh xl 28px   ← ojo: xl usa 0.5, no 0.3
 *   body.sm = 14px · ls xs 0.3 · lh sm 20px
 *   regular 400 · bold 700
 */

/* Paridad de render de texto con el legacy: el sitio viejo setea
 * -webkit-font-smoothing: antialiased global, que en macOS renderiza la
 * tipografía más liviana. Los Code Components viven en shadow roots aislados,
 * así que hay que declararlo por componente en :host para que herede al shadow
 * tree — la propiedad NO cruza el límite.
 *
 * ⚠️ NO agregar `display: block` acá. Esta card adopta el contrato --card-*, y
 * con el host en `display: contents` (el default de Webflow) el flex item del
 * rail es la raíz de la card, que es donde vive el `flex-basis`. Con
 * `display: block` el flex item pasa a ser el host y el contrato queda inerte.
 * El audit lo verifica. Ver components/QUIRKS_SWEEP.md, hallazgo 1. */
:host {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.information-card {
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: 20px;
  background-color: #ffffff; /* selectTheme('colors.neutral.0') */
  box-sizing: border-box;

  /* El legacy: `max-width: 275px; min-width: 275px; max-height: 408px`.
     Contrato --card-*: `basis: 275px` es el default, así que standalone se ve
     igual que en el sitio actual; el rail lo puede pisar (apilado en mobile). */
  flex-grow: var(--card-grow, 0);
  flex-shrink: var(--card-shrink, 0);
  flex-basis: var(--card-basis, 275px);
  max-width: var(--card-max, 275px);
  max-height: 408px;
  min-width: 0;

  /* El Tag del DS se renderiza dentro de ShadowEmotionProvider, cuya caja es
     `display: contents`, así que este span es el flex item real. */
  .tag-slot {
    display: inline-flex;
    width: fit-content;
  }

  /* GlobalIcons size="medium" del DS = 32px. El tintado a primary[40] no se
     puede replicar sobre un <img>: el SVG tiene que venir ya en verde. */
  .icon {
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    object-fit: contain;
  }

  /* Typography variant="bodyXlBold" color={primary[80]} */
  .title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 28px;
    color: #317500; /* primary[80] */
  }

  /* Typography variant="bodySmRegular" color={neutral[80]} */
  .description {
    margin: 0 0 24px 0;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 20px;
    color: #3b4540; /* neutral[80] */
  }

  /* BulletList: list-style none, column, gap 16px, overflow-y auto.
     `hasCta` controla el margen de abajo — sin CTA el legacy suma 23px. */
  .bullets {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;

    &[data-has-cta='false'] {
      margin-bottom: 23px;
    }

    /* Typography variant="bodySmBold" as="li" color={neutral[100]}.
       El markup llega por RichText al light DOM: lo que se puede estilar desde
       acá es el contenedor. Los <li> se estilan a nivel documento en
       ./richText.js — el CSS del shadow no los alcanza. */
    & ul,
    & ol {
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
  }

  /* Box marginTop="auto" que envuelve al CTA: lo empuja al fondo de la card. */
  .cta {
    margin-top: auto;

    & a {
      padding-block: 12px;
      font-size: 14px;
      line-height: 20px;
      border-radius: 10px;
    }
  }
}

/* Reset de box-sizing scopeado al componente. El reset de Webflow no llega
   adentro del shadow root, así que cada componente declara el suyo. */
.information-card,
.information-card *,
.information-card *::before,
.information-card *::after {
  box-sizing: border-box;
}