/* The home page's sections (patterns/home-*.php: groups with the class "ub-sec"). Loaded only on pages
   that have one (functions.php) and in the editor. The hero, the category tiles and the band have
   their own CSS (blocks/home-hero, blocks/category-tiles, assets/band.css). */

.ub-sec > .wp-block-ub-reveal > *,
.ub-sec > * { margin-block: 0; }
.ub-sec > * + * { margin-block-start: clamp(1.25rem, 2.5vw, 2rem); }
.ub-sec > .wp-block-ub-reveal > * + * { margin-block-start: clamp(1.25rem, 2.5vw, 2rem); }

/* Heading row: the h2 left, "Vezi toate" right */
.ub-sec__head { gap: 0.5rem 1.5rem; }
.ub-sec__head > * { margin: 0; }
.ub-sec__title { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); letter-spacing: -0.03em; }
.ub-sec__eyebrow { color: var(--wp--preset--color--primary); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ub-sec__more a {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-block-size: 2.75rem;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	text-decoration: none;
}
.ub-sec__more a::after {
	content: "";
	inline-size: 1.125rem;
	block-size: 1.125rem;
	background-color: currentColor;
	-webkit-mask: var(--ub-i-arrow-right, var(--ub-i-none)) center / contain no-repeat;
	mask: var(--ub-i-arrow-right, var(--ub-i-none)) center / contain no-repeat;
}
.ub-sec__more a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* Product rows: 4 cards from 1100 px, 2 below (the shop's listing has 3: shop.css) */
@media (min-width: 1100px) {
	.ub-sec--products .ub-products .wc-block-product-template.wc-block-product-template { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
}

/* ---- Benefits band (deep) ------------------------------------------------------------------- */
.ub-benefits__list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1.5rem clamp(1rem, 2vw, 2rem);
}
.ub-sec .ub-benefits__list > p {
	display: block;
	margin: 0;
	color: rgb(255 255 255 / 0.82);
	font-size: 0.9375rem;
	line-height: 1.45;
}
.ub-benefits__list > p::before { display: block; inline-size: 2rem; block-size: 2rem; margin: 0 0 0.875rem; background-color: var(--wp--preset--color--accent); }
.ub-benefits__list > p .ub-ic__svg { display: block; inline-size: 2rem; block-size: 2rem; margin: 0 0 0.875rem; color: var(--wp--preset--color--accent); } /* drawn icons ("ub-draw", inc/icons.php) */
.ub-benefits__list > p strong { display: block; color: var(--wp--preset--color--on-deep); font-family: var(--wp--preset--font-family--heading); font-size: 1.0625rem; font-weight: 700; }
@media (max-width: 1023px) { .ub-benefits__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) {
	.ub-benefits__list { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
	.ub-sec .ub-benefits__list > p { position: relative; padding-inline-start: 3rem; }
	.ub-benefits__list > p::before,
	.ub-benefits__list > p .ub-ic__svg { position: absolute; inset-block-start: 0.125rem; inset-inline-start: 0; margin: 0; }
}

/* ---- Showroom ------------------------------------------------------------------------------- */
.ub-showroom__card {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 24px;
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--soft);
}
.ub-sec .ub-showroom__card > * { margin: 0; }
.ub-showroom__info { padding: clamp(1.5rem, 1rem + 3vw, 3.5rem); }
.ub-showroom__info > * { margin-block: 0; }
.ub-showroom__info > * + * { margin-block-start: 1rem; }
.ub-showroom__info .ub-sec__title { margin-block-start: 0.5rem; }
.ub-showroom__fact { align-items: center; font-size: 1.0625rem; font-weight: 500; --ub-ic-color: var(--wp--preset--color--primary); }
.ub-showroom__info .ub-showroom__buttons { gap: 0.75rem; margin-block-start: 1.75rem; }
.ub-btn-phone .wp-block-button__link::before,
.ub-btn-whatsapp .wp-block-button__link::before {
	content: "";
	inline-size: 1.25rem;
	block-size: 1.25rem;
	margin-inline-end: 0.5rem;
	background-color: currentColor;
	-webkit-mask: var(--ub-i, var(--ub-i-none)) center / contain no-repeat;
	mask: var(--ub-i, var(--ub-i-none)) center / contain no-repeat;
}
.ub-btn-phone { --ub-i: var(--ub-i-phone); }
.ub-btn-phone .wp-block-button__link { font-family: var(--wp--preset--font-family--heading); font-weight: 700; }
.ub-btn-whatsapp { --ub-i: var(--ub-i-whatsapp-line); }
.ub-sec .wp-block-button.is-style-outline .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
}
.ub-sec .wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); }

