/* Site-wide layout: header, footer, service/stat icons, sections. */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: transparent;
}

/* Tablet/desktop, every template: the header floats OVER whatever's at
   the top of the page from the very start (not just on scroll) — taken
   out of flow, 10px from the viewport top. Pages with a hero/page-hero
   get a matching top margin on that element so it overlaps correctly
   (see .termogas-hero-slider and .page-hero); pages with neither get it
   on <main> instead (.has-no-hero below), so nothing ends up hidden
   underneath it. */
@media ( min-width: 782px ) {
	.site-header {
		position: fixed;
		top: 10px;
		left: 0;
		right: 0;
	}
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --space-stack );
	flex-wrap: wrap;
	padding-block: var( --space-related );
	background: rgba( 255, 255, 255, 0.7 );
	-webkit-backdrop-filter: blur( 14px );
	backdrop-filter: blur( 14px );
	transition: box-shadow 0.2s ease;
}

/* Floating "pill" header, inset from the viewport edges — down to the
   781px breakpoint, where every bit of horizontal space is needed for
   the mobile action buttons + burger (see the 420px tier further down). */
@media ( min-width: 782px ) {
	.site-header__inner {
		width: calc( 100% - 2 * var( --space-stack ) );
		max-width: var( --wide-size );
		border-radius: var( --radius );
	}
}

.site-header.is-scrolled .site-header__inner {
	box-shadow: var( --shadow-soft );
}

.site-header__actions {
	display: flex;
	gap: 10px;
}

.site-nav ul {
	display: flex;
	gap: var( --space-stack );
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.site-nav__header {
	display: none;
}

.site-nav a {
	display: inline-block;
	color: var( --color-text-primary );
	font-weight: 500;
	padding: 3px 14px;
	border-radius: var( --radius-pill );
	background: rgba( 255, 255, 255, 0.25 );
	transition: background-color 0.15s ease, color 0.15s ease;
}

.site-nav a:hover {
	color: var( --color-text-primary );
	background: rgba( 171, 200, 109, 0.22 );
}

.site-nav .current-menu-item > a,
.site-nav .current_page_item > a {
	color: var( --color-text-primary );
	background: rgba( 171, 200, 109, 0.22 );
}

/* Mobile nav toggle */
.site-nav-toggle {
	display: none;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 8px;
}

@media ( max-width: 781px ) {
	.site-nav-toggle {
		display: inline-flex;
		order: 3;
	}
	.site-header__inner {
		gap: 10px;
	}
	.site-header__actions {
		order: 2;
		margin-left: auto;
	}
	.site-nav {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 200;
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background: var( --color-surface-0 );
		box-shadow: inset 0 10px 20px -14px rgba( 0, 0, 0, 0.12 ), inset 0 -10px 20px -14px rgba( 0, 0, 0, 0.12 );
		padding: var( --space-stack );
		transform: translateX( 100% );
		transition: transform 0.25s ease;
	}
	.site-nav.is-open {
		transform: translateX( 0 );
	}
	.site-nav__scroll {
		position: relative;
		z-index: 1;
		height: 100%;
		overflow-y: auto;
	}
	.site-nav::before {
		content: '';
		position: absolute;
		right: -10%;
		bottom: 0;
		width: 150vw;
		height: 150vw;
		max-width: 840px;
		max-height: 840px;
		background-color: var( --color-accent-teal );
		-webkit-mask: url( '../images/logo-mark.svg' ) no-repeat center / contain;
		mask: url( '../images/logo-mark.svg' ) no-repeat center / contain;
		opacity: 0.12;
		pointer-events: none;
		z-index: 0;
	}
	.site-nav__header {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: var( --space-section );
	}
	.site-nav__logo {
		width: 180px;
		height: auto;
	}
	.site-nav-close {
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY( -50% );
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: 0;
		padding: 4px;
		color: var( --color-text-primary );
		cursor: pointer;
	}
	.site-nav ul {
		flex-direction: column;
		align-items: center;
		width: 100%;
		gap: 0;
	}
	.site-nav li {
		width: 100%;
		text-align: center;
	}
	.site-nav li:not( :first-child ) {
		border-top: 4px solid rgba( 171, 200, 109, 0.5 );
	}
	.site-nav a {
		display: block;
		padding: var( --space-stack ) 0;
		border-radius: 0;
		background: none;
		font-size: var( --font-size-large );
		font-weight: 700;
		color: var( --color-text-primary );
	}
	.site-nav a:hover,
	.site-nav .current-menu-item > a,
	.site-nav .current_page_item > a {
		color: var( --color-text-primary );
		background: none;
	}
}

/* Narrow phones: logo + 3 icon buttons + burger no longer fit on one
   line at the 781px breakpoint's sizing — shrink them so it still does. */
@media ( max-width: 420px ) {
	.site-header__inner {
		gap: 6px;
	}
	.site-header__inner > a img {
		/* Fills whatever's left after padding + actions + burger, capped at
		   the logo's native 160px — stays as large as possible without
		   ever pushing the burger to a second line, down to ~310px wide. */
		width: clamp( 80px, calc( 100vw - 218px ), 160px );
	}
	.site-header__actions {
		gap: 6px;
	}
	.site-header__actions .tg-btn-icon {
		padding: 6px;
	}
}

/* Page hero — used by page.php when the page has a featured image. */
.page-hero {
	position: relative;
	min-height: 280px;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Same floating-header overlap as the homepage hero (see
   .termogas-hero-slider) — and for pages with no featured image at all,
   push <main> down by the header's full height instead, since there's
   no hero here for it to overlap. */
@media ( min-width: 782px ) {
	.page-hero {
		margin-top: calc( 10px + var( --header-height, 70px ) / 2 );
		/* Per-page override: custom field hero_height (px). */
		min-height: var( --hero-height, 280px );
	}
	main.has-no-hero {
		margin-top: calc( 10px + var( --header-height, 70px ) );
	}
}

.page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	/* Per-page override: custom field hero_overlay (0 = none, 1 = black). */
	background: rgba( 0, 0, 0, var( --hero-overlay, 0.45 ) );
}

.page-hero__overlay {
	position: relative;
	z-index: 1;
	text-align: center;
	padding-inline: var( --space-gutter );
}

.page-hero__overlay h1 {
	text-shadow: 0 1px 14px rgba( 0, 0, 0, 0.4 );
	color: #fff;
	font-size: var( --font-size-xx-large );
	line-height: 1.15;
	margin: 0;
}

/* Two-column content layout (page.php / single.php): 720px reading column
   + a sidebar filling the rest, up to the site's wide (1200px) chrome
   width — so content pages don't look narrower than the header/footer. */
.content-with-sidebar {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --space-section );
	max-width: var( --wide-size );
	margin-inline: auto;
}

