/* ===== Car Detail – Dark/Glass/Gold (fixed & responsive) ===== */
:root{
  --bg:#111;
  --panel:rgba(20,20,20,.75);
  --muted:rgba(255,255,255,.65);
  --border:rgba(255,255,255,.08);
  --border-2:rgba(255,255,255,.05);
  --gold:#f3c969;
}

*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  background:var(--bg);
  color:#fff;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height:1.6;
  padding:3rem 3rem 5rem;
}

/* ===== Container + layout ===== */
.car-detail-container{
  max-width:1500px;
  margin:80px auto 40px;
  padding:24px;
  background:var(--panel);
  border:1px solid var(--border-2);
  border-radius:1px;
  backdrop-filter:blur(8px);
  box-shadow:0 8px 20px rgba(0,0,0,.4);

  display:grid;
  /* allow tracks to shrink so they don't overlap */
  grid-template-columns:minmax(0,55%) minmax(0,45%);
  grid-template-areas:
    "gallery info"
    "more    more";
  gap:28px;
  grid-auto-flow:row;
}
.gallery      { grid-area:gallery; min-width:0; min-height:0; align-self:start; }
.car-info     { grid-area:info;    min-width:0; min-height:0; }
.more-details { grid-area:more;    width:100%; margin-top:10px; }

/* ===== Gallery ===== */
.main-image{
  width:100%;
  aspect-ratio:16/9;
  background:#0f0f0f;
  border:1px solid var(--border);
  border-radius:1px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  margin-bottom:12px;
}
.main-image img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:1px; }

/* Thumbnails */
.thumbnail-row{
  position:relative;
  display:flex;
  gap:12px;
  margin-top:16px;
  padding:6px 0 8px;
  overflow-x:auto;     /* scroll on small screens */
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}
.thumbnail{
  position:relative;
  flex:0 0 auto;
  width:120px;
  aspect-ratio:16/9;
  border-radius:1px;
  background:#0f0f0f;
  border:1px solid rgba(255,255,255,.08);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  overflow:visible;
  will-change:transform, box-shadow;
}
.thumbnail:hover{
  transform:translateY(-1px);
  border-color:rgba(243,201,105,.4);
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}
.thumbnail:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
  box-shadow:0 0 0 2px var(--gold);
  border-color:transparent;
}
.thumbnail img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:1px; }
.thumbnail.is-active{
  border:none;
  box-shadow:0 0 0 2px var(--gold), 0 0 10px rgba(243,201,105,.6);
  border-radius:1px;
}

