@use "tokens" as *;

// Bloques públicos del CRM (doc 03): estilos base, cada juego los ajusta.
.block {
  // Aire vertical entre bloques (CDL usa 4rem; aquí algo más contenido). En
  // estrecho (contenedor `content') baja un poco: los bloques respiran
  // menos apretados en pantallas pequeñas.
  padding-block: $space-8 + $space-6; // 56px

  @container content (max-width: #{$bp-sm - 1px}) {
    padding-block: $space-8 + $space-2; // 40px
  }
  background: var(--block-bg, transparent);

  &__inner {
    max-width: 1200px; // 'wide' (por defecto)
    margin: 0 auto;
    padding: 0 $space-4;
    display: grid;
    gap: $block-gap; // separación entre los elementos del bloque
  }

  // Anchura del contenido (campo común `width`): coherente entre bloques.
  &--w-narrow .block__inner { max-width: 880px; }
  &--w-full .block__inner { max-width: none; padding-inline: $space-6; }

  // Las tarjetas (CTA, tarjeta de texto y cita) son algo más angostas que el
  // resto en cada preset (wide/narrow), con la diferencia PROPORCIONAL (no
  // un recorte fijo que desaparece de golpe): min(tope, 90%) — 90% ≈ la
  // relación 1080/1200 del preset ancho, así que en pantallas grandes manda
  // el tope (120px/100px más angosto que el resto) y, según se estrecha,
  // manda el porcentaje y la diferencia decrece sin saltos. "Ancho
  // completo" no lleva tope: full es full.
  &--cta.block--w-wide .block__inner,
  &--text-card.block--w-wide .block__inner,
  &--quote.block--w-wide .block__inner { max-width: min(1080px, 90%); }
  &--cta.block--w-narrow .block__inner,
  &--text-card.block--w-narrow .block__inner,
  &--quote.block--w-narrow .block__inner { max-width: min(780px, 90%); }

  // Tipografía de bloque: texto BASE $fs-16 (el mismo cuerpo que el wysiwyg
  // por defecto — sin override aquí); título y subtítulo calcan la cabecera
  // clásica de índices y fichas de CDL: título $fs-28 compacto (line-height
  // 1.1, el h1 de base) y subtítulo atenuado AL TAMAÑO del cuerpo — la
  // jerarquía la da el color, no otro escalón de tamaño. Vale para TODOS
  // los bloques (la cabecera ya no sube a 40/28). Los títulos nunca se
  // justifican.
  // width 100%: en grids con justify-items start (el cuerpo del CTA) el
  // elemento encoge a su contenido y el text-align no se vería.
  &__title { margin: 0; font-size: $fs-28; line-height: 1.1; width: 100%; }
  // pre-line: el subtítulo es un textarea — sus saltos de línea cuentan.
  &__subtitle { margin: 0; color: $text-2; font-size: $fs-16; white-space: pre-line; width: 100%; }
  &__text { color: $text-1; font-size: $fs-16; }

  // Alineación del bloque (campo común `align`): por CLASE (BlockShell ya
  // no la mete como style en línea) para poder pisarla en estrecho.
  &--align-left { text-align: left; }
  &--align-center { text-align: center; }
  &--align-right { text-align: right; }
  &--align-justify { text-align: justify; }

  // Justificado, a la IZQUIERDA por debajo de $bp-sm — mismo criterio (y
  // mismo mecanismo, @media de viewport) que título/subtítulo, más abajo.
  @media (max-width: $bp-sm - 1px) {
    &--align-justify { text-align: left; }
  }

  &--align-justify &__title,
  &--align-justify &__subtitle { text-align: left; }

  // Alineación PROPIA de título/subtítulo (campos comunes title_align y
  // subtitle_align): con valor explícito manda sobre la del bloque (por eso
  // va DESPUÉS del ajuste del justificado). En ESTRECHO se revierte a la
  // izquierda, se haya elegido lo que se haya elegido.
  &--title-left &__title,
  &--title-center &__title,
  &--title-right &__title,
  &--subtitle-left &__subtitle,
  &--subtitle-center &__subtitle,
  &--subtitle-right &__subtitle {
    text-align: left;
  }

  @media (min-width: $bp-sm) {
    &--title-left &__title { text-align: left; }
    &--title-center &__title { text-align: center; }
    &--title-right &__title { text-align: right; }
    &--subtitle-left &__subtitle { text-align: left; }
    &--subtitle-center &__subtitle { text-align: center; }
    &--subtitle-right &__subtitle { text-align: right; }
  }

  // Etiqueta de la tarjeta de texto: SIN chip — solo texto coloreado de
  // acento, con alineación propia (campo label_align del bloque).
  &__label {
    display: block;
    width: 100%;
    font-size: $fs-13;
    font-weight: $k-fw-semibold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: $accent-500;

    &--left { text-align: left; }
    &--center { text-align: center; }
    &--right { text-align: right; }
  }

  &__card {
    // Semitransparente: la imagen de fondo de la página se ve a través
    // (patrón CDL, rgba(surface, .5)); el blur mantiene el texto legible.
    background: color-mix(in srgb, $surface 50%, transparent);
    backdrop-filter: blur(8px);
    border: 1px solid $border;
    border-radius: $radius-lg;
    box-shadow: $shadow-sm;
    padding: $space-8;
    display: grid;
    gap: $block-gap;

    .edc-button { justify-self: start; text-decoration: none; }
  }

  &__media-layout { display: grid; gap: $space-4; }
  &__image {
    max-width: 100%;
    border-radius: $radius-md;
    justify-self: center;
  }

  // Columnas solo de $bp-md (768) para arriba: por debajo el bloque pasa a
  // VERTICAL y la imagen va SIEMPRE encima del texto (regla más abajo).
  &--image-left .block__media-layout,
  &--image-right .block__media-layout {
    @container content (min-width: #{$bp-md}) {
      // Reparto izquierda:derecha del campo image_columns (--img-cols).
      grid-template-columns: var(--img-cols, minmax(0, 2fr) minmax(0, 3fr));
      align-items: stretch;
    }
  }
  &--image-right .block__media-layout .block__image-frame,
  &--image-right .block__media-layout .block__image { order: 2; }
  &--image-bottom .block__media-layout .block__image { order: 2; }

  // En vertical (contenedor < 768) la imagen SIEMPRE encima del texto, da
  // igual su posición configurada (derecha/abajo incluidas). Después de las
  // reglas de order de arriba para ganarles el empate.
  @container content (max-width: #{$bp-md}) {
    &[class*="block--image-"] .block__media-layout > .block__image,
    &[class*="block--image-"] .block__media-layout > .block__image-frame {
      order: -1;
    }
  }

  // Marco de la imagen en columnas: por defecto (cubrir/rellenar) el ALTO
  // lo marca el texto de al lado (la imagen absoluta no aporta altura) y el
  // modo de escalado hace el resto — object-position top: con el marco
  // estirado, "cubrir" centraba la imagen en vertical, SIEMPRE anclada
  // arriba.
  &__image-frame {
    position: relative;
    min-height: 200px; // que no colapse con textos muy cortos

    .block__image {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      max-width: none;
    }
  }
  &--fit-cover &__image-frame .block__image { object-fit: cover; object-position: top; }
  &--fit-fill &__image-frame .block__image { object-fit: fill; }

  // "Contener" es la excepción: la imagen respeta su tamaño NATURAL — ancho
  // de columna, alto según su propia proporción — sin ampliarse ni
  // encogerse para casar con el marco (si es más alta que el texto la fila
  // crece; si es más baja, queda aire debajo). Por eso escapa del marco
  // absoluto: vuelve al flujo normal, anclada arriba (align-self) del grid
  // de columnas.
  &--fit-contain &__image-frame {
    @container content (min-width: #{$bp-md}) {
      position: static;
      min-height: 0;
      align-self: start;

      .block__image {
        position: static;
        width: 100%;
        height: auto;
        max-width: none;
      }
    }
  }

  // En una columna (vertical, < 768) la imagen vuelve al flujo normal.
  @container content (max-width: #{$bp-md}) {
    &__image-frame {
      position: static;
      min-height: 0;

      .block__image {
        position: static;
        width: auto;
        height: auto;
        max-width: 100%;
      }
    }
  }

  // Imagen flotada: el texto la rodea y sigue por debajo (cleartext, como
  // CDL), con un margen de $space-4 (16px) hacia el texto por los lados que
  // lo tocan. En vertical (< 768) la imagen va arriba a lo ancho, sin
  // flotar.
  &--image-clear-left .block__media-layout,
  &--image-clear-right .block__media-layout {
    display: block;

    // Clearfix: el bloque no se corta si la imagen es más alta que el texto.
    &::after { content: ""; display: table; clear: both; }

    .block__image { margin-bottom: $space-4; }
  }
  &--image-clear-left .block__media-layout .block__image {
    @container content (min-width: #{$bp-md}) {
      float: left;
      max-width: 50%;
      // Respiro de $space-4 (16px) por arriba, abajo y hacia el texto
      // (derecha); pegada a su lado exterior (izquierda, sin margen).
      margin: $space-4 $space-4 $space-4 0;
      vertical-align: top;
    }
  }
  &--image-clear-right .block__media-layout .block__image {
    @container content (min-width: #{$bp-md}) {
      float: right;
      max-width: 50%;
      margin: $space-4 0 $space-4 $space-4;
      vertical-align: top;
    }
  }

  // Banner de la cabecera (a lo ancho del bloque).
  &__banner {
    width: 100%;
    border-radius: $radius-md;
  }

  // Retrato del autor de la cita.
  &__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: $space-2;
  }

  // Cuerpo del CTA (texto + botón) dentro de su media-layout.
  &__cta-body {
    display: grid;
    gap: $block-gap;
    justify-items: start;
    align-content: center; // centrado frente a la imagen sangrada

    // El botón respira más que el resto: su hueco total (gap + margen)
    // casi DOBLA la separación normal entre elementos del bloque.
    .block-button { margin-top: $space-5; }
  }

  // Botón del CTA: en estrecho va SIEMPRE centrado (como el del related);
  // de $bp-sm para arriba manda su campo "Alineación del botón".
  &__cta-button--left,
  &__cta-button--center,
  &__cta-button--right {
    justify-self: center;
  }

  @media (min-width: $bp-sm) {
    &__cta-button--left { justify-self: start; }
    &__cta-button--center { justify-self: center; }
    &__cta-button--right { justify-self: end; }
  }

  // La imagen del CTA sangra hasta el borde de la tarjeta según su posición:
  // en columnas toca TODA la altura (arriba, abajo y su lateral — título y
  // subtítulo viven dentro de `.block__cta-body`, junto al texto, en la
  // columna de contenido); arriba/abajo toca los laterales. Esquinas
  // siguiendo el radio de la tarjeta.
  // Las tarjetas del CTA y de la tarjeta de texto llevan un halo SUTIL del
  // acento, igual por los cuatro bordes, además de su sombra normal.
  &--cta .block__card,
  &--text-card .block__card {
    box-shadow: $shadow-sm, 0 0 18px color-mix(in srgb, $accent-500 30%, transparent);
  }

  &--cta.block--image-right .block__media-layout .block__image-frame,
  &--cta.block--image-left .block__media-layout .block__image-frame {
    @container content (min-width: #{$bp-md}) {
      overflow: hidden;
      min-height: 0;

      .block__image { border-radius: 0; }
    }
  }
  &--cta.block--image-right .block__media-layout .block__image-frame {
    @container content (min-width: #{$bp-md}) {
      margin: (-$space-8) (-$space-8) (-$space-8) 0;
      border-radius: 0 $radius-lg $radius-lg 0;
    }
  }
  &--cta.block--image-left .block__media-layout .block__image-frame {
    @container content (min-width: #{$bp-md}) {
      margin: (-$space-8) 0 (-$space-8) (-$space-8);
      border-radius: $radius-lg 0 0 $radius-lg;
    }
  }
  // Arriba solo sangra si no hay título/subtítulo por encima.
  &--cta.block--image-top .block__card > .block__media-layout:first-child > .block__image {
    justify-self: stretch;
    max-width: none;
    width: calc(100% + #{$space-8 * 2});
    margin: (-$space-8) (-$space-8) 0;
    border-radius: $radius-lg $radius-lg 0 0;
  }
  &--cta.block--image-bottom .block__media-layout > .block__image {
    justify-self: stretch;
    max-width: none;
    width: calc(100% + #{$space-8 * 2});
    margin: 0 (-$space-8) (-$space-8);
    border-radius: 0 0 $radius-lg $radius-lg;
  }

  // CTA con imagen en VERTICAL (< 768): da igual la posición elegida — la
  // imagen va ARRIBA, a sangre por los laterales de la tarjeta y con
  // proporción 2:1 (recortada, no deformada). Va DESPUÉS de las reglas por
  // posición para ganarles en el empate de especificidad.
  @container content (max-width: #{$bp-md}) {
    &--cta[class*="block--image-"] .block__card .block__media-layout {
      > .block__image,
      > .block__image-frame {
        order: -1;
        justify-self: stretch;
        display: block; // el marco es un span: inline dejaría hueco de línea
        width: calc(100% + #{$space-8 * 2});
        max-width: none;
        margin: 0 (-$space-8);
        border-radius: 0;
        overflow: hidden;
      }

      > .block__image {
        aspect-ratio: 2 / 1;
        object-fit: cover;
      }

      // En columnas la imagen vive dentro del marco: la proporción la pone
      // la propia imagen y el marco (estático en estrecho) la acompaña.
      > .block__image-frame .block__image {
        display: block; // inline dejaría el hueco de línea bajo la imagen
        width: 100%;
        height: auto;
        max-width: none;
        aspect-ratio: 2 / 1;
        object-fit: cover;
        border-radius: 0;
      }
    }

    // Sin título encima (el media-layout abre la tarjeta): también a sangre
    // por arriba, siguiendo el radio de la tarjeta.
    &--cta[class*="block--image-"] .block__card > .block__media-layout:first-child {
      > .block__image,
      > .block__image-frame {
        margin-top: -$space-8;
        border-radius: $radius-lg $radius-lg 0 0;
      }
    }
  }

  // Cita: sin adorno de borde, en grande ($fs-28, el mismo cuerpo que un
  // título de bloque; antes $fs-32 — un ~10% menos) y del color de acento,
  // con interlineado propio (1.25: las citas de varias líneas respiraban
  // de más con el line-height del cuerpo). En estrecho baja a $fs-24.
  &--quote .block__quote {
    margin: 0;
    // Fuente "especial" de la configuración de la web (doc 10); las fuentes
    // decorativas piden un cuerpo mayor.
    font-family: var(--font-special, inherit);
    font-size: $fs-28;
    line-height: 1.25;
    font-style: italic;
    font-weight: $k-fw-semibold;
    color: $accent-500;

    @container content (max-width: #{$bp-sm - 1px}) {
      font-size: $fs-24;
    }

    // La cita llega como richtext y .rich-content fija su propio cuerpo
    // ($fs-16): aquí debe heredar el tamaño grande de la cita.
    .rich-content { font-size: inherit; }
  }
  &__author {
    margin-top: $space-2;
    color: $text-3;
    // El autor no hereda la fuente especial de la cita.
    font-family: var(--font-body, inherit);
    font-style: italic;
    font-size: $fs-14;

    &--left { text-align: left; }
    &--center { text-align: center; }
    &--right { text-align: right; }
  }
}

.block__index {
  margin: 0;
  padding-left: 1.2em;
  display: grid;
  gap: $space-1;
  font-weight: $k-fw-medium;

  a { color: $accent-500; text-decoration: none; }
  a:hover { text-decoration: underline; }

  // Numerado: la numeración anidada (1, 1.1, 1.2.1…) la pinta el
  // componente — fuera los números nativos del ol.
  &--numbered {
    list-style: none;
    padding-left: 0;
  }

  .block__index-number {
    margin-right: $space-2;
    color: $text-2;
    font-variant-numeric: tabular-nums;
  }

  // Tamaño por nivel: 24 → 22 (no hay token entre 20 y 24) → 20 (el 3
  // agrupa "3 o más").
  .block__index-level-1 { font-size: $fs-24; }
  .block__index-level-2 { font-size: 22px; }
  .block__index-level-3 { font-size: $fs-20; }

  // Entradas anidadas: sangría POR NIVEL (profundidad real, sin límite) —
  // `--depth` lo pone BlockIndex.vue en línea; el tamaño de letra sí se
  // limita a 3 niveles (block__index-level-1/2/3, el 3 agrupa "3 o más").
  .block__index-child { margin-left: calc(var(--depth, 1) * #{$space-5}); }
}

// FAQ (doc 03): acordeón nativo details/summary del bloque `faq`.
.block__faq-item {
  border: 1px solid $border;
  border-radius: $radius-md;
  background: color-mix(in srgb, $surface 65%, transparent);

  & + & { margin-top: $space-2; }

  &[open] .block__faq-question { color: $accent-500; }
}

.block__faq-question {
  padding: $space-3 $space-4;
  font-weight: 600;
  cursor: pointer;

  &:hover { color: $accent-500; }
}

.block__faq-answer {
  padding: 0 $space-4 $space-3;
  color: $text-2;
}


// Botón de los bloques (CTA, doc 03): dos tipos con hover CRUZADO.
// Normal: fondo de acento + texto del color del texto; al pasar, fondo del
// color de fondo + texto de acento. Inverso: exactamente al revés.
.block-button {
  display: inline-flex;
  align-items: center;
  gap: $space-2;
  padding: $space-2 $space-5;

  // "Botón grande" (campo button_large del CTA): más aire interior.
  &--large { padding: $space-4 $space-8; }
  border: 1px solid $accent-500;
  border-radius: $radius-md;
  font-size: $fs-18;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;

  // El "fondo" de los estados cruzados es la SUPERFICIE ($surface, el
  // segundo tono), no el fondo de página puro: menos negro / menos blanco.
  // Relleno de acento: el texto lo decide el FONDO (contrast-text), no el
  // tema — con acentos claros, $text-1 del tema oscuro no se leía.
  &--primary {
    background: $accent-500;
    @include contrast-text($accent-500);

    &:hover {
      background: $surface;
      color: $accent-500;
    }
  }

  &--secondary {
    background: $surface;
    color: $accent-500;

    &:hover {
      background: $accent-500;
      @include contrast-text($accent-500);
    }
  }
}