/**
 * invisible-why-flow.css
 * Ροή & οπτική συνέχεια: "Κάποια επαγγέλματα…" + "Γιατί έχει σημασία"
 * - Μείωση box/modal feeling
 * - Typography για αφήγηση (left-align, 60ch)
 * - Connector ανάμεσα στα sections
 * - Ενοποιημένο card στυλ
 */

/* Base styles — cinematic-storytelling.css overrides για ροή Open→Highlight→Reveal→Immersive */

/* ═══════════════════════════════════════════════════════════
   2) TYPOGRAPHY — αφήγηση, όχι poster
   ═══════════════════════════════════════════════════════════ */
.invisible-professions-title {
    text-align: center;
}

.invisible-professions-intro,
.invisible-professions-main {
    text-align: left;
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.75;
}

.invisible-professions-main {
    line-height: 1.8;
}

/* Γιατί έχει σημασία — χρησιμοποιεί invisible-professions-title + gradient-text για ίδιο στυλ */

.features-subtitle {
    text-align: left;
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.75;
}

/* ═══════════════════════════════════════════════════════════
   3) ΟΠΤΙΚΗ ΣΥΝΔΕΣΗ — connector + μείωση κενού
   ═══════════════════════════════════════════════════════════ */
.invisible-professions-section {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Connector: gradient beam ανάμεσα στα δύο sections */
.invisible-professions-section::after {
    content: '';
    display: block;
    height: 1px;
    margin: 20px auto 0;
    max-width: 400px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(57, 242, 255, 0.25) 20%,
        rgba(155, 93, 255, 0.3) 50%,
        rgba(57, 242, 255, 0.25) 80%,
        transparent 100%
    );
    opacity: 0.7;
}

.features-section {
    padding: 20px 2rem 40px;
    margin-top: 0;
}

/* ═══════════════════════════════════════════════════════════
   4) FEATURES HEADER ως CARD (ίδιο στυλ)
   ═══════════════════════════════════════════════════════════ */
.features-section .features-header {
    max-width: 900px;
    margin: 0 auto;
    margin-bottom: 0;
    padding: 28px 40px 32px;
    background: linear-gradient(
        135deg,
        rgba(125, 214, 255, 0.14) 0%,
        rgba(155, 93, 255, 0.18) 50%,
        rgba(125, 214, 255, 0.12) 100%
    );
    position: relative;
    isolation: isolate;
}

/* Πιο σκούρο κουτί για καλύτερη αναγνωσιμότητα */
.features-section .features-header::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        135deg,
        rgba(8, 18, 35, 0.45) 0%,
        rgba(8, 18, 35, 0.35) 100%
    );
    pointer-events: none;
    z-index: -1;
}

.features-section .features-header::before {
    /* Αντικαθιστά το glow — πιο subtle */
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(95, 183, 255, 0.08) 0%, transparent 70%);
    filter: blur(25px);
    opacity: 0.5;
}

/* Αφαίρεση features-section::after parallax glow που μπορεί να εμπλέκεται */
.features-section::after {
    opacity: 0.03;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .invisible-professions-section {
        padding: 24px 1rem 16px;
    }

    .invisible-professions-banner {
        padding: 22px 24px 26px;
        border-radius: 16px;
    }

    .invisible-professions-intro,
    .invisible-professions-main,
    .features-subtitle {
        text-align: center;
        max-width: 100%;
    }

    .features-section {
        padding: 16px 1rem 32px;
    }

    .features-section .features-header {
        padding: 22px 24px 26px;
        border-radius: 16px;
    }
}