@media ( min-width: 960px ) {
	.content-with-sidebar {
		grid-template-columns: var( --content-size ) 1fr;
		align-items: start;
	}
}

.content-sidebar {
	display: flex;
	flex-direction: column;
	gap: var( --space-stack );
	position: sticky;
	top: calc( 72px + var( --space-stack ) ); /* clears the sticky header */
}

.content-sidebar__contact-list {
	list-style: none;
	margin: var( --space-related ) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var( --space-related );
	font-size: var( --font-size-small );
	color: var( --color-text-secondary );
}

.content-sidebar__contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.content-sidebar__contact-list a {
	color: inherit;
}

.content-sidebar__contact-list a:hover {
	color: var( --color-accent );
}

.content-sidebar__contact-icon {
	flex-shrink: 0;
	display: inline-flex;
	color: var( --color-accent );
	margin-top: 2px;
}

.content-sidebar__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var( --space-related );
}

.content-sidebar__list a {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var( --color-text-primary );
	font-size: var( --font-size-small );
}

.content-sidebar__list a:hover {
	color: var( --color-accent );
}

.content-sidebar__icon {
	display: inline-flex;
	flex-shrink: 0;
	color: var( --color-accent );
}

.content-sidebar__icon svg {
	display: block;
}

/* Compact "latest articles" list (Servizi page sidebar): small thumb left,
   title + trimmed excerpt right. */
.content-sidebar__posts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var( --space-stack );
}

.content-sidebar__posts a {
	display: flex;
	gap: var( --space-related );
	align-items: flex-start;
	color: inherit;
}

.content-sidebar__post-thumb {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 8px;
}

.content-sidebar__post-thumb--empty {
	background: var( --color-surface-1 );
}

.content-sidebar__post-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.content-sidebar__post-title {
	font-size: var( --font-size-small );
	font-weight: 600;
	color: var( --color-text-primary );
	line-height: 1.3;
}

.content-sidebar__posts a:hover .content-sidebar__post-title {
	color: var( --color-accent );
}

.content-sidebar__post-excerpt {
	font-size: 0.75rem;
	color: var( --color-text-secondary );
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Sections */
.tg-section {
	padding-block: var( --space-section );
}

.tg-bar {
	padding-block: var( --space-bar );
}

/* Footer — dark surface, everything light/legible on it. */
/* Recessed panel look — a soft inset shadow instead of a flat background
   tint, so the band reads as "set into" the page rather than pasted on. */
.tg-inset {
	background: var( --color-surface-0 );
	box-shadow: inset 0 10px 20px -14px rgba( 0, 0, 0, 0.12 ), inset 0 -10px 20px -14px rgba( 0, 0, 0, 0.12 );
}

.tg-bar-light {
	background: linear-gradient( 135deg, #ffffff 0%, var( --color-accent-bg ) 100% );
}

.tg-bar-dark {
	background: linear-gradient( 135deg, var( --color-text-primary ) 0%, var( --color-accent-dark ) 100% );
	color: var( --color-surface-2 );
}

.tg-bar-dark .tg-card-text {
	color: rgba( 255, 255, 255, 0.75 );
}

.tg-bar-dark .tg-section-title {
	color: #fff;
}

.tg-bar-dark .tg-subheading {
	color: rgba( 255, 255, 255, 0.75 );
}

.tg-promo-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --space-section );
}

@media ( min-width: 782px ) {
	.tg-promo-split {
		grid-template-columns: 1fr 1fr;
	}

	.tg-promo-split__col:first-child {
		padding-right: var( --space-section );
		border-right: 1px solid rgba( 0, 0, 0, 0.1 );
	}

	.tg-promo-split__col:last-child {
		padding-left: var( --space-section );
	}
}

.tg-bar-dark .tg-promo-split__col:first-child {
	border-right-color: rgba( 255, 255, 255, 0.15 );
}

.site-footer {
	background: linear-gradient( 135deg, var( --color-text-primary ) 0%, var( --color-accent-dark ) 100% );
	color: var( --color-surface-2 );
	padding-block: var( --space-section );
	position: relative;
	overflow: hidden;
}

/* The WhatsApp bar overlaps the footer by half its own height (see
   .tg-whatsapp-bar below) — extra top padding keeps the footer's own
   content (logo, columns) clear of that overlap, with some breathing
   room on top of the overlap itself. Lower z-index than the bar, so the
   bar's own card (rounded, shadowed) stays visible, in front — not
   chopped off/hidden behind the footer's edge. */
@media ( min-width: 782px ) {
	.site-footer {
		position: relative;
		z-index: 1;
		padding-top: calc( var( --space-section ) + var( --whatsappbar-height, 160px ) / 2 + var( --space-stack ) );
	}
}

/* Richiedi-consulenza bar: on the homepage, where it directly follows
   the hero, it rides up to overlap the hero's bottom half. */
@media ( min-width: 782px ) {
	body.home .tg-promo-bar {
		position: relative;
		z-index: 2;
		margin-top: calc( -1 * var( --promobar-height, 160px ) / 2 );
		/* Same glass as the header, since it's now floating over the
		   hero image the same way. */
		background: rgba( 255, 255, 255, 0.7 );
		-webkit-backdrop-filter: blur( 14px );
		backdrop-filter: blur( 14px );
	}
}

