/* ===== ZMIENNE & RESET ===== */
:root {
  --primary: #425b6b;
  --secondary: #6d7f8c;
  --gray: #f5f7f8;
}

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: "Poppins", sans-serif;
  color: #4a606d;
  line-height: 1.6;
  background: #cfd3d6;            /* szare paski po bokach */
}

/* ===== WRAPPER ===== */
.page {
  max-width: 1120px;
  margin: 0 auto;
  background: #fff;
  padding: 2.5em 0;
}

/* ===== UTILITY ===== */
.container { width: 90%; max-width: 1120px; margin: 0 auto; }
.btn {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  transition: background .2s;
}
.btn:hover { background: var(--secondary); }

/* ===== HEADER / NAV ===== */
header {
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.05);
  position: sticky; top: 0; z-index: 100;
}
header .container {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem 0;
}
.logo img { height: 40px; }

/* --- nav list --- */
.nav-list { list-style: none; display: flex; gap: 2rem; }
.nav-list a { text-decoration: none; color: var(--primary); font-weight: 600; }
.nav-list li { position: relative; }

/* strzałka */
.has-dropdown > a::after { content: "▼"; font-size: .6rem; margin-left: 4px; }

/* --- dropdowny (desktop) --- */
.dropdown, .subdropdown {
  position: absolute; left: 0; top: 100%;
  background: #fff; list-style: none;
  padding: .5rem 0;                 /* mniejszy padding */
  min-width: 240px;
  box-shadow: 0 4px 10px rgba(0,0,0,.05);
  display: none;
}
.dropdown a, .subdropdown a {
  display: block; padding: .5rem 1.25rem;  /* wygodniejszy odstęp */
  font-weight: 400; white-space: nowrap;
}
.dropdown a:hover, .subdropdown a:hover { background: var(--gray); }

.has-dropdown:hover > .dropdown { display: block; }
.has-sub:hover > .subdropdown { display: block; left: 100%; top: 0; }

/* --- burger --- */
.burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; z-index: 200; }
.burger span { width: 24px; height: 2px; background: var(--primary); transition: transform .3s, opacity .3s; }
/* animacja X */
.burger.active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.burger.active span:nth-child(2){ opacity: 0; }
.burger.active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* --- mobile nav --- */
@media (max-width: 768px) {
  .burger { display: flex; }

  .nav-list {
    position: fixed; top: 0; right: -100%;
    flex-direction: column; gap: 1rem; padding-top: 5rem;
    background: #fff; height: 100vh; width: 260px;
    transition: right .3s ease-in-out; box-shadow: -2px 0 6px rgba(0,0,0,.05);
  }
  .nav-list.open { right: 0; }

  .dropdown, .subdropdown { position: static; padding: 0; box-shadow: none; }
  .has-dropdown.open > .dropdown,
  .has-sub.open > .subdropdown { display: block; }

  .has-dropdown > a::after,
  .has-sub > a::after { content: "+"; float: right; }
}

/* ===== HERO ===== */
.hero-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; padding: 4rem 0;
}
#hero img { width: 100%; border-radius: 8px; }
#hero h1 { font-size: 2rem; color: var(--primary); }
@media (max-width: 768px){ .hero-grid { grid-template-columns: 1fr; } }

/* ===== KATEGORIE (layout „Markets”) ===== */
#categories { padding: 4rem 0; }
#categories h2 { text-align: center; font-size: 1.8rem; margin-bottom: 2rem; color: var(--primary); }

.market-list { list-style: none; display: flex; flex-direction: column; gap: 2rem; }
.market-list li { display: flex; gap: 1.5rem; align-items: flex-start; }
.market-list img { width: 175px; height: 131px; object-fit: cover; border-radius: 4px; }
.market-title { font-size: 1.1rem; font-weight: 600; color: var(--primary); text-decoration: none; }
.market-text p { margin-top: .25rem; }
@media (max-width: 600px){
  .market-list li { flex-direction: column; align-items: center; text-align: center; }
  .market-list img { width: 70%; height: auto; }
}

/* ===== ABOUT ===== */
#about { padding: 4rem 0; }
#about h2 { text-align: center; font-size: 1.8rem; margin-bottom: 2rem; color: var(--primary); }
#about p { max-width: 800px; margin: 0 auto 1.5rem; text-align: center; }

/* ===== FOOTER ===== */
footer { background: #42545c; color: #fff; padding: 3rem 0; }
.footer-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem;
  align-items: center; text-align: center;
}
.footer-col ul { list-style: none; }
.footer-col a { color: #fff; text-decoration: none; }
.site-map ul li + li { margin-top: .5rem; }

.footer-col.logo { text-align: center; }
.footer-col.logo img { height: 46px; }

@media (max-width: 768px){
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .site-map ul { margin-bottom: 1.5rem; }
  .footer-col.logo { margin: 1rem 0; }
}


/* ===== TECHNOLOGY PAGE ===== */
.tech-section img.full-width{
  max-width:100%;
  height:auto;
  display:block;
  margin:2rem auto;
}

.tech-section h2{
  margin-top:3rem;
  margin-bottom:1.5rem;
  color:var(--primary);
}

.tech-section h3{
  margin-top:2rem;
  font-size:1.2rem;
  color:var(--primary);
}

.tech-section ul{
  margin:0.75rem 0 0 1.25rem;
}

/* ===== PRODUCTS GRID ===== */
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:3rem;
  justify-items:center;
  text-align:center;
}

