/* =====================================================================
   FOOTER F4 "KONZOLA" (2026-09-07). Loads after poz-footer.css. The old
   .pzq-* rules stay in that file for a one-file rollback; nothing here
   depends on them. Tokens: poz-tokens.css. Colour appears ONLY where it
   means a category or a configurator (--acc set inline per item).
   ===================================================================== */

/* STACKING (2026-09-07, Sven: "broken artefacts bleeding to footer when scrolled"): sections reveal with filter: blur(), and a blurred light
   section throws a halo past its own box. The retired dark band used to absorb it; now the footer is next, so the footer paints
   in its own layer above <main> and the halo lands beneath its opaque ground. */
.pzk { position: relative; z-index: 2; isolation: isolate; }
.pzk { background: var(--poz-ink-2, #101114); border-top: 1px solid var(--poz-line-dark, #24272D); color: var(--poz-text-on-dark-2, #B3BAC5); }
.pzk__in { max-width: var(--poz-max, 1780px); margin: 0 auto; padding: clamp(36px, 3.4vw, 48px) var(--poz-gutter, clamp(20px, 3.4vw, 56px)) 22px; }
.pzk a { text-decoration: none; transition: color .28s ease, background-color .28s ease, border-color .28s ease; }

/* ---- 1 head ------------------------------------------------------- */
.pzk-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px 48px; padding-bottom: clamp(22px, 2.2vw, 30px); }
.pzk-head__l { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pzk-claim { margin: 0; font: 400 clamp(16px, 1.5vw, 21px)/1.3 var(--poz-font-display, Michroma, sans-serif); letter-spacing: -.012em; color: #FFFFFF; text-wrap: balance; }
.pzk-brands { font: 400 9px/1.6 var(--poz-font-mono, 'IBM Plex Mono', monospace); letter-spacing: .18em; text-transform: uppercase; color: #5F6772; }
.pzk-head__r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
.pzk-mail { font: 400 clamp(15px, 1.2vw, 17px)/1.2 var(--poz-font-display, Michroma, sans-serif); letter-spacing: -.01em; color: #F2F4F6; overflow-wrap: anywhere; }
.pzk-mail:hover, .pzk-mail:focus-visible { color: #FFFFFF; }
.pzk-loc { font: 400 9px/1.6 var(--poz-font-mono, 'IBM Plex Mono', monospace); letter-spacing: .18em; text-transform: uppercase; color: #5F6772; }

/* ---- 2 tiles — the eleven categories ------------------------------- */
.pzk-tiles { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 0; border: 1px solid var(--poz-line-dark, #24272D); background: var(--poz-ink-2, #101114); }
.pzk-tile {
	--acc: #8B929E;
	display: flex; flex-direction: column; justify-content: space-between; gap: 22px;
	min-height: 132px; padding: 18px 14px 16px; box-sizing: border-box;
	border-right: 1px solid var(--poz-line-dark-soft, #1E2127);
	/* F3 (Sven, 2026-09-08): the category colour is a 2 px top edge, the ground stays ink. */
	box-shadow: inset 0 2px 0 var(--acc);
	color: #FFFFFF;
}
.pzk-tile:last-child { border-right: 0; }
.pzk-tile:hover, .pzk-tile:focus-visible { background: var(--poz-ink-3, #15171B); }
.pzk-tile__n { align-self: flex-end; font: 400 9px/1 var(--poz-font-mono, 'IBM Plex Mono', monospace); letter-spacing: .12em; color: #5F6772; }
.pzk-tile__b { display: flex; flex-direction: column; gap: 5px; }
.pzk-tile__t { font: 500 12px/1.3 var(--poz-font-body, Sora, sans-serif); color: #F2F4F6; text-wrap: balance; }
.pzk-tile__s { font: 400 9.5px/1.45 var(--poz-font-mono, 'IBM Plex Mono', monospace); color: #5F6772; }

/* ---- 3 panel — Upit · Konfiguratori · Tvrtka ---------------------- */
.pzk-panel { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 27fr) minmax(0, 27fr); gap: 0; margin-top: 24px; border: 1px solid var(--poz-line-dark, #24272D); background: var(--poz-ink-2, #101114); }
.pzk-cell { display: flex; flex-direction: column; min-width: 0; padding: 30px 32px 32px; border-right: 1px solid var(--poz-line-dark-soft, #1E2127); }
.pzk-cell:last-child { border-right: 0; }
.pzk-lab { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font: 500 10px/1 var(--poz-font-body, Sora, sans-serif); letter-spacing: .2em; text-transform: uppercase; color: #8B929E; }
.pzk-lab i { display: block; width: 18px; height: 1px; background: #3D434C; flex: 0 0 auto; }
.pzk-ask__h { display: block; font: 400 clamp(18px, 1.6vw, 22px)/1.25 var(--poz-font-display, Michroma, sans-serif); letter-spacing: -.01em; color: #F2F4F6; }
.pzk-ask__p { margin: 12px 0 0; max-width: 42ch; font: 400 13.5px/1.7 var(--poz-font-body, Sora, sans-serif); color: #B3BAC5; }
.pzk-ask__f { display: flex; align-items: stretch; gap: 8px; margin-top: 22px; }
.pzk-ask__i {
	flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 16px; box-sizing: border-box;
	border: 1px solid #3D434C; border-radius: var(--poz-radius-control, 4px); background: transparent;
	font: 400 13px/1 var(--poz-font-mono, 'IBM Plex Mono', monospace); color: #F2F4F6; outline: none;
}
.pzk-ask__i::placeholder { color: #5F6772; }
.pzk-ask__i:focus { border-color: #8B929E; }
.pzk-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 12px; flex: 0 0 auto;
	height: 44px; padding: 0 22px; border: 0; border-radius: var(--poz-radius-control, 4px); background: #FFFFFF; cursor: pointer;
	font: 500 10.5px/1 var(--poz-font-body, Sora, sans-serif); letter-spacing: .13em; text-transform: uppercase; color: #101114; white-space: nowrap;
	transition: background-color .28s ease;
}
.pzk-btn i { font-style: normal; font-size: 13px; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.pzk-btn:hover, .pzk-btn:focus-visible { background: #E9ECEF; }
.pzk-btn:hover i, .pzk-btn:focus-visible i { transform: translateX(4px); }
.pzk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pzk-list li { margin: 0; }
.pzk-list a { display: block; padding: 7px 0; font: 400 13px/1.35 var(--poz-font-body, Sora, sans-serif); color: #98A0AC; }
.pzk-list a:hover, .pzk-list a:focus-visible { color: #FFFFFF; }
/* configurators: the one other place colour means something — a soft chip in the tool's category colour */
.pzk-list--tools a { --acc: #8B929E; display: flex; align-items: center; gap: 12px; }
.pzk-list--tools a::before { content: ''; display: block; width: 14px; height: 2px; background: var(--acc); flex: 0 0 auto; }

/* ---- 4 rack — the nine brands, original artwork, no filter --------- */
.pzk-rack { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 0; list-style: none; margin: 24px 0 0; padding: 0; border: 1px solid var(--poz-line-dark, #24272D); background: var(--poz-ink-2, #101114); }
.pzk-mark { display: flex; align-items: center; justify-content: center; height: 84px; padding: 0 12px; box-sizing: border-box; border-right: 1px solid var(--poz-line-dark-soft, #1E2127); }
.pzk-mark:last-child { border-right: 0; }
.pzk-mark a, .pzk-mark > span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
/* EQUALISED (2026-09-07): one box for every mark — 118 × 40 px, contain. A square mark fills the height, a wide wordmark fills
   the width, so the nine read as one row of equal weight instead of nine hand-set heights. */
.pzk-mark img { display: block; width: 100%; max-width: 118px; height: 40px; object-fit: contain; object-position: center; opacity: .92; transition: opacity .3s ease; }
.pzk-mark a:hover img, .pzk-mark a:focus-visible img { opacity: 1; }

/* ---- 5 legal ------------------------------------------------------- */
.pzk-legal { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 40px; padding-top: 22px; }
.pzk-legal__l { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; }
.pzk-lockup { display: block; flex: 0 0 auto; }
.pzk-lockup img { display: block; height: 22px; width: auto; }
.pzk-m { font: 400 9px/1.6 var(--poz-font-mono, 'IBM Plex Mono', monospace); letter-spacing: .14em; text-transform: uppercase; color: #8B929E; }
a.pzk-m:hover, a.pzk-m:focus-visible, .pzk-parent:hover .pzk-m { color: #FFFFFF; }
.pzk-parent { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.pzk-parent img { display: block; height: 21px; width: auto; opacity: .72; transition: opacity .3s ease; }
.pzk-parent:hover img { opacity: 1; }

/* ---- responsive ---------------------------------------------------- */
@media (max-width: 1280px) {
	.pzk-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.pzk-tile { border-bottom: 1px solid var(--poz-line-dark-soft, #1E2127); }
	.pzk-tile:nth-child(6n) { border-right: 0; }
	.pzk-tile:last-child { border-right: 1px solid var(--poz-line-dark-soft, #1E2127); }
	.pzk-tile:nth-last-child(-n+5) { border-bottom: 0; }
	.pzk-rack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pzk-mark { border-bottom: 1px solid var(--poz-line-dark-soft, #1E2127); }
	.pzk-mark:nth-child(3n) { border-right: 0; }
	.pzk-mark:nth-last-child(-n+3) { border-bottom: 0; }
}
@media (max-width: 900px) {
	.pzk-head__r { align-items: flex-start; }
	.pzk-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pzk-tile:nth-child(6n) { border-right: 1px solid var(--poz-line-dark-soft, #1E2127); }
	.pzk-tile:nth-child(3n) { border-right: 0; }
	.pzk-tile:nth-last-child(-n+5) { border-bottom: 1px solid var(--poz-line-dark-soft, #1E2127); }
	.pzk-tile:nth-last-child(-n+2) { border-bottom: 0; }
	.pzk-panel { grid-template-columns: minmax(0, 1fr); }
	.pzk-cell { border-right: 0; border-bottom: 1px solid var(--poz-line-dark-soft, #1E2127); padding: 24px 22px 26px; }
	.pzk-cell:last-child { border-bottom: 0; }
	.pzk__in { padding-bottom: 96px; }   /* the floating button covers the last row on narrow screens */
}
@media (max-width: 600px) {
	.pzk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pzk-tile:nth-child(3n) { border-right: 1px solid var(--poz-line-dark-soft, #1E2127); }
	.pzk-tile:nth-child(2n) { border-right: 0; }
	.pzk-tile:nth-last-child(-n+2) { border-bottom: 1px solid var(--poz-line-dark-soft, #1E2127); }
	.pzk-tile:last-child { border-bottom: 0; }
	.pzk-ask__f { flex-direction: column; }
	.pzk-rack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pzk-mark:nth-child(3n) { border-right: 1px solid var(--poz-line-dark-soft, #1E2127); }
	.pzk-mark:nth-child(2n) { border-right: 0; }
	.pzk-mark:nth-last-child(-n+3) { border-bottom: 1px solid var(--poz-line-dark-soft, #1E2127); }
	.pzk-mark:last-child { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.pzk a, .pzk-btn, .pzk-btn i, .pzk-mark img, .pzk-parent img { transition-duration: .01ms !important; }
	.pzk-btn:hover i { transform: none !important; }
}

/* ===== TOUCH TARGETS + READABLE LABELS ON PHONES (2026-09-10) =====
   Measured on a 375px phone: the footer's standalone links resolved to 18-32px
   tall, under the 44px a thumb needs, and the tile sub-label was set at 9.5px.
   These are all standalone controls, not links inside a sentence, so they get
   the full target. Height is added with min-height + centring rather than
   padding, so the visible rule under .pzk-mail stays tight to its text. */
@media (max-width: 600px) {
  .pzk-tile__s { font-size: 11px; }
  .pzk-list a,
  .pzk-mail,
  .pzk-m,
  .pzk-parent,
  .pzk-lockup { display: flex; align-items: center; min-height: 44px; }
}