/*
Theme Name:   Jovanovic Industries – Korrekturen
Theme URI:    https://www.jovanovic-industries.de
Description:  Strukturelle Korrekturen. Farben & Schriften bleiben unverändert.
Author:       Jovanovic Industries GmbH
Author URI:   https://www.jovanovic-industries.de
Template:     jovanovic-industrial-red
Version:      1.0.0
Text Domain:  jovanovic-child
*/

/* ═══════════════════════════════════════════
   JOVANOVIC INDUSTRIES — KORREKTUREN
   Template: jovanovic-industrial-red
   Farben & Schriften: unverändert
═══════════════════════════════════════════ */

/* ── 1. Bilder: einheitliche Höhe im Leistungs-Grid ── */
#leistungen .l-card-photo img,
#leistungen .card-image img,
#leistungen .l-card img,
#leistungen .wp-post-image {
    height: 220px !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}
#leistungen .l-card {
    display: flex;
    flex-direction: column;
}
#leistungen .l-body,
#leistungen .l-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ── 2. Orange Trennlinie vor Leistungs-Grid ── */
#leistungen .l-grid,
#leistungen .leistungen-grid {
    border-top: 2px solid #e8400c;
}

/* ── 3. Leistungskarten: Bild-Zoom Transition ── */
#leistungen .l-card img {
    transition: transform 0.65s ease, filter 0.4s ease;
}
#leistungen .l-card:hover img {
    transform: scale(1.05);
}

/* ── 4. Projektphasen: Hover-Feedback ── */
.p-step,
#projekte .step-item {
    transition: background 0.22s ease;
    position: relative;
    cursor: default;
}
.p-step::before,
#projekte .step-item::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: #e8400c;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.28s ease;
}
.p-step:hover,
#projekte .step-item:hover {
    background: rgba(255,255,255,0.03);
}
.p-step:hover::before,
#projekte .step-item:hover::before {
    transform: scaleY(1);
}
.p-step:hover .p-snum {
    color: #e8400c;
    opacity: 1;
}

/* ── 5. Projektphasen: orange Trennlinie ── */
#projekte .p-layout,
#projekte .phases-layout {
    border-top: 3px solid #e8400c;
}

/* ── 6. Referenzen: Karten-Kontrast ── */
#referenzen .r-grid {
    gap: 1px;
    background: rgba(255,255,255,0.07);
}
#referenzen .r-card {
    background: #1a1a1a !important;
    transition: background 0.22s ease;
}
#referenzen .r-card:hover {
    background: #1f1f1f !important;
}

/* ── 7. Über uns: gleichmäßige Zellhöhen ── */
#ueber-uns .u-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(255,255,255,0.07);
    align-items: stretch;
}
#ueber-uns .u-cell {
    display: flex;
    flex-direction: column;
    min-height: 130px;
    transition: background 0.22s ease;
}
#ueber-uns .u-cell:hover {
    background: #1f1f1f !important;
}

/* ── 8. Kontakt: Submit-Button volle Breite ── */
#kontakt form button[type="submit"],
#kontakt form input[type="submit"] {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
}

/* ── 9. Navigation: Hover-Unterstrich ── */
#site-nav .nav-links a {
    position: relative;
    padding-bottom: 3px;
}
#site-nav .nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: #e8400c;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
#site-nav .nav-links a:hover::after {
    transform: scaleX(1);
}

/* ── 10. Section-Abstände: einheitlicher Rhythmus ── */
#leistungen,
#projekte,
#referenzen,
#karriere {
    padding-top: 5rem;
    padding-bottom: 5rem;
}
#kontakt {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
}

/* ── 11. Karriere Tags: Abstände ── */
#karriere .k-tags {
    gap: 0.65rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
}

/* ── 12. Footer: Trennlinie ── */
footer .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.07);
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

/* ── 13. Responsive ── */
@media (max-width: 768px) {
    #ueber-uns .u-grid {
        grid-template-columns: 1fr;
    }
    #leistungen,
    #projekte,
    #referenzen,
    #karriere,
    #kontakt {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
}