/* ===== Info block ===== */
.car-info{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border-2);
  border-radius:1px;
  padding:14px;
  color:#fff;

  display:grid;
  grid-template-columns:1fr auto; /* title | price */
  grid-row-gap:1px;
  align-items:start;

  /* allow wrapping instead of pushing width */
  overflow-wrap:anywhere;
  word-break:break-word;
}
.car-info h1{
  grid-column:1;
  font-size:1.9rem;
  font-weight:800;
  color:var(--gold);
  margin:0;
  text-transform:capitalize;
}
.price,.sold-label{
  grid-column:2;
  justify-self:end;
  align-self:start;
  margin:0;
  white-space:nowrap;
}
.price{
  color:var(--gold);
  font-size:1.1rem;
  font-weight:800;
  background:linear-gradient(180deg,#2a2a2a,#1a1a1a);
  border:1px solid rgba(255,255,255,.06);
  padding:8px 12px;
  border-radius:3px;
  box-shadow:0 6px 14px rgba(0,0,0,.20);
}
.sold-label{
  padding:8px 12px;
  border-radius:999px;
  background:#c0372d;
  color:#fff;
  font-weight:700;
  letter-spacing:.3px;
}

/* Specs */
.specs{
  grid-column:1 / -1;
  list-style:none;
  padding:0;
  margin:8px 0 14px;
  border-top:1px solid var(--border);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr); /* safer 2 cols */
  gap:10px 26px;
}
.specs li{
  display:grid;
  grid-template-columns:46% minmax(0,54%); /* label | value can shrink */
  align-items:center;
  gap:10px;
  padding:12px 0;
  border-bottom:1px solid var(--border);
  font-variant-numeric:tabular-nums;
  font-size:.95rem;
}
.specs li strong{ color:var(--muted); font-weight:700; }
.specs li strong + *{ color:#fff; font-weight:800; }

/* Back link */
.back-link{
  grid-column:1 / -1;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
  color:var(--gold);
  font-weight:700;
  text-decoration:none;
  padding:6px 0;
  transition:color .2s ease;
}
.back-link::before{ content:"←"; opacity:.9; }
.back-link:hover{ color:#ffd882; text-decoration:underline; }

/* ===== Collapsibles ===== */
.collapsible{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:1px;
  overflow:hidden;
  margin:14px 0;
}
.collapsible__header{
  width:100%;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:transparent;
  color:var(--gold);
  font-weight:800;
  padding:14px 16px;
  border:0;
  cursor:pointer;
}
.collapsible__chev{ transition:transform .2s; opacity:.9; }
.collapsible[aria-expanded="true"] .collapsible__chev{ transform:rotate(180deg); }
.collapsible__content{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .25s ease;
}
.collapsible[aria-expanded="true"] .collapsible__content{ grid-template-rows:1fr; }
.collapsible__inner{ overflow:hidden; }
.list-clean{ list-style:none; margin:0; padding:0; }
.list-clean li{
  padding:8px 0 8px 16px;
  border-bottom:1px dashed rgba(255,255,255,.12);
}
.list-clean li:last-child{ border-bottom:0; }
.pre{ white-space:pre-line; margin:0; padding-left:16px; }

/* ===== Responsive ===== */

/* Wide tablets — keep two equal tracks that may shrink */
@media (max-width:1200px){
  .car-detail-container{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:24px;
  }
}

/* Tablets & small laptops — stack in order */
@media (max-width:1000px){
  .car-detail-container{
    grid-template-columns:1fr;
    grid-template-areas:
      "gallery"
      "info"
      "more";
    gap:20px;
    padding:16px;
    margin:40px auto 28px;
    max-width:980px;
  }

  .main-image{ aspect-ratio:16 / 9; }     /* no height caps */
  .thumbnail-row{ gap:10px; padding-top:4px; padding-bottom:6px; }
  .thumbnail{ width:110px; }

  .car-info{
    grid-template-columns:1fr;             /* title above price */
    padding:16px;
    gap: 0;
  }
  .car-info h1{
    font-size:clamp(1.4rem, 3.5vw, 1.9rem);
    margin-bottom:4px;
  }
  .price,.sold-label{
    justify-self:start;
    margin:4px 0 8px;
    font-size:1rem;
    padding:6px 10px;
  }

  .specs{
    grid-template-columns:1fr;
    gap:4px 0;
    margin:6px 0 10px;
  }
  .specs li{
    grid-template-columns:42% minmax(0,58%);
    padding:10px 0;
  }
  .back-link{ margin-top:4px; }
}

/* Phones */
@media (max-width:400px){
  body{ padding:1.5rem 0.75rem 2.5rem; }

  .car-detail-container{
    padding:14px;
    gap:16px;
    margin:28px auto 20px;
    margin-top: 7rem;
  }

  .thumbnail{ width:96px; }

  .price,.sold-label{
    font-size:.95rem;
    padding:6px 10px;
    border-radius:4px;
  }

  .list-clean li,
  .pre{ padding-left:12px; }
}
@media (min-width: 400px) and (max-width:800px){
  body{ padding:1.5rem 0.75rem 2.5rem; }

  .car-detail-container{
    padding:14px;
    gap:16px;
    margin:28px auto 20px;
    margin-top: 3rem;
  }

  .thumbnail{ width:96px; }

  .price,.sold-label{
    font-size:.95rem;
    padding:6px 10px;
    border-radius:4px;
  }

  .list-clean li,
  .pre{ padding-left:12px; }
}







.car-info .specs{
  margin-left: -16px;   /* compenseer padding van .car-info */
  margin-right: -16px;  /* zelfde rechts */
  padding: 0 16px;      /* behoud een klein beetje lucht */
}


.car-info .specs li{
  display: flex;
  justify-content: space-between;   /* label links, value rechts */
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

/* Label links */
.car-info .specs li strong{
  color: var(--muted);
  font-weight: 700;
  flex: 0 0 auto;
}

/* Value rechts */
.car-info .specs li strong + *{
  flex: 1;                /* pakt de hele overgebleven ruimte */
  text-align: right;      /* helemaal rechts in de rij */
  color: #fff;
  font-weight: 800;
}








.zoom-btn{
  position:absolute; bottom:10px; right:10px;
  width:40px; height:40px; border:none; border-radius:50%;
  background:rgba(0,0,0,.6); color:#fff; font-size:20px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
}
.zoom-btn:hover{ background:rgba(0,0,0,.8); }

.lightbox{
  display:none; position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.9); justify-content:center; align-items:center;
}
.lightbox.show{ display:flex; }
.lightbox-content{
  max-width:90%; max-height:90%;
  border-radius:8px; box-shadow:0 0 20px rgba(0,0,0,.5);
}
.lightbox-close{
  position:absolute; top:20px; right:30px;
  color:#fff; font-size:40px; font-weight:700; cursor:pointer;
}