/* halezchin.pl: page CSS (only what the kit does not have: the contact rail, the 3D calculator, the QR, articles) */

/* the always-visible contact rail (owner's requirement: a strong contact bar and WhatsApp) */
.fab { position: fixed; right: 24px; bottom: 24px; z-index: 9; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.fab a { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 14px; border-radius: 999px; font: 500 16px/1 var(--font-text); text-decoration: none; transition: transform 200ms var(--ease, ease); }
.fab a:hover { transform: translateY(-2px); }
.fab a:active { transform: translateY(0) scale(.98); }
.fab__wa { background: #1f9e4f; color: #fff; }
.fab__tel { background: var(--p-ink); color: var(--p-bg); }
.fab img, .fab svg { width: 26px; height: 26px; flex: none; }
.fab__wa img { filter: brightness(0) invert(1); }
@media (max-width: 639px) { .fab { display: none; } }
.actionbar .btn { flex: 1; }
.actionbar .btn--wa { background: #1f9e4f; border-color: #1f9e4f; color: #fff; }

.nav__wa { display: inline-flex; align-items: center; gap: 8px; }
.nav__wa img { width: 20px; height: 20px; }

/* photos in open cards and splits */
#oferta .panel { --p-h: 300px; }
.panel > .frame__img, .split-photo > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split-photo { border-radius: var(--r-lg); overflow: hidden; height: min(620px, var(--ly-fit, 620px)); margin: 0; }
@media (max-width: 1023px) { .split-photo { height: auto; aspect-ratio: 4 / 3; margin-top: var(--s-7); } }
@media (max-width: 639px) { #oferta .panel { --p-h: 200px; } }
.norms .rows__name small, .rows__name small { display: block; font-weight: 400; color: var(--muted); font-size: var(--t-small); margin-top: 4px; }
.price-from { font-variant-numeric: tabular-nums; }

/* QR and contact page */
.qr { display: inline-grid; place-items: center; padding: 16px; background: #fff; border-radius: var(--r-md); width: 252px; height: 252px; }
.qr img, .qr canvas { display: block; width: 220px; height: 220px; }
.contact-big { font: 400 clamp(28px, 2.4vw + 10px, 44px)/1.1 var(--font-display); letter-spacing: var(--display-tracking); color: var(--ink); text-decoration: none; }
.contact-big:hover { text-decoration: underline; text-underline-offset: 6px; }

/* blog */
.post { max-width: 720px; }
.post h3 { font: 500 var(--t-h3)/1.25 var(--font-display); margin: var(--s-7) 0 var(--s-3); }
.post p, .post li { font-size: 18px; line-height: 1.7; color: var(--ink); }
.post ul { padding-left: 1.2em; }
.post__meta { color: var(--muted); font-size: var(--t-small); }

/* the calculator (konfigurator.html) */
.calc { display: grid; grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); gap: 24px; align-items: start; }
.calc__panel { display: grid; gap: 16px; }
.calc__step { background: #f8f5ef; border-radius: var(--r-lg); padding: 24px; }
.calc__step h2 { font: 500 20px/1.3 var(--font-text); margin: 0 0 16px; letter-spacing: -0.01em; }
.calc__step h2 span { color: var(--muted); font-weight: 400; margin-right: 8px; }
.seg { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 8px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { display: grid; place-items: center; text-align: center; min-height: 48px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--p-surface); font: 500 15px/1.25 var(--font-text); cursor: pointer; transition: background 160ms, color 160ms; }
.seg label small { display: block; font-weight: 400; font-size: 13px; color: var(--muted); }
.seg input:checked + label { background: var(--p-ink); color: var(--p-bg); }
.seg input:checked + label small { color: var(--p-inv-muted); }
.seg input:focus-visible + label { outline: 2px solid var(--action); outline-offset: 2px; }
.fld { display: grid; gap: 6px; margin-top: 14px; }
.fld > label, .fld > .fld__label { font: 500 14px/1.3 var(--font-text); display: flex; justify-content: space-between; }
.fld output { font-variant-numeric: tabular-nums; }
.fld input[type=range] { width: 100%; accent-color: var(--p-accent); height: 28px; }
.fld select, .fld input[type=number], .fld input[type=text], .fld input[type=email], .fld input[type=tel], .fld textarea { height: 48px; border-radius: var(--r-sm); border: 1px solid color-mix(in srgb, var(--p-ink) 18%, transparent); background: #fff; padding: 0 12px; font: 400 16px var(--font-text); color: var(--p-ink); }
.fld textarea { height: 96px; padding: 10px 12px; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatches input { position: absolute; opacity: 0; }
.swatches label { width: 44px; height: 44px; border-radius: 50%; background: var(--sw); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); display: grid; place-items: center; }
.swatches input:checked + label { box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), 0 0 0 3px var(--p-bg), 0 0 0 5px var(--p-ink); }
.swatches input:focus-visible + label { outline: 2px solid var(--action); outline-offset: 4px; }
.items { display: grid; gap: 8px; margin-top: 12px; }
.item { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; padding: 12px; border-radius: var(--r-sm); background: var(--p-surface); }
.item__name { font: 500 15px/1.3 var(--font-text); }
.item__row { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.item__row label { font-size: 13px; color: var(--muted); display: grid; gap: 4px; }
.item__row select, .item__row input { height: 44px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--p-ink) 18%, transparent); background: #fff; padding: 0 8px; font: 400 15px var(--font-text); width: 100%; }
.item__row input[type=range] { padding: 0; accent-color: var(--p-accent); }
.icon-btn { width: 44px; height: 44px; border-radius: 8px; border: 0; background: transparent; cursor: pointer; font-size: 22px; color: var(--muted); }
.icon-btn:hover { background: color-mix(in srgb, var(--p-ink) 8%, transparent); color: var(--p-ink); }
.add-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.chip-btn { height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--p-ink) 22%, transparent); background: transparent; font: 500 15px var(--font-text); color: var(--p-ink); cursor: pointer; }
.chip-btn:hover { background: var(--p-surface); }
.chip-btn[aria-pressed=true] { background: var(--p-ink); color: var(--p-bg); border-color: var(--p-ink); }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font: 500 15px var(--font-text); cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--p-accent); }
.hint { font-size: 14px; color: var(--muted); margin: 8px 0 0; line-height: 1.5; }

.calc__view { position: sticky; top: calc(var(--nav, 72px) + 16px); display: grid; gap: 16px; }
.viewer { position: relative; height: min(620px, calc(100svh - var(--nav, 72px) - 260px)); min-height: 420px; border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(#dfe7ec, #eef0ea); }
.viewer canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.viewer__bar { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: space-between; pointer-events: none; }
.viewer__bar > * { pointer-events: auto; }
.viewer__dims { background: rgba(255,255,255,.92); border-radius: 999px; padding: 0 16px; height: 40px; display: inline-flex; align-items: center; font: 500 14px var(--font-text); font-variant-numeric: tabular-nums; }
.viewer__tools { display: flex; gap: 8px; }
.viewer__tools button { height: 40px; padding: 0 14px; border-radius: 999px; border: 0; background: rgba(255,255,255,.92); font: 500 14px var(--font-text); cursor: pointer; color: var(--p-ink); }
.viewer__tools button[aria-pressed=true] { background: var(--p-ink); color: var(--p-bg); }
.viewer__place { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); background: var(--p-ink); color: var(--p-bg); border-radius: 999px; padding: 10px 18px; font: 500 14px var(--font-text); display: none; }
.viewer.is-placing .viewer__place { display: block; }
.viewer.is-placing canvas { cursor: crosshair; }
.viewer__fallback { position: absolute; inset: 0; display: none; place-items: center; padding: 24px; text-align: center; }
.viewer.no-gl .viewer__fallback { display: grid; }

.quote-card { background: var(--p-inv-bg); color: var(--p-inv-ink); border-radius: var(--r-lg); padding: 28px; display: grid; gap: 16px; }
.quote-card h2 { font: 400 18px/1.3 var(--font-text); margin: 0; color: var(--p-inv-muted); }
.quote-card__total { font: 400 clamp(34px, 2.6vw + 12px, 52px)/1.05 var(--font-display); letter-spacing: var(--display-tracking); font-variant-numeric: tabular-nums; }
.quote-card__per { color: var(--p-inv-muted); font-size: 15px; }
.quote-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; }
.quote-lines li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(239,233,224,.12); }
.quote-lines span:nth-child(2) { color: var(--p-inv-muted); }
.quote-lines span:last-child { font-variant-numeric: tabular-nums; text-align: right; min-width: 92px; }
.quote-card .btn-row { margin-top: 4px; }
.quote-card .btn--primary { background: #1f9e4f; border-color: #1f9e4f; color: #fff; }
.quote-card .btn--secondary { color: var(--p-inv-ink); border-color: rgba(239,233,224,.4); background: transparent; }
.quote-card__note { color: var(--p-inv-muted); font-size: 14px; line-height: 1.5; margin: 0; }
.push { background: #1f9e4f; color: #fff; border-radius: var(--r-md); padding: 16px 18px; font: 500 16px/1.45 var(--font-text); }

@media (max-width: 1023px) {
  .calc { grid-template-columns: 1fr; }
  .calc__view { position: static; order: -1; }
  .viewer { height: 56vw; min-height: 300px; }
}
@media (max-width: 639px) { .calc__step { padding: 20px; } .viewer { height: 72vw; } .quote-lines li { grid-template-columns: 1fr auto; } .quote-lines span:nth-child(2) { display: none; } }
@media (prefers-reduced-motion: reduce) { .fab a, .seg label { transition: none; } }

/* inner pages: a short head on the ground, then flowing lists (catalogue, articles, the calculator) that are
   longer than one screen by nature (owner's content outranks the one-screen rule; named in the report) */
main > .section.section--intro { height: auto; min-height: 0; padding: calc(var(--nav) + var(--s-8, 64px)) 0 var(--s-6, 32px); }
main > .section.section--intro .section-head { margin-bottom: 0; }
main > .section.section--flow { height: auto; min-height: 0; padding: var(--s-7, 48px) 0 calc(var(--s-9, 96px) + var(--bar, 0px)); }
.tiles { row-gap: 24px; }
.tile .btn-row { margin-top: auto; }
.tile { display: flex; flex-direction: column; gap: 12px; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1023px) { .tiles > .span-4, #real-grid > .span-4, .blog-grid > .span-4 { grid-column: span 6; } }
@media (max-width: 639px) { .tiles > .span-4, #real-grid > .span-4, .blog-grid > .span-4 { grid-column: 1 / -1; } }
.real .panel, .blog-grid .panel { --p-h: 240px; }
#realizacje .panel { --p-h: 300px; }
@media (max-width: 639px) { #realizacje .panel { --p-h: 180px; } }
@media (min-width: 1024px) { #faq .faq { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; } }
@media (max-width: 1023px) { main > #faq.section { height: auto; min-height: 100svh; } }
.quote-card .btn.btn--secondary, .quote-card .btn.btn--secondary:hover { color: var(--p-inv-ink); background: rgba(239,233,224,.1); border-color: rgba(239,233,224,.35); }
.quote-card .btn.btn--secondary span { color: inherit; }
/* phone: the model stays on top, the price comes after the settings */
@media (max-width: 1023px) {
  .calc__view { display: contents; }
  .viewer { order: -1; position: sticky; top: var(--nav); z-index: 2; height: 42vh; min-height: 240px; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
  .quote-card { order: 2; }
}
/* the 3D model beside the statement, whole, at its own ratio */
main > .section.statement > .wrap.grid { align-content: center; }
.statement .mo-wh__text { font-size: clamp(26px, 1.2vw + 20px, 38px); }
.model3d { margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 1678 / 826; }
.model3d img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) { .model3d { margin-top: var(--s-6); } }

.calc__reset { display: flex; justify-content: flex-end; }
/* phone: less air above the calculator, a compact tool row on the model, price tiles one per row */
@media (max-width: 639px) {
  main > .section.section--flow { padding-top: var(--s-4, 16px); }
  .viewer__bar { left: 8px; right: 8px; top: 8px; gap: 6px; }
  .viewer__dims { height: 34px; padding: 0 12px; font-size: 13px; }
  .viewer__tools { gap: 6px; }
  .viewer__tools button { height: 34px; padding: 0 10px; font-size: 13px; white-space: nowrap; }
  .viewer__tools [data-reset] { display: none; }
  .tiles > .tile:is(.span-3, .span-4) { grid-column: 1 / -1; }
}