/**
 * Estilo del placeholder de canvas. Ver la nota de `canvas.jsx`.
 *
 * Se ve deliberadamente como una herramienta de edición y no como contenido: borde
 * punteado, gris, sin la tipografía de la marca. Si alguien lo confunde con diseño,
 * está mal hecho.
 *
 * No usa los tokens de MX a propósito — no es parte del diseño del sitio.
 */
.wf-canvas-placeholder {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
  padding: 16px 20px;
  border: 1px dashed #9fada7;
  border-radius: 8px;
  background-color: #f1f3f2;
  color: #52605a;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  line-height: 18px;
  text-align: left;
  box-sizing: border-box;
}

.wf-canvas-placeholder strong {
  color: #292929;
  font-size: 13px;
  font-weight: 600;
}

.wf-canvas-placeholder small {
  color: #9fada7;
  font-size: 11px;
  line-height: 16px;
}

/**
 * ClickableImageCard.css — port 1:1 de
 * `mx-cms/src/components/ClickableImageCard/styles.ts`.
 *
 * Tipografía del tema `standard`:
 *   body.lg = 18px · ls xs 0.3 · lh lg 26px   (textSize="large")
 *   body.sm = 14px · ls xs 0.3 · lh sm 20px   (textSize="small", el default)
 *   medium 500
 */

/* 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, 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;
}

.clickable-image-card {
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  background-color: #ffffff;
  box-sizing: border-box;

  /* El legacy: `width: 240px; flex-grow: 1`. Contrato --card-*: 240px es el
     default del basis, así que standalone se ve igual que en el sitio actual.

     El fallback del max también es 240px, igual que el del basis: la card topa
     en su ancho natural aunque no esté dentro de un rail que le pase el
     contrato. Misma convención que InformationCard (275) y QuoteCard (392). */
  flex-grow: var(--card-grow, 1);
  flex-shrink: var(--card-shrink, 0);
  flex-basis: var(--card-basis, 240px);
  max-width: var(--card-max, 240px);
  min-width: 0;

  /* Realce en hover — mismo mecanismo que `BlogCard` en la librería de Brasil.
     Las dos variables las publica `ImageCardRail` al pasar el cursor por el rail
     (ver el comentario largo allá). Se adoptan acá porque **las custom
     properties heredan y la herencia cruza el límite del shadow root**, que es
     lo único que conecta al rail con una card que vive en otro shadow tree.

     ⚠️ Brasil usa la propiedad `scale`; acá va `transform: scale()`. No es
     capricho: con `scale: var(…)` MÁS `transition: scale …` el valor no se
     aplica nunca —medido en el playground, la card se queda en 1 aunque su
     variable valga 0.95, y sacando la transición vuelve a andar—. Con
     `transform` anima bien. El costo es que `transform` es una sola propiedad:
     si algún día la card necesita otro transform propio, hay que componerlo acá
     en vez de declararlo aparte.

     Standalone —sin rail— los defaults son 1 y 1, o sea que la card se ve igual
     que siempre. */
  transform: scale(var(--card-hover-scale, 1));
  opacity: var(--card-hover-opacity, 1);
  transition: transform 250ms ease, opacity 250ms ease;

  /* La card bajo el cursor se pisa SU copia de las variables y vuelve a tamaño
     completo, mientras las hermanas siguen con el valor que heredaron del rail.
     Ese es todo el truco: no hace falta que el rail sepa cuál está hovereada. */
  @media (pointer: fine) {
    &:hover,
    &:focus-within {
      --card-hover-scale: 1;
      --card-hover-opacity: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }

  /* ImageWrapper */
  .media {
    display: block;
    width: 100%;
    height: 200px;

    & img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  /* TextWrapper. `justify-content` depende de textSize: el legacy manda
     flex-start con "large" y center con "small". */
  .text {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 118px;
    flex-grow: 1;
    padding: 16px;
    color: #292929; /* neutral[100] — fijo: la card es blanca en todo fondo */
    box-sizing: border-box;
    justify-content: center;
  }

  &[data-text-size='large'] .text {
    justify-content: flex-start;
  }

  /* Typography variant="bodySmMedium" (default) */
  .description,
  .source {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
    line-height: 20px;
  }

  /* variant="bodyLgMedium" cuando textSize="large".
     ⚠️ Solo la descripción cambia de tamaño: la fuente queda en bodySmMedium
     también con "large". Está así en el legacy. */
  &[data-text-size='large'] .description {
    font-size: 18px;
    line-height: 26px;
  }
}

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