/*
 Theme Name:   AutoHome Child
 Template:     twentytwentyfour
 Version:      1.0.0
*/
@import url("../twentytwentyfour/style.css");

:root{--primary:#2563eb;--primary-dark:#1e40af;--danger:#ef4444;--bg-light:#f8fafc;--bg-white:#fff;--text-dark:#1e293b;--text-gray:#64748b;--text-light:#94a3b8;--border:#e2e8f0;--radius-xl:16px;--radius-lg:12px;--radius-md:8px;--shadow-md:0 4px 6px -1px rgba(0,0,0,0.1);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1)}

.hero-section{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;padding:80px 0;text-align:center;margin-bottom:40px}
.hero-section h1{font-size:3rem;margin-bottom:1rem;color:#fff}
.hero-section p{font-size:1.25rem;opacity:0.9}

.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px;padding-bottom:15px;border-bottom:3px solid var(--primary)}
.section-title{font-size:1.75rem;color:var(--text-dark);margin:0;display:flex;align-items:center;gap:10px}
.section-title::before{content:"";width:5px;height:30px;background:var(--primary);border-radius:3px}
.section-link{color:var(--primary);font-weight:500}

.car-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:30px;margin-bottom:50px}
.car-card{background:var(--bg-white);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-md);transition:transform 0.3s,box-shadow 0.3s}
.car-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.car-card-image{position:relative;height:200px;overflow:hidden;background:linear-gradient(135deg,#f1f5f9,#e2e8f0);display:flex;align-items:center;justify-content:center}
.car-card-image img{width:100%;height:100%;object-fit:cover}
.car-placeholder{font-size:4rem}
.car-badge{position:absolute;top:15px;left:15px;background:var(--primary);color:#fff;padding:5px 12px;border-radius:20px;font-size:0.8rem;font-weight:600}
.car-card-content{padding:20px}
.car-card-brand{font-size:0.85rem;color:var(--text-gray);text-transform:uppercase;letter-spacing:1px;margin-bottom:5px}
.car-card-title{font-size:1.25rem;font-weight:700;color:var(--text-dark);margin-bottom:15px}
.car-card-params{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:15px}
.car-param{display:flex;flex-direction:column}
.car-param-label{font-size:0.75rem;color:var(--text-light);margin-bottom:3px}
.car-param-value{font-size:0.95rem;font-weight:600;color:var(--text-dark)}
.car-card-price{font-size:1.35rem;font-weight:700;color:var(--danger);padding-top:15px;border-top:1px solid var(--border)}
.car-card-footer{padding:15px 20px;background:var(--bg-light);display:flex;gap:10px}
.car-card-btn{flex:1;padding:10px 15px;border-radius:var(--radius-md);font-weight:600;text-align:center;text-decoration:none;display:inline-block}
.car-card-btn-primary{background:var(--primary);color:#fff}
.car-card-btn-primary:hover{background:var(--primary-dark);color:#fff}
.car-card-btn-secondary{background:var(--bg-white);color:var(--primary);border:2px solid var(--primary)}
.car-card-btn-secondary:hover{background:var(--primary);color:#fff}

.comparison-table-wrapper{background:var(--bg-white);border-radius:var(--radius-xl);padding:30px;box-shadow:var(--shadow-md);overflow-x:auto}
.comparison-table{width:100%;border-collapse:collapse}
.comparison-table th,.comparison-table td{padding:15px;text-align:left;border-bottom:1px solid var(--border)}
.comparison-table th{background:var(--bg-light);font-weight:600}
.comparison-table td:first-child{font-weight:600;color:var(--text-gray);width:200px}

@media(max-width:768px){
.hero-section{padding:50px 0}
.hero-section h1{font-size:2rem}
.section-header{flex-direction:column;align-items:flex-start;gap:10px}
.car-grid{grid-template-columns:1fr}
}