/* carrental/static/css/services.css */

/* ===== SERVICES HERO ===== */
.services-hero {
    height: 70vh;
    min-height: 500px;
    background-image: url('/static/images/kn.jpg'); /* speedometer close-up */
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0; /* navbar is fixed, so content starts below it; we'll add padding to body later? Actually navbar is fixed so hero needs top padding? In home, navbar is transparent and hero starts at top. We'll keep same: no extra padding, navbar overlays hero. But we want hero content below navbar. We'll add a pseudo-element for blur and overlay, and ensure text is centered with enough top margin. In home, hero has height:100vh; here we use 70vh and add some top padding via the overlay? Better to set hero to have padding-top to account for fixed navbar? Usually we add a spacer or use scroll padding. Since navbar is fixed and transparent, we can set the hero to have a top padding equal to navbar height on scroll? But for simplicity, we'll rely on the hero's content being vertically centered with the navbar overlaying it. That's fine because the navbar background is transparent at top. */
    position: relative;
    overflow: hidden;
}

/* blurred background effect using pseudo-element */
.services-hero::before {
    content: '';
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    background: inherit;
    z-index: 0;
}

.services-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.591); /* dark overlay */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.hero-content-centered {
    text-align: center;
    width: 100%;
}

.services-hero-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: clamp(3rem, 10vw, 5rem);
    letter-spacing: 0.1em;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 1.2;
    text-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

/* ===== SERVICE ROWS ===== */
.services-rows {
    padding: 80px 20px;
    max-width: 1280px;
    margin: 0 auto;
}

.service-row {
    display: grid;
    grid-template-columns: 28% 44% 28%;
    gap: 30px;
    margin-bottom: 100px;
    align-items: center;
}

.service-row:last-child {
    margin-bottom: 0;
}

/* LEFT COLUMN */
.service-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.service-index {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    color: #d9a34b; /* warm gold */
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.service-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #ffffff;
    margin: 0;
    word-break: break-word;
}

/* MIDDLE COLUMN */
.service-middle {
    color: #d9d1bd; /* muted cream */
}

.service-description {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 20px;
    color: #d9d1bd;
}

.service-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    font-size: 0.95rem;
    color: #d9d1bd;
}

.service-list li::before {
    content: "▸"; /* chevron / triangle */
    position: absolute;
    left: 0;
    color: #d9a34b; /* pale gold */
    font-size: 1.2rem;
    line-height: 1;
}

/* RIGHT COLUMN */
.service-right {
    display: flex;
    justify-content: flex-end;
}

.service-image-card {
    width: 100%;
    max-width: 300px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 30px -10px rgba(0,0,0,0.6);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    filter: grayscale(80%);
}

.service-image-card:hover {
    transform: scale(1.02);
    filter: grayscale(30%);
    box-shadow: 0 30px 40px -10px #000000cc;
}

.service-image-card img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== CTA BAND ===== */
.cta-band {
    background-image: url('/static/images/pl.jpg'); /* car interior, reuse from home */
    background-size: cover;
    background-position: center;
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    text-align: center;
}

.cta-band-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.6) 100%);
    display: flex;
    align-items: center;
}

.cta-band-content {
    width: 100%;
    color: #ffffff;
}

.cta-micro {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 300;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #d9a34b;
    margin-bottom: 15px;
}

.cta-band-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(2.2rem, 6vw, 3.5rem);
    line-height: 1.2;
    margin-bottom: 25px;
    color: #ffffff;
}

.cta-band .btn {
    background: #d9a34b;
    border-color: #d9a34b;
    color: #0b0b09;
    font-weight: 700;
    padding: 14px 48px;
    font-size: 1.1rem;
    box-shadow: 0 8px 20px rgba(217, 163, 75, 0.3);
}

.cta-band .btn:hover {
    background: #e0b155;
    border-color: #e0b155;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(217, 163, 75, 0.5);
}

.cta-band-phone {
    margin-top: 20px;
    font-size: 1.2rem;
    color: #d9d1bd;
}

.cta-band-phone a {
    color: #d9a34b;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s;
}

.cta-band-phone a:hover {
    border-bottom-color: #d9a34b;
}

/* ===== FOOTER (redesigned) ===== */
.services-footer {
    background: #000000;
    border-top: 1px solid #333;
    padding: 60px 0 0;
}

.footer-grid-services {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
    color: #d9d1bd;
}

.footer-col h4 {
    font-family: 'Playfair Display', serif;
    color: #d9a34b;
    font-size: 1.3rem;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.footer-col p, .footer-col li {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #d9d1bd;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 8px;
}

.footer-col ul li a {
    color: #d9d1bd;
    text-decoration: none;
    transition: color 0.3s, padding-left 0.3s;
    display: inline-block;
}

.footer-col ul li a:hover {
    color: #d9a34b;
    padding-left: 5px;
}

.footer-col i {
    color: #d9a34b;
    width: 22px;
    margin-right: 5px;
}

.contact-col {
    position: relative;
}

.qr-badge {
    margin-top: 20px;
    width: 70px;
    height: 70px;
    background: white;
    border-radius: 8px;
    padding: 5px;
    border: 2px solid #25D366; /* WhatsApp green */
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer-bottom {
    text-align: center;
    padding: 20px;
    border-top: 1px solid #333;
    color: #666;
    font-size: 0.9rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .service-row {
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .service-row {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 70px;
    }

    .service-left, .service-middle, .service-right {
        text-align: left;
    }

    .service-right {
        justify-content: center;
    }

    .service-image-card {
        max-width: 100%;
    }

    .footer-grid-services {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .services-hero {
        height: 50vh;
    }

    .services-hero-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 576px) {
    .service-title {
        font-size: 2rem;
    }
}