/* Follows DESIGN.md · tokens in main.css */
/* Ekspert na godziny: front page sections. Tokens and shared components (.en-rates, .en-sheet, .en-call, .en-btn) live in main.css.
   Mobile first; desktop layout from 941px (same breakpoint as the header).
   Small text on home never goes below 16px (40+ audience): --fs-note. */

.en-hero, .en-pricing, .en-about, .en-reviews, .en-contact { --fs-note: 1rem; }

/* ---------- Hero: left-aligned promise + the clock "key" on the right ----------
   Budget: the rate strip stays on the first screen at 1440x900, 1280x720, 390x844 and 360x740, cookie notice included.
   One grid, two layouts: desktop = text column + key spanning every row; below 941px the key sits beside the heading. */
.en-hero {
	--key-w: clamp(250px, 24vw, 370px);
	padding-block: clamp(1rem, 3.2vh, 2.75rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); /* tighter bottom: the cistern teaser follows */
	overflow: clip;
}
.en-hero__in {
	display: grid; align-items: start;
	grid-template-columns: minmax(0, 1fr) var(--key-w); column-gap: clamp(2rem, 5vw, 5rem);
	grid-template-areas: "h key" "sub key" "cta key" "rate key" "sos key";
}
.en-hero__h { grid-area: h; font-size: clamp(2.25rem, 1rem + 4vw, 4.75rem); line-height: 1; margin: 0 0 var(--s-5); }

/* Rotating headline ("Przyjadę i" + 3 phrases, template-parts/home-hero.php). Every phrase lives in the same grid cell,
   so the box is as tall as the longest phrase at every width and nothing below it moves. Motion = opacity + translate,
   ease-out; the outgoing phrase leaves upwards, the next one rises in 120 ms later. Without the inline script (no JS,
   reduced motion) only the final phrase (.is-on in the markup) is shown and nothing animates. */
.en-rot { display: block; }
.en-rot__lead { display: block; }
.en-rot__box { display: grid; }
.en-rot__p {
	grid-area: 1 / 1; text-wrap: balance;
	opacity: 0; visibility: hidden; translate: 0 .32em;
	transition: opacity .42s var(--ease), translate .55s var(--ease), visibility 0s linear .55s;
}
.en-rot__p.is-on { opacity: 1; visibility: visible; translate: 0 0; transition-delay: .12s, .12s, 0s; }
.en-rot__p.is-out { translate: 0 -.32em; }
.en-hero__h.is-rot-set .en-rot__p { transition: none; }
@media (prefers-reduced-motion: reduce) { .en-rot__p { transition: none; } }
.en-key { grid-area: key; align-self: center; width: 100%; }
.en-key__svg { display: block; width: 100%; height: auto; overflow: visible; }
.en-hero__sub { grid-area: sub; max-width: 34em; margin: 0 0 var(--s-6); }
.en-hero__cta { grid-area: cta; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); margin-bottom: var(--s-6); }
.en-call--xl { min-height: 60px; font-size: clamp(1.15rem, 1rem + .5vw, 1.35rem); padding-inline: 1.2em 1.5em; }
.en-hero__alt { min-height: 60px; background: var(--paper); }

/* Fact strip (2026-10-21: no price here, the rates live once in #cennik). Two groups, one per line; phones split the
   second group, very narrow phones the first as well, so a "·" never starts a line. Plain bar, no frame. */
.en-hero__rate {
	grid-area: rate; justify-self: start;
	display: grid; justify-items: start;
	max-width: 100%; margin: 0 0 var(--s-4); padding: .7rem 1.25rem;
	background: var(--loden); color: var(--loden-ink-2); border-radius: var(--r-2);
	font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; line-height: 1.45; font-variant-numeric: tabular-nums;
}
.en-hero__rate b { color: var(--brass); font-weight: 800; }
.en-hero__rate-g > span { white-space: nowrap; }
.en-hero__rate-g > * + *::before { content: "·"; content: "·" / ""; padding-inline: .4em .65em; color: var(--brass-deep); font-weight: 800; } /* + the space in the markup = .65em each side */
.en-hero__urgent { grid-area: sos; margin: 0; color: var(--ink-2); font-size: var(--fs-note); line-height: 1.5; font-family: var(--font-display); font-weight: 500; }
.en-hero__urgent .en-ico { display: inline-block; vertical-align: -.22em; margin-right: .4em; color: var(--loden); }

