/* Targeta d'una landing de captació (global-templates/lead-magnet-card.php), al
   llistat del blog i a la portada.

   Va amb estils propis i NO reaprofitant els de les targetes d'article, tot i
   que el marcatge és el mateix: totes les regles legacy d'aquelles targetes
   estan sota `body.blog #posts .card`, o sigui que fora del llistat del blog no
   se n'aplica ni una i a la portada la targeta sortia sense format (imatge a
   mida natural, 1423px d'alt). Els valors són els mateixos que els legacy,
   copiats a consciència, perquè les dues targetes s'han de veure iguals quan
   comparteixen graella.

   Al llistat del blog les regles legacy hi tornen a passar per sobre (id +
   selector de tipus, i es carreguen després): allà on aquest fitxer no vol el
   valor legacy sinó un altre, cal !important. Són quatre declaracions i van
   marcades una per una. */

.lead-magnet-card { border: 3px solid var(--color-dark); border-radius: 12px; margin-top: 40px; position: relative; transition: transform .4s ease; }
.lead-magnet-card .full-link { inset: 0; position: absolute; z-index: 999; }
.lead-magnet-card .tags { bottom: calc(100% - 220px); display: flex; flex-wrap: wrap; justify-content: flex-start; left: 0; margin: 0 auto; padding: 0 8px; position: absolute; right: 0; }
.lead-magnet-card .tags .category { background-color: #fff; border: 1px solid var(--color-dark); border-radius: 100px; display: block; font-size: 14px; font-weight: 400; margin: 8px; padding: 4px 12px; white-space: nowrap; }
.lead-magnet-card img { background-color: var(--color-dark); border-radius: 9px; height: 230px; object-fit: cover; object-position: center; }
.lead-magnet-card .card-body { padding: 20px; }
.lead-magnet-card .title { color: var(--color-dark); display: block; text-decoration: none; }
.lead-magnet-card .date { font-size: 14px; }

/* La regla legacy fixa l'alçada de la imatge però no l'amplada, i li funciona
   perquè les portades dels articles són JPG/PNG (WordPress els escriu
   width/height al <img>). Un SVG no té mides intrínseques registrades i WP li
   posa width="1", o sigui que la imatge sortia d'un píxel d'ample. */
.lead-magnet-card img { width: 100% !important; }

/* Il·lustració (SVG): es veu sencera en comptes de retallada, que a l'amplada de
   tota la graella n'ensenyava un tros irreconeixible. El fons de la caixa ja és
   el navy de la marca, el mateix que porta el dibuix, així que no s'hi nota cap
   marc. La classe la posa el partial segons el tipus de fitxer. */
.lead-magnet-card.is-contained img { object-fit: contain !important; }

/* El títol hi cap en una línia a l'amplada de les tres columnes: l'alçada fixa
   de 90px que la legacy dona a les targetes d'article (per igualar-les a un terç
   d'amplada) aquí només deixa un forat buit. */
.lead-magnet-card .title { height: auto !important; margin: 12px 0 !important; }

/* On l'article hi té la data, la guia hi té la crida a l'acció: ha de semblar
   una acció i no un peu de targeta. */
.lead-magnet-card .date { font-weight: 700 !important; }

/* A la portada la targeta va sola dins de la seva secció. */
.home-lead-magnet { padding-bottom: 40px; }