/* Rules of the inner pages (every page except the front page) that use the common content width of kt-container.css (--kt-side).
   Loaded by inc/kt-container.php on all pages except the front page. */
/* ---- service pages, /usluge/, /nasi-radovi/ intro (the 3D panels are not touched): sections ---- */
body .e-con.svc-sec, body .e-con.us-sec { padding-left: var(--kt-side) !important; padding-right: var(--kt-side) !important; }

/* ---- /kontakt/, /zapocnimo-saradnju/, /hvala/: hero + main block; hero text starts at the container edge (no extra 64px) ---- */
body .e-con.kt-hero, body .e-con.kt-main { padding-left: var(--kt-side) !important; padding-right: var(--kt-side) !important; }
body .e-con.kt-hero-in { padding-left: 0 !important; }
body .e-con.kt-hero > .e-con-inner, body .e-con.kt-main > .e-con-inner { width: 100%; max-width: none !important; }

/* ---- project pages and /o-nama/: Elementor "boxed" containers (outer 15px padding + inner box of 1230 / 1510 / 1580px) ----
   The outer container gets the side padding, the inner box is as wide as the outer content box. Full-width pieces (pf-slider) are not boxed. */
body.single-tp-portfolios .e-con-boxed, body.page-id-42196 .e-con-boxed { padding-left: var(--kt-side) !important; padding-right: var(--kt-side) !important; }
body.single-tp-portfolios .e-con-boxed > .e-con-inner, body.page-id-42196 .e-con-boxed > .e-con-inner { width: 100%; max-width: none !important; }
body .e-con.ab-box { padding-left: var(--kt-side) !important; padding-right: var(--kt-side) !important; }

/* ---- mobile (<=576px): inner padding of the cards is 22px so the text in them is not cramped (desktop and tablet are not touched).
   Only values above 22px are reduced (never increased); svc-tile (12px) and the horizontal 18 / 20px of the form card and "Šta sledi?" are already smaller. ---- */
@media (max-width: 576px) {
	body .e-con.svc-card { padding: 22px !important; }
	body .e-con.pf-card { padding: 22px !important; }
	body .e-con.kt-right { padding: 22px 18px !important; }
	body .elementor .zs-side .zs-next, body .elementor .zs-thanks .zs-next { padding: 22px 20px; }
	body.kt-blog .kt-card__body, body.kt-blog .kt-card--featured .kt-card__body { padding: 22px; }
	/* also above 22px before: /usluge/ boxes (40px), closing CTA boxes pf-cta (36px 24px), previous / next project cards (28px) */
	body .e-con.us-box { padding: 22px !important; }
	body .e-con.pf-cta { padding: 22px !important; }
	body .pf-nav .pf-pn .pf-pn__card { padding: 22px; }
}

/* ---- closing CTA block (shared template #49524, same look as the project pages: .pf-cta) ----
   Service pages / Naši radovi: the box keeps the old 100px above and below (the wrapper .svc-cta-wrap has no padding of its own). */
.e-con.svc-cta-wrap .e-con.pf-cta { margin: 100px 0 !important; }
/* /usluge/: the section above already has 100 / 70 / 50px of bottom padding, so only the space below the box is added (as the old us-cta section had) */
body.page-id-48518 .e-con.svc-cta-wrap .e-con.pf-cta { margin: 0 0 100px !important; }
@media (max-width: 1200px) { body.page-id-48518 .e-con.svc-cta-wrap .e-con.pf-cta { margin-bottom: 70px !important; } }
@media (max-width: 768px) { body.page-id-48518 .e-con.svc-cta-wrap .e-con.pf-cta { margin-bottom: 50px !important; } }

/* service page hero picture without a fixed ratio (.svc-ph-auto): the frame takes the ratio of the picture, so nothing is cropped;
   1px border, 16px radius, picture 100% wide. .svc-media-plain removes the orange blur behind the frame (the picture has its own glow). */
body .e-con.svc-ph.svc-ph-filled.svc-ph-auto { aspect-ratio: auto; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 16px; }
body .svc-ph-auto .elementor-widget-image { position: static; width: 100%; height: auto; }
body .svc-ph-auto .elementor-widget-image .elementor-widget-container { height: auto; }
body .svc-ph-auto img { display: block; width: 100%; height: auto; object-fit: initial; border-radius: 0; }
body .e-con.svc-media-wrap.svc-media-plain::before { content: none; }

