/* Redline Automotive - Placeholder Images and Assets */

/* Logo Placeholder */
.logo-img {
    width: 150px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-color), #c4c19a);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-primary);
    font-size: 1.2rem;
    color: var(--dark-color);
    font-weight: bold;
}

.logo-img::before {
    content: "Redline Auto";
    font-size: 1rem;
}

.footer-logo-img {
    width: 180px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-color), #c4c19a);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-primary);
    font-size: 1.4rem;
    color: var(--dark-color);
    font-weight: bold;
}

.footer-logo-img::before {
    content: "Redline Auto";
    font-size: 1.2rem;
}

/* Background Pattern */
body {
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(224, 221, 190, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(224, 221, 190, 0.05) 0%, transparent 50%),
        linear-gradient(135deg, rgba(1, 1, 1, 0.95) 0%, rgba(1, 1, 1, 0.98) 100%);
    background-attachment: fixed;
}

/* Hero Image Placeholder - Only applies when image fails to load */
.hero-img {
    width: 100%;
    height: 400px;
    border-radius: var(--radius-lg);
    object-fit: cover;
}

/* Placeholder styling only when image is missing/broken */
.hero-img[src=""], .hero-img:not([src]), .hero-img[src*="placeholder"] {
    background: linear-gradient(135deg, rgba(224, 221, 190, 0.2), rgba(224, 221, 190, 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--primary-color);
    opacity: 0.7;
    position: relative;
    overflow: hidden;
}

.hero-img[src=""]::before, .hero-img:not([src])::before, .hero-img[src*="placeholder"]::before {
    content: "🚗";
    animation: float 3s ease-in-out infinite;
}

.hero-img[src=""]::after, .hero-img:not([src])::after, .hero-img[src*="placeholder"]::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(224, 221, 190, 0.1), transparent);
    animation: shine 3s infinite;
}

/* About Image Placeholder - Only applies when image fails to load */
.about-img {
    width: 100%;
    height: 350px;
    border-radius: var(--radius-lg);
    object-fit: cover;
}

