/*
 * Component styles for every ieksapdare-core block + theme partial.
 * Class names match 1:1 what class-blocks.php / inc/navigation.php
 * render server-side. Calculator-specific styles live in calculator.css
 * (loaded only on /kalkulators/, per the CWV budget in UX spec §5.5 /
 * Phase 0 §5.5).
 */

/* ---------- Header / Nav ---------- */
.iek-header {
	position: sticky; top: 0; z-index: 40;
	background: var(--wp--preset--color--paper);
	box-shadow: var(--wp--custom--shadow--default);
}
.iek-header--transparent:not(.is-scrolled) {
	background: transparent;
	box-shadow: none;
	position: absolute;
	width: 100%;
	color: var(--wp--preset--color--paper);
}
.iek-header__utility {
	display: none;
	justify-content: space-between;
	align-items: center;
	padding: 6px var(--wp--preset--spacing--4, 16px);
	font-size: var(--wp--preset--font-size--small);
	border-bottom: 1px solid var(--wp--preset--color--ink-100);
}
@media (min-width: 834px) { .iek-header__utility { display: flex; } }
.iek-header__main {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--6, 24px);
	padding: var(--wp--preset--spacing--3, 12px) var(--wp--preset--spacing--4, 16px);
}
.iek-header__logo { font-family: var(--wp--preset--font-family--heading); font-weight: 700; text-decoration: none; color: inherit; }
.iek-header__nav { display: none; align-items: center; gap: var(--wp--preset--spacing--6, 24px); margin-inline-start: auto; }
@media (min-width: 834px) { .iek-header__nav { display: flex; } }
.iek-header__nav-link, .iek-header__nav-trigger {
	background: none; border: none; cursor: pointer;
	font: inherit; color: inherit; text-decoration: none;
	padding: 8px 0;
}
.iek-header__nav-link:hover, .iek-header__nav-trigger:hover { color: var(--wp--preset--color--accent-600); }
.iek-header__cta { display: none; }
@media (min-width: 834px) { .iek-header__cta { display: inline-flex; margin-inline-start: var(--wp--preset--spacing--4, 16px); } }
.iek-header__hamburger {
	width: 44px; height: 44px;
	border: none; background: none; cursor: pointer;
	margin-inline-start: auto;
}
@media (min-width: 834px) { .iek-header__hamburger { display: none; } }
.iek-header__hamburger::before {
	content: ""; display: block; width: 24px; height: 2px; margin: 0 auto;
	background: currentColor;
	box-shadow: 0 -7px currentColor, 0 7px currentColor;
}
.iek-header__phone { text-decoration: none; color: inherit; font-weight: 500; }

.iek-lang-switch { display: flex; gap: 8px; align-items: center; }
.iek-lang-switch__item { text-decoration: none; color: inherit; font-weight: 500; }
.iek-lang-switch__item--current { color: var(--wp--preset--color--ink-400); cursor: default; }
.iek-lang-switch--mobile { padding: var(--wp--preset--spacing--4, 16px) 0; gap: 16px; }

.iek-mega-menu {
	position: absolute; left: 0; right: 0; top: 100%;
	background: var(--wp--preset--color--paper);
	box-shadow: var(--wp--custom--shadow--default);
	display: flex; gap: var(--wp--preset--spacing--12, 48px);
	padding: var(--wp--preset--spacing--8, 32px);
	transition: opacity var(--wp--custom--motion--panel, 250ms ease-out);
}
.iek-mega-menu[hidden] { display: none; }
.iek-mega-menu__heading { font-size: var(--wp--preset--font-size--small); text-transform: uppercase; color: var(--wp--preset--color--ink-400); }
.iek-mega-menu ul { list-style: none; margin: 0; padding: 0; }
.iek-mega-menu li a { display: block; padding: 6px 0; text-decoration: none; color: var(--wp--preset--color--ink-950); }
.iek-mega-menu li a:hover { color: var(--wp--preset--color--accent-600); }

