@edc-motor/ui 0.4.22 → 0.4.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/ui",
-  "version": "0.4.22",
+  "version": "0.4.23",
   "description": "EdC Motor — componentes públicos Vue 3 + tokens SCSS para webs de juegos de mesa (paquete fuente: lo compila el consumidor con Vite)",
   "license": "GPL-3.0-only",
   "type": "module",

package/scss/components/_blocks.scss

@@ -20,9 +20,11 @@
 
   // Tipografía de bloque: texto $fs-16, subtítulo $fs-20, título $fs-28
   // (la cabecera sube a 32/24). Los títulos nunca se justifican.
-  &__title { margin: 0; font-size: $fs-28; }
+  // 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; 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-20; white-space: pre-line; }
+  &__subtitle { margin: 0; color: $text-2; font-size: $fs-20; white-space: pre-line; width: 100%; }
   &__text { color: $text-1; font-size: $fs-16; }
 
   &--align-justify &__title,
@@ -30,13 +32,25 @@
 
   // 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).
-  &--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; }
+  // 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; }
+  }
 
   &__label {
     display: inline-block;
@@ -236,6 +250,53 @@
     border-radius: 0 0 $radius-lg $radius-lg;
   }
 
+  // CTA con imagen en ESTRECHO: 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-sm}) {
+    &--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-32, el token más cercano a
   // los ~40px pedidos) y del color de acento.
   &--quote .block__quote {