/* Plantilla "Lead" (page-templates/lead-page.php).
   Portada + article + bloc destacat + targeta de formulari, en aquest ordre
   (estructura definida pel client el 04-08-2026).

   Els valors de la portada i de la targeta són els reals de la plantilla Coupons
   — llegits amb getComputedStyle de la pàgina en producció: text #F9F8F1, corba
   blanca de 100px, h1 Raleway 900, punts amb icona de 34px, targeta blanca amb
   vora de 3px i radi 20px, inputs de radi 100px i botó lima — però amb selectors
   propis: la CSS legacy d'aquella plantilla està tota sota
   .page-template-coupons-page i les seves regles de formulari apunten a
   form.wpcf7-form, que aquí no existeix. */

/* Fons fosc de base: la imatge de portada és opcional i sense ella el text crema
   quedaria sobre blanc, il·legible. */
/* La CSS legacy posa `overflow-x: hidden` al body
   (html:not(.wp-toolbar) body:not(#tinymce), amb un id a dins: només es pot
   guanyar amb !important). Això converteix el body en contenidor de scroll i
   mata el position:sticky de la targeta del formulari. `clip` reté el mateix
   tallat horitzontal sense crear el contenidor de scroll. Scopat a aquesta
   plantilla: a la portada, canviar-ho té conseqüències
   (memòria overflow-x-clip-breaks-sticky-detection). */
body.page-template-lead-page { overflow-x: clip !important; }

.page-template-lead-page #lead-hero { background: var(--color-dark); color: var(--color-cream); position: relative; }
.page-template-lead-page #lead-hero .wrapper { height: 100%; padding: 0; position: absolute; width: 100%; }
/* Vel lleuger: la plantilla Coupons no en porta i confia que la foto ja sigui
   fosca, però aquí el text blanc ha de sobreviure a qualsevol imatge que pugi
   l'editor. .45 fosqueix prou sense apagar la foto (una mica més que a Coupons:
   aquí la portada porta també l'entradeta, més text a llegir a sobre). */
.page-template-lead-page #lead-hero .wrapper::after { background: rgba(44, 44, 68, .45); content: ""; inset: 0; position: absolute; }
.page-template-lead-page #lead-hero .wrapper img { height: 100%; object-fit: cover; width: 100%; }
.page-template-lead-page #lead-hero .wrapper svg { bottom: -0.5px; height: 50px; left: 0; position: absolute; z-index: 1; }
.page-template-lead-page #lead-hero .wrapper svg path { fill: #fff; }

.page-template-lead-page #lead-hero .container { position: relative; }
/* padding-bottom generós: sense la columna del formulari la portada és baixa i
   el text queia sobre la corba blanca. */
.page-template-lead-page #lead-hero .content { padding-bottom: 80px; padding-top: 120px; z-index: 1; }
.page-template-lead-page #lead-hero .content .presentation-logo { height: 100px; margin-bottom: 20px; max-width: 50%; object-fit: contain; }
.page-template-lead-page #lead-hero .content .h3 { line-height: 120%; margin-bottom: 20px; }
.page-template-lead-page .lead-eyebrow { font-family: var(--font-main); font-size: 14px; font-weight: 700; letter-spacing: .08em; margin-bottom: 12px; text-transform: uppercase; }
.page-template-lead-page .lead-lede { font-family: var(--font-main); font-size: 18px; line-height: 160%; margin-bottom: 0; max-width: 60ch; }

/* --- Article --- */

.page-template-lead-page #lead-content { background: #fff; color: var(--color-dark); padding: 60px 0; }
.page-template-lead-page .lead-body { font-family: var(--font-main); font-size: 17px; line-height: 170%; }
.page-template-lead-page .lead-body > *:last-child { margin-bottom: 0; }
.page-template-lead-page .lead-body p { margin-bottom: 20px; }
.page-template-lead-page .lead-body h2 { font-family: var(--font-heading); font-size: 30px; font-weight: 700; line-height: 120%; margin: 40px 0 20px; }
.page-template-lead-page .lead-body h3 { font-family: var(--font-heading); font-size: 22px; font-weight: 700; line-height: 130%; margin: 32px 0 16px; }
.page-template-lead-page .lead-body h2:first-child, .page-template-lead-page .lead-body h3:first-child { margin-top: 0; }
.page-template-lead-page .lead-body ul, .page-template-lead-page .lead-body ol { margin-bottom: 20px; padding-left: 22px; }
.page-template-lead-page .lead-body li { margin-bottom: 8px; }
.page-template-lead-page .lead-body a { color: var(--color-pill-green); }

/* --- Bloc destacat --- */

.page-template-lead-page .lead-highlight { background: var(--color-cream); border: 3px solid var(--color-dark); border-radius: 20px; margin-top: 40px; padding: 32px; }
.page-template-lead-page .lead-highlight h2 { line-height: 120%; margin-bottom: 16px; }
.page-template-lead-page .lead-highlight-intro { font-family: var(--font-main); font-size: 17px; font-weight: 700; margin-bottom: 20px; }
.page-template-lead-page .lead-highlight-list { list-style: none; margin: 0; padding: 0; }
.page-template-lead-page .lead-highlight-list li { align-items: flex-start; display: flex; font-family: var(--font-main); font-size: 17px; line-height: 150%; margin-bottom: 16px; }
.page-template-lead-page .lead-highlight-list li:last-child { margin-bottom: 0; }
.page-template-lead-page .lead-highlight-list .lucide { height: 26px; margin-right: 12px; min-height: 26px; min-width: 26px; width: 26px; }