/* WhatsApp + Zona di intervento bar: the footer (which always follows
   it) rides up to overlap its bottom half — but the bar itself stays on
   top (higher z-index than the footer), so its own card stays whole and
   visible instead of being covered by the footer's edge. */
@media ( min-width: 782px ) {
	.tg-whatsapp-bar {
		position: relative;
		z-index: 2;
		margin-bottom: calc( -1 * var( --whatsappbar-height, 160px ) / 2 );
		/* Same glass as the header and promo bar. */
		background: rgba( 255, 255, 255, 0.7 );
		-webkit-backdrop-filter: blur( 14px );
		backdrop-filter: blur( 14px );
	}
}

.site-footer .tg-container-wide {
	position: relative;
	z-index: 1;
}

.site-footer a {
	color: var( --color-surface-2 );
}

.site-footer a:hover {
	color: var( --color-accent-light );
}

.site-footer h4 {
	font-size: var( --font-size-small );
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: rgba( 255, 255, 255, 0.55 );
	margin-bottom: var( --space-related );
}

.site-footer .footer-tagline {
	color: var( --color-accent-light );
	font-weight: 600;
}

.footer-columns {
	display: grid;
	gap: var( --space-section );
	grid-template-columns: 1fr;
}

.footer-columns > div:not( :first-child ) {
	padding-top: var( --space-section );
	border-top: 1px solid rgba( 255, 255, 255, 0.12 );
}

@media ( min-width: 600px ) {
	.footer-columns {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
		gap: var( --space-section );
	}

	.footer-columns > div:not( :first-child ) {
		padding-top: 0;
		border-top: 0;
	}
}

.footer-brand {
	padding-right: var( --space-stack );
}

.footer-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var( --space-related );
}

.footer-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var( --space-related );
	font-size: var( --font-size-small );
	color: rgba( 255, 255, 255, 0.85 );
}

.footer-contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.footer-contact-icon {
	flex-shrink: 0;
	display: inline-flex;
	color: var( --color-accent-light );
	margin-top: 2px;
}

.footer-social {
	display: flex;
	gap: 10px;
}

.footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.1 );
	transition: background-color 0.15s ease;
}

.footer-social a:hover {
	background: rgba( 255, 255, 255, 0.2 );
	color: var( --color-surface-2 );
}

.footer-bottom {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var( --space-related );
	margin-top: var( --space-stack );
	padding-top: var( --space-stack );
	border-top: 1px solid rgba( 255, 255, 255, 0.15 );
	font-size: var( --font-size-small );
}

/* Disclosure line (AI-generated illustrations), full width under the legal row. */
.footer-ai-note {
	flex-basis: 100%;
	margin: 0;
	font-size: 0.8125rem;
	opacity: 0.7;
}

.termogas-footer-logo {
	filter: brightness( 0 ) invert( 1 );
}

/* Service / stat icons — inline SVG, inherit accent color. */
.termogas-service-icon {
	display: block;
	color: var( --color-accent );
	margin-bottom: var( --space-tight );
}

.termogas-service-icon[data-icon="star"] {
	color: var( --color-accent-lime );
}

.termogas-service-icon svg {
	display: block;
}

.termogas-stat-icon {
	width: fit-content;
	margin-inline: auto;
	margin-bottom: var( --space-tight );
}

/* Stats and "Perché scegliere" cards have no title above the icon, so it
   carries the card: larger than the 24px inline default. */
.termogas-stat-icon svg {
	width: 2.5rem;
	height: 2.5rem;
}

.tg-card-title {
	font-size: var( --font-size-medium );
	margin-bottom: var( --space-related );
}

.tg-card-text {
	font-size: var( --font-size-small );
	color: var( --color-text-secondary );
}

/* ---------- Depth: watermark + decorative blobs ---------- */

/* Large, faint logo mark in a corner. Parent needs position:relative
   (already true for .site-footer; sections get it here). */
.tg-watermark {
	position: relative;
	overflow: hidden;
}

.tg-watermark::before {
	content: '';
	position: absolute;
	top: 50%;
	right: -60px;
	width: 420px;
	height: 420px;
	background: url( '../images/logo-mark.svg' ) no-repeat center / contain;
	opacity: 0.05;
	transform: translateY( -50% );
	pointer-events: none;
	z-index: 0;
}

@media ( max-width: 599px ) {
	.tg-watermark::before {
		width: 220px;
		height: 220px;
		right: -40px;
	}
}

/* On dark surfaces (footer) the mark needs to read light, not dark. */
.tg-watermark-light::before {
	filter: brightness( 0 ) invert( 1 );
	opacity: 0.06;
}

/* Soft blurred gradient blob, reusing brand colors. Decorative only. */
.tg-blob {
	position: relative;
}

