/* =============================================================================
   redess.it — BLOG, ridisegno delle schede
   Stesso linguaggio della griglia prodotti gia' approvata: angoli 14, ombra al
   posto del bordo, foto a filo, sollevamento di 6px al passaggio del mouse.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. ALLINEAMENTO — ⚠️⚠️ misurato: su TUTTE le pagine del blog il contenuto
   stava a 92,5…1292,5 mentre intestazione, contenitore e fascia del titolo
   stanno a 107,5…1277,5: quindici pixel fuori squadra da tutti e due i lati.
   Causa: la `.row` di Bootstrap ha i margini a -15px ma le colonne hanno perso
   il loro padding di 15px, quindi il rientro negativo resta scoperto.
   Rimedio: si restituisce il padding alle colonne. Cosi' il contenuto torna a
   107,5…1277,5 e fra le due colonne resta una gronda di 30px.
   -------------------------------------------------------------------------- */
body.blog #content .row > [class*="col-"],
body.archive #content .row > [class*="col-"],
body.search #content .row > [class*="col-"],
body.single-post #content .row > [class*="col-"],
body.page #content .row > #main.col-sm-12 {
	padding-left: 15px;
	padding-right: 15px;
}

/* ⚠️⚠️ L'ultimo anello: dentro l'elemento blog c'e' un `.meta-slider` con
   `margin: 0 -15px`, residuo dell'impaginazione a CAROSELLO (dove ogni
   diapositiva ha 15px di padding a compensarlo). Noi mostriamo una griglia,
   quel padding non c'e', e il rientro negativo resta scoperto: e' lui che
   spingeva le schede a 92,5 invece che a 107,5. Si azzera. */
.ftc-sb-blogs .meta-slider,
.blog-newside .meta-slider {
	margin-left: 0;
	margin-right: 0;
}

/* -----------------------------------------------------------------------------
   2. LA SCHEDA
   -------------------------------------------------------------------------- */
.blogs article.post-wrapper {
	position: relative;
	background: #fff;
	border: 0;
	border-radius: 14px;
	padding: 0;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba( 60, 40, 25, .06 ), 0 6px 18px -12px rgba( 60, 40, 25, .28 );
	transition: box-shadow .28s cubic-bezier( .2, .7, .3, 1 ), transform .28s cubic-bezier( .2, .7, .3, 1 );
}
.blogs article.post-wrapper:hover {
	transform: translateY( -6px );
	box-shadow: 0 2px 4px rgba( 60, 40, 25, .08 ), 0 22px 44px -22px rgba( 60, 40, 25, .5 );
}

/* la foto: a filo, sempre nella stessa proporzione, e si avvicina al passaggio */
.blogs article.post-wrapper header.post-img { position: relative; overflow: hidden; margin: 0; }
.blogs article.post-wrapper header.post-img a.blog-image { display: block; line-height: 0; }
.blogs article.post-wrapper header.post-img img {
	display: block;
	/* ⚠️⚠️ `aspect-ratio` con `height:auto` dentro una GRIGLIA fa un calcolo
	   circolare: l'altezza della riga viene stimata prima che l'immagine sappia
	   quanto e' larga, e il contenuto sfora di una decina di pixel — era per
	   questo che il pulsante usciva dalla scheda. Un'altezza in pixel toglie
	   l'incertezza e le righe restano pari lo stesso. */
	width: 100%;
	height: 210px;
	object-fit: cover;
	background: #f4ecdc;
	transition: transform .5s cubic-bezier( .2, .7, .3, 1 );
}
.blogs article.post-wrapper:hover header.post-img img { transform: scale( 1.05 ); }

/* ⚠️ La data nel markup c'e' TRE volte: `.date-time-left`, `.date-time` dentro
   la foto e `span.date-time` nell'intestazione. Se ne tiene UNA, quella sulla
   foto, che diventa una pastiglia — e le altre due spariscono. */
.blogs article.post-wrapper .date-time-left,
.blogs article.post-wrapper .entry-header > span.date-time,
.blogs article.post-wrapper .blog-h17 { display: none; }