.ub-showroom__map {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-block-size: 18rem;
	padding: 2rem;
	background: linear-gradient(135deg, #0C3C1E 0%, #177030 60%, #2E8F3A 100%);
	color: var(--wp--preset--color--on-primary);
	text-align: center;
}
.ub-showroom__map::before { /* the hero's contour lines, faint */
	content: "";
	position: absolute;
	inset: -10%;
	z-index: -1;
	background: #fff;
	opacity: 0.14;
	-webkit-mask: var(--ub-hero-contours, url(hero/contours.svg)) center / cover no-repeat;
	mask: var(--ub-hero-contours, url(hero/contours.svg)) center / cover no-repeat;
}
.ub-showroom__map > * { margin: 0; }
.ub-showroom__map-link a {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	min-block-size: 3.25rem;
	padding: 0.75rem 1.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	box-shadow: 0 18px 36px -18px rgb(0 0 0 / 0.55);
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	text-decoration: none;
}
.ub-showroom__map-link a::before {
	content: "";
	inline-size: 1.375rem;
	block-size: 1.375rem;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: var(--ub-i-showroom, var(--ub-i-none)) center / contain no-repeat;
	mask: var(--ub-i-showroom, var(--ub-i-none)) center / contain no-repeat;
}
.ub-showroom__map-link a::after { content: ""; position: absolute; inset: 0; } /* the whole panel opens the map */
.ub-showroom__map-link a:hover { color: var(--wp--preset--color--primary); }
.ub-showroom__map-note { color: rgb(255 255 255 / 0.85); font-size: 0.875rem; }
@media (max-width: 781px) {
	.ub-showroom__card { grid-template-columns: minmax(0, 1fr); border-radius: 16px; }
	.ub-showroom__map { min-block-size: 11rem; }
}

/* ---- FAQ ------------------------------------------------------------------------------------ */
.ub-faq__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.ub-faq__grid > * { margin: 0; }
.ub-faq__intro > * { margin-block: 0; }
.ub-faq__intro > * + * { margin-block-start: 1rem; }
.ub-faq__intro p { color: var(--wp--preset--color--muted); }
.ub-faq__list { margin: 0; border-block-start: 1px solid var(--wp--preset--color--line); }
.ub-faq__list .wp-block-accordion-item { margin: 0; border-block-end: 1px solid var(--wp--preset--color--line); }
.ub-faq__list .wp-block-accordion-heading { margin: 0; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); }
.ub-faq__list .wp-block-accordion-heading__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	inline-size: 100%;
	min-block-size: 3.5rem;
	padding: 1rem 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-weight: 700;
	text-align: start;
	cursor: pointer;
}
.ub-faq__list .wp-block-accordion-heading__toggle:hover { color: var(--wp--preset--color--primary); }
.ub-faq__list .wp-block-accordion-heading__toggle-icon {
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 2rem;
	block-size: 2rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1;
}
.ub-faq__list .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon { transform: rotate(45deg); }
.ub-faq__list .wp-block-accordion-panel { padding-block-end: 1.25rem; color: var(--wp--preset--color--ink); }
.ub-faq__list .wp-block-accordion-panel > * { margin-block: 0; max-inline-size: 46rem; }
html:not(.ub-js) .ub-faq__list .wp-block-accordion-panel[hidden] { display: block !important; content-visibility: visible !important; }
@media (prefers-reduced-motion: no-preference) {
	html:not([data-ub-motion="off"]) .ub-faq__list .wp-block-accordion-heading__toggle-icon { transition: transform 0.2s ease; }
}
@media (max-width: 781px) { .ub-faq__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- 404 (templates/404.html) ----------------------------------------------------------------- */
.ub-404__intro > * { margin-block: 0; }
.ub-404__intro > * + * { margin-block-start: 1rem; }
.ub-404__code {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background: rgb(114 197 63 / 0.18);
	color: var(--wp--preset--color--primary);
	font-size: 0.875rem;
	font-weight: 700;
}
.ub-404 h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); letter-spacing: -0.035em; }
.ub-404__lead { color: var(--wp--preset--color--muted); font-size: 1.125rem; }
.ub-404__intro .ub-404__search { margin-block-start: 1.75rem; }
.ub-404__categories { margin-block-start: var(--wp--preset--spacing--60) !important; }
.ub-404__categories > * { margin-block: 0; }
.ub-404__categories > * + * { margin-block-start: 1.25rem; }
.ub-404__title { font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); }
.ub-404__buttons { gap: 0.75rem; margin-block-start: 2rem !important; }