@media (min-width: 941px) {
	.en-hero { display: grid; align-items: center; min-height: min(calc(100svh - var(--header-h) - 8rem), 42rem); }
}
/* Tablet and phones: heading full width (two lines from 360px up), key beside the lead. */
@media (max-width: 940px) {
	.en-hero { --key-w: clamp(84px, 22vw, 150px); }
	.en-hero__in { column-gap: var(--s-4); grid-template-areas: "h h" "sub key" "cta cta" "rate rate" "sos sos"; }
	.en-key { align-self: center; margin-bottom: var(--s-4); }
}
@media (max-width: 600px) {
	.en-hero { padding-bottom: var(--s-6); }
	.en-hero__h { font-size: min(2.25rem, 8.6vw); margin-bottom: var(--s-3); }
	.en-hero__sub { font-size: 1.0625rem; margin-bottom: var(--s-4); }
	.en-hero__cta { flex-direction: column; align-items: stretch; gap: var(--s-2); margin-bottom: var(--s-4); }
	.en-hero__cta .en-call { justify-content: center; }
	.en-hero__alt { min-height: 52px; justify-content: center; }
	.en-hero__rate { padding: .55rem 1rem; font-size: 1rem; line-height: 1.5; }
	.en-hero__rate-g + .en-hero__rate-g > span { display: block; }
	.en-hero__rate-g + .en-hero__rate-g > * + *::before { content: none; }
}
@media (max-width: 379px) {
	.en-hero__rate-g > span { display: block; }
	.en-hero__rate-g > * + *::before { content: none; }
}

/* Motion: the emblem key fades up once (no fill, so nothing lingers after it ends). No loops. */
@media (prefers-reduced-motion: no-preference) {
	.en-key { animation: en-key-in var(--dur-reveal) var(--ease); }
}
@keyframes en-key-in { from { opacity: 0; translate: 0 12px; } }

/* ---------- Cistern teaser (template-parts/home-cistern.php), right under the hero ----------
   One row on paper, opened by a gold rule (gold on paper = a rule only): plate drawing · heading + sentence · actions. */
.en-cistern { padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.en-cistern__in {
	display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-3) var(--s-4);
	padding-top: var(--s-5); border-top: 2px solid var(--brass-deep);
}
.en-cistern .en-plate--icon { width: 3.25rem; align-self: start; }
.en-cistern__h { margin: 0; font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.95rem); line-height: 1.12; text-wrap: balance; }
.en-cistern__text p { margin: var(--s-2) 0 0; color: var(--ink-2); max-width: 60ch; }
.en-cistern__act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); }
.en-cistern__more { display: inline-flex; align-items: center; gap: .45em; min-height: 48px; font-family: var(--font-display); font-weight: 700; }
.en-cistern__more .en-ico { transition: transform var(--dur-open) var(--ease); }
@media (hover: hover) and (pointer: fine) { .en-cistern__more:hover .en-ico { transform: translateX(3px); } }
@media (min-width: 941px) {
	.en-cistern__in { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--s-6); padding-top: var(--s-6); }
	.en-cistern .en-plate--icon { width: 4rem; align-self: center; }
	.en-cistern__act { grid-column: auto; }
}
@media (max-width: 600px) {
	.en-cistern__act .en-btn { flex: 1 1 100%; justify-content: center; }
}
.en-path__h { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.7rem); }

/* ---------- Cennik (on loden): rates + the four steps of a job (#jak-licze) + estimator ---------- */
.en-pricing__h { margin-bottom: var(--s-6); }
.en-pricing__head { display: grid; gap: var(--s-7); align-items: start; }
.en-pricing__h3 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.8rem); margin-bottom: var(--s-4); }

/* Rates (shared .en-rates, variant --full): sits straight on the loden band, no card. */
.en-pricing .en-rates { max-width: 30rem; }

/* Steps: a real sequence, so a plain digit in a 2px ring (same as the service pages), rows ruled like a job sheet. */
.en-steps { list-style: none; margin: 0; padding: 0; }
.en-steps__item { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-4); border-top: 1px solid var(--loden-line); }
.en-steps__item:last-child { border-bottom: 1px solid var(--loden-line); }
.en-steps__no {
	display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 2px solid var(--loden-ink); border-radius: 50%;
	font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; font-size: 1.05rem; line-height: 1; color: var(--loden-ink);
}
.en-steps__h { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); line-height: 1.2; margin: .3rem 0 var(--s-2); color: var(--loden-ink); }
.en-steps__item p { margin: 0; }

/* Estimator UI: see estimator.css (handle "en-estimator"). */
.en-pricing__calc { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--loden-line); }
@media (min-width: 941px) {
	.en-pricing__head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); }
	.en-steps__item { padding-block: var(--s-5); }
}