.blogs article.post-wrapper header.post-img .date-time {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 52px;
	padding: 7px 8px 6px;
	border-radius: 10px;
	background: rgba( 255, 251, 239, .94 );
	box-shadow: 0 2px 10px rgba( 40, 25, 15, .22 );
	font-family: Roboto, system-ui, sans-serif;
	line-height: 1;
}
/* ⚠️ Le date le spegne il CSS del PERSONALIZZATORE con `.date-time span
   { display:none !important }`, in tutto il sito. Qui si riaccendono SOLO
   dentro le schede del blog, dove diventano la pastiglia sulla foto. */
.blogs article.post-wrapper header.post-img .date-time span {
	display: block !important;
	text-align: center;
}
.blogs article.post-wrapper header.post-img .date-time span:first-child {
	font-size: 19px; font-weight: 700; color: #be1e2d;
}
.blogs article.post-wrapper header.post-img .date-time span + span {
	margin-top: 2px;
	font-size: 11px; font-weight: 600; letter-spacing: .09em;
	text-transform: uppercase; color: #6f655c;
}

/* il testo */
/* ⚠️⚠️ Su «Pubblicazioni scientifiche» le schede hanno GIA' un pulsante del
   tema («Scopri di Più») e NON hanno il sommario: il mio «Leggi tutto», che e'
   ancorato in fondo, ci finiva sopra. Con `:not(:has(...))` il mio compare solo
   dove quello del tema non c'e'. Se un browser non conosce `:has()` scarta la
   regola e resta il pulsante del tema: il modo giusto di sbagliare. */
.blogs article.post-wrapper .post-info { padding: 18px 20px 22px; }
.blogs article.post-wrapper:not(:has(a.button-readmore)) .post-info { padding-bottom: 58px; }
.blogs article.post-wrapper .entry-header { margin: 0; padding: 0; }
.blogs article.post-wrapper h3.blog-title {
	margin: 0 0 8px;
	font-family: Roboto, system-ui, sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: 0;
	text-transform: none;
}
.blogs article.post-wrapper h3.blog-title a {
	display: block;
	max-height: 2.64em;          /* due righe esatte di 1,32 */
	overflow: hidden;
	color: #221e1a;
}
.blogs article.post-wrapper:hover h3.blog-title a { color: #be1e2d; }
.blogs article.post-wrapper .entry-content { margin: 0; }
.blogs article.post-wrapper .entry-content p {
	margin: 0;
	max-height: 4.8em;           /* tre righe di 1,6 */
	overflow: hidden;
	font-size: 14.5px;
	line-height: 1.6;
	color: #5c534b;
}

/* ⚠️ Il «Leggi tutto» e la zona cliccabile si costruiscono sul collegamento del
   TITOLO, non su quello della foto: `header.post-img` ha `overflow:hidden` per
   trattenere lo zoom e ci ritaglierebbe dentro anche il pulsante. */
.blogs article.post-wrapper h3.blog-title a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}
.blogs article.post-wrapper:not(:has(a.button-readmore)) h3.blog-title a::after {
	content: "Leggi tutto →";
	position: absolute;
	left: 20px;
	bottom: 18px;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .01em;
	color: #be1e2d;
	transition: transform .22s cubic-bezier( .2, .7, .3, 1 );
}
.blogs article.post-wrapper:not(:has(a.button-readmore)):hover h3.blog-title a::after { transform: translateX( 4px ); }

/* il filo che chiude la scheda sopra il «Leggi tutto» */
.blogs article.post-wrapper:not(:has(a.button-readmore)) .post-info::after {
	content: "";
	position: absolute;
	left: 20px; right: 20px; bottom: 46px;
	height: 1px;
	background: #f1eade;
}

/* -----------------------------------------------------------------------------
   3. ARCHIVI: stessa pelle, una colonna sola
   -------------------------------------------------------------------------- */
#main article.post-item {
	position: relative;
	background: #fff;
	border: 0;
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 28px;
	box-shadow: 0 1px 2px rgba( 60, 40, 25, .06 ), 0 6px 18px -12px rgba( 60, 40, 25, .28 );
	transition: box-shadow .28s cubic-bezier( .2, .7, .3, 1 ), transform .28s cubic-bezier( .2, .7, .3, 1 );
}
#main article.post-item:hover {
	transform: translateY( -4px );
	box-shadow: 0 2px 4px rgba( 60, 40, 25, .08 ), 0 22px 44px -22px rgba( 60, 40, 25, .5 );
}
#main article.post-item .post-img { overflow: hidden; }
#main article.post-item .post-img img.thumbnail-blog { transition: transform .5s cubic-bezier( .2, .7, .3, 1 ); }
#main article.post-item:hover .post-img img.thumbnail-blog { transform: scale( 1.04 ); }
#main article.post-item .post-info,
#main article.post-item .entry-content { padding-left: 26px; padding-right: 26px; }