.tg-blob::after {
	content: '';
	position: absolute;
	top: -200px;
	left: -200px;
	width: 560px;
	height: 560px;
	background: radial-gradient( circle, #63b290 0%, #7fbf80 40%, #93c377 70%, #abc86d 85%, transparent 90% );
	filter: blur( 60px );
	opacity: 0.16;
	pointer-events: none;
	z-index: 0;
}

.tg-blob-lime::after {
	content: '';
	position: absolute;
	bottom: -180px;
	left: 55%;
	width: 520px;
	height: 520px;
	background: radial-gradient( circle, #63b290 0%, #7fbf80 40%, #93c377 70%, #abc86d 85%, transparent 90% );
	filter: blur( 60px );
	opacity: 0.16;
	pointer-events: none;
	z-index: 0;
}

.tg-blob-lime {
	position: relative;
	overflow: hidden;
}

/* Keep real content above the decorative layer. */
.tg-blob > *,
.tg-blob-lime > * {
	position: relative;
	z-index: 1;
}

/* ---------- Scroll-reveal ---------- */

[data-reveal] {
	opacity: 0;
	transform: translateY( 24px );
	transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

@media ( prefers-reduced-motion: reduce ) {
	[data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Contact Form 7 — styled to match the rest of the design system
   (inputs, labels, submit button) instead of the plugin's bare markup. */
.tg-contact-form .wpcf7-form p {
	margin: 0 0 var( --space-stack );
}

/* Honeypot — invisible to people (and screen readers), bots fill it in
   anyway. Off-screen rather than display:none/visibility:hidden, which
   some bots are smart enough to skip. */
.tg-contact-form .tg-honeypot {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	margin: 0;
}

.tg-contact-form__acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: var( --font-size-small );
	font-weight: 400;
	color: var( --color-text-secondary );
}

.tg-contact-form__acceptance input[type="checkbox"] {
	margin-top: 3px;
	accent-color: var( --color-accent );
	flex-shrink: 0;
}

.tg-contact-form__acceptance a {
	color: var( --color-accent );
	text-decoration: underline;
}

.tg-contact-form .wpcf7-form label {
	display: block;
	font-size: var( --font-size-small );
	font-weight: 600;
	color: var( --color-text-primary );
	margin-bottom: var( --space-tight );
}

.tg-contact-form .wpcf7-form input[type="text"],
.tg-contact-form .wpcf7-form input[type="email"],
.tg-contact-form .wpcf7-form input[type="tel"],
.tg-contact-form .wpcf7-form textarea {
	width: 100%;
	font-family: var( --font-family );
	font-size: var( --font-size-medium );
	color: var( --color-text-primary );
	background: var( --color-surface-2 );
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: var( --radius );
	padding: 12px 16px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tg-contact-form .wpcf7-form textarea {
	min-height: 140px;
	resize: vertical;
}

.tg-contact-form .wpcf7-form input:focus,
.tg-contact-form .wpcf7-form textarea:focus {
	outline: none;
	border-color: var( --color-accent-light );
	box-shadow: 0 0 0 3px rgba( 127, 191, 128, 0.25 );
}

.tg-contact-form .wpcf7-form .wpcf7-submit {
	/* Same look as .tg-btn-primary, without needing the class in the
	   plugin's own markup (it only outputs a plain <input>). */
	display: inline-flex;
	align-items: center;
	font-family: var( --font-family );
	font-weight: 600;
	font-size: 0.9rem;
	padding: 12px 24px;
	border-radius: var( --radius );
	border: 2px solid transparent;
	cursor: pointer;
	background-color: var( --color-accent );
	background-image: linear-gradient( 180deg, rgba( 255, 255, 255, 0.1 ), rgba( 0, 0, 0, 0.08 ) );
	background-blend-mode: overlay;
	color: var( --color-surface-2 );
	box-shadow: var( --shadow-soft );
	transition: background-color 0.15s ease;
}

.tg-contact-form .wpcf7-form .wpcf7-submit:hover {
	background-color: var( --color-text-primary );
}

.tg-contact-form .wpcf7-form .wpcf7-submit:disabled {
	opacity: 0.6;
	cursor: wait;
}

.tg-contact-form .wpcf7-not-valid-tip {
	color: #b3261e;
	font-size: var( --font-size-small );
	margin-top: 4px;
}

.tg-contact-form .wpcf7-response-output {
	margin-top: var( --space-stack );
	padding: var( --space-related ) var( --space-card );
	border-radius: var( --radius );
	font-size: var( --font-size-small );
	border: 1px solid rgba( 0, 0, 0, 0.1 );
}

.tg-contact-form form.sent .wpcf7-response-output {
	color: var( --color-accent-dark );
	background: var( --color-accent-bg );
	border-color: var( --color-accent-light );
}

.tg-contact-form form.failed .wpcf7-response-output,
.tg-contact-form form.aborted .wpcf7-response-output {
	color: #b3261e;
	background: #fdeceb;
	border-color: #f3b4ae;
}

/* ---------- Contact map: static OSM image + Termogas pictogram as the pin ---------- */
.tg-map {
	position: relative;
	margin-bottom: var( --space-stack );
}

.tg-map__link {
	display: block;
}

/* Pin: white badge with the pictogram, tip on the map point (image centre). */
.tg-map__marker {
	position: absolute;
	left: 50%;
	top: 50%;
	width: clamp( 2.75rem, 7%, 3.5rem );
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.25 );
	transform: translate( -50%, calc( -100% - 0.45rem ) );
	pointer-events: none;
}

.tg-map__marker::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -0.4rem;
	transform: translateX( -50% );
	border-left: 0.5rem solid transparent;
	border-right: 0.5rem solid transparent;
	border-top: 0.6rem solid #fff;
	filter: drop-shadow( 0 2px 2px rgba( 0, 0, 0, 0.18 ) );
}

.tg-map__marker img {
	width: 42%;
	height: auto;
}

/* Small pill under the pin. */
.tg-map__cta {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate( -50%, 0.75rem );
	padding: 0.4rem 1rem;
	font-size: var( --font-size-small );
	white-space: nowrap;
}

/* ---------- Post metadata (category chip, date, author, reading time) ---------- */
.tg-chip {
	display: inline-block;
	width: fit-content;
	padding: 0.15rem 0.65rem;
	border-radius: 999px;
	background: rgba( 127, 191, 128, 0.2 );
	color: var( --color-accent-dark );
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.5;
	text-decoration: none;
}

a.tg-chip:hover {
	background: rgba( 127, 191, 128, 0.35 );
}

.tg-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 1rem;
	margin: 0;
	font-size: 0.8125rem;
	color: var( --color-text-secondary );
	text-align: left;
}

.tg-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.tg-meta__item svg {
	flex: none;
	color: var( --color-accent );
}

/* On a card the chip sits right under the picture, the meta row closes the card. */
.tg-card > .tg-chip {
	display: block;
}

/* Single post: chip + meta on one line under the hero. */
.tg-post-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin-bottom: var( --space-stack );
}

/* Sidebar list: date under the title. */
.content-sidebar__post-date {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.75rem;
	color: var( --color-text-secondary );
}

/* ---------- Home gallery: "I nostri uffici" ---------- */
.tg-gallery {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: var( --space-stack );
	align-items: center;
}

.tg-gallery__viewer {
	display: flex;
	flex-direction: column;
	gap: var( --space-stack );
	min-width: 0;
}

@media ( min-width: 900px ) {
	.tg-gallery {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 2.1fr );
		gap: calc( var( --space-section ) / 1.5 );
	}
}