.iek-mobile-menu {
	position: fixed; inset: 0; z-index: 50;
	background: var(--wp--preset--color--paper);
	padding: var(--wp--preset--spacing--6, 24px);
	overflow-y: auto;
}
.iek-mobile-menu[hidden] { display: none; }
.iek-mobile-menu nav a, .iek-mobile-menu__accordion-trigger { display: block; padding: 12px 0; text-decoration: none; color: inherit; font-size: 18px; min-height: 48px; }
.iek-mobile-menu__close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border: none; background: none; font-size: 24px; cursor: pointer; }
.iek-mobile-menu__accordion[hidden] { display: none; }
.iek-mobile-menu__accordion { padding-inline-start: 16px; }

/* ---------- Hero ---------- */
.iek-hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 45vh; }
.iek-hero--image-led { min-height: 45vh; color: var(--wp--preset--color--paper); }
@media (min-width: 834px) { .iek-hero--image-led { min-height: 60vh; } }
@media (min-width: 1440px) { .iek-hero--image-led { min-height: 80vh; } }
.iek-hero__media { position: absolute; inset: 0; z-index: -1; }
.iek-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.iek-hero--image-led::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: var(--wp--custom--overlay--dark);
}
.iek-hero__content { padding: var(--wp--preset--spacing--8, 32px) var(--wp--preset--spacing--4, 16px); max-width: 1240px; margin-inline: auto; width: 100%; }
.iek-hero--image-led .iek-hero__headline, .iek-hero--image-led .iek-hero__subheadline { color: var(--wp--preset--color--paper); }
.iek-hero__cta { margin-top: var(--wp--preset--spacing--6, 24px); display: flex; gap: 12px; flex-wrap: wrap; }

.iek-hero--dark-compact { min-height: 25vh; background: var(--wp--preset--color--ink-950); color: var(--wp--preset--color--paper); justify-content: center; }
@media (min-width: 834px) { .iek-hero--dark-compact { min-height: 32vh; } }
.iek-hero--dark-compact .iek-hero__headline, .iek-hero--dark-compact .iek-hero__subheadline { color: var(--wp--preset--color--paper); }

.iek-hero--form-side { display: block; }
@media (min-width: 834px) {
	.iek-hero--form-side { display: flex; flex-direction: row; align-items: flex-start; gap: var(--wp--preset--spacing--12, 48px); }
	.iek-hero--form-side .iek-hero__content, .iek-hero--form-side .iek-hero__form { flex: 1; }
}

/* ---------- Trust strip ---------- */
.iek-trust-strip { list-style: none; display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--6, 24px); justify-content: center; padding: var(--wp--preset--spacing--6, 24px) var(--wp--preset--spacing--4, 16px); margin: 0; }
.iek-trust-strip__item { font-weight: 600; color: var(--wp--preset--color--ink-600); }
.iek-trust-strip--compact { padding: var(--wp--preset--spacing--3, 12px) 0; }

/* ---------- Card grids ---------- */
.iek-card-grid { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--6, 24px); }
@media (min-width: 834px) { .iek-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1440px) { .iek-card-grid { grid-template-columns: repeat(3, 1fr); } }
.iek-card {
	display: flex; flex-direction: column;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--ink-200);
	border-radius: var(--wp--custom--radius--card, 10px);
	overflow: hidden; text-decoration: none; color: inherit;
	transition: transform var(--wp--custom--motion--fast, 180ms ease-out), box-shadow var(--wp--custom--motion--fast, 180ms ease-out);
}
.iek-card:hover { transform: translateY(-2px) scale(1.01); box-shadow: var(--wp--custom--shadow--default); }
.iek-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--wp--custom--radius--imageInCard, 6px) var(--wp--custom--radius--imageInCard, 6px) 0 0; }
.iek-card__title { font-family: var(--wp--preset--font-family--heading); font-weight: 600; padding: 16px 16px 4px; }
.iek-card__desc, .iek-card__meta { padding: 0 16px 16px; color: var(--wp--preset--color--ink-600); font-size: var(--wp--preset--font-size--small); }
.iek-card--compact .iek-card__title { padding: 12px; font-size: var(--wp--preset--font-size--small); }

