/* ===========================
   1) SELF-HOSTED FONTS
   =========================== */
@font-face {
  font-family: "Roboto";
  src: url("/automobili/assets/fonts/roboto/Roboto-Regular.woff2") format("woff2"),
       url("/automobili/assets/fonts/roboto/Roboto-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/automobili/assets/fonts/roboto/Roboto-Italic.woff2") format("woff2"),
       url("/automobili/assets/fonts/roboto/Roboto-Italic.woff") format("woff");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/automobili/assets/fonts/roboto/Roboto-Medium.woff2") format("woff2"),
       url("/automobili/assets/fonts/roboto/Roboto-Medium.woff") format("woff");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/automobili/assets/fonts/roboto/Roboto-Bold.woff2") format("woff2"),
       url("/automobili/assets/fonts/roboto/Roboto-Bold.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ===========================
   2) BASE / TOKENS
   =========================== */
:root{
  --font-sans: "Roboto", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --c-primary: #1a6c7a;
  --c-primary-dark: #153243;
  --c-text: #153243;
  --c-border: #eee;
  --c-border-2: #dddddd;
  --maxw: 1900px;
}

*{box-sizing:border-box}

body{
  font-family: var(--font-sans);
  margin:0;
  padding:0 16px 32px;
  max-width: var(--maxw);
  color: var(--c-text);
  line-height: 1.45;
  background:#fff;
}

header{
  padding:12px 0;
  border-bottom:1px solid var(--c-border);
  margin-bottom:16px;
}

h1{font-size:1.5rem;margin:12px 0}
h2{font-size:1.3rem;margin:12px 0}
h3{font-size:1.1rem;margin:12px 0}
a{
  color: var(--c-text);
  text-decoration: none;
  font-weight: 600;
  text-align: center;
}

.btn{
  padding: 6px 10px;
  border: none;
  border-radius: 2px;
  text-decoration: none;
  color: #fff;
  background: var(--c-primary);
  display:inline-block;
}
.btn:hover{ background: var(--c-primary-dark); color:#fff; }

button{
  background: var(--c-primary);
  color:#fff;
  padding:8px 20px;
  border:none;
  font-weight:600;
  font-size:16px;
  border-radius:2px;
  cursor:pointer;
}
button:hover{ background: var(--c-primary-dark); }

input[type="text"]{
  border:1px solid var(--c-border-2);
  padding:8px 10px;
  border-radius:2px;
  min-width: 220px;
}

select{
  border:1px solid var(--c-border-2);
  border-radius:0;
  height:40px;
  padding:0 8px;
  background:#fff;
}

.toolbar,.filters{
  display:flex; gap:8px; margin:10px 0; flex-wrap:wrap;
}
.toolbar input{flex:1; padding:6px}
.toolbar select,.toolbar button{padding:6px}

/* ===========================
   3) TABLE + RESPONSYWNOŚĆ
   =========================== */
.table-wrap{ overflow:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--c-border); border-radius:4px }
.table{
  width:100%; border-collapse:collapse; min-width:720px; /* pozwala przewijać w poziomie na mobile */
}
.table th,.table td{ border-bottom:1px solid var(--c-border); padding:10px 8px; text-align:left; white-space:nowrap }
.table th{ font-weight:700; background:#fafafa }

/* Paginacja */
nav.pager{ line-height:40px; margin-top:12px; display:flex; flex-wrap:wrap; gap:6px }
.pager .page{
  padding:6px 10px; border:1px solid #ddd; text-decoration:none; border-radius:2px; display:inline-block
}
.pager .current{ background:#222; color:#fff; border-color:#222 }

/* Detail */
.car img{ max-width:100%; display:block }
.lightbox img{ cursor:zoom-in }

/* ===========================
   4) MOBILE BREAKPOINTS
   =========================== */

/* <= 1024px: lekka typografia, większe tap targets */
@media (max-width:1024px){
  h1{ font-size:1.2rem }
  button{ font-size:15px; padding:8px 16px }
}

/* <= 768px: układ jednokolumnowy, przewijalna tabela */
@media (max-width:768px){
  body{ padding:0 12px 24px }
  header{ padding:10px 0; margin-bottom:12px }
  h1{ font-size:1.15rem; margin:10px 0 }
  .filters select, .filters input[type="text"]{ flex:1 1 48%; min-width: 0 }
  .filters button,.filters .btn{ flex:1 1 100% }
  .table{ min-width:640px }
  .btn{ padding:8px 12px }
}

/* <= 480px: kompaktowe czcionki, jeszcze większe przyciski */
@media (max-width:480px){
  h1{ font-size:1.05rem }
  body{ padding:0 10px 20px }
  input[type="text"]{ width:100%; min-width:0 }
  select{ width:100% }
  .table{ min-width:580px }
  .pager .page{ padding:8px 12px }
  .btn{ padding:10px 14px }
}