.tg-gallery__stage {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var( --radius );
	box-shadow: var( --shadow-soft );
	overflow: hidden;
	background: var( --color-surface-2 );
}

.tg-gallery__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease;
}

.tg-gallery__slide.is-active {
	opacity: 1;
	visibility: visible;
}

.tg-gallery__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tg-gallery__arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: var( --color-text-primary );
	background: rgba( 255, 255, 255, 0.75 );
	-webkit-backdrop-filter: blur( 14px );
	backdrop-filter: blur( 14px );
	box-shadow: var( --shadow-soft );
	cursor: pointer;
	transition: background 0.2s ease;
}

.tg-gallery__arrow:hover,
.tg-gallery__arrow:focus-visible {
	background: rgba( 255, 255, 255, 0.95 );
}

.tg-gallery__arrow--prev { left: 0.75rem; }
.tg-gallery__arrow--prev svg { transform: scaleX( -1 ); }
.tg-gallery__arrow--next { right: 0.75rem; }

.tg-gallery__caption {
	margin: calc( -1 * var( --space-related ) ) 0 0;
	text-align: center;
	font-size: var( --font-size-small );
	color: var( --color-text-secondary );
}

.tg-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat( 5, 1fr );
	gap: 0.5rem;
}

.tg-gallery__thumb {
	padding: 0;
	border: 2px solid transparent;
	border-radius: calc( var( --radius ) / 2 );
	overflow: hidden;
	background: none;
	opacity: 0.6;
	cursor: pointer;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.tg-gallery__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.tg-gallery__thumb:hover,
.tg-gallery__thumb:focus-visible {
	opacity: 0.9;
}

.tg-gallery__thumb.is-active {
	opacity: 1;
	border-color: var( --color-accent );
}

@media ( max-width: 599px ) {
	.tg-gallery__arrow {
		width: 2.25rem;
		height: 2.25rem;
	}

	.tg-gallery__thumbs {
		gap: 0.35rem;
	}
}

/* ---------- Blog filter pills + category archive head ---------- */
.tg-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 var( --space-stack );
}

.tg-filter__item {
	padding: 0.4rem 1rem;
	border-radius: 999px;
	background: rgba( 127, 191, 128, 0.16 );
	color: var( --color-accent-dark );
	font-size: var( --font-size-small );
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.tg-filter__item:hover,
.tg-filter__item:focus-visible {
	background: rgba( 127, 191, 128, 0.32 );
}

.tg-filter__item.is-active {
	background: var( --color-accent );
	color: #fff;
}

.tg-archive-head {
	margin-bottom: var( --space-stack );
}

.tg-archive-head .tg-eyebrow a {
	color: inherit;
	text-decoration: none;
}

/* Fasce promo / WhatsApp: colonne con la stessa struttura (titolo, testo,
   pulsante in fondo) cosi' titoli e pulsanti si allineano tra le colonne. */
.tg-promo-split {
	align-items: stretch;
}

.tg-promo-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --space-tight );
}

.tg-promo-col .tg-btn {
	margin-top: auto;
}

.tg-promo-col .tg-subheading {
	margin-bottom: var( --space-stack );
}

.tg-promo-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var( --space-stack );
	flex-wrap: wrap;
	text-align: left;
}

.tg-promo-row__icon {
	display: inline-flex;
	color: var( --color-accent );
}

