/* ==========================================================================
   Additions after the approved mockup: everyday mechanics as the second part
   of the workshop (hero line, nav fit, #mechanika, services link, form kind).
   Same tokens, one accent (--lakier for actions), 3px controls, chamfered metal.
   ========================================================================== */

/* ---------- top bar: five sections on one line from 1024 px; the name fits the room that is left ----------
   --bar-rest: what the phone button, the quote button, the nav and the gaps take (measured, plus room
   for a longer phone number). It stays the same while the quote button hides on a phone, so the name
   never jumps. --wm-ch (header.php): characters in the longest line of the name; .58em is about a wide
   uppercase letter of the display face. The mockup size is the cap, so "Garage 43" looks as in the
   mockup; a longer name gets smaller type and, when its two lines do not fit side by side, a second line. */
.bar__in { --bar-rest: 147px; --wm-max: 1.5rem; container-type: inline-size; }
.wm { flex: 0 1 auto; min-width: 0; }
.wm--2 { flex-wrap: wrap; align-content: center; column-gap: .3em; line-height: .92; }
.wm__l { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@supports (width: 1cqi) {
  .wm { font-size: max(.8rem, min(var(--wm-max), calc((100cqi - var(--bar-rest)) / (var(--wm-ch, 14) * .58)))); }
}
@media (max-width: 374px) { .bar__in { --wm-max: 1.25rem; } }
@media (min-width: 720px) { .bar__in { --bar-rest: 336px; } }
@media (min-width: 1024px) { .bar__in { --bar-rest: 719px; } }
@media (min-width: 1280px) { .bar__in { --bar-rest: 780px; } }
.bar__nav, .bar__tel, .bar__cta { flex: none; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .bar__nav { gap: 0; margin-right: .35rem; }
  .bar__nav a { padding: 0 .55rem; letter-spacing: .07em; }
}

/* ---------- hero: a stamped steel tag pointing to the mechanics section, with two labour prices ----------
   Inline flow, so the tag is as wide as its text on a wide screen and wraps on a phone. */
.kabina__mech { margin-top: 1rem; }
.mech-tag {
  position: relative; display: inline-block; max-width: 100%; min-height: 44px; padding: .5rem .95rem .55rem 1.55rem;
  font-size: clamp(1rem, 1.2vw, 1.075rem); line-height: 1.35; color: #E4DFD4; text-decoration: none;
  background:
    radial-gradient(90% 120% at 18% 0%, rgba(255, 203, 133, .1), rgba(255, 203, 133, 0) 65%),
    linear-gradient(168deg, rgba(44, 52, 55, .94) 0%, rgba(26, 32, 34, .94) 100%);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: transform 160ms var(--ease-out);
}
/* rivet */
.mech-tag::before {
  content: ""; position: absolute; left: .6rem; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #C3CACC, #6A7275 50%, #262C2E 100%); box-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}
.mech-tag:focus-visible { outline-offset: -5px; }
.mech-tag:active { transform: scale(.98); }
.mech-tag__k {
  display: inline-block; margin-right: .55rem; vertical-align: .1em; padding: .28rem .45rem .2rem; border-radius: 2px; background: var(--stal); color: var(--booth-0);
  font-family: var(--f-display); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; line-height: 1;
}
.mech-tag .price { font-size: 1.12em; }
.mech-tag__note { white-space: nowrap; color: var(--text-2); }
.mech-tag .i { margin-left: .45rem; vertical-align: -.22em; color: var(--lakier); transition: transform 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .mech-tag:hover .i { transform: translateX(3px); }
  .mech-tag:hover { color: var(--text); }
}
@media (forced-colors: active) { .mech-tag { border: 1px solid LinkText; } }
@media (prefers-reduced-motion: reduce) { .mech-tag, .mech-tag .i { transition-duration: .01ms; } }
.kabina__mech + .kabina__cta { margin-top: 1.1rem; }

/* ---------- services: the mechanics plate points to its section ---------- */
.plyta__txt .plyta__link { margin-top: .9rem; }

/* ==========================================================================
   MECHANIKA: the bay next door with its roller door rolled half up. Labour
   prices are painted on the slats; the lamp-lit bay shows underneath.
   ========================================================================== */
.mechanika {
  position: relative; padding-block: var(--sec);
  background: radial-gradient(48% 42% at 70% 40%, rgba(255, 196, 120, .06), rgba(255, 196, 120, 0) 72%), var(--booth-0);
}
/* phone and tablet: the call right under the copy, the door with the prices after it */
.mechanika__grid { display: grid; gap: clamp(2.25rem, 6vw, 3rem); grid-template-areas: "head" "call" "brama"; }
.mechanika__head { grid-area: head; }
/* two-line headings: the big word, then what it covers in steel (also the Cennik heading) */
.mechanika__h-main, .mechanika__h-sub, .cennik__h-main, .cennik__h-sub { display: block; }
.mechanika__h-sub, .cennik__h-sub { margin-top: .55rem; font-size: clamp(1.45rem, 2.5vw, 2.15rem); line-height: 1; letter-spacing: .03em; color: var(--stal); }
.mechanika__lead { margin-top: 1.4rem; max-width: 40ch; font-size: clamp(1.125rem, 1.5vw, 1.3rem); color: var(--text-2); }
.mechanika__zasieg { margin-top: 1rem; max-width: 44ch; color: var(--text-2); }

.mechanika__call { grid-area: call; display: grid; justify-items: start; gap: 1rem; }
.mechanika__note { max-width: 36ch; color: var(--text); }
.mechanika__tel { min-height: 60px; padding: .8rem 1.5rem .8rem 1.2rem; gap: .7rem; font-size: 1.125rem; }
.mechanika__tel .i { width: 1.35rem; height: 1.35rem; }
.mechanika__numer { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; margin-top: .35rem; color: var(--text-2); }
.mechanika__nr { font-family: var(--f-display); font-weight: 900; font-size: clamp(2.3rem, 4.2vw, 3.1rem); line-height: .95; letter-spacing: .01em; color: var(--text); white-space: nowrap; }
.mechanika__godziny { font-size: .95rem; }
.mechanika__call .mechanika__form { margin-top: 0; }

.brama { --rail: clamp(10px, 1.4vw, 16px); grid-area: brama; position: relative; isolation: isolate; padding-inline: var(--rail); }
/* door guides */
.brama::before, .brama::after {
  content: ""; position: absolute; top: .5rem; bottom: 0; z-index: 3; width: var(--rail); pointer-events: none;
  background: linear-gradient(90deg, #0D1112 0, #2A3235 35%, #1F2629 65%, #0D1112 100%);
  -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent);
}
.brama::before { left: 0; }
.brama::after { right: 0; }
/* roller housing */
.brama__skrzynia {
  position: relative; z-index: 4; display: block; height: clamp(1.7rem, 3vw, 2.5rem); margin-inline: calc(-1 * var(--rail));
  background:
    radial-gradient(70% 160% at 24% 0%, rgba(255, 203, 133, .14), rgba(255, 203, 133, 0) 70%),
    linear-gradient(180deg, #353E41 0, #242B2E 55%, #161B1D 100%);
  clip-path: polygon(var(--chamfer) 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%, 0 var(--chamfer));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.brama__drzwi { position: relative; z-index: 2; background: #161B1D; }
/* work lamp from the upper left, and the steel of the slats */
.brama__drzwi::before, .brama__drzwi::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.brama__drzwi::before { background: radial-gradient(85% 60% at 22% 0%, rgba(255, 203, 133, .1), rgba(255, 203, 133, 0) 70%); mix-blend-mode: screen; }
.brama__drzwi::after { background: url("../img/kabina/steel-tex.webp") center / cover; opacity: .07; mix-blend-mode: overlay; }
.brama__cennik { display: grid; }
.brama__lamela {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .35rem 1.25rem;
  padding: 1.2rem clamp(1rem, 3vw, 2rem) 1.35rem;
  background: linear-gradient(180deg, #2C3437 0, #252C2F 46%, #1D2326 86%, #101517 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
.brama__lamela:first-child { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), inset 0 16px 14px -12px rgba(0, 0, 0, .6); }
.brama__lamela dt {
  font-family: var(--f-head); font-weight: 800; text-transform: uppercase; letter-spacing: .02em;
  font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.02; color: var(--text); text-wrap: balance;
}
.brama__lamela dd { text-align: right; }
.brama__lamela .price { font-size: clamp(1.9rem, 3.3vw, 2.6rem); line-height: .9; text-shadow: 0 0 1px rgba(236, 230, 218, .4); }
.brama__lamela .price--text, .brama__tekst {
  max-width: 15ch; font-family: var(--f-head); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  font-size: 1.05rem; line-height: 1.1; white-space: normal; color: var(--text-2); text-shadow: none;
}
.brama__note { padding: .85rem clamp(1rem, 3vw, 2rem) 1rem; font-size: .95rem; color: var(--text-2); background: linear-gradient(180deg, #1B2124, #14181A); }
/* bottom rail of the door and its handle, hanging into the bay */
.brama__listwa {
  position: relative; display: block; height: 14px;
  background: linear-gradient(180deg, #3A4346 0, #262D30 50%, #111618 100%);
  box-shadow: 0 16px 22px -10px rgba(0, 0, 0, .85);
}
.brama__listwa::after {
  content: ""; position: absolute; left: 50%; bottom: -8px; width: clamp(4.5rem, 12%, 6.5rem); height: 9px; transform: translateX(-50%);
  border-radius: 0 0 var(--r) var(--r);
  background: linear-gradient(180deg, #4A5457, #2A3134); box-shadow: 0 3px 6px rgba(0, 0, 0, .6);
}
.brama__stanowisko { position: relative; z-index: 1; overflow: hidden; aspect-ratio: 16 / 10; background: var(--booth-0); }
.brama__stanowisko img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.brama__stanowisko::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(rgba(11, 15, 16, .9) 0, rgba(11, 15, 16, .3) 20%, rgba(11, 15, 16, 0) 40%),
    linear-gradient(to top, var(--booth-0) 0, rgba(11, 15, 16, 0) 24%);
}
/* motion only: the lower part of the door rolls up once, when the bay scrolls into view */
.brama__rolka { display: none; }
.motion .brama__rolka {
  display: block; position: absolute; inset: 0; z-index: 1;
  background: repeating-linear-gradient(180deg, #2C3437 0, #252C2F 2.3rem, #1D2326 4.3rem, #101517 5rem);
  transform: translate3d(0, -101%, 0);
  transition: transform 1200ms var(--ease-io) 150ms;
}
.motion .brama:not(.is-in) .brama__rolka { transform: none; }

@media (min-width: 1024px) {
  .mechanika__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr;
    grid-template-areas: "head brama" "call brama";
    column-gap: clamp(3rem, 6vw, 6.5rem); row-gap: 2.75rem; align-items: start;
  }
  .brama__stanowisko { aspect-ratio: 2 / 1; }
}
@media (forced-colors: active) {
  .brama__lamela { border-bottom: 1px solid CanvasText; }
}

/* ---------- enquiry form: what the enquiry is about (radio chips) ---------- */
.rodzaj { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.rodzaj > legend { padding: 0; margin-bottom: .6rem; }
.rodzaj__chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.rodzaj .field__error { margin-top: .5rem; }
.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .45rem .95rem .45rem .8rem;
  border: 1px solid rgba(206, 222, 226, .58); border-radius: var(--r); background: var(--booth-0);
  font-weight: 700; font-size: 1rem; line-height: 1.15; color: var(--text-2);
  transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
}
.chip span::before {
  content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid rgba(206, 222, 226, .7);
  transition: border-color 200ms ease, background-color 200ms ease;
}
.chip input:checked + span { color: var(--text); border-color: var(--lakier); background: rgba(159, 194, 173, .12); }
.chip input:checked + span::before { border-color: var(--lakier); background: var(--lakier); box-shadow: inset 0 0 0 3px var(--booth-0); }
.chip input:focus-visible + span { outline: 2px solid var(--lakier); outline-offset: 3px; }
.chip:active span { transform: scale(.97); }
.rodzaj[aria-invalid="true"] .chip span { border-color: var(--danger); }
@media (hover: hover) and (pointer: fine) {
  .chip:hover span { border-color: rgba(206, 222, 226, .9); color: var(--text); }
  .chip:hover input:checked + span { border-color: var(--lakier-hi); }
}
@media (forced-colors: active) {
  .chip input:checked + span { border-width: 2px; }
  .chip input:checked + span::before { background: Highlight; border-color: Highlight; }
}
@media (prefers-reduced-motion: reduce) {
  .chip span { transition-duration: .01ms; }
}
@media (min-width: 560px) {
  .rodzaj__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chip { display: flex; }
  .chip span { flex: 1; }
}

/* ---------- zgoda na statystyki (baner, tylko gdy podano identyfikator GA4) ---------- */
.zgoda {
  position: fixed; z-index: 60; left: 1rem; right: 1rem; bottom: 1rem;
  max-width: 40rem; margin-inline: auto; padding: 1.1rem 1.2rem 1.2rem;
  background: var(--booth-1, #11171a); border: 1px solid var(--line-2); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5); color: var(--text);
}
@media (min-width: 720px) { .zgoda { left: auto; right: 1.5rem; bottom: 1.5rem; } }
.zgoda__h { font-family: var(--f-display); font-size: 1.15rem; letter-spacing: .01em; margin-bottom: .35rem; }
.zgoda__t { color: var(--text-2); font-size: .95rem; line-height: 1.5; }
.zgoda__akcje { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.zgoda .btn { flex: 1 1 auto; justify-content: center; }
/* Na telefonie pasek akcji siedzi na dole ekranu: baner staje nad nim, nie na nim. */
@media (max-width: 719px) {
  .zgoda { bottom: calc(1rem + env(safe-area-inset-bottom)); }
  .akcje-on .zgoda { bottom: calc(5.2rem + env(safe-area-inset-bottom)); }
}