.product-grid img{
  width:100%;
  max-width:280px;
  height:auto;
  border-radius:4px;
}

.product-name{
  display:block;
  margin-top:1rem;
  font-weight:600;
  color:var(--primary);
  text-decoration:none;
}

.product-name:hover{ text-decoration:underline; }

/* ===== SERIES GRID (komponenty) ===== */
.series-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:2.5rem;
  justify-items:center;
  text-align:center;
}

.series-grid img{
  width:100%;
  max-width:200px;
  height:auto;
  border-radius:4px;
  max-height: 300px;
}

.series-name{
  display:block;
  margin-top:.75rem;
  font-weight:600;
  color:var(--primary);
  text-decoration:none;
}

.series-name:hover{ text-decoration:underline; }

/* ===== LUX TABLES ===== */
.lux-table{
  width:100%;
  border-collapse:collapse;
  margin:2rem 0;
  font-size:.95rem;
}

.lux-table th,
.lux-table td{
  border:1px solid #d0d4d7;
  padding:.6rem .8rem;
}

.lux-table thead th{
  background:var(--primary);
  color:#fff;
  font-weight:600;
}

.lux-table tbody tr:nth-child(even){ background:#f5f7f8; }

.note{ font-size:.9rem; }

/* specyfikacja w kartach modeli */
.product-specs{
  font-size:.9rem;
  line-height:1.4;
  margin-top:.25rem;
}

/* ===== SPEC-TABLE (karty produktu) ===== */
.spec-table{
  width:100%;
  border-collapse:collapse;
  margin:1.5rem 0 2rem;
  font-size:.95rem;
}
.spec-table th,
.spec-table td{
  border:1px solid #d0d4d7;
  padding:.55rem .7rem;
}
.spec-table thead th{
  background:var(--primary);
  color:#fff;
  font-weight:600;
}
.spec-table tbody tr:nth-child(even){ background:#f5f7f8; }

/* lista plików do pobrania */
.download-list{ list-style:none; padding-left:0; }
.download-list li+li{ margin-top:.4rem; }
.download-list a{ color:var(--primary); text-decoration:underline; }

/* przycisk (re-use .btn z bazy, tylko centrowany inline w HTML)*/
/* === new components (Foldable detail) === */
.product-detail{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:2rem;
  margin:2rem 0;
}
@media(max-width:768px){ .product-detail{grid-template-columns:1fr;} }

.gallery{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:1rem;
}
.gallery img:nth-child(1){grid-column:1;grid-row:1;}
.gallery img:nth-child(2){grid-column:1;grid-row:2;}
.gallery img:nth-child(3){grid-column:2;grid-row:1 / span 2;}

/* tabs */
.tabs{margin-top:3rem;}
.tab-nav{display:flex;flex-wrap:wrap;border-bottom:1px solid #d0d4d7;}
.tab-nav li{
  padding:.5rem 1rem;
  cursor:pointer;
  background:#f5f7f8;
  border:1px solid #d0d4d7;
  border-bottom:none;
  margin-right:.25rem;
  font-size:.9rem;
  list-style: none;
}
.tab-nav li.active{background:#fff;font-weight:600;}
.tab-content{
  display:none;
  border:1px solid #d0d4d7;
  padding:1.25rem;
  font-size:.95rem;
}
.tab-content.active{display:block;}

p {
 padding: 1em 0;;

}

 h1, h2 {
      padding: 1em 0;
    }

.tab-content {
  padding: 2em;
  line-height: 1.6;
}



/* DODATKOWE STYLE 30.08 */
/* Kafelki jak u producenta + klikany obrazek */
.products-catalog{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:2.25rem 2.5rem;
  align-items:start;
}

.product-tile{ text-align:left; }

.img-link{ display:inline-block; }

.thumb{
  display:block;
  width:100%;
  max-width:260px;
  max-height:160px;         /* <= ograniczenie wysokości */
  object-fit:contain;       /* zachowanie proporcji */
  background: none;
  border-radius:4px;
  padding:8px;
  margin:0 0 .5rem 0;
}

.product-link{
  display:inline-block;
  font-weight:600;
  color:var(--primary);
  text-decoration:underline;
  line-height:1.35;
}
.product-link:hover{ color:var(--secondary); }

@media (max-width:640px){
  .products-catalog{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
  .thumb{ max-width:100%; }
}

/* katalog produktów – układ i wyrównanie */
.products-catalog{
  display:grid;
  grid-template-columns: repeat(auto-fit, 260px);
  gap: 2.25rem 2.5rem;
  justify-content:center;          /* wyśrodkuj ostatni rząd */
}

/* każdy kafelek: pionowy stack */
.product-tile{
  width:260px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}

/* link z obrazkiem i link z nazwą MUSZĄ być blokami */
.product-tile .card,
.product-tile .product-name{
  display:block;
  width:100%;
}

/* obrazek – nie pływa, pełna szerokość, stała wysokość */
.product-tile .thumb{
  display:block;
  width:100%;
  height:160px;             /* żeby wszystkie kafle miały równy obrazek */
  max-height:160px;
  object-fit:contain;
  border:1px solid #e6ebef;
  border-radius:4px;
  padding:8px;
  margin:0 0 .5rem 0;
  float:none !important;    /* na wszelki wypadek, jeśli coś gdzieś ustawiło float */
}