/* ---------- Before/After ---------- */
.iek-before-after__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: var(--wp--preset--spacing--4, 16px); border-radius: var(--wp--custom--radius--card, 10px); overflow: hidden; }
.iek-before-after__before, .iek-before-after__after { position: relative; }
.iek-before-after__before img, .iek-before-after__after img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.iek-before-after__label {
	position: absolute; bottom: 8px; left: 8px;
	background: var(--wp--preset--color--ink-950); color: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--caption); padding: 2px 8px; border-radius: 999px;
}

/* ---------- Process ---------- */
.iek-process { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--4, 16px); border-inline-start: 3px solid var(--wp--preset--color--accent-600); }
@media (min-width: 834px) { .iek-process { flex-direction: row; border-inline-start: none; border-top: 3px solid var(--wp--preset--color--accent-600); flex-wrap: wrap; } }
.iek-process__step { padding-inline-start: 16px; flex: 1; min-width: 160px; }
.iek-process__title { display: block; font-weight: 600; font-family: var(--wp--preset--font-family--heading); }
.iek-process__desc { display: block; color: var(--wp--preset--color--ink-600); font-size: var(--wp--preset--font-size--small); }

/* ---------- Price ---------- */
.iek-price-factors { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.iek-price-factors__item { border-bottom: 1px solid var(--wp--preset--color--ink-100); padding-bottom: 8px; }
.iek-price-card { background: var(--wp--preset--color--accent-100); border-radius: var(--wp--custom--radius--card, 10px); padding: var(--wp--preset--spacing--4, 16px); display: inline-block; }
.iek-price-card__range { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: var(--wp--preset--font-size--h3); color: var(--wp--preset--color--accent-700); }
.iek-price-card__pending { font-style: italic; color: var(--wp--preset--color--ink-400); }

/* ---------- FAQ ---------- */
.iek-faq__item { border-bottom: 1px solid var(--wp--preset--color--ink-200); }
.iek-faq__question {
	width: 100%; text-align: left; background: none; border: none; cursor: pointer;
	min-height: 48px; padding: 12px 0; font-weight: 600; font-size: 1em;
	display: flex; justify-content: space-between; align-items: center;
}
.iek-faq__question::after { content: "+"; font-size: 1.4em; }
.iek-faq__question[aria-expanded="true"]::after { content: "\2212"; }
.iek-faq__answer { padding-bottom: 16px; color: var(--wp--preset--color--ink-600); }
.iek-faq__answer[hidden] { display: none; }

/* ---------- Reviews ---------- */
.iek-review-carousel { display: grid; gap: var(--wp--preset--spacing--6, 24px); grid-template-columns: 1fr; }
@media (min-width: 834px) { .iek-review-carousel { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1440px) { .iek-review-carousel { grid-template-columns: repeat(3, 1fr); } }
.iek-review-card { background: var(--wp--preset--color--paper); border-radius: var(--wp--custom--radius--card, 10px); padding: var(--wp--preset--spacing--6, 24px); margin: 0; }
.iek-review-card__text { margin: 0 0 12px; }
.iek-review-card__author { font-weight: 600; font-style: normal; }
.iek-review-card__rating { color: var(--wp--preset--color--accent-600); display: block; margin-top: 4px; }

/* ---------- CTA band ---------- */
.iek-cta-band {
	background: var(--wp--preset--color--ink-950); color: var(--wp--preset--color--paper);
	border-radius: var(--wp--custom--radius--card, 10px);
	padding: var(--wp--preset--spacing--12, 48px) var(--wp--preset--spacing--6, 24px);
	text-align: center;
}
.iek-cta-band__headline { color: var(--wp--preset--color--paper); }
.iek-cta-band__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

/* ---------- Breadcrumbs ---------- */
.iek-breadcrumbs { padding: 12px var(--wp--preset--spacing--4, 16px); font-size: var(--wp--preset--font-size--small); max-width: 1240px; margin-inline: auto; }
@media (min-width: 834px) { .iek-breadcrumbs { padding-inline: var(--wp--preset--spacing--8, 32px); } }
.iek-breadcrumbs__link { text-decoration: none; }
.iek-breadcrumbs__sep { margin: 0 6px; color: var(--wp--preset--color--ink-400); }
.iek-breadcrumbs__current { color: var(--wp--preset--color--ink-600); }

/* ---------- Misc structural blocks ---------- */
.iek-included-items, .iek-scope-items, .iek-materials-used { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 834px) { .iek-included-items, .iek-scope-items { grid-template-columns: repeat(2, 1fr); } }
.iek-badge-row { list-style: none; display: flex; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; }
.iek-badge { background: var(--wp--preset--color--steel-100); color: var(--wp--preset--color--steel-700); border-radius: 999px; padding: 4px 12px; font-size: var(--wp--preset--font-size--small); }
.iek-facts-bar { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--6, 24px); margin: 0; }
.iek-facts-bar__item dt { font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--ink-400); }
.iek-facts-bar__item dd { margin: 0; font-weight: 600; }
.iek-duration-stat { display: flex; gap: 8px; align-items: baseline; }
.iek-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 834px) { .iek-gallery { grid-template-columns: repeat(4, 1fr); } }
.iek-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--wp--custom--radius--imageInCard, 6px); }
.iek-process-images { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.iek-process-images img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--wp--custom--radius--imageInCard, 6px); }
.iek-filter-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.iek-filter-bar__item { text-decoration: none; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--wp--preset--color--ink-300); color: inherit; }
.iek-filter-bar__item.is-active { background: var(--wp--preset--color--accent-600); border-color: var(--wp--preset--color--accent-600); color: var(--wp--preset--color--paper); }
.iek-map a { display: inline-block; margin-top: 8px; }

