/* NT 2026-09-30 FINAL-I (pklawfirm.sk stand 8084): Nikita's edits P1, P36, P2, P3, P4, P5, P7, P18 (home page on sk, en, ru,
   and the same blocks on branch and service pages). Loaded by the module loader of functions.php (css/mod/nt-*.css, alphabetical,
   after nt-zz-final-f.css). Nothing here changes stored data. Rollback: delete this file.
   Scripts and screenshots: SITE/pravki-nikity-2026-09-30/i/. The translations of the home page carry body class page-id-3974. */

/* ===== P1, P36) Service cards of the grid type (widget "Services Listing", .service-grid-listing: home page blocks of services,
   "related services" on service pages). Before: icon, title under it, black line, description. Now: icon left and title right
   on one line (centred in height), description under them, gold line under the description. Cards of one row are equally high,
   so their lines stand on one level whether the description has one line or two. The photo cards of the branch pages
   (.nt-cards-grid, view type 2) are another type and are not touched. */
.elementor-widget-constructum_services_listing .service-listing-wrapper.service-grid-listing {
	align-items: stretch; /* P1 was flex-start: cards of one row get one height */
}
.elementor-widget-constructum_services_listing .service-grid-listing > .service-item-wrapper {
	display: flex; /* P1 the card fills the cell height */
}
.elementor-widget-constructum_services_listing .service-grid-listing .service-item {
	display: flex; /* P1 */
	flex-direction: column; /* P1 */
	width: 100%; /* P1 */
	padding-bottom: 20px; /* P1 space between the description and the line */
	border-bottom: 2px solid #166574; /* P1 gold line under the description (theme gold, as the headings) */
}
.elementor-widget-constructum_services_listing .service-grid-listing .service-item .service-item-link {
	flex-direction: row; /* P1 icon and title on one line */
	align-items: center; /* P1 */
	gap: 18px; /* P1 */
	padding-bottom: 0; /* P1 */
	border-bottom: 0; /* P1 the black line under the title is gone */
}
.elementor-widget-constructum_services_listing .service-grid-listing .service-item .service-item-icon {
	flex: 0 0 auto; /* P1 */
	width: auto; /* P1 */
}
.elementor-widget-constructum_services_listing .service-grid-listing .service-item .service-post-title {
	flex: 1 1 auto; /* P1 */
	min-height: 0; /* P1 was two lines high */
	align-items: center; /* P1 */
}
.elementor-widget-constructum_services_listing .service-grid-listing .service-item .service-item-excerpt {
	flex: 1 0 auto; /* P1 the description takes the free height, so the line is at the bottom of the card */
	margin-top: 16px; /* P1 */
}
@media only screen and (max-width: 767px) {
	.elementor-widget-constructum_services_listing .service-grid-listing .service-item .service-item-link {
		gap: 14px; /* P36 */
	}
	.elementor-widget-constructum_services_listing .service-grid-listing .service-item .service-icon,
	.elementor-widget-constructum_services_listing .service-grid-listing .service-item .service-icon img {
		width: 44px; /* P36 icon a little smaller next to the title */
		height: 44px; /* P36 */
	}
	.elementor-widget-constructum_services_listing .service-grid-listing .service-item .service-item-excerpt {
		margin-top: 10px; /* P36 */
	}
	/* P36 home page, block of services on phones: no "/ Naše služby /" above the heading and no "Všetky služby" link */
	body.page-id-3974 .elementor-element.elementor-element-fdc26d3 .constructum-subheading {
		display: none; /* P36 */
	}
	body.page-id-3974 .elementor-element.elementor-element-d2539f4 {
		display: none; /* P36 */
	}
}

/* ===== P2) Phones (up to 767px), banner of the home page and of the branch and service pages: the dark layer covered the
   face. Now the photo is open down to the text: the dark layer behind the text block starts 40px above the text block
   (was 110px) and the slide gradient starts lower. The H1 and the text keep their contrast (measured, see the report).
   Overrides nt-qa-fixes.css (QA2 1, FINAL 3), child style.css and nt-service-pages.css. */
