/* Tarjeta de obra: Loop Item «MisifusArt · Tarjeta de obra» dentro de un Loop Grid.
   Clases que pone el plugin misifusart-core en cada obra (post_class):
   mf-obra, mf-acento-<slug>, mf-giro-0…7, mf-disponible | mf-vendida. */

/* Acento por obra (campo del producto). El color de texto encima (--acento-texto) y el fondo del
   botón (--acento-boton, --acento-boton-hover) los calcula functions.php por contraste WCAG. */
.mf-acento-mostaza  { --acento-obra: var(--mostaza); }
.mf-acento-rojo     { --acento-obra: var(--rojo); }
.mf-acento-purpura  { --acento-obra: var(--purpura); }
.mf-acento-indigo   { --acento-obra: var(--indigo); }
.mf-acento-verde    { --acento-obra: var(--verde); }
.mf-acento-petroleo { --acento-obra: var(--petroleo); }
.mf-acento-salvia   { --acento-obra: var(--salvia); }

/* Giro determinista por ID (-2° … 2°, nunca 0) */
.mf-giro-0 { --giro: -2deg; }   .mf-giro-1 { --giro: -1.5deg; }
.mf-giro-2 { --giro: -1deg; }   .mf-giro-3 { --giro: -.5deg; }
.mf-giro-4 { --giro: .5deg; }   .mf-giro-5 { --giro: 1deg; }
.mf-giro-6 { --giro: 1.5deg; }  .mf-giro-7 { --giro: 2deg; }

/* ---------- Estructura ---------- */
.mf-tarjeta > .elementor-element { margin-block-end: 0; }

/* La obra se apoya en la línea base de la fila; el papel que sobra queda arriba */
.mf-tarjeta__colgador {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-top: 14px;
}
.mf-tarjeta__hoja {
  position: relative;
  rotate: var(--giro, 0deg);
  transition: rotate .3s ease;
}
.mf-tarjeta__hoja img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 400px;
  box-shadow: var(--sombra);
}
/* Una cinta por pieza, como mucho */
.mf-tarjeta__hoja::before {
  content: "";
  position: absolute; z-index: 2; left: 50%; top: -12px;
  width: 30%; max-width: 96px; height: 24px;
  translate: -50% 0; rotate: -3deg;
  background: color-mix(in srgb, var(--menta) 80%, transparent);
  clip-path: polygon(3% 0, 97% 4%, 100% 22%, 97% 45%, 100% 70%, 97% 100%, 2% 96%, 0 74%, 3% 50%, 0 25%);
  pointer-events: none;
}
.e-loop-item:hover .mf-tarjeta__hoja,
.e-loop-item:focus-within .mf-tarjeta__hoja { rotate: 0deg; }

/* Título con el trazo de la firma en el color de la obra, al pasar o enfocar */
.mf-tarjeta__titulo { margin-top: 22px; }
.mf-tarjeta__titulo .elementor-heading-title { position: relative; }
.mf-tarjeta__titulo .elementor-heading-title a { text-decoration: none; color: inherit; }
.mf-tarjeta__titulo .elementor-heading-title::after {
  content: "";
  position: absolute; left: -.04em; bottom: -.14em;
  width: min(100%, 8em); height: .2em; min-height: 6px;
  background: var(--acento-obra, var(--verde-vivo));
  -webkit-mask: var(--trazo) 0 0 / 100% 100% no-repeat;
          mask: var(--trazo) 0 0 / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .45s cubic-bezier(.3, .7, .2, 1);
  pointer-events: none;
}
.e-loop-item:hover .mf-tarjeta__titulo .elementor-heading-title::after,
.e-loop-item:focus-within .mf-tarjeta__titulo .elementor-heading-title::after { clip-path: inset(0 0 0 0); }

/* Técnica / medidas · año */
.mf-ficha-tecnica {
  margin: .35em 0 14px;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}
.mf-ficha-tecnica span { display: block; }
.mf-ficha-tecnica span + span { white-space: nowrap; }

/* ---------- Compra ---------- */
.mf-compra {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 60px;
}
.mf-precio {
  margin: 0;
  font-family: var(--e-global-typography-primary-font-family), Georgia, serif;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--tinta);
}
/* «Me lo llevo» en línea (el botón principal mostaza queda para la ficha y el hero) */
body .mf-compra .mf-boton-mini {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .5em 1em;
  font-family: var(--e-global-typography-accent-font-family), sans-serif;
  font-weight: 700; font-size: .95rem; line-height: 1.1;
  color: var(--tinta); background: transparent;
  border: 2px solid var(--tinta); border-radius: 6px;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
body .mf-compra .mf-boton-mini:hover,
body .mf-compra .mf-boton-mini:focus-visible { background: var(--tinta); color: var(--papel); }
body .mf-compra .mf-boton-mini.added { background: var(--verde); border-color: var(--verde); color: var(--papel); }
.mf-compra .added_to_cart { display: none; } /* WooCommerce añade «Ver carrito»: el carrito de la cabecera ya lo cuenta */

/* Vendida: el sello ocupa el sitio del precio y el botón; nunca tapa obra ni título */
.mf-compra--hogar { justify-content: flex-start; }
.mf-compra--hogar p { margin: 0; font-size: .95rem; line-height: 1.35; }
.mf-compra--hogar a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--acento-obra); text-underline-offset: .22em; }
.mf-sello {
  flex: none; width: 60px; height: 60px; overflow: visible;
  color: var(--rojo); rotate: -12deg; mix-blend-mode: multiply;
}

/* ---------- Rejilla: las filas comparten líneas (obra, título, ficha, compra) ---------- */
@supports (grid-template-rows: subgrid) {
  .elementor-loop-container:has(.mf-tarjeta) { row-gap: 0; }
  .elementor-loop-container:has(.mf-tarjeta) > .e-loop-item {
    display: grid; grid-template-rows: subgrid; grid-row: span 4;
  }
  .e-loop-item > .mf-tarjeta {
    display: grid !important; grid-template-rows: subgrid; grid-row: span 4; gap: 0;
  }
  .mf-tarjeta__titulo { align-self: start; }
  .mf-tarjeta > .elementor-element:last-child { align-self: end; margin-bottom: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .e-loop-item:hover .mf-tarjeta__hoja,
  .e-loop-item:focus-within .mf-tarjeta__hoja { rotate: var(--giro, 0deg); }
}