/* =============================================
   PROJECTS PAGE — Reichert-Ventures
   Style overrides for projects glass grid & layouts
   ============================================= */

/* Allow smooth scrolling on the projects showcase */
.landing-overlay {
    position: relative;
    z-index: 2;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden !important; /* Block all horizontal scrolling completely */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2vh;
    padding: 0 4vw 1.5vh !important; /* Top padding is 0 to make header flush! */
}

/* --- Projects Header Panel: Gray glass container covering the entire header group --- */
.projects-header-panel {
    width: calc(100% + 2vw) !important; /* Scrollbar-aware dynamic width covering exactly 94% client width */
    max-width: calc(100% + 2vw) !important; 
    margin: 0 -1vw !important; /* Negative margin pulls the panel into the 4vw parent padding, letting it expand perfectly (starts at Y=3vw) */
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important; /* Vertically centers the intro bar */
    justify-content: center !important;
    padding: 2.5vh 0 !important; /* Elegant vertical breathing room inside the panel */
    background: rgba(18, 22, 36, 0.65) !important; /* Premium semi-transparent gray glass background */
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-top: none !important;
    border-radius: 0 0 2vw 2vw !important; /* Rounded bottom corners matching pixelatelier topbar! */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    flex-shrink: 0 !important;
    z-index: 10 !important;
}

/* --- Detached Left-Aligned Header Logo inside Panel --- */
.landing-header {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important; /* Perfectly centered vertically inside the gray glass panel! */
    left: 1.2vw !important; /* Starts exactly at Y=4.2vw on the screen, matching news ticker badge start! */
    z-index: 12 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

.header-logo-link {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Visual centering restored! */
    text-decoration: none !important;
    gap: clamp(4px, 0.8vh, 10px) !important;
}

.landing-logo {
    width: clamp(40px, 4.5vw, 55px) !important;
    height: clamp(40px, 4.5vw, 55px) !important;
    animation: logoGlow 12s infinite alternate ease-in-out !important;
    margin-bottom: 0 !important;
}

/* Scaled down RV Typography and Subtitle under Logo */
.landing-header .rv-logo-fader {
    position: relative !important;
    height: clamp(10px, 1.2vw, 15px) !important;
    margin: 0 auto !important; /* Visual centering restored! */
    display: flex !important;
    justify-content: center !important; /* Visual centering restored! */
    width: 100% !important;
}

.landing-header .fader-img {
    height: 100% !important;
    width: auto !important;
    object-fit: contain !important;
}

.landing-header .fader-img.layer {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important; /* Visual centering restored! */
    transform: translateX(-50%) !important; /* Visual centering restored! */
    opacity: 0 !important;
}

.landing-header .landing-subtitle {
    font-size: clamp(0.42rem, 0.5vw, 0.58rem) !important;
    color: var(--weiß) !important;
    letter-spacing: 0.25em !important;
    text-align: center !important; /* Visual centering restored! */
    margin-right: -0.25em !important; /* Optical centering spacer restored! */
    white-space: nowrap !important;
    opacity: 0.8 !important;
}

/* --- Centered Transparent Non-Boxed Intro Bar inside Panel --- */
.projects-intro-bar {
    width: 100% !important;
    max-width: 100% !important; /* Spans the full remaining width of the z-panel beautifully */
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important; /* Vertically centers the icon and text inside */
    justify-content: flex-start !important; /* Left-aligned inside remaining space for spacious aesthetic */
    gap: 24px !important;
    padding: 0 4vw 0 280px !important; /* 280px left padding guarantees absolute clearance of the absolute logo area, preventing overlaps */
    background: transparent !important; /* Transparent since panel provides the background! */
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    flex-shrink: 0 !important;
}

.intro-icon {
    height: clamp(65px, 7.5vw, 90px) !important; /* Enlarged slightly for prominent yet elegant scale */
    width: auto !important; /* Keeps proportional width */
    object-fit: contain !important;
    filter: drop-shadow(0 0 14px rgba(144, 194, 38, 0.3)) !important;
    flex-shrink: 0 !important;
}

.intro-text-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 6px !important;
    text-align: left !important;
}

.intro-title {
    font-size: clamp(1.45rem, 1.95vw, 2.2rem) !important;
    font-weight: bold !important;
    color: var(--grün) !important;
    margin: 0 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.02em !important;
}

.intro-desc {
    font-size: clamp(0.78rem, 0.88vw, 0.95rem) !important;
    line-height: 1.5 !important;
    color: var(--weiß) !important;
    margin: 0 !important;
    text-align: left !important;
}

