/**
 * El recuadro "Lee tambien".
 *
 * Todo va con las variables del tema y un valor de reserva detras, para que
 * si algun dia el plugin se usa en otro sitio el recuadro salga presentable
 * en vez de invisible. Nada de colores sueltos escritos a mano.
 *
 * La idea del diseno: que se vea que es un aparte, no una parte. Va sangrado
 * y con una linea de laton a la izquierda, como una nota al margen de las de
 * toda la vida, y no como un banner. El lector tiene que poder saltarlo de un
 * vistazo si no le interesa; ese es el trato.
 */

.mhs-recuadro {
  margin: 2.75rem 0;
  padding: 0;
  border-left: 2px solid var(--brass, #B08D57);
  background: linear-gradient(
    90deg,
    rgba(176, 141, 87, 0.07) 0%,
    rgba(176, 141, 87, 0.00) 65%
  );
}

.mhs-recuadro-enlace {
  display: block;
  padding: 1.35rem 1.5rem 1.45rem;
  color: inherit;
  text-decoration: none;
  position: relative;
  transition: background 0.5s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.mhs-recuadro-enlace:hover,
.mhs-recuadro-enlace:focus-visible {
  background: rgba(176, 141, 87, 0.06);
}

.mhs-recuadro-enlace:focus-visible {
  outline: 1px solid var(--brass, #B08D57);
  outline-offset: 2px;
}

/* El "Lee tambien" de arriba */
.mhs-recuadro-label {
  display: block;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass, #B08D57);
  margin-bottom: 0.7rem;
}

/* El titular del otro articulo: lo importante del recuadro */
.mhs-recuadro-titulo {
  display: block;
  font-family: var(--display, 'Cinzel', serif);
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  line-height: 1.35;
  color: var(--vellum, #F3EBDD);
  transition: color 0.4s var(--ease, ease);
}

.mhs-recuadro-enlace:hover .mhs-recuadro-titulo {
  color: var(--gold-warm, #C9A669);
}

/* La meta descripcion */
.mhs-recuadro-frase {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--serif, Georgia, serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-mute, rgba(243, 235, 221, 0.55));
}

.mhs-recuadro-flecha {
  display: inline-block;
  margin-top: 0.85rem;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 0.85rem;
  color: var(--brass, #B08D57);
  transform: translateX(0);
  transition: transform 0.5s var(--ease, ease);
}

.mhs-recuadro-enlace:hover .mhs-recuadro-flecha {
  transform: translateX(6px);
}

/* En movil se estrecha el sangrado, que si no se come el texto */
@media (max-width: 640px) {
  .mhs-recuadro { margin: 2rem 0; }
  .mhs-recuadro-enlace { padding: 1.1rem 1.1rem 1.2rem; }
}

/* Quien haya pedido menos movimiento, que no lo tenga */
@media (prefers-reduced-motion: reduce) {
  .mhs-recuadro-enlace,
  .mhs-recuadro-titulo,
  .mhs-recuadro-flecha { transition: none; }
  .mhs-recuadro-enlace:hover .mhs-recuadro-flecha { transform: none; }
}