@media only screen and (max-width: 767px) {
	html body.page-id-3974 .elementor-element-a9d08a7 .elementor-repeater-item-ebd58b8 .elementor-text-column .elementor-inner-section::before,
	html body.nt-service-page .elementor-element-a9d08a7 .elementor-repeater-item-ebd58b8 .elementor-text-column .elementor-inner-section::before {
		top: -24px; /* P2 was -110px */
		background-image: linear-gradient(to bottom, rgba(31, 31, 31, 0) 0, rgba(31, 31, 31, .74) 34px, rgba(31, 31, 31, .86) 100px, rgba(31, 31, 31, .9) 100%); /* P2 */
	}
	html body.page-id-3974 .elementor-element-a9d08a7 .elementor-repeater-item-ebd58b8::before,
	html body.nt-service-page .elementor-element-a9d08a7 .elementor-repeater-item-ebd58b8::before {
		background-image: linear-gradient(to bottom, rgba(20, 20, 20, 0) 50%, rgba(20, 20, 20, .6) 66%, rgba(20, 20, 20, .84) 100%); /* P2 was from 38-40% */
	}
}

/* ===== P3) Phones, banner buttons ("Volajte 24/7", "WhatsApp", "Napíšte nám") on the home, branch and service pages: 14px text
   was too small. Now 16px, the button a little higher. */
@media only screen and (max-width: 767px) {
	html body .elementor-element.elementor-element-a9d08a7 .owl-carousel .nt-hero-btns a.nt-hero-btn {
		font-size: 16px; /* P3 was 14px */
		padding-top: 12px; /* P3 was 10px */
		padding-bottom: 12px; /* P3 */
	}
}

/* ===== P4) Home page, dark block "Prečo práve my" (68c80a3): the photo stood on the bottom edge of the block.
   Now the dark padding under the photo is as big as over it. Desktop (from 992px, text and photo side by side): the photo is
   as high as the text column (top on the level of "/ Prečo práve my /", bottom on the level of "sme tu 24/7"), 120px dark
   below as above; the block is 40px higher than before. Tablet and phone (photo under the text): padding below = padding above. */
body.page-id-3974 .elementor-element.elementor-element-68c80a3 {
	--padding-bottom: var(--padding-top); /* P4 was 0 */
}
@media only screen and (min-width: 992px) {
	body.page-id-3974 .elementor-element.elementor-element-a48a30a {
		--padding-bottom: 0px; /* P4 was 80px, the space under the text is now the padding of the dark block */
	}
	body.page-id-3974 .elementor-element.elementor-element-728d4ac {
		position: relative; /* P4 */
	}
	body.page-id-3974 .elementor-element.elementor-element-2dfcea7 {
		position: absolute; /* P4 the photo takes the height of the text column */
		top: 0; /* P4 */
		right: 0; /* P4 */
		bottom: 0; /* P4 */
		left: 0; /* P4 */
		display: flex; /* P4 */
		justify-content: flex-end; /* P4 right edge as before */
	}
	body.page-id-3974 .elementor-element.elementor-element-2dfcea7 > .elementor-widget-container {
		display: flex; /* P4 */
		justify-content: flex-end; /* P4 */
		height: 100%; /* P4 */
		width: 100%; /* P4 */
	}
	body.page-id-3974 .elementor-element.elementor-element-2dfcea7 img {
		height: 100%; /* P4 */
		width: auto; /* P4 */
		max-width: 100%; /* P4 */
		object-fit: cover; /* P4 on narrow columns the photo is cut at the sides, not squeezed */
		object-position: 50% 30%; /* P4 */
	}
}

/* ===== P5) Home page, block "180+" with the map of Slovakia (61c2370): smaller map and spacing, about 60% of the height.
   The Bratislava point (tooltip 1738d27) is placed in % of the map box, so it stays on its place. */