.tg-promo-row__cta {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

@media ( max-width: 781px ) {
	.tg-promo-row {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 10px 12px;
		align-items: center;
	}

	.tg-promo-row__cta {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.tg-promo-row__cta .tg-btn {
		justify-content: center;
		padding-inline: 12px;
		font-size: 0.875rem;
	}

	.tg-promo-split {
		gap: var( --space-stack );
	}

	.tg-promo-col .tg-subheading {
		margin-bottom: var( --space-tight );
	}

	.tg-promo-col .tg-section-title {
		font-size: 1.25rem;
	}

	.tg-promo-split__col + .tg-promo-split__col {
		border-top: 1px solid rgba( 0, 0, 0, 0.08 );
		padding-top: var( --space-stack );
	}
}

/* Header grafico (sottopagine servizi senza foto): sfumatura del tema con
   l'icona del servizio in filigrana. Stessa altezza/overlap del page-hero. */
.page-hero--graphic {
	overflow: hidden;
	color: #fff;
	background:
		radial-gradient( circle at 85% 20%, rgba( 255, 255, 255, 0.18 ), transparent 45% ),
		linear-gradient( 135deg, var( --color-text-primary ) 0%, var( --color-accent-dark ) 60%, var( --color-accent ) 100% );
}

.page-hero--graphic::before {
	background: repeating-linear-gradient( 135deg, rgba( 255, 255, 255, 0.03 ) 0 2px, transparent 2px 14px );
}

.page-hero__icon {
	position: absolute;
	right: 6%;
	top: 50%;
	transform: translateY( -50% ) rotate( -8deg );
	opacity: 0.13;
	line-height: 0;
}

.page-hero__icon svg {
	stroke: #fff;
	stroke-width: 1.2;
}

.page-hero__eyebrow {
	margin: 0 0 6px;
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.8;
}

@media ( max-width: 781px ) {
	.page-hero--graphic {
		min-height: 170px;
	}

	.page-hero__icon svg {
		width: 200px;
		height: 200px;
	}
}

/* Fasce consecutive (promo + WhatsApp): staccate l'una dall'altra, con piu'
   respiro sopra i titoli e pulsanti subito sotto il testo. */
.tg-promo-bar + .tg-whatsapp-bar {
	margin-top: var( --space-stack );
}

.tg-whatsapp-bar {
	padding-top: var( --space-section );
}

.tg-promo-col .tg-btn {
	margin-top: var( --space-tight );
}

@media ( min-width: 782px ) {
	.tg-promo-col .tg-subheading {
		min-height: 3.2em;
		margin-bottom: 0;
	}
}

@media ( max-width: 781px ) {
	.tg-whatsapp-bar {
		padding-top: var( --space-stack );
	}
}

/* "Promo in corso": fascia chiara con icona in filigrana, stesso linguaggio
   degli header grafici dei servizi. */
.tg-promo-bar--offer {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient( circle at 90% 0%, rgba( 31, 107, 79, 0.14 ), transparent 50% ),
		linear-gradient( 135deg, #ffffff 0%, var( --color-accent-bg ) 100% );
}

.tg-promo-offer__icon {
	position: absolute;
	right: 8%;
	top: 50%;
	transform: translateY( -50% ) rotate( -8deg );
	line-height: 0;
	color: var( --color-accent );
	opacity: 0.09;
	pointer-events: none;
}

.tg-promo-offer__icon svg {
	stroke-width: 1.2;
}

.tg-promo-offer {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --space-stack );
	flex-wrap: wrap;
}

.tg-promo-offer__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 6px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var( --color-accent );
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.tg-promo-offer__title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
	color: var( --color-text-primary );
}

.tg-promo-offer__text {
	margin: 4px 0 0;
	color: var( --color-text-secondary );
}

.tg-promo-offer__text strong {
	color: var( --color-accent );
	white-space: nowrap;
}

@media ( max-width: 781px ) {
	.tg-promo-offer {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.tg-promo-offer__title {
		font-size: 1.05rem;
	}

	.tg-promo-offer .tg-btn {
		justify-content: center;
	}

	.tg-promo-offer__icon svg {
		width: 150px;
		height: 150px;
	}
}

/* Elenco servizi nella pagina Servizi: ogni voce e' una riga-scheda
   interamente cliccabile, con invito "Scopri di più" a fine voce. */
.tg-service-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var( --space-related );
}

.tg-service-list li {
	position: relative;
	margin: 0;
	padding: var( --space-stack ) var( --space-stack ) var( --space-stack ) calc( var( --space-stack ) + 4px );
	background: #fff;
	border: 1px solid rgba( 0, 0, 0, 0.07 );
	border-left: 4px solid var( --color-accent );
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.04 );
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.tg-service-list li:hover {
	box-shadow: 0 8px 22px rgba( 0, 0, 0, 0.09 );
	transform: translateY( -2px );
}

.tg-service-list li > a {
	font-size: 1.1rem;
	text-decoration: none;
	color: var( --color-text-primary );
}

.tg-service-list li > a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.tg-service-list li::after {
	content: "Scopri di più \2192";
	display: block;
	margin-top: var( --space-tight );
	font-size: 0.875rem;
	font-weight: 600;
	color: var( --color-accent );
}

.tg-service-list li:hover::after {
	text-decoration: underline;
}

.entry-content ul.tg-service-list li::before {
	content: none;
}

/* Icona del servizio in filigrana nella scheda (maschera sull'SVG). */
.tg-service-list li {
	overflow: hidden;
}

.tg-service-list li > a::before {
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	width: 130px;
	height: 130px;
	transform: translateY( -50% ) rotate( -8deg );
	background: var( --color-accent );
	opacity: 0.16;
	-webkit-mask: var( --svc-icon ) center / contain no-repeat;
	mask: var( --svc-icon ) center / contain no-repeat;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.tg-service-list li:hover > a::before {
	opacity: 0.26;
}
.tg-service-list a[href*="/servizi/riscaldamento/"] { --svc-icon: url( "data:image/svg+xml,%3Csvg class=%22lucide lucide-flame%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M12 3q1 4 4 6.5t3 5.5a1 1 0 0 1-14 0 5 5 0 0 1 1-3 1 1 0 0 0 5 0c0-2-1.5-3-1.5-5q0-2 2.5-4%22 /%3E%3C/svg%3E" ); }
.tg-service-list a[href*="/servizi/condizionamento/"] { --svc-icon: url( "data:image/svg+xml,%3Csvg class=%22lucide lucide-snowflake%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22m10 20-1.25-2.5L6 18%22 /%3E%3Cpath d=%22M10 4 8.75 6.5 6 6%22 /%3E%3Cpath d=%22m14 20 1.25-2.5L18 18%22 /%3E%3Cpath d=%22m14 4 1.25 2.5L18 6%22 /%3E%3Cpath d=%22m17 21-3-6h-4%22 /%3E%3Cpath d=%22m17 3-3 6 1.5 3%22 /%3E%3Cpath d=%22M2 12h6.5L10 9%22 /%3E%3Cpath d=%22m20 10-1.5 2 1.5 2%22 /%3E%3Cpath d=%22M22 12h-6.5L14 15%22 /%3E%3Cpath d=%22m4 10 1.5 2L4 14%22 /%3E%3Cpath d=%22m7 21 3-6-1.5-3%22 /%3E%3Cpath d=%22m7 3 3 6h4%22 /%3E%3C/svg%3E" ); }
.tg-service-list a[href*="/servizi/impianti-ibridi/"] { --svc-icon: url( "data:image/svg+xml,%3Csvg class=%22lucide lucide-plug-zap%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z%22 /%3E%3Cpath d=%22m2 22 3-3%22 /%3E%3Cpath d=%22M7.5 13.5 10 11%22 /%3E%3Cpath d=%22M10.5 16.5 13 14%22 /%3E%3Cpath d=%22m18 3-4 4h6l-4 4%22 /%3E%3C/svg%3E" ); }
.tg-service-list a[href*="/servizi/fotovoltaico/"] { --svc-icon: url( "data:image/svg+xml,%3Csvg class=%22lucide lucide-sun%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%224%22 /%3E%3Cpath d=%22M12 2v2%22 /%3E%3Cpath d=%22M12 20v2%22 /%3E%3Cpath d=%22m4.93 4.93 1.41 1.41%22 /%3E%3Cpath d=%22m17.66 17.66 1.41 1.41%22 /%3E%3Cpath d=%22M2 12h2%22 /%3E%3Cpath d=%22M20 12h2%22 /%3E%3Cpath d=%22m6.34 17.66-1.41 1.41%22 /%3E%3Cpath d=%22m19.07 4.93-1.41 1.41%22 /%3E%3C/svg%3E" ); }
.tg-service-list a[href*="/servizi/solare-termico/"] { --svc-icon: url( "data:image/svg+xml,%3Csvg class=%22lucide lucide-thermometer-sun%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M12 2v2%22 /%3E%3Cpath d=%22M12 8a4 4 0 0 0-1.645 7.647%22 /%3E%3Cpath d=%22M2 12h2%22 /%3E%3Cpath d=%22M20 14.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0z%22 /%3E%3Cpath d=%22m4.93 4.93 1.41 1.41%22 /%3E%3Cpath d=%22m6.34 17.66-1.41 1.41%22 /%3E%3C/svg%3E" ); }
.tg-service-list a[href*="/servizi/vmc/"] { --svc-icon: url( "data:image/svg+xml,%3Csvg class=%22lucide lucide-wind%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M12.8 19.6A2 2 0 1 0 14 16H2%22 /%3E%3Cpath d=%22M17.5 8a2.5 2.5 0 1 1 2 4H2%22 /%3E%3Cpath d=%22M9.8 4.4A2 2 0 1 1 11 8H2%22 /%3E%3C/svg%3E" ); }
.tg-service-list a[href*="/servizi/trattamento-aria-e-acqua/"] { --svc-icon: url( "data:image/svg+xml,%3Csvg class=%22lucide lucide-blend%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Ccircle cx=%2215%22 cy=%229%22 r=%227%22 /%3E%3Ccircle cx=%229%22 cy=%2215%22 r=%227%22 /%3E%3C/svg%3E" ); }
.tg-service-list a[href*="/servizi/osmosi-inversa/"] { --svc-icon: url( "data:image/svg+xml,%3Csvg class=%22lucide lucide-droplets%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z%22 /%3E%3Cpath d=%22M12.56 6.6A10.97 10.97 0 0 0 14 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 0 1-11.91 4.97%22 /%3E%3C/svg%3E" ); }
.tg-service-list a[href*="/servizi/progettazione/"] { --svc-icon: url( "data:image/svg+xml,%3Csvg class=%22lucide lucide-pencil-ruler%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M13 7 8.7 2.7a2.41 2.41 0 0 0-3.4 0L2.7 5.3a2.41 2.41 0 0 0 0 3.4L7 13%22 /%3E%3Cpath d=%22m8 6 2-2%22 /%3E%3Cpath d=%22m18 16 2-2%22 /%3E%3Cpath d=%22m17 11 4.3 4.3c.94.94.94 2.46 0 3.4l-2.6 2.6c-.94.94-2.46.94-3.4 0L11 17%22 /%3E%3Cpath d=%22M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z%22 /%3E%3Cpath d=%22m15 5 4 4%22 /%3E%3C/svg%3E" ); }
.tg-service-list a[href*="/servizi/fornitori-pagamenti/"] { --svc-icon: url( "data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M4 3h16v18l-3-2-2.5 2-2.5-2-2.5 2-2.5-2-3 2z%22 /%3E%3Cline x1=%228%22 y1=%228%22 x2=%2216%22 y2=%228%22 /%3E%3Cline x1=%228%22 y1=%2212%22 x2=%2216%22 y2=%2212%22 /%3E%3C/svg%3E" ); }

@media ( max-width: 781px ) {
	.tg-service-list li > a::before {
		width: 96px;
		height: 96px;
		right: 10px;
	}
}

/* Spazio a destra per l'icona in filigrana: non passa sotto il testo. */
.tg-service-list li {
	padding-right: 160px;
}

@media ( max-width: 781px ) {
	.tg-service-list li {
		padding-right: 100px;
	}
}

/* Badge "Promo in corso": lime con testo scuro (piu' distinguibile dal verde dei pulsanti). */
.tg-promo-offer__label {
	background: var( --color-accent-lime );
	color: var( --color-accent-dark );
}

/* Home, "Cosa facciamo": niente icona sopra il titolo; l'icona diventa il fondino a destra. */
.tg-card--service {
	padding-right: 38%;
}

.tg-card--service::before {
	right: 14px;
	bottom: auto;
	top: 50%;
	width: 8.5rem;
	transform: translateY( -50% ) rotate( -8deg );
	opacity: 0.12;
	transition: opacity 0.2s ease;
}

.tg-card--service:hover::before {
	opacity: 0.2;
}

@media ( max-width: 781px ) {
	.tg-card--service {
		padding-right: 90px;
	}

	.tg-card--service::before {
		width: 5.5rem;
	}

	/* Menu del footer in orizzontale su mobile. */
	.footer-nav ul {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var( --space-tight ) var( --space-stack );
	}
}

/* Paginazione: pillole come il filtro categorie. */
.pagination {
	display: flex;
	justify-content: center;
	width: 100%;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid rgba( 0, 0, 0, 0.1 );
	color: var( --color-text-primary );
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pagination a.page-numbers:hover {
	border-color: var( --color-accent );
	color: var( --color-accent );
}

.pagination .page-numbers.current {
	background: var( --color-accent );
	border-color: var( --color-accent );
	color: #fff;
}

.pagination .page-numbers.dots {
	background: none;
	border: 0;
	min-width: 0;
	padding: 0 4px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
}

/* Newsletter: fascia chiara con busta in filigrana (come la promo), modal, link nel footer. */
.tg-newsletter {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --space-stack );
	flex-wrap: wrap;
	padding: var( --space-section ) calc( var( --space-section ) + 4px );
	border-radius: 18px;
	background:
		radial-gradient( circle at 90% 0%, rgba( 31, 107, 79, 0.14 ), transparent 50% ),
		linear-gradient( 135deg, #ffffff 0%, var( --color-accent-bg ) 100% );
	border: 1px solid rgba( 0, 0, 0, 0.06 );
	box-shadow: 0 4px 18px rgba( 0, 0, 0, 0.05 );
}

.tg-newsletter__icon {
	position: absolute;
	right: 22%;
	top: 50%;
	transform: translateY( -50% ) rotate( -8deg );
	line-height: 0;
	color: var( --color-accent );
	opacity: 0.08;
	pointer-events: none;
}

.tg-newsletter__icon svg {
	stroke-width: 1.2;
}

.tg-newsletter__body,
.tg-newsletter .tg-btn {
	position: relative;
}

.tg-newsletter__body {
	max-width: 40rem;
}

.tg-newsletter__title {
	margin: 4px 0 6px;
	font-size: 1.5rem;
	line-height: 1.25;
	color: var( --color-text-primary );
}

.tg-newsletter__text {
	margin: 0;
	color: var( --color-text-secondary );
}

@media ( max-width: 781px ) {
	.tg-newsletter {
		flex-direction: column;
		align-items: stretch;
		padding: var( --space-stack );
	}

	.tg-newsletter__title {
		font-size: 1.2rem;
	}

	.tg-newsletter .tg-btn {
		justify-content: center;
	}

	.tg-newsletter__icon {
		right: -10px;
	}

	.tg-newsletter__icon svg {
		width: 130px;
		height: 130px;
	}
}

.tg-modal {
	border: 0;
	padding: 0;
	background: transparent;
	max-width: min( 560px, calc( 100vw - 32px ) );
	width: 100%;
	max-height: calc( 100vh - 32px );
}

.tg-modal::backdrop {
	background: rgba( 20, 32, 38, 0.6 );
	-webkit-backdrop-filter: blur( 3px );
	backdrop-filter: blur( 3px );
}

.tg-modal__box {
	position: relative;
	padding: var( --space-stack );
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 20px 50px rgba( 0, 0, 0, 0.3 );
}

.tg-modal__title {
	margin: 0 32px var( --space-related ) 0;
	font-size: 1.25rem;
	color: var( --color-text-primary );
}

.tg-modal__close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: var( --color-accent-bg );
	color: var( --color-text-primary );
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.tg-modal__frame {
	display: block;
	width: 100%;
	height: 520px;
	max-height: calc( 100vh - 200px );
	border: 0;
}

.tg-modal__alt {
	margin: var( --space-tight ) 0 0;
	font-size: 0.8rem;
	text-align: center;
}

html.tg-modal-open {
	overflow: hidden;
}

.footer-newsletter-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var( --space-related );
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: rgba( 255, 255, 255, 0.85 );
	cursor: pointer;
}

.footer-newsletter-link:hover {
	color: #fff;
	text-decoration: underline;
}

/* Footer: logo con la scritta "Tecnologie energetiche" (piu' grande del logo semplice per restare leggibile). */
.termogas-footer-logo {
	width: 240px;
	max-width: 100%;
	height: auto;
}

/* Logo con la scritta "Tecnologie energetiche" nel menu: piu' alto del logo semplice,
   altrimenti la scritta non si legge. */
.site-header__logo img {
	display: block;
	width: auto;
	height: 56px;
}

@media ( max-width: 781px ) {
	.site-header__logo img {
		height: 46px;
	}
}

/* Intro home: testo con "Leggi tutto" a fisarmonica */
.tg-more summary { cursor: pointer; list-style: none; color: var(--color-primary, inherit); font-weight: 600; display: inline-block; }
.tg-more summary::-webkit-details-marker { display: none; }
.tg-more summary::after { content: " →"; }
.tg-more[open] summary::after { content: " ↑"; }
.tg-more .tg-more__close, .tg-more[open] .tg-more__open { display: none; }
.tg-more[open] .tg-more__close { display: inline; }
.tg-more > div { margin-top: var(--space-tight); }
@media (min-width: 900px) { .tg-intro + .tg-img { align-self: center; } }
.tg-intro p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
@media (min-width: 782px) {
	.tg-split:has(> .tg-intro) { grid-template-columns: 50% 50% !important; }
	.tg-intro + .tg-img { aspect-ratio: 1.367; height: auto; object-fit: cover; }
}

/* Pagina /newsletter */
.tg-nl-hero { display: grid; gap: var(--space-section); align-items: center; }
@media (min-width: 900px) { .tg-nl-hero { grid-template-columns: 1.1fr 0.9fr; } }
.tg-nl-points { list-style: none; padding: 0; margin: var(--space-tight) 0 0; display: grid; gap: 8px; }
.tg-nl-points li { padding-left: 26px; position: relative; }
.tg-nl-points li::before { content: "✓"; position: absolute; left: 0; color: var(--color-accent-lime, #1f6b4f); font-weight: 700; }
.tg-nl-box { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 18px; box-shadow: 0 4px 18px rgba(0,0,0,.06); padding: calc(var(--space-section) * .7); }
.tg-nl-box__title { margin: 0 0 8px; }
.tg-nl-box__intro > * + * { margin-top: var(--space-tight); }
.tg-nl-box__note { font-size: var(--font-size-small); opacity: .75; }
.tg-nl-box.is-loaded .tg-nl-box__intro { display: none; }
.tg-nl-box__frame { width: 100%; min-height: 520px; border: 0; display: block; }
.tg-nl-box__frame[hidden] { display: none; }