/* --- archivi: il testo era tutto CENTRATO (`.post-info{text-align:center}`),
   e un paragrafo lungo centrato si legge male: righe a bandiera da tutte e due
   le parti, l'occhio non trova dove ricominciare. Torna a sinistra. --------- */
#main article.post-item .post-info,
#main article.post-item .entry-info,
#main article.post-item .entry-summary,
#main article.post-item .caftc-link,
#main article.post-item .date-time-meta,
#main article.post-item h3.entry-title { text-align: left; }

#main article.post-item .post-info { padding: 20px 26px 24px; }
#main article.post-item h4.text-blog {
	margin: 0 0 6px;
	font-family: Roboto, system-ui, sans-serif;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #be1e2d;
}
#main article.post-item .date-time-meta,
#main article.post-item .date-time-meta * {
	font-size: 12.5px;
	color: #8a7f74;
}
#main article.post-item .entry-summary { margin-top: 10px; }
#main article.post-item .full-content p { color: #5c534b; line-height: 1.65; }

/* «Leggi tutto» come nelle schede: un collegamento, non un bottone in mezzo */
#main article.post-item a.button-readmore {
	display: inline-block;
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 13.5px;
	font-weight: 600;
	color: #be1e2d;
	transition: transform .22s cubic-bezier( .2, .7, .3, 1 );
}
#main article.post-item a.button-readmore::after { content: " →"; }
#main article.post-item a.button-readmore:hover { transform: translateX( 4px ); color: #9c1824; }

/* la stessa pastiglia della data delle schede, anche qui */
#main article.post-item header.post-img { position: relative; }
#main article.post-item header.post-img .date-time {
	top: 12px; left: 12px; right: auto; bottom: auto;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	min-width: 52px; padding: 7px 8px 6px;
	border-radius: 10px;
	background: rgba( 255, 251, 239, .94 );
	box-shadow: 0 2px 10px rgba( 40, 25, 15, .22 );
	font-family: Roboto, system-ui, sans-serif;
	line-height: 1;
}
#main article.post-item header.post-img .date-time span { display: block !important; text-align: center; }
#main article.post-item header.post-img .date-time span:first-child { font-size: 19px; font-weight: 700; color: #be1e2d; }
#main article.post-item header.post-img .date-time span + span {
	margin-top: 2px; font-size: 11px; font-weight: 600;
	letter-spacing: .09em; text-transform: uppercase; color: #6f655c;
}

/* ⚠️ L'etichetta della categoria e' `position:absolute; top:0; right:-1px`:
   incollata all'angolo della scheda, con lo sfondo bianco, veniva ritagliata
   dall'angolo arrotondato e sembrava una targhetta staccata. Diventa una
   pastiglia sulla foto, gemella della pastiglia della data a sinistra. */
#main article.post-item .caftc-link span.cat-links { top: 12px; right: 12px; }
#main article.post-item .caftc-link span.cat-links a {
	display: inline-block;
	padding: 7px 13px;
	border-radius: 999px;
	background: #be1e2d;
	color: #fff;
	font-family: Roboto, system-ui, sans-serif;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .08em;
	text-transform: uppercase;
	box-shadow: 0 2px 10px rgba( 40, 25, 15, .22 );
}
#main article.post-item .caftc-link span.cat-links a:hover { background: #9c1824; color: #fff; }

/* «Leggi tutto» a filo con il testo, senza rientro */
#main article.post-item a.button-readmore { margin-left: 0; }

/* --- il pulsante del tema dentro le schede -------------------------------
   ⚠️ Va sollevato sopra la zona cliccabile della scheda (`h3 a::before` con
   `inset:0`, z-index 3), altrimenti e' coperto e non si preme. */
/* ⚠️⚠️ Il pulsante USCIVA dalla scheda di 9-10 px: la scheda ha
   `overflow: visible` e il pulsante, in fondo al contenuto, sfondava il bordo
   inferiore. Si risolve rendendo la scheda una COLONNA e ancorando il pulsante
   in fondo con `margin-top:auto`: cosi' resta dentro qualunque sia la
   lunghezza del titolo, e tutte le schede lo allineano alla stessa quota. */