/* ---------- About ---------- */
.en-about__grid { display: grid; gap: var(--s-6); }
.en-about__photo { margin: 0; border-radius: var(--r-2); overflow: hidden; aspect-ratio: 16 / 9; background: var(--paper-3); }
.en-about__photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.02); }
.en-facts { margin: var(--s-5) 0 var(--s-6); border-top: 2px solid var(--ink); }
.en-facts__row { display: grid; gap: .1rem; padding-block: var(--s-3); border-bottom: 1px solid var(--line); }
.en-facts dt { color: var(--ink-2); font-size: var(--fs-note); font-weight: 600; }
.en-facts dd { margin: 0; font-weight: 700; }
.en-facts dd.is-todo { font-weight: 500; color: var(--ink-2); }
.en-about__h3 { margin-bottom: var(--s-4); }
.en-included { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.en-included li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.en-included .en-ico { color: var(--loden); margin-top: .2em; }
@media (min-width: 600px) {
	.en-facts__row { grid-template-columns: 10rem minmax(0, 1fr); gap: var(--s-4); align-items: baseline; }
	.en-facts dt { font-size: inherit; }
}
@media (min-width: 941px) {
	.en-about__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
	.en-about__photo { aspect-ratio: 4 / 5; position: sticky; top: calc(var(--header-h) + 2rem); }
}
/* Phones: SVG text would render under 14px, so the map keeps only rings, dots and the city name; the table carries the data
   and the SVG <desc> still lists every town with its time. */
/* ---------- Reviews ---------- */
.en-reviews__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-2) var(--s-5); margin-bottom: var(--s-7); }
.en-reviews__head h2, .en-reviews__head p { margin: 0; }
.en-reviews__all { display: inline-flex; gap: .4em; align-items: center; font-weight: 700; min-height: 48px; }
.en-reviews__gate { border: 1px dashed var(--ink-2); border-radius: var(--r-2); padding: var(--s-6); max-width: 46rem; }
.en-reviews__small { font-size: var(--fs-note); color: var(--ink-2); margin: var(--s-4) 0 0; }
.en-admin-note { display: inline-block; font-size: var(--fs-note); background: var(--paper-3); padding: .4rem .75rem; border-radius: var(--r-1); }
/* No widget yet: an honest pointer to the Google profile, compact so it does not pretend to be a testimonial wall. */
.en-reviews--plain { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); border-top: 1px solid var(--line); }
.en-reviews__plain { display: grid; gap: var(--s-4); }
.en-reviews__plain h2 { margin: 0; }
.en-reviews__body { max-width: 40rem; }
.en-reviews__body > p { margin: 0 0 var(--s-4); }
.en-reviews__body > p:last-child { margin-bottom: 0; }
.en-reviews__ask { display: flex; gap: .6rem; align-items: flex-start; color: var(--ink-2); }
.en-reviews__ask .en-ico { flex: none; color: var(--loden); margin-top: .2em; }
@media (min-width: 941px) {
	.en-reviews__plain { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: baseline; }
}

/* ---------- Contact ---------- */
.en-contact { background: var(--paper-2); }
/* With the reviews section hidden (no Google link yet) the area and contact bands touch: one band, a hairline between. */
.en-area + .en-contact { padding-top: 0; }
.en-area + .en-contact > .en-wrap { border-top: 1px solid var(--line); padding-top: var(--section); }
.en-contact__grid { display: grid; gap: var(--s-7); }
.en-contact__info { min-width: 0; }
.en-contact__list { margin: var(--s-6) 0 0; border-top: 2px solid var(--ink); }
.en-contact__list > div { display: grid; gap: .15rem; padding-block: var(--s-3); border-bottom: 1px solid var(--line); }
.en-contact__list dt { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-note); color: var(--ink-2); font-weight: 600; }
.en-contact__list dt .en-ico { color: var(--loden); }
.en-contact__list dd { margin: 0; overflow-wrap: anywhere; }
.en-contact__form { min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-2); padding: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); }
.en-contact__fallback p:last-child { margin-bottom: 0; }
@media (min-width: 941px) {
	.en-contact__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
}

/* ---------- Phone length budget ----------
   Each of these repeats content shown elsewhere: the hero and about photos carry the imagery, the estimator in #cennik
   shows every task, and the table carries the area data. Hidden only on narrow screens. */
@media (max-width: 759px) {
	.en-about, .en-pricing, .en-contact { --section: 3.25rem; }
}
@media (max-width: 599px) {
	.en-about__photo { display: none; }
}