/* Placeholder styling only when image is missing/broken */
.about-img[src=""], .about-img:not([src]), .about-img[src*="placeholder"] {
    background: linear-gradient(135deg, rgba(224, 221, 190, 0.15), rgba(224, 221, 190, 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--primary-color);
    opacity: 0.8;
    position: relative;
}

.about-img[src=""]::before, .about-img:not([src])::before, .about-img[src*="placeholder"]::before {
    content: "🔧⚙️🛠️";
    letter-spacing: var(--spacing-md);
}

/* Story Image Placeholder - Only applies when image fails to load */
.story-img {
    width: 100%;
    height: 300px;
    border-radius: var(--radius-lg);
    object-fit: cover;
}

/* Placeholder styling only when image is missing/broken */
.story-img[src=""], .story-img:not([src]), .story-img[src*="placeholder"] {
    background: linear-gradient(135deg, rgba(224, 221, 190, 0.15), rgba(224, 221, 190, 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--primary-color);
    opacity: 0.8;
}

.story-img[src=""]::before, .story-img:not([src])::before, .story-img[src*="placeholder"]::before {
    content: "🏪";
}

/* Team Member Image Placeholders */
.member-img {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, rgba(224, 221, 190, 0.2), rgba(224, 221, 190, 0.1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--primary-color);
    margin: 0 auto var(--spacing-lg) auto;
}

.member-img[alt="John Smith"]::before {
    content: "👨‍🔧";
}

.member-img[alt="Sarah Johnson"]::before {
    content: "👩‍🔧";
}

.member-img[alt="Mike Rodriguez"]::before {
    content: "👨‍🔧";
}

/* Emergency Service Image - Only applies when image fails to load */
.emergency-img {
    width: 100%;
    height: 300px;
    border-radius: var(--radius-lg);
    object-fit: cover;
}

/* Placeholder styling only when image is missing/broken */
.emergency-img[src=""], .emergency-img:not([src]), .emergency-img[src*="placeholder"] {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.2), rgba(255, 107, 107, 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #ff6b6b;
    opacity: 0.8;
}

.emergency-img[src=""]::before, .emergency-img:not([src])::before, .emergency-img[src*="placeholder"]::before {
    content: "🚨🚛";
    letter-spacing: var(--spacing-md);
}

/* Blog Image Placeholders - Only applies when image fails to load */
.featured-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

/* Placeholder styling only when image is missing/broken */
.featured-img[src=""], .featured-img:not([src]), .featured-img[src*="placeholder"] {
    background: linear-gradient(135deg, rgba(224, 221, 190, 0.15), rgba(224, 221, 190, 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--primary-color);
    opacity: 0.8;
}

.featured-img[src=""]::before, .featured-img:not([src])::before, .featured-img[src*="placeholder"]::before {
    content: "❄️🚗";
    letter-spacing: var(--spacing-md);
}

.blog-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* Placeholder styling only when image is missing/broken */
.blog-img[src=""], .blog-img:not([src]), .blog-img[src*="placeholder"] {
    background: linear-gradient(135deg, rgba(224, 221, 190, 0.15), rgba(224, 221, 190, 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--primary-color);
    opacity: 0.8;
}

/* Specific placeholder content for missing blog images */
.blog-img[src=""][alt="Engine Maintenance"]::before,
.blog-img:not([src])[alt="Engine Maintenance"]::before,
.blog-img[src*="placeholder"][alt="Engine Maintenance"]::before {
    content: "🔧";
}

.blog-img[src=""][alt="Brake Safety"]::before,
.blog-img:not([src])[alt="Brake Safety"]::before,
.blog-img[src*="placeholder"][alt="Brake Safety"]::before {
    content: "🛑";
}

.blog-img[src=""][alt="Tire Care"]::before,
.blog-img:not([src])[alt="Tire Care"]::before,
.blog-img[src*="placeholder"][alt="Tire Care"]::before {
    content: "🛞";
}

.blog-img[src=""][alt="Electric Vehicles"]::before,
.blog-img:not([src])[alt="Electric Vehicles"]::before,
.blog-img[src*="placeholder"][alt="Electric Vehicles"]::before {
    content: "⚡";
}

.blog-img[src=""][alt="Fuel Efficiency"]::before,
.blog-img:not([src])[alt="Fuel Efficiency"]::before,
.blog-img[src*="placeholder"][alt="Fuel Efficiency"]::before {
    content: "⛽";
}

.blog-img[src=""][alt="Car Diagnostics"]::before,
.blog-img:not([src])[alt="Car Diagnostics"]::before,
.blog-img[src*="placeholder"][alt="Car Diagnostics"]::before {
    content: "🔍";
}

/* Animations */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes shine {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
}

/* Favicon Placeholder */
link[rel="icon"] {
    /* This would normally point to an actual favicon file */
    /* For now, browsers will use the default favicon */
}

/* Loading States */
.loading-placeholder {
    background: linear-gradient(90deg, rgba(224, 221, 190, 0.1) 25%, rgba(224, 221, 190, 0.2) 50%, rgba(224, 221, 190, 0.1) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Hover Effects for Placeholders */
.hero-img:hover::before {
    animation: pulse 1s infinite;
}

.about-img:hover::before {
    animation: pulse 1s infinite;
}

.story-img:hover::before {
    animation: pulse 1s infinite;
}

.emergency-img:hover::before {
    animation: pulse 1s infinite;
}

/* Responsive Placeholder Adjustments */
@media (max-width: 768px) {
    .logo-img {
        width: 120px;
        height: 35px;
        font-size: 1rem;
    }
    
    .footer-logo-img {
        width: 150px;
        height: 40px;
        font-size: 1.2rem;
    }
    
    .hero-img {
        height: 300px;
        font-size: 3rem;
    }
    
    .about-img,
    .story-img,
    .emergency-img {
        height: 250px;
        font-size: 2.5rem;
    }
    
    .featured-img {
        height: 300px;
        font-size: 2.5rem;
    }
    
    .blog-img {
        height: 180px;
        font-size: 1.5rem;
    }
}

/* Print Styles */
@media print {
    .hero-img,
    .about-img,
    .story-img,
    .emergency-img,
    .featured-img,
    .blog-img {
        background: #f5f5f5;
        color: #333;
    }
    
    .hero-img::after {
        display: none;
    }
}