/* --- Centered Slim News Line under Intro Bar with Glowing Dot --- */
.projects-news-section {
    width: 100% !important;
    max-width: 100% !important; /* Spans the full parent content area width (leaving exactly 4vw margins) */
    margin: 2vh 0 0 0 !important; /* Elegant spacing directly below the transparent intro bar, flush left */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Align content to the left margin */
    align-self: flex-start !important; /* Force explicit left-alignment under R logo area on all viewports */
    padding: 8px 0 !important; /* Zero padding to touch the R-logo line perfectly */
    background: transparent !important; /* Strip background completely */
    border: none !important; /* Strip the thick borders */
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    flex-shrink: 0 !important;
}

.news-dot {
    width: 8px !important;
    height: 8px !important;
    background-color: var(--grün) !important; /* Green dot by default */
    border-radius: 50% !important;
    box-shadow: 0 0 10px var(--grün), 0 0 20px var(--grün) !important;
    animation: newsDotPulse 2s infinite ease-in-out !important;
    margin-right: 12px !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

@keyframes newsDotPulse {
    0%, 100% {
        background-color: var(--grün) !important;
        box-shadow: 0 0 10px var(--grün), 0 0 20px var(--grün) !important;
        transform: scale(1);
    }
    50% {
        background-color: var(--orange) !important; /* Vibrant orange core on pulse */
        /* Stacked high-intensity orange and gray glows for incredible contrast and visibility */
        box-shadow: 0 0 12px var(--orange), 0 0 24px var(--orange), 0 0 38px rgba(112, 128, 144, 0.95), 0 0 52px rgba(112, 128, 144, 0.75) !important;
        transform: scale(1.55); /* Enlarged slightly more to make the breath highly noticeable */
    }
}

.news-text {
    font-size: clamp(0.78rem, 0.88vw, 0.92rem) !important; /* Visual parity with card descriptions */
    line-height: 1.55 !important;
    color: var(--weiß) !important;
    text-align: left !important; /* Left-aligned ticker matching R-logo starting line */
}

/* Brand Link Color is GREEN and transitions to ORANGE on hover */
.news-link {
    color: var(--grün) !important;
    text-decoration: none !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
}

.news-link:hover {
    color: var(--orange) !important;
}

/* --- Project Grid & Cards --- */
.projekte-main {
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: center !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: clamp(20px, 3vw, 40px) !important;
    margin: 1.5vh auto 2vh auto !important;
    width: 100% !important;
    max-width: 1450px !important; /* Slightly broader bounds for larger cards */
}

.project-card {
    width: clamp(360px, 30vw, 460px) !important; /* Up-scaled card width */
    min-height: 540px; /* Up-scaled card minimum height */
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
}

/* Thumbnail frame inside the glass card */
.project-thumb-container {
    width: 100% !important;
    height: 220px !important; /* Up-scaled thumbnail height for cinematic photography aspect ratio */
    position: relative !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}

.project-thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.project-card:hover .project-thumb {
    transform: scale(1.08) !important;
}

/* Floating badge on top of thumbnail */
.project-badge {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    background: rgba(12, 16, 28, 0.75) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--grün) !important;
    font-size: 0.7rem !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    z-index: 5 !important;
    font-weight: bold !important;
    letter-spacing: 0.02em !important;
    transition: all 0.45s ease !important;
}

/* NO CHANGE on hover for the category badge color */
.project-card:hover .project-badge {
    color: var(--grün) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.project-title {
    font-size: clamp(1.1rem, 1.5vw, 1.35rem) !important;
    font-weight: bold !important;
    text-align: center !important;
    color: var(--grün) !important;
    line-height: 1.3 !important;
}

.project-desc {
    font-size: clamp(0.78rem, 0.88vw, 0.92rem) !important; /* Enlarged from 0.88rem to match offers page */
    text-align: center !important;
    color: var(--weiß) !important;
    opacity: 0.95 !important; /* Increased opacity from 0.85 to fix dimmed look */
    line-height: 1.55 !important;
    flex-grow: 1 !important; /* Pushes button to bottom */
}

.disabled-card .project-title {
    color: var(--grau) !important;
}

/* Pulsing Ring adjustment for Altix icon */
.altix-ring {
    border-color: rgba(112, 128, 144, 0.35) !important;
    animation: altixPulse 4.5s infinite ease-in-out !important;
}

@keyframes altixPulse {
    0%, 100% { border-color: rgba(112, 128, 144, 0.35); }
    50% { border-color: rgba(144, 194, 38, 0.4); }
}

/* FAPA Nominee Badge Overlay styling */
.fapa-badge-overlay {
    position: absolute !important;
    bottom: 8px !important;
    left: 8px !important;
    width: clamp(55px, 8vw, 85px) !important;
    height: auto !important;
    z-index: 10 !important;
    pointer-events: none !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)) !important;
    transition: transform 0.45s ease !important;
}

.project-card:hover .fapa-badge-overlay {
    transform: scale(1.05) !important;
}

/* --- Perfect Footer Parity --- */
.landing-footer {
    width: 100% !important;
    max-width: none !important;
    margin: 4vh auto 0 auto !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 1vw !important;
}

