/* ============================================================
   Katalog produktów - plansze produktowe
   Dwa układy: .board--bolek (układ A) i .board--tola (układ B)

   Cała plansza jest skalowana proporcjonalnie:
   --px = 1 piksel projektu (plansza projektowana w siatce 1800 x 1270 px)
   Dzięki temu plansza wygląda identycznie na monitorze 24" i na laptopie.
   ============================================================ */

* { box-sizing: border-box; }

body {
    margin: 0;
    background: #fff;
    color: #222;
    font-family: 'Source Sans 3', 'Segoe UI', Frutiger, 'Myriad Pro', Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

/* ------------------------------------------------------------
   Kontener planszy
   ------------------------------------------------------------ */
.plansza {
    container-type: inline-size;
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
}

.board {
    position: relative;
    width: 100%;
    aspect-ratio: 1800 / 1270;
    --px: 0.05556cqw;          /* 1 px projektu */
    overflow: hidden;
    background: #fff;
}

/* ------------------------------------------------------------
   Elementy wspólne
   ------------------------------------------------------------ */

/* nagłówek - kolorowy pas z kategorią i nazwą produktu */
.pl-head {
    position: absolute;
    display: flex;
    align-items: center;
    background: var(--theme);
    color: #fff;
    z-index: 5;
}
.pl-kat   { font-weight: 300; letter-spacing: .01em; white-space: nowrap; }
.pl-title { margin: 0; font-weight: 300; line-height: 1; letter-spacing: .005em; white-space: nowrap; }

/* pionowa nazwa produktu w kolorze planszy */
.pl-brand {
    position: absolute;
    writing-mode: vertical-rl;
    font-weight: 300;
    line-height: 1.3;
    color: var(--theme);
    letter-spacing: .01em;
    z-index: 3;
}

/* logo w nagłówku (opcjonalne) */
.pl-logo { position: absolute; z-index: 6; }
.pl-logo img { width: 100%; height: 100%; object-fit: contain; }

/* zdjęcia w stałych miejscach planszy */
.ph { position: absolute; margin: 0; overflow: hidden; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph--contain img { object-fit: contain; object-position: center; }

/* placeholder - używany tylko w podglądzie układu */
.ph-empty {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center; text-align: center;
    background: #eef1f4; border: 1px dashed #cbd4dc; color: #8c9aa5;
    font-size: calc(20 * var(--px)); padding: calc(10 * var(--px)); line-height: 1.3;
}

/* warianty produktu (zdjęcie + zdjęcie + opis) */
.pl-varianty { position: absolute; display: flex; flex-direction: column; }
.wariant     { display: grid; align-items: center; }
.w-foto      { display: flex; align-items: center; justify-content: center; height: 100%; }
.w-foto img  { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.wariant--single .w-foto { grid-column: 2; }

.w-opis  { position: relative; }
.w-opis .dot {
    position: absolute; left: 0;
    width: calc(12 * var(--px)); height: calc(12 * var(--px));
    top: calc(9 * var(--px));
    border-radius: 50%; background: var(--theme);
}
.w-tytul { margin: 0; font-weight: 400; color: #232323; line-height: 1.35; }
.w-desc  { margin: 0; color: #555; line-height: 1.4; }

/* tekst opisowy z kropką (układ Tola) */
.pl-intro {
    position: absolute; margin: 0; color: #444; line-height: 1.45; z-index: 4;
    padding-left: calc(24 * var(--px));
}
.pl-intro .dot {
    position: absolute; left: 0; top: calc(9 * var(--px));
    width: calc(12 * var(--px)); height: calc(12 * var(--px));
    border-radius: 50%; background: var(--theme);
}

/* podpis w rogu, np. "kolorowa sklejka" (układ Bolek) */
.pl-caption {
    position: absolute; margin: 0; color: #8f8f8f; font-weight: 300; line-height: 1.25; z-index: 4;
}

/* ------------------------------------------------------------
   Paleta kolorów (stopka planszy)
   ------------------------------------------------------------ */
.pl-colors { position: absolute; z-index: 4; }
.color-group + .color-group { margin-top: calc(30 * var(--px)); }

.color-label {
    display: block; color: #7d7d7d; font-weight: 300;
    font-size: calc(19 * var(--px));
    margin-bottom: calc(12 * var(--px));
    padding-left: calc(22 * var(--px));
}
.color-row {
    display: flex; align-items: flex-start;
    border-left: 1px solid #dedede;
    padding-left: calc(22 * var(--px));
}
.swatch { display: flex; flex-direction: column; align-items: center; }
.swatch + .swatch { margin-left: calc(14 * var(--px)); }

.sw-dot {
    width: calc(52 * var(--px)); height: calc(52 * var(--px));
    border-radius: 50%; background: var(--c);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05);
}
.sw-code { margin-top: calc(9 * var(--px)); font-size: calc(17 * var(--px)); color: #8a8a8a; font-weight: 300; }

/* stelaże - próbki w formie lakierowanej rurki */
.tube-group { display: flex; position: relative; padding-bottom: calc(32 * var(--px)); }
.tube-group + .tube-group { margin-left: calc(46 * var(--px)); }
.sw-tube {
    width: calc(27 * var(--px)); height: calc(76 * var(--px));
    background: var(--c); position: relative; overflow: hidden;
}
.sw-tube::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, .40) 0%,
        rgba(255, 255, 255, .92) 13%,
        rgba(255, 255, 255, 0) 40%,
        rgba(0, 0, 0, .10) 68%,
        rgba(0, 0, 0, .42) 100%);
}
.tube-label {
    position: absolute; left: 0; bottom: 0;
    font-size: calc(17 * var(--px)); color: #8a8a8a; font-weight: 300; white-space: nowrap;
}

/* ============================================================
   UKŁAD A - "BOLEK"
   ============================================================ */
.board--bolek .pl-head {
    left: 0; top: calc(52 * var(--px));
    width: calc(858 * var(--px)); height: calc(80 * var(--px));
    padding: 0 calc(112 * var(--px)) 0 calc(52 * var(--px));
    justify-content: space-between;
}
.board--bolek .pl-kat   { font-size: calc(29 * var(--px)); }
.board--bolek .pl-title { font-size: calc(62 * var(--px)); }

.board--bolek .pl-brand { right: calc(10 * var(--px)); top: calc(22 * var(--px)); font-size: calc(94 * var(--px)); }

.board--bolek .pl-varianty {
    left: calc(145 * var(--px)); top: calc(158 * var(--px));
    width: calc(715 * var(--px)); height: calc(714 * var(--px));
    gap: calc(72 * var(--px));
}
.board--bolek .wariant {
    grid-template-columns: calc(185 * var(--px)) calc(185 * var(--px)) calc(250 * var(--px));
    gap: calc(45 * var(--px));
    min-height: calc(190 * var(--px));
}
.board--bolek .w-opis  { padding-left: calc(24 * var(--px)); }
.board--bolek .w-tytul { font-size: calc(17.5 * var(--px)); }
.board--bolek .w-desc  { font-size: calc(17.5 * var(--px)); }

.board--bolek .ph-hero    { left: calc(875 * var(--px));  top: calc(18 * var(--px));  width: calc(438 * var(--px)); height: calc(630 * var(--px)); z-index: 2; }
.board--bolek .ph-side    { left: calc(1352 * var(--px)); top: calc(126 * var(--px)); width: calc(300 * var(--px)); height: calc(444 * var(--px)); z-index: 3; }
.board--bolek .ph-feature { left: calc(852 * var(--px));  top: calc(636 * var(--px)); width: calc(440 * var(--px)); height: calc(608 * var(--px)); z-index: 2; }
.board--bolek .ph-detail  { left: calc(1300 * var(--px)); top: calc(428 * var(--px)); width: calc(500 * var(--px)); height: calc(842 * var(--px)); z-index: 1; }

.board--bolek .pl-caption { left: calc(1512 * var(--px)); top: calc(1128 * var(--px)); width: calc(270 * var(--px)); font-size: calc(35 * var(--px)); }
.board--bolek .pl-colors  { left: calc(120 * var(--px));  top: calc(950 * var(--px));  width: calc(760 * var(--px)); }

/* ============================================================
   UKŁAD B - "TOLA"
   ============================================================ */
.board--tola .pl-head {
    left: 0; top: calc(10 * var(--px));
    width: calc(1242 * var(--px)); height: calc(124 * var(--px));
    padding: 0 0 0 calc(30 * var(--px));
    gap: calc(160 * var(--px));
}
.board--tola .pl-kat   { font-size: calc(31 * var(--px)); }
.board--tola .pl-title { font-size: calc(68 * var(--px)); }

.board--tola .pl-logo  { left: calc(842 * var(--px)); top: calc(44 * var(--px)); width: calc(122 * var(--px)); height: calc(150 * var(--px)); }
.board--tola .pl-brand { right: calc(10 * var(--px)); bottom: calc(24 * var(--px)); font-size: calc(112 * var(--px)); }

.board--tola .pl-varianty {
    left: calc(105 * var(--px)); top: calc(172 * var(--px));
    width: calc(750 * var(--px)); height: calc(190 * var(--px));
    gap: calc(40 * var(--px));
}
.board--tola .wariant {
    grid-template-columns: calc(150 * var(--px)) calc(150 * var(--px)) calc(300 * var(--px));
    gap: calc(75 * var(--px));
    min-height: calc(170 * var(--px));
}
.board--tola .w-opis  { padding-left: calc(24 * var(--px)); }
.board--tola .w-tytul { font-size: calc(18 * var(--px)); }
.board--tola .w-desc  { font-size: calc(18 * var(--px)); }

.board--tola .ph-classroom { left: calc(4 * var(--px));    top: calc(404 * var(--px)); width: calc(568 * var(--px)); height: calc(418 * var(--px)); z-index: 1; }
.board--tola .ph-feature   { left: calc(616 * var(--px));  top: calc(388 * var(--px)); width: calc(310 * var(--px)); height: calc(530 * var(--px)); z-index: 2; }
.board--tola .ph-side      { left: calc(1292 * var(--px)); top: calc(142 * var(--px)); width: calc(184 * var(--px)); height: calc(252 * var(--px)); z-index: 3; }
.board--tola .ph-side2     { left: calc(1452 * var(--px)); top: calc(70 * var(--px));  width: calc(212 * var(--px)); height: calc(296 * var(--px)); z-index: 3; }
.board--tola .ph-hero      { left: calc(936 * var(--px));  top: calc(228 * var(--px)); width: calc(856 * var(--px)); height: calc(1012 * var(--px)); z-index: 1; }

.board--tola .pl-intro   { left: calc(96 * var(--px));  top: calc(836 * var(--px)); width: calc(700 * var(--px)); font-size: calc(19 * var(--px)); }
.board--tola .pl-caption { left: calc(1440 * var(--px)); top: calc(1110 * var(--px)); width: calc(280 * var(--px)); font-size: calc(33 * var(--px)); }
.board--tola .pl-colors  { left: calc(112 * var(--px)); top: calc(945 * var(--px)); width: calc(760 * var(--px)); }

/* ============================================================
   Lista produktów (strona katalogu)
   ============================================================ */
.katalog-head { max-width: 1280px; margin: 0 auto; padding: 48px 40px 0; }
.katalog-head h1 { font-weight: 300; font-size: 40px; margin: 0 0 6px; }
.katalog-head p  { color: #777; margin: 0; font-size: 16px; }

.katalog-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px; padding: 32px 40px 60px; max-width: 1280px; margin: 0 auto;
}
.katalog-card {
    display: block; text-decoration: none; color: #222;
    border-radius: 10px; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
    transition: transform .2s;
    background: #fff;
}
.katalog-card:hover { transform: translateY(-4px); }
.katalog-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.katalog-card .noimg { width: 100%; aspect-ratio: 4/3; background: #f0f3f5; }
.katalog-card-title {
    padding: 14px 18px; font-weight: 400; font-size: 20px;
    background: var(--theme); color: #fff;
}

/* ============================================================
   Telefony i tablety - plansza rozkłada się w pion
   ============================================================ */
@media (max-width: 860px) {
    .board {
        aspect-ratio: auto;
        --px: 1px;
        display: flex;
        flex-direction: column;
        overflow: visible;
        padding: 0 16px 40px;
    }
    .board > * {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
        margin-left: 0 !important;
    }

    .pl-head {
        order: 0; margin: 0 -16px 18px; padding: 14px 20px !important;
        flex-direction: column; align-items: flex-start; gap: 2px !important;
        justify-content: flex-start !important;
    }
    .pl-kat   { font-size: 15px !important; }
    .pl-title { font-size: 32px !important; }

    .pl-brand, .pl-logo { display: none; }

    .ph-hero      { order: 1; }
    .pl-varianty  { order: 2; }
    .ph-classroom { order: 3; }
    .ph-side      { order: 4; }
    .ph-side2     { order: 5; }
    .ph-feature   { order: 6; }
    .ph-detail    { order: 7; }
    .pl-intro     { order: 8; }
    .pl-caption   { order: 9; }
    .pl-colors    { order: 10; }

    .ph { margin-bottom: 14px; }
    .ph img { height: auto !important; object-fit: contain !important; }

    .pl-varianty { gap: 24px !important; margin-bottom: 18px; }
    .wariant { grid-template-columns: 1fr 1fr !important; gap: 12px !important; min-height: 0 !important; }
    .wariant--single .w-foto { grid-column: auto; }
    .w-foto { height: 160px !important; }
    .w-opis { grid-column: 1 / -1; padding-left: 20px !important; }
    .w-tytul, .w-desc { font-size: 15px !important; }
    .w-opis .dot, .pl-intro .dot { width: 9px; height: 9px; top: 7px; }

    .pl-intro   { font-size: 15px !important; padding-left: 20px !important; margin-bottom: 20px; }
    .pl-caption { font-size: 22px !important; margin-bottom: 18px; }

    .color-label { font-size: 13px !important; padding-left: 14px !important; }
    .color-row   { padding-left: 14px !important; flex-wrap: wrap; row-gap: 10px; }
    .sw-dot      { width: 34px !important; height: 34px !important; }
    .sw-code     { font-size: 11px !important; margin-top: 5px !important; }
    .sw-tube     { width: 18px !important; height: 50px !important; }
    .swatch + .swatch { margin-left: 9px !important; }
    .tube-group + .tube-group { margin-left: 26px !important; }
    .tube-label  { font-size: 11px !important; }
}

@media print {
    .board { --px: 0.05556cqw; }
    @page { size: A4 landscape; margin: 8mm; }
}