/* ---------- Forms (shared: Contact form + Calculator summary) ---------- */
.iek-calculator__honeypot { position: absolute; left: -9999px; }
.iek-calculator__errors, .iek-contact-form .iek-calculator__errors {
	background: var(--wp--preset--color--error-100); color: var(--wp--preset--color--error-600);
	border-radius: var(--wp--custom--radius--button, 8px); padding: 12px 16px; margin-bottom: 16px;
}
.iek-calculator__consent label { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }

/* ---------- Lightbox (lazy-injected by lightbox.js) ---------- */
.iek-lightbox { position: fixed; inset: 0; z-index: 60; background: var(--wp--custom--overlay--dark); display: flex; align-items: center; justify-content: center; }
.iek-lightbox[hidden] { display: none; }
.iek-lightbox__image { max-width: 90vw; max-height: 85vh; object-fit: contain; }
.iek-lightbox__close, .iek-lightbox__prev, .iek-lightbox__next {
	position: absolute; background: none; border: none; color: var(--wp--preset--color--paper);
	font-size: 32px; cursor: pointer; width: 48px; height: 48px;
}
.iek-lightbox__close { top: 16px; right: 16px; }
.iek-lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.iek-lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }

/* ---------- Footer ---------- */
.iek-footer { background: var(--wp--preset--color--ink-950); color: var(--wp--preset--color--stone-100); padding: var(--wp--preset--spacing--12, 48px) var(--wp--preset--spacing--4, 16px); }
.iek-footer a { color: var(--wp--preset--color--stone-100); }
.iek-footer__grid { display: grid; gap: var(--wp--preset--spacing--8, 32px); max-width: 1240px; margin-inline: auto; grid-template-columns: 1fr; }
@media (min-width: 834px) { .iek-footer__grid { grid-template-columns: repeat(4, 1fr); } }
.iek-footer__col h2, .iek-footer__contact h2 { color: var(--wp--preset--color--paper); font-size: var(--wp--preset--font-size--small); text-transform: uppercase; }
.iek-footer__legal { display: flex; gap: 16px; max-width: 1240px; margin: var(--wp--preset--spacing--8, 32px) auto 12px; }
.iek-footer__copyright { max-width: 1240px; margin: 0 auto; font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--ink-400); }
.iek-footer--reduced { text-align: center; padding: var(--wp--preset--spacing--6, 24px); }