/* ==========================================================================
   page-cards.css — placa tipográfica del hueco sin foto
   Dueño: @wordpress-elementor (ola "fotos-catalogo", 2026-08-28)
   ==========================================================================

   POR QUÉ EXISTE
   --------------
   Hasta hoy, un tour sin imagen destacada pintaba un rayado diagonal con el texto
   `[ foto pendiente ]`. Dos problemas, los dos visibles solo desde fuera:

     1. Estaba **en castellano en una web en inglés**.
     2. Salía en 17 de las 21 tarjetas de la portada a la vez. Eso no se lee como
        "nos falta material tuyo": se lee como "esto está sin terminar". El cliente
        escribió exactamente eso el 27/8.

   El seguimiento de qué foto falta no desaparece — se muda al informe
   `.dev/frontend/2026-08-27_fotos-catalogo.md`, que es donde se le puede pedir por
   correo. En la web queda una placa que se lee como decisión de diseño: fondo de
   panel, nombre en Anton, categoría en Space Mono cian.

   POR QUÉ ES UNA HOJA PROPIA Y NO page-home.css
   ---------------------------------------------
   La misma placa sale en TRES sitios: la rejilla filtrable de la Home, la galería de
   /tours/ y "Tours relacionados" de las 21 fichas (`sw_render_card_plate()` en
   `includes/helpers.php`). Meterla en `page-home.css` la dejaría muerta en los otros
   dos; duplicarla en tres hojas la bifurca al primer retoque. Es el caso de
   CLAUDE.md §5-bis "el CSS vive en el mismo ámbito que su markup": ámbito compartido
   ⇒ hoja compartida.

   ⚠️ Esta hoja NO se carga sola. `functions.php` NO tiene un glob de `page-*.css`
   (eso era una suposición): tiene una lista escrita a mano. `page-cards` está añadido
   a esa lista. Si alguien la quita, esta hoja deja de aplicarse **sin ningún error**:
   las placas seguirían saliendo, pero sin estilo. Comprobación positiva, no por
   ausencia de error:
     getComputedStyle($0.querySelector('.wp-plate__name')).fontFamily  → debe llevar Anton

   NO se usan `!important` en ningún sitio: `.wp-card__media` ya es
   `position:relative` (walking-planets.css:199) y no hay nada que pisar.
*/

/* --------------------------------------------------------------------------
   1. La placa
   --------------------------------------------------------------------------
   Tres contenedores distintos, un solo aspecto:

     .wp-card__plate            → rellena `.wp-card__media` (aspect-ratio 4/5, y 3/4
                                  por debajo de 860px). Va en absoluto porque el padre
                                  ya reserva la caja y así la rejilla NO se descuadra:
                                  la tarjeta mide exactamente lo mismo con foto y sin.
     .wp-segment__media--plate  → el propio elemento (height:220px, extras.css:285).
     .wp-cat__shot--plate       → el propio elemento (page-home.css:279).

   Por eso el posicionamiento se declara SOLO para la primera; las otras dos heredan
   su caja del bloque al que ya pertenecían.                                       */

.wp-card__plate{
  position:absolute;
  inset:0;
}

.wp-card__plate,
.wp-segment__media--plate,
.wp-cat__shot--plate{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:26px 22px;
  text-align:center;
  background:var(--wp-navy-panel);
  /* Sin `background-image`: la placa NO imita una foto. Un degradado o una textura la
     haría parecer una imagen que no ha cargado, que es justo lo que se quita hoy. */
}

/* Nombre del tour / del segmento / de la categoría.
   `clamp()` y no un tamaño fijo: la misma placa vive en tarjetas de 4 columnas (Home,
   ~330px), de 3 (/tours/, 436px a 1440) y en el bloque de 220px de alto de los
   segmentos. Con 28px fijos —el tamaño de `.wp-card__title`— los nombres largos
   («Costa Brava · Tarragona, Girona & Besalú») desbordaban la caja de 4 columnas. */
.wp-card__plate .wp-plate__name,
.wp-segment__media--plate .wp-plate__name,
.wp-cat__shot--plate .wp-plate__name{
  font-family:var(--wp-display);
  font-weight:400;
  font-size:clamp(19px,2vw,30px);
  line-height:1.04;
  text-transform:uppercase;
  color:#fff;
  /* Cinturón de seguridad para los dos nombres largos del catálogo (Costa Brava y
     Sensory Catalonia Experience): parte la palabra antes que salirse de la tarjeta. */
  overflow-wrap:anywhere;
  hyphens:auto;
}

/* Categoría (Move · Taste · Discover · Create · Beyond · Different) o eyebrow. */
.wp-card__plate .wp-plate__cat,
.wp-segment__media--plate .wp-plate__cat,
.wp-cat__shot--plate .wp-plate__cat{
  font-family:var(--wp-mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--wp-cyan);
}

/* --------------------------------------------------------------------------
   2. Hover
   --------------------------------------------------------------------------
   La tarjeta CON foto hace `scale(1.06)` sobre la imagen (walking-planets.css:202).
   Sin nada aquí, la tarjeta sin foto se quedaba inerte al pasar por encima y la
   rejilla se leía como "unas tarjetas funcionan y otras no". Se responde con lo
   único que la placa tiene: el acento cian. No se escala la placa entera — a
   `aspect-ratio` fijo, escalar el fondo deja ver el borde de la tarjeta.           */
.wp-card:hover .wp-card__plate,
.wp-card:focus-visible .wp-card__plate{
  background:var(--wp-navy-soft);
}
.wp-card:hover .wp-card__plate .wp-plate__cat,
.wp-card:focus-visible .wp-card__plate .wp-plate__cat{
  color:#fff;
}
.wp-card__plate,
.wp-card__plate .wp-plate__cat{
  transition:background .35s var(--wp-ease),color .35s var(--wp-ease);
}

/* Quien no quiera animaciones tampoco quiere esta. */
@media (prefers-reduced-motion:reduce){
  .wp-card__plate,
  .wp-card__plate .wp-plate__cat{transition:none}
}

/* --------------------------------------------------------------------------
   3. Móvil
   --------------------------------------------------------------------------
   A 390px la tarjeta ocupa el ancho completo menos el gutter (~354px) y
   `.wp-card__media` pasa a `aspect-ratio:3/4` (walking-planets.css:277), así que la
   caja es MÁS alta, no más baja: no hace falta encoger el nombre, solo darle aire.  */
@media (max-width:860px){
  .wp-card__plate,
  .wp-segment__media--plate,
  .wp-cat__shot--plate{
    padding:22px 18px;
    gap:10px;
  }

  /* El `clamp()` de arriba está calibrado para la rejilla de escritorio, donde la tarjeta
     es una fracción del viewport (321px a 1440). En móvil la tarjeta ocupa el ancho ENTERO
     (354px de 390) pero `2vw` da 7,8px, así que caía siempre al mínimo de 19px: medido en
     captura a resolución real, el nombre quedaba pequeño dentro de una caja de 472px de
     alto (`aspect-ratio:3/4`) y la placa se leía como un hueco, no como una portada.
     `6.4vw` reengancha el tamaño al ancho real de la tarjeta: 25px a 390. */
  .wp-card__plate .wp-plate__name{
    font-size:clamp(22px,6.4vw,30px);
  }
}