/* ===== Gallery (Swiss Minimal: hairline list rows) ===== */
.gallery-section{padding:2rem 2rem 4rem}

/* Section title */
.section-title{
  font-family:'Inter',sans-serif;font-weight:600;
  font-size:.78rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.24em;
  margin-bottom:1.2rem;display:flex;align-items:center;gap:.8rem;
}
.section-title::before{
  content:'';width:1.6rem;height:1px;background:var(--border-strong);
}

/* Gallery list */
.gallery{
  display:block;
  max-width:900px;
  margin:0 auto;
  padding:0 2rem;
}

/* ===== List row card ===== */
.card{
  background:transparent;border:none;border-bottom:1px solid var(--border);
  border-radius:0;overflow:visible;cursor:pointer;transition:var(--transition);
  position:relative;display:flex;align-items:center;gap:1.4rem;
  padding:1.1rem 0;
}
.card:hover{transform:none;box-shadow:none}
.card:hover .card-title{color:var(--text)}
.card::after{content:none}

/* Thumbnail */
.card-image{
  position:relative;width:120px;height:80px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-dim);border-radius:var(--radius);overflow:hidden;
}
.card-image img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.02);transition:filter .3s ease}
.card:hover .card-image img{filter:grayscale(0)}
.card-image .no-img{
  width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;
  background:var(--accent-dim);color:var(--text-dim);font-size:.62rem;
}
.card-image .no-img svg{width:22px;height:22px;opacity:.4}

/* Brand tag — 极简列表中并入元信息位置，改为缩略图角标 */
.card-brand{
  position:absolute;top:.35rem;left:.35rem;z-index:2;
  padding:.1rem .4rem;border-radius:var(--radius);
  background:var(--text-bright);color:var(--bg);font-size:.55rem;font-weight:600;
  letter-spacing:.04em;
}

/* Champion / Special badge — 缩略图右上角小方块 */
.card-badge{
  position:absolute;top:.35rem;right:.35rem;
  padding:.1rem .4rem;border-radius:var(--radius);font-size:.55rem;font-weight:700;
  z-index:2;letter-spacing:.06em;
}
.badge-champion{background:var(--text-bright);color:var(--bg);box-shadow:none}
.badge-champion::before{content:'★ ';font-size:.75em}
.badge-special{background:var(--bg);color:var(--text);border:1px solid var(--border-strong);box-shadow:none}

/* Card body — 文本列 */
.card-body{
  padding:0;flex:1;display:flex;flex-direction:column;gap:.2rem;min-width:0;
}

/* Status */
.card-status{
  align-self:flex-start;
  padding:0;border:none;border-radius:0;font-size:.62rem;font-weight:600;
  background:none;color:var(--text-dim);border:none;
  letter-spacing:.14em;text-transform:uppercase;
}

/* Metadata pills row — 纯文本 */
.card-meta{
  display:flex;flex-wrap:wrap;gap:.15rem .9rem;margin-top:0;
}
.meta-pill{
  padding:0;border:none;border-radius:0;font-size:.72rem;font-weight:400;
  color:var(--text-dim);background:none;
}

/* Title */
.card-title{
  font-family:'Inter',sans-serif;font-weight:600;font-size:1.02rem;
  color:var(--text);line-height:1.35;transition:var(--transition);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* Subtitle (driver / team) */
.card-subtitle{
  font-size:.78rem;color:var(--text-dim);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* Price（右侧对齐，由 gallery.js 渲染） */
.card-price{
  flex-shrink:0;font:600 .88rem 'JetBrains Mono',monospace;
  color:var(--text-bright);font-variant-numeric:tabular-nums;
}

/* Footer note — 瑞士风隐藏 */
.card-footer-note{display:none}

/* ===== Modal (Detail) ===== */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.modal-overlay.active{opacity:1;pointer-events:all}
.modal{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  max-width:640px;width:92%;max-height:92vh;overflow-y:auto;
  box-shadow:var(--shadow);transform:scale(.98);
  transition:transform .25s ease;position:relative;
}
.modal-overlay.active .modal{transform:scale(1)}
.modal-close{
  position:absolute;top:.9rem;right:.9rem;z-index:10;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  color:var(--text);cursor:pointer;font-size:1.1rem;transition:var(--transition);
}
.modal-close:hover{background:var(--text-bright);border-color:var(--text-bright);color:var(--bg)}
.modal-header{position:relative;height:280px;overflow:hidden;border-radius:var(--radius) var(--radius) 0 0;background:var(--accent-dim)}
.modal-header img{width:100%;height:100%;object-fit:contain;padding:1rem}
.modal-header .no-img-modal{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:var(--accent-dim);
  color:var(--text-dim);font-size:.9rem;
}
.modal-body{padding:1.8rem}
.modal-body h2{font-size:1.4rem;font-weight:600;color:var(--text-bright);margin-bottom:.4rem;letter-spacing:-.01em}
.modal-body .subtitle{color:var(--text-dim);font:400 .8rem 'JetBrains Mono',monospace;margin-bottom:1.4rem}
.modal-info{
  display:grid;grid-template-columns:1fr 1fr;gap:0 2rem;margin-bottom:1rem;
}
.modal-info-item{
  background:none;border:none;border-top:1px solid var(--border);
  border-radius:0;padding:.7rem 0;
  transition:var(--transition);
}
.modal-info-item:hover{border-top-color:var(--border-strong);background:none}
.modal-info-item .label{font-size:.62rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.16em}
.modal-info-item .value{font-size:.9rem;color:var(--text-bright);font-weight:500;margin-top:.3rem}
.modal-actions{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:.6rem}

/* ===== Detail Navigation Indicator ===== */
.detail-nav-indicator{
  position:absolute;top:1rem;left:50%;transform:translateX(-50%);
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  padding:.2rem .7rem;font-size:.68rem;color:var(--text-dim);z-index:10;
  pointer-events:none;
}

/* ===== Empty State ===== */
.empty-state{text-align:center;padding:4rem 2rem;color:var(--text-dim)}
.empty-state svg{width:48px;height:48px;opacity:.3;margin-bottom:1rem}
.empty-state p{font-size:.9rem}

/* ===== Footer ===== */
.footer{
  text-align:center;padding:3rem 2rem;border-top:1px solid var(--border);
  color:var(--text-dim);font-size:.75rem;
  background:var(--bg);
}
.footer span{color:var(--text)}