/* /kontakt/: link to the privacy policy in the consent checkbox */
body.page-id-43571 .kt-accept a { color: #FF5722; text-decoration: underline; text-underline-offset: 3px; }
body.page-id-43571 .kt-accept a:hover { color: #E64A19; }

/* portfolio slider with real screenshots (.pf-slider-shots, set on one project): the panel follows the ratio of the screenshot (1600 x 1000), nothing is cropped;
   the shared .pf-slider rules (fixed 480 / 360 / 240px height, cover + top) stay for the other projects */
body .pf-slider.pf-slider-shots .tp-pd-2-slider-thumb img { height: auto; aspect-ratio: 1600 / 1000; object-fit: cover; object-position: center; }

/* ===== /nasi-radovi/ showcase (3D perspective panels): every panel follows the 16:10 ratio of the project screenshots, nothing is cropped (contain);
   the dark readability gradient lies on the panel itself (it was a 90vh box on the title). The 3D effect (gsap rotation / depth on .tp-perspective-image) is untouched. ===== */
body.page-id-48891 .tp-perspective-slider .tp-perspective-inner { height: auto; }
body.page-id-48891 .tp-perspective-slider .tp-perspective-inner .tp-perspective-image { height: auto; aspect-ratio: 16 / 10; background-size: contain; background-position: center; background-repeat: no-repeat; background-color: #0b0b0d; }
body.page-id-48891 .tp-perspective-slider .tp-perspective-inner .tp-perspective-content::before { content: none; }
body.page-id-48891 .tp-perspective-slider .tp-perspective-inner .tp-perspective-image::after { content: ""; display: block; position: absolute; inset: 0; width: auto; height: auto; top: 0; left: 0; right: 0; border-radius: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(7,7,7,0.7) 0%, rgba(7,7,7,0.5) 50%, rgba(7,7,7,0) 100%); }

/* ===== /nasi-radovi/ showcase: the whole panel (card) is one link to the project ===== */
/* inc: mu-plugins/codeart-showcase-cards.php puts an empty aria-hidden link over the panel (z 5: above the gradient, below the text); the title link stays the only
   link for keyboards and screen readers; the text layer lets clicks through except on the title link */
body.page-id-48891 .tp-perspective-slider .tp-perspective-inner .tp-perspective-image { cursor: pointer; }
body.page-id-48891 .tp-perspective-image .kt-pcard-link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; display: block; }
body.page-id-48891 .tp-perspective-slider .tp-perspective-content { pointer-events: none; }
body.page-id-48891 .tp-perspective-slider .tp-perspective-content a { pointer-events: auto; }
body.page-id-48891 .tp-perspective-slider .tp-perspective-title a { transition: color 0.25s ease; }
body.page-id-48891 .tp-perspective-slider .tp-perspective-image:hover .tp-perspective-title a { color: #FF5722; }
body.page-id-48891 .tp-perspective-slider .tp-perspective-title a:focus-visible { outline: none; color: #FF5722; }
body.page-id-48891 .tp-perspective-slider .tp-perspective-image:has(.tp-perspective-title a:focus-visible) { outline: 3px solid #FF5722; outline-offset: -3px; }

/* ===== /nasi-radovi/ on phones (<= 767px), step 20: the closing CTA overlapped the project cards. Cause (measured at 360 / 414): Elementor sets flex-wrap: wrap on the column
   that holds the showcase widget (container 3c3771d + its inner box), and in a wrapping column the widget's height is taken from an intrinsic pass in which the cards (inline-block,
   width 100%, aspect-ratio) count as ~46px each -> wrapper 184px high, the 4 cards (883px) overflowed it, the CTA started at y=600. The wrapper is a plain block now, so its height
   is the real height of the cards and the CTA follows after them (the section's own 50px bottom padding + the CTA box margin). >= 768px is not touched. ===== */
@media (max-width: 767px) {
	body.page-id-48891 .e-con.elementor-element-3c3771d, body.page-id-48891 .e-con.elementor-element-3c3771d > .e-con-inner { display: block !important; flex-wrap: nowrap !important; height: auto !important; }
	body.page-id-48891 .elementor-element-3c3771d .elementor-widget-tp-full-screen-showcase-carousel-slider { height: auto !important; flex: none; }
}
/* step 20b, /nasi-radovi/ on phones: 32-48px between the last card and the CTA (was 80px slider margin + 50px section padding + 72px CTA margin = ~205px), and the cards are plain
   16:10 frames: the GSAP depth / tilt (matrix3d scale, up to +5% wider than the column and clipped by the slider's overflow) is off on phones, so nothing is cropped. >= 768px untouched. */
@media (max-width: 767px) {
	body.page-id-48891 .tp-perspective-slider { margin-bottom: 0; padding-bottom: 0; }
	body.page-id-48891 .e-con.elementor-element-3c3771d > .e-con-inner { padding-bottom: 0 !important; }
	html body.page-id-48891 .e-con.svc-cta-wrap .e-con.pf-cta { margin-top: 40px !important; }
	body.page-id-48891 .tp-perspective-slider .tp-perspective-inner { perspective: none !important; }
	body.page-id-48891 .tp-perspective-slider .tp-perspective-inner .tp-perspective-image { transform: none !important; }
}