/* ⚠️⚠️ NIENTE flex qui. Con la scheda a colonna, la riga della griglia veniva
   misurata prima che il testo assestasse: risultato 392 px di scheda contro
   402 di contenuto, e il pulsante fuori di 10. In flusso normale il problema
   non esiste, e i pulsanti si allineano lo stesso perche' titolo (2 righe) e
   sommario (3) sono gia' tagliati a misura fissa. */
/* Ora che il `top` e' azzerato la colonna si puo' rimettere: serve ad
   allineare i pulsanti alla stessa quota su tutte le schede della riga. */
.blogs article.post-wrapper { display: flex; flex-direction: column; }
/* ⚠️⚠️ `flex: 1 1 auto` lasciava COMPRIMERE il blocco del testo: la riga della
   griglia fissava l'altezza e il pulsante, che sta in fondo, usciva di 10px.
   Con `1 0 auto` il blocco non si stringe e a crescere e' la scheda. */
.blogs article.post-wrapper .post-info { display: flex; flex-direction: column; flex: 1 1 auto; }
.blogs article.post-wrapper a.button-readmore {
	/* ⚠️⚠️ ECCO perche' il pulsante usciva dalla scheda, sempre della stessa
	   quantita' su ogni scheda: `article a.button-readmore { top: 30px }` nel
	   CSS del PERSONALIZZATORE. Con `position: relative` lo spostamento e'
	   solo visivo — il posto nel flusso resta dov'era, quindi la scheda non
	   cresce e il pulsante sborda. Non era ne' il flex ne' la griglia: era un
	   `top`. Si azzera. */
	margin-top: auto !important;
	align-self: flex-start;
	position: relative;
	top: 0 !important;
	bottom: auto !important;
	z-index: 4;
	display: inline-block;
	margin-bottom: 0;
	padding: 0 16px;
	height: 38px;
	line-height: 36px;
	border: 1px solid #e3d0d3;
	border-radius: 999px;
	background: none;
	font-family: Roboto, system-ui, sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	color: #be1e2d;
	transition: background-color .18s ease, border-color .18s ease;
}
.blogs article.post-wrapper a.button-readmore:hover {
	background: #be1e2d;
	border-color: #be1e2d;
	color: #fff;
}
/* il doppione dentro .blog-h17 resta nascosto (la regola sta piu' su) */

/* --- i titoli dei widget anche nella colonna di Visual Composer ----------- */
/* ⚠️ Il prefisso lungo non e' decorativo: la regola del personalizzatore e'
   `body.wpb-js-composer:not(.woocommerce-page) .widget-container .widget-title`
   (0,4,2) con !important. Senza lo stesso prefisso si perde comunque. */
body.wpb-js-composer:not(.woocommerce-page) .wpb_widgetised_column .widget-container .widget-title,
body.wpb-js-composer:not(.woocommerce-page) .wpb_widgetised_column .widget-container .widget-title-wrapper h3.widget-title,
.wpb_widgetised_column .widget-container .widget-title,
.wpb_widgetised_column .widget-container .widget-title-wrapper h3.widget-title {
	font-family: Roboto, system-ui, sans-serif !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.3;
	text-transform: none;
	color: #221e1a !important;
}

/* --- ⚠️⚠️ IL PULSANTE CHE USCIVA DALLA SCHEDA --------------------------------
   Misurato: scheda 406 px, contenuto 416. Non era il flex e non era la riga
   della griglia: da qualche parte lungo la catena l'altezza veniva fissata e
   il contenuto sfondava (`overflow: visible` di negozio.css, che vince sul mio).
   Invece di inseguire la regola, si sblocca tutta la catena e si lascia che a
   decidere l'altezza sia il contenuto. Le schede restano pari perche' titolo e
   sommario sono gia' tagliati a un numero fisso di righe. */
body .blogs article.post-wrapper {
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
}
body .blogs article.post-wrapper .entry-header,
body .blogs article.post-wrapper .entry-content {
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	overflow: visible !important;
}
/* il taglio a righe fisse resta, ma sugli elementi giusti */
body .blogs article.post-wrapper h3.blog-title a {
	display: block;
	max-height: 2.64em !important;
	overflow: hidden !important;
}
body .blogs article.post-wrapper .entry-content p {
	max-height: 4.8em !important;
	overflow: hidden !important;
}