.footer-meta {
    grid-column: 1 !important;
    display: flex !important;
    gap: clamp(8px, 1.2vw, 20px) !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
}

.footer-copyright {
    grid-column: 2 !important;
    text-align: center !important;
}

/* Mobile overrides */
@media (max-width: 768px) {
    .landing-overlay {
        padding: 1.5vh 4vw;
        gap: 15px;
    }

    .projects-header-panel {
        width: calc(100% + 8vw) !important;
        margin: -1.5vh -4vw 15px -4vw !important;
        background: rgba(18, 22, 36, 0.65) !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 24px 16px 16px 16px !important;
        z-index: 10 !important;
        box-sizing: border-box !important;
    }
    
    .landing-header {
        position: static !important; /* Reverts from absolute to static centered layout on mobile */
        transform: none !important; /* Clear desktop vertical centering transform */
        margin: 0 auto 10px auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .header-logo-link {
        align-items: center !important; /* Centers branding elements on mobile */
    }

    .landing-header .rv-logo-fader {
        margin: 0 auto !important;
        justify-content: center !important;
    }
    
    .landing-header .fader-img.layer {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    .landing-header .landing-subtitle {
        text-align: center !important;
        margin-right: -0.25em !important; /* Restore spacer for optical centering */
    }
    
    .projects-intro-bar {
        flex-direction: row !important; /* Always side-by-side row flow on mobile */
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 18px !important;
        padding: 12px 4vw !important;
        text-align: left !important;
        background: transparent !important; /* No background in mobile view */
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        min-height: auto !important; /* Reset height override on mobile */
        height: auto !important; /* Allow natural height expansion for wrapped mobile text */
    }
    
    .intro-icon {
        width: clamp(50px, 12vw, 65px) !important; /* Tidy yet prominent size on mobile */
        height: auto !important;
    }
    
    .intro-title {
        font-size: clamp(1.2rem, 3.8vw, 1.45rem) !important;
    }
    
    .intro-desc {
        font-size: clamp(0.72rem, 2.4vw, 0.85rem) !important;
        line-height: 1.4 !important;
    }
    
    .projects-news-section {
        flex-direction: row !important; /* Row flow with pulsing dot on mobile */
        align-items: flex-start !important; /* Pulse dot sits at the top line of text */
        justify-content: flex-start !important;
        gap: 10px !important;
        padding: 6px 4vw !important;
        text-align: left !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        max-width: 100% !important; /* Take full viewport width on mobile */
    }
    
    .news-dot {
        margin-top: 5px !important; /* Align dot perfectly with first line of wrapped text on mobile */
        margin-right: 10px !important;
    }
    
    .news-text {
        text-align: left !important;
        font-size: 0.88rem !important;
    }

    .projekte-main {
        flex-direction: column !important;
        align-items: center !important;
        gap: 16px !important;
    }

    .project-card {
        width: 88vw !important;
        min-height: auto !important;
        flex-direction: column !important;
        padding: 16px !important;
    }

    .project-thumb-container {
        height: 150px !important;
    }

    .project-desc {
        display: block !important;
        text-align: center !important;
    }
    
    .project-card .card-cta {
        display: inline-block !important;
        margin-top: 10px !important;
    }
    
    .landing-footer {
        padding-bottom: 40px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }
    
    .footer-meta {
        justify-content: center !important;
        width: 100% !important;
    }
}

/* --- Gastbeiträge / Publishing Notice (Style matching Bergpark Award Box) --- */
.publishing-notice {
    background-color: rgba(255, 255, 255, 0.05) !important;
    padding: clamp(16px, 3vh, 28px) !important;
    border-left: 4px solid var(--grün) !important;
    border-radius: 8px !important;
    margin: 3vh auto 2vh auto !important;
    width: 100% !important;
    max-width: 1450px !important;
    box-sizing: border-box !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    text-align: left !important;
}

.publishing-title {
    color: var(--weiß) !important;
    font-size: clamp(1.2rem, 1.5vw, 1.6rem) !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    letter-spacing: 0.02em !important;
    font-weight: bold !important;
}

.publishing-desc {
    color: rgba(240, 240, 240, 0.9) !important;
    font-size: clamp(0.9rem, 1vw, 1.05rem) !important;
    line-height: 1.65 !important;
    margin-bottom: 12px !important;
}

.publishing-list {
    margin: 12px 0 16px 0 !important;
    padding-left: 20px !important;
    color: rgba(240, 240, 240, 0.9) !important;
    list-style-type: disc !important;
}

.publishing-list li {
    margin: 8px 0 !important;
    font-size: clamp(0.85rem, 0.95vw, 1rem) !important;
    line-height: 1.55 !important;
}

.publishing-contact {
    color: rgba(240, 240, 240, 0.9) !important;
    font-size: clamp(0.9rem, 1vw, 1.05rem) !important;
    margin-bottom: 0 !important;
}