/* crew/crew.css */

body { overflow-x: hidden; }

/* HERO */
.crew-hero { position:relative;min-height:70vh;display:flex;align-items:flex-end;padding:0 5% 60px;overflow:hidden; }
.hero-bg-crew { position:absolute;inset:0;z-index:1;width:100%;height:100%; }
.hero-bg-crew svg { width:100%;height:100%;object-fit:cover; }
.hero-vignette { position:absolute;inset:0;z-index:2;background:linear-gradient(to top,var(--bg-void) 0%,rgba(1,3,7,.6) 50%,transparent 100%); }
.crew-hero-content { position:relative;z-index:3;max-width:700px;padding-top:80px; }
.hero-badge { display:inline-block;background:rgba(0,255,255,.05);border:1px solid rgba(0,255,255,.3);color:var(--accent);padding:6px 14px;font-family:var(--font-ui);font-size:11px;letter-spacing:5px;text-transform:uppercase;margin-bottom:16px; }
.hero-title { font-family:var(--font-display);font-size:clamp(48px,9vw,110px);line-height:.9;letter-spacing:1px;margin-bottom:14px; }
.hero-desc { font-size:16px;color:var(--text-body);line-height:1.6;max-width:500px;font-weight:300; }

/* CONTAINER */
.crew-container { padding:60px 5% 100px;max-width:1600px;margin:0 auto; }

/* CREW GRID */
.crew-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px; }

/* CREW CARD */
.crew-card {
    background:var(--bg-card);border:1px solid var(--border-subtle);
    overflow:hidden;position:relative;
    clip-path:polygon(0 12px,12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
    transition:transform .3s,border-color .3s;
}
.crew-card::after{content:'';position:absolute;top:0;right:0;width:20px;height:20px;border-top:2px solid var(--accent);border-right:2px solid var(--accent);opacity:0;transition:opacity .3s;}
.crew-card:hover{transform:translateY(-6px);border-color:rgba(0,255,255,.35);box-shadow:var(--glow-soft);}
.crew-card:hover::after{opacity:1;}
.crew-img { width:100%;height:200px;object-fit:cover;border-bottom:1px solid var(--border-subtle);display:block; }
.crew-info { padding:18px; }
.crew-car-name { font-family:var(--font-display);font-size:22px;color:var(--text-heading);margin-bottom:4px;line-height:1; }
.crew-car-model { font-family:var(--font-ui);font-size:12px;color:var(--accent);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px; }
.crew-owner-name { font-family:var(--font-ui);font-size:12px;color:var(--text-muted);letter-spacing:1px; }

/* PHOTO SLOT */
.crew-photo-slot {
    position:relative;border:2px dashed var(--border-subtle);background:var(--bg-card);
    height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:10px;cursor:pointer;overflow:hidden;transition:border-color .2s;
}
.crew-photo-slot:hover { border-color:var(--accent);background:rgba(0,255,255,.03); }
.crew-photo-slot input[type="file"] { position:absolute;inset:0;opacity:0;cursor:pointer;z-index:5; }
.crew-photo-slot .slot-icon { font-size:32px; }
.crew-photo-slot .slot-label { font-family:var(--font-ui);font-size:12px;letter-spacing:2px;color:var(--text-muted);text-transform:uppercase; }
.crew-photo-slot img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2; }
.remove-crew-photo { position:absolute;top:8px;right:8px;background:var(--accent);color:#000;border:none;width:24px;height:24px;cursor:pointer;font-size:12px;z-index:10;font-weight:bold; }

/* EMPTY STATE */
.crew-empty { grid-column:1/-1;text-align:center;padding:80px 20px;color:var(--text-muted);font-family:var(--font-ui);letter-spacing:3px;text-transform:uppercase; }

/* MOBILE */
@media (max-width:768px) {
    .crew-hero { min-height:60vh;padding:0 4% 40px; }
    .hero-title { font-size:clamp(42px,12vw,80px); }
    .crew-grid { grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px; }
    .crew-container { padding:40px 4% 60px; }
    .crew-card:hover { transform:none; }
}
@media (max-width:480px) {
    .crew-grid { grid-template-columns:1fr 1fr; }
    .crew-img { height:160px; }
}