/* styles.css — My Favorite Cars */
:root{
  --bg:#0b0b0c;
  --panel:#121214;
  --muted:#a1a1aa;
  --text:#e5e7eb;
  --accent:#6366f1;
  --border:#27272a;
  --chip:#1b1b1f;
  --chip-active:#3f3ff1;
  --fav:#ec4899;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:radial-gradient(1200px 800px at 10% -10%, #1a1a1f 0%, transparent 60%), var(--bg);
}

.container{max-width:1080px; margin:0 auto; padding:0 16px}

.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(8px);
  background:rgba(11,11,12,.65);
  border-bottom:1px solid var(--border);
  text-align: center;
}
.header-inner{padding:22px 0}
/* --- Header layout for car detail page --- */
.header-inner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 24px 0;
}

.back-btn {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--chip);
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  transition: background .2s ease;
}

.back-btn:hover {
  background: var(--accent);
  color: #fff;
}

.header-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header-logo {
  width: 80px;
  height: auto;
  margin-bottom: 10px;
}

h1 {
  margin:0 0 4px; 
  font-size:clamp(24px, 3.2vw, 36px); 
  font-weight:800; 
  letter-spacing:-.02em;
  align-items: center;
}
.tagline{margin:0 0 14px; color:var(--muted)}

.controls{display:flex; flex-wrap:wrap; gap:10px}
.control{
  padding:10px 12px; border-radius:12px; border:1px solid var(--border);
  background:#0f0f13; color:var(--text); outline:none; min-width:160px;
}
.control:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(99,102,241,.25)}

.chips{display:flex; gap:8px; flex-wrap:wrap; padding:18px 0 2px}
.chip{
  background:var(--chip); border:1px solid var(--border); color:var(--text);
  padding:8px 12px; border-radius:999px; cursor:pointer; font-size:14px;
}
.chip.active{background:var(--accent); border-color:var(--accent)}

.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; padding:18px 0 34px}

.card{background:var(--panel); border:1px solid var(--border); border-radius:18px; overflow:hidden; box-shadow:var(--shadow);}
.card-media{position:relative; aspect-ratio:16/9; background:#0e0e11}
.card-img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease}
.card:hover .card-img{transform:scale(1.02)}
.fav-btn{
  position:absolute; right:10px; top:10px; padding:6px 10px; font-weight:600; font-size:12px;
  background:rgba(0,0,0,.55); border:1px solid var(--border); color:var(--text); border-radius:999px; cursor:pointer;
}
.fav-btn.active{background:var(--fav); border-color:var(--fav)}

.card-body{padding:14px}
.card-top{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px}
.card-title{margin:0; font-size:18px; font-weight:700}
.card-title .muted{color:var(--muted); font-weight:600}
.card-desc{margin:6px 0 12px; color:#c9cad1; font-size:14px; line-height:1.4}
.card-meta{display:flex; justify-content:space-between; gap:8px; color:#d4d4d8; font-size:14px}
.pill{background:#101014; border:1px solid var(--border); padding:6px 10px; border-radius:999px}
.year{color:#c4c4cf}

.site-footer{border-top:1px solid var(--border);}
.footer-inner{padding:18px 0 36px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between}
code{background:#101014; padding:2px 6px; border-radius:6px; border:1px solid var(--border)}

/* Small screens */
@media (max-width:480px){
  .control{min-width:unset; flex:1}
  .card-meta{flex-direction:column; align-items:flex-start}
}
a {
  color: inherit;
  text-decoration: none;
}
a { color: inherit; text-decoration: none; }

.section { margin: 24px 0 }
.section h2 { margin: 0 0 10px; font-size: 18px; letter-spacing: -.01em }

.specs-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.specs-grid .spec {
  background: #101014; border:1px solid var(--border); border-radius:12px;
  padding:10px 12px; font-size:14px; color:var(--text);
}
.spec .k { display:block; color:var(--muted); font-weight:600; margin-bottom:4px }
.spec .v { display:block }

.gallery-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.gallery-grid img { width:100%; height:160px; object-fit:cover; border-radius:12px; border:1px solid var(--border) }

.video-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; border:1px solid var(--border) }
.video-wrap iframe { position: absolute; top:0; left:0; width:100%; height:100% }