body.page-id-3974 .elementor-element.elementor-element-61c2370 {
	--margin-top: 70px; /* P5 was 110px */
}
body.page-id-3974 .elementor-element.elementor-element-677e7b8 {
	--margin-top: 30px; /* P5 was 50px */
}
body.page-id-3974 .elementor-element.elementor-element-5e8fbec {
	--width: 42%; /* P5 map box, was 82% */
	--margin-top: 10px; /* P5 was 17px */
}
@media only screen and (max-width: 1279px) {
	body.page-id-3974 .elementor-element.elementor-element-61c2370 {
		--margin-top: 60px; /* P5 was 100px */
	}
	body.page-id-3974 .elementor-element.elementor-element-5e8fbec {
		--width: 60%; /* P5 was 100% */
	}
}
@media only screen and (max-width: 767px) {
	body.page-id-3974 .elementor-element.elementor-element-61c2370 {
		--margin-top: 40px; /* P5 was 60px */
	}
	body.page-id-3974 .elementor-element.elementor-element-677e7b8 {
		--margin-top: 24px; /* P5 */
		--gap: 16px 16px; /* P5 was 40px */
		--row-gap: 16px; /* P5 */
	}
	body.page-id-3974 .elementor-element.elementor-element-5e8fbec {
		--width: 78%; /* P5 was 100% */
	}
}

/* ===== P7) Small gold links with an arrow (Constructum Button widget, type 1: "Položte nám otázku", "Všetky služby",
   "Viac o tíme", "Opýtajte sa advokáta", "Trestné právo" on service pages and the like). On a light background (white and the
   grey #e6e7e2 of the team block) the gold #166574 had contrast 2.2 on white: now darker gold #0f4c57 (6.0 on white, 4.8 on
   #e6e7e2) and 16px instead of 14px. On the dark block "Prečo práve my" (68c80a3, "Viac o nás"): only the size.
   The gold filled buttons ("Čítať ďalej" in the blog, banner buttons) are other widgets and are not touched. */
html body .elementor-widget-constructum_button a.constructum-button.button-type-1 {
	font-size: 16px; /* P7 was 14px */
}
html body .elementor-widget-constructum_button a.constructum-button.button-type-1,
html body .elementor-widget-constructum_button a.constructum-button.button-type-1::after {
	color: #0f4c57; /* P7 */
}
html body .elementor-widget-constructum_button a.constructum-button.button-type-1 svg {
	stroke: #0f4c57; /* P7 arrow */
}
html body .elementor-element-68c80a3 .elementor-widget-constructum_button a.constructum-button.button-type-1,
html body .elementor-element-68c80a3 .elementor-widget-constructum_button a.constructum-button.button-type-1::after {
	color: #166574; /* P7 dark block: colour as before */
}
html body .elementor-element-68c80a3 .elementor-widget-constructum_button a.constructum-button.button-type-1 svg {
	stroke: #166574; /* P7 */
}

/* ===== P18) Home page, three cards under the banner (grid 1a03f19): the titles a little smaller (about 12%).
   Same formula as nt-zz-final-f.css 1, only the variables change: the longest word gets more reserve and the top size is lower. */
body.page-id-3974 .elementor-element.elementor-element-1a03f19 {
	--ntf-max: 62px; /* P18 was 70px */
	--ntf-em: 4.05; /* P18 was 3.6 (EN) */
}
html[lang|="pl"] body.page-id-3974 .elementor-element.elementor-element-1a03f19 {
	--ntf-em: 3.75; /* P18 was 3.3 */
}
html[lang|="ru"] body.page-id-3974 .elementor-element.elementor-element-1a03f19 {
	--ntf-max: 56px; /* P18 was 64px */
	--ntf-em: 5.6; /* P18 was 5 */
}
@media only screen and (max-width: 767px) {
	body.page-id-3974 .elementor-element.elementor-element-1a03f19 {
		--ntf-max: 31px; /* P18 was 35px */
	}
	html[lang|="ru"] body.page-id-3974 .elementor-element.elementor-element-1a03f19 {
		--ntf-max: 31px; /* P18 */
	}
}