/* --- Formulari --- */

/* La targeta va a la columna de la dreta i s'enganxa mentre es llegeix
   l'article. El sticky viu al .lead-aside (la columna) i no a la targeta: la
   columna de Bootstrap ja s'estira a l'alçada de la fila, que és el recorregut
   que necessita el sticky. Compte amb posar overflow a cap avantpassat: ho
   trenca en silenci (veure memòria overflow-x-clip-breaks-sticky-detection). */
.page-template-lead-page .lead-aside { margin-top: 40px; }
/* Ritme vertical ajustat perquè la targeta sencera càpiga a la pantalla sense
   scroll intern: amb la mida "còmoda" (padding 40, camps a 16 de separació)
   feia 734px i en un portàtil de 800px d'alt el botó d'enviar quedava fora.
   Tot el que hi ha aquí és espaiat, no mides de text: el formulari s'ha de
   poder llegir igual. */
.page-template-lead-page .form-card { background: #fff; border: 3px solid var(--color-dark); border-radius: 20px; color: var(--color-dark); padding: 28px 32px; }
.page-template-lead-page .form-card-title { display: block; line-height: 120%; margin-bottom: 8px; }
.page-template-lead-page .form-card-intro { font-family: var(--font-main); font-size: 16px; line-height: 150%; margin-bottom: 18px; }

.page-template-lead-page .lead-form label { display: block; font-family: var(--font-main); font-size: 15px; margin-bottom: 10px; }
.page-template-lead-page .lead-form label input[type="text"],
.page-template-lead-page .lead-form label input[type="email"] { background: transparent; border: 2px solid var(--color-dark); border-radius: 100px; color: var(--color-dark); display: block; font-family: var(--font-main); font-size: 16px; margin-top: 4px; padding: 10px 16px; width: 100%; }
.page-template-lead-page .lead-form label input::placeholder { color: rgba(44, 44, 68, .5); }
.page-template-lead-page .lead-form label input:focus-visible { outline: 2px solid var(--color-pill-green); outline-offset: 2px; }

.page-template-lead-page .lead-form-consent { align-items: flex-start; display: flex; font-size: 14px; gap: 10px; line-height: 140%; margin-top: 14px; }
.page-template-lead-page .lead-form-consent input { accent-color: var(--color-dark); flex: 0 0 auto; height: 18px; margin-top: 1px; width: 18px; }
.page-template-lead-page .lead-form-consent a { color: var(--color-pill-green); }
.page-template-lead-page .lead-form-optin { margin-top: 10px; }

.page-template-lead-page .lead-form-error { color: #b3261e; font-family: var(--font-main); font-size: 14px; margin: 8px 0 0; min-height: 1em; }

.page-template-lead-page .lead-form-button { background: var(--color-primary); border: 1px solid var(--color-dark); border-radius: 100px; color: var(--color-dark); display: inline-block; font-family: var(--font-main); font-size: 16px; font-weight: 700; margin-top: 14px; padding: 11px 24px; transition: background-color .2s ease, color .2s ease; }
.page-template-lead-page .lead-form-button:hover, .page-template-lead-page .lead-form-button:focus-visible { background: var(--color-dark); color: var(--color-cream); }
.page-template-lead-page .lead-form-button:disabled { opacity: .6; pointer-events: none; }

.page-template-lead-page .lead-form-thanks h2 { line-height: 120%; margin-bottom: 12px; }
.page-template-lead-page .lead-form-thanks p { color: var(--color-dark); font-family: var(--font-main); font-size: 17px; line-height: 160%; margin: 0; }
/* Especificitat: ha de guanyar a `.lead-form-thanks p` d'aquí sobre, per això va
   qualificat amb el contenidor i no és una classe sola. */
.page-template-lead-page .lead-form-thanks .lead-form-email-note { font-size: 15px; margin-top: 16px; opacity: .8; }

@media screen and (min-width: 992px) {
	.page-template-lead-page #lead-hero .wrapper svg { height: 100px; }
	.page-template-lead-page #lead-hero .content { padding-bottom: 140px; padding-top: 200px; }
	.page-template-lead-page #lead-hero .content .presentation-logo { margin-bottom: 40px; max-width: 60%; }
	.page-template-lead-page .lead-lede { font-size: 20px; }
	.page-template-lead-page #lead-content { padding: 80px 0 100px; }
	.page-template-lead-page .lead-highlight { padding: 40px; }
	.page-template-lead-page .lead-main { padding-right: 24px; }
	.page-template-lead-page .lead-aside { margin-top: 0; }
}

/* El sticky només s'activa si la targeta hi cap sencera: fa 622px i s'ancora a
   110px (el que ocupa la navbar fixa), o sigui que per sota de ~750px d'alçada de
   finestra es quedaria tallada. En aquest cas es queda quieta i puja amb la
   pàgina, que és pitjor però no amaga el botó d'enviar. Sense max-height ni
   overflow enlloc: la targeta no ha de tenir scroll propi. */
@media screen and (min-width: 992px) and (min-height: 750px) {
	.page-template-lead-page .lead-aside { align-self: start; position: sticky; top: 110px; }
}

@media (prefers-reduced-motion: reduce) {
	.page-template-lead-page .lead-form-button { transition: none; }
}