/* Skins de bloques core para que se vean 1:1 con los componentes del prototipo. */

/* --- core/button como .btn de marca --- */
/* disable-layout-styles quita el flex de WP; lo reponemos SIN tocar márgenes (los pone el skin de página) */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.wp-block-button__link {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-mono); font-weight: 600; line-height: 1;
  font-size: var(--fs-sm); letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.95em 1.5em; border: var(--rule) solid var(--ink); border-radius: 0;
  background: var(--accent-ink); color: var(--on-accent); cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus {
  transform: translate(-2px, -2px); box-shadow: var(--shadow-btn-hover);
  background: var(--accent-ink); color: var(--on-accent);
}
/* Variante fantasma (block style) */
.wp-block-button.is-style-ghost .wp-block-button__link { background: transparent; color: var(--fg); }
.wp-block-button.is-style-ghost .wp-block-button__link:hover { background: transparent; color: var(--fg); }
/* Variante spark (block style) */
.wp-block-button.is-style-spark .wp-block-button__link,
.wp-block-button.is-style-spark .wp-block-button__link:hover { background: var(--spark-ink); color: #fff; border-color: var(--ink); }
/* --- Foto de Jorge como bloque de imagen (la figura mantiene su ratio y la imagen la llena) --- */
figure.jorge__photo.wp-block-image { display: block; }
.jorge__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; display: block; }

/* --- Tarjeta del club (.ccard) con imagen nativa dentro de la figura --- */
.ccard__img { position: relative; }
.ccard__img .wp-block-image { position: absolute; inset: 0; margin: 0; height: 100%; }
.ccard__img .wp-block-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* el nº de tarjeta (párrafo) posicionado sobre la foto */
.ccard__img .ccard__n { position: absolute; top: 0; left: 0; z-index: 2; }
/* botón de tarjeta (core/button) a todo el ancho, pegado abajo */
.ccard__btn-wrap { margin-top: auto; width: 100%; }
.ccard__btn-wrap .wp-block-button, .ccard__btn .wp-block-button__link { width: 100%; }
.ccard__btn .wp-block-button__link { justify-content: center; }

/* Tamaño grande (className is-lg, aditivo) */
.wp-block-button.is-lg .wp-block-button__link { font-size: var(--fs-base); padding: 1.1em 1.8em; }
/* Fantasma sobre fondo oscuro (className on-dark) */
.wp-block-button.on-dark .wp-block-button__link { color: #fff; border-color: #fff; }
/* Botón claro sobre acento (className on-accent, ej. pack "Empezar") */
.wp-block-button.on-light .wp-block-button__link { background: #fff; color: var(--ink); }
.wp-block-button.on-light .wp-block-button__link:hover { background: #fff; color: var(--ink); }
/* En el prototipo el botón del pack (.pack__right .btn) va a ancho completo en TODOS los anchos
   (media min-width:760 y max-width:759). En WP el hijo flex es .wp-block-buttons: a >=760 lo estira
   align-items:stretch, pero a <760 (align-items:flex-start) NO, así que hay que estirarlo explícito
   hasta el link para que el botón llene la columna también en móvil. */
.pack__right .wp-block-buttons, .pack__right .wp-block-button, .pack__right .wp-block-button__link { width: 100%; }
.pack__right .wp-block-button__link { justify-content: center; }