/* ============================================================
   TURNONLEARNING
   HOMEPAGE — SECTION 4
   SAFETY & TRUST / POLICIES

   Πλήρης ανανεωμένη έκδοση.

   Περιλαμβάνει:
   1. Βασική ενότητα και μεταβλητές
   2. Κυματιστή ένωση Section 3 → Section 4
   3. Κεντρική διάταξη
   4. Τίτλους και περιγραφές
   5. Κάρτες πολιτικών
   6. Εικονίδια καρτών
   7. Κεντρική φωτογραφία
   8. Decorative Icons
   9. Policy Modal
   10. Responsive Design
   11. Accessibility

   Τα κείμενα, οι εικόνες και οι πολιτικές
   διαχειρίζονται από το Django Admin.
   ============================================================ */


/* ============================================================
   1. ΒΑΣΙΚΗ ΕΝΟΤΗΤΑ
   ============================================================ */

.safety-trust-section {
    --safety-navy: #142b4d;
    --safety-blue: #3478d4;
    --safety-text: #52647a;
    --safety-border: #e3eaf3;
    --safety-background: #f7faff;

    position: relative;
    isolation: isolate;

    z-index: 3;

    width: 100%;
    min-width: 0;

    margin-top: -65px;

    padding: 155px 5% 110px;

    /*
       Το πραγματικό background μεταφέρεται
       στο ::before, ώστε η επάνω πλευρά
       να μπορεί να έχει καμπύλο περίγραμμα.
    */

    background: transparent;

    /*
       Δεν εφαρμόζουμε overflow: hidden
       ή clip-path σε ολόκληρο το section,
       επειδή μπορεί να περιέχει policy modal.
    */

    overflow: visible;
}


/* ============================================================
   2. ΚΥΜΑΤΙΣΤΗ ΕΝΩΣΗ SECTION 3 → SECTION 4

   Ένα ενιαίο επίπεδο background.
   Χωρίς δεύτερα διακοσμητικά κύματα.

   Το background ξεκινά με πραγματική
   κυματιστή καμπύλη και καλύπτει
   ολόκληρο το Section 4.
   ============================================================ */

.safety-trust-section::before {
    content: "";

    position: absolute;

    z-index: -1;

    inset: 0;

    width: 100%;
    height: 100%;

    background:
        radial-gradient(
            ellipse at 88% 18%,
            rgba(197, 223, 255, 0.42),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            var(--safety-background) 100%
        );

    /*
       Fallback για browsers χωρίς
       υποστήριξη clip-path: shape().
    */

    clip-path: polygon(
        0 42px,
        10% 29px,
        20% 22px,
        30% 29px,
        40% 43px,
        50% 48px,
        60% 36px,
        70% 22px,
        80% 24px,
        90% 35px,
        100% 40px,
        100% 100%,
        0 100%
    );

    pointer-events: none;
}


/* Ομαλή καμπύλη με CSS shape() */

@supports (clip-path: shape(from 0 0, line to 100% 0, close)) {

    .safety-trust-section::before {
        clip-path: shape(
            from 0% 42px,

            curve to 25% 28px
                with 8% 18px / 17% 18px,

            curve to 50% 42px
                with 33% 38px / 42% 55px,

            curve to 75% 25px
                with 58% 20px / 67% 15px,

            curve to 100% 40px
                with 83% 35px / 92% 52px,

            line to 100% 100%,
            line to 0% 100%,
            close
        );
    }
}


/* ============================================================
   3. BOX SIZING
   ============================================================ */

.safety-trust-section,
.safety-trust-section *,
.safety-trust-section *::before,
.safety-trust-section *::after,
.policy-modal,
.policy-modal *,
.policy-modal *::before,
.policy-modal *::after {
    box-sizing: border-box;
}


/* ============================================================
   4. ΚΕΝΤΡΙΚΗ ΔΙΑΤΑΞΗ
   ============================================================ */

.safety-trust-container {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, 0.9fr);

    align-items: center;

    gap: clamp(40px, 6vw, 100px);

    width: 100%;
    max-width: 1440px;

    margin: 0 auto;
}


/* ============================================================
   5. ΑΡΙΣΤΕΡΗ ΠΛΕΥΡΑ — ΚΕΙΜΕΝΟ
   ============================================================ */

.safety-trust-content {
    min-width: 0;
}


/* Μικρός τίτλος */

.safety-trust-eyebrow {
    display: inline-block;

    margin: 0 0 20px;

    color: var(--safety-blue);

    font-size: 0.82rem;
    font-weight: 750;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}


/* Κύριος τίτλος */

.safety-trust-title {
    max-width: 660px;

    margin: 0 0 25px;

    color: var(--safety-navy);

    font-size: clamp(2.4rem, 4vw, 4.2rem);
    font-weight: 800;

    line-height: 1.12;
    letter-spacing: -0.045em;

    text-wrap: balance;
    overflow-wrap: anywhere;
}


/* Περιγραφή */

.safety-trust-description {
    max-width: 610px;

    margin-bottom: 36px;

    color: var(--safety-text);

    font-size: clamp(1rem, 1.2vw, 1.13rem);
    line-height: 1.85;
}

.safety-trust-description p {
    margin: 0 0 12px;
}

.safety-trust-description p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   6. ΚΑΡΤΕΣ ΠΟΛΙΤΙΚΩΝ
   ============================================================ */

.safety-trust-policies {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.safety-trust-policy-card {
    display: flex;
    align-items: flex-start;

    gap: 15px;

    width: 100%;
    min-height: 132px;

    padding: 22px;

    border:
        1px solid rgba(40, 80, 130, 0.08);

    border-radius: 20px;

    background-color:
        var(--policy-background, #eaf3ff);

    color: var(--safety-navy);

    text-align: left;
    font: inherit;

    cursor: pointer;

    box-shadow:
        0 8px 28px rgba(32, 69, 115, 0.045);

    transition:
        transform 250ms ease,
        box-shadow 250ms ease,
        border-color 250ms ease;
}

.safety-trust-policy-card:hover {
    transform: translateY(-5px);

    border-color:
        var(--policy-accent, #3478d4);

    box-shadow:
        0 18px 35px rgba(32, 69, 115, 0.12);
}

.safety-trust-policy-card:focus-visible {
    outline:
        3px solid var(--policy-accent, #3478d4);

    outline-offset: 4px;
}

.safety-trust-policy-card:active {
    transform: translateY(-1px);
}


/* ============================================================
   7. ΕΙΚΟΝΙΔΙΑ ΚΑΡΤΩΝ
   ============================================================ */

.policy-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 52px;

    width: 52px;
    height: 52px;

    border-radius: 15px;

    background-color:
        rgba(255, 255, 255, 0.72);
}

.policy-card-icon img {
    display: block;

    width: 30px;
    height: 30px;

    object-fit: contain;
}


/* ============================================================
   8. ΚΕΙΜΕΝΟ ΚΑΡΤΩΝ
   ============================================================ */

.policy-card-text {
    display: flex;
    flex-direction: column;

    gap: 7px;

    flex: 1;
    min-width: 0;
}

.policy-card-title {
    color: var(--safety-navy);

    font-size: 1rem;
    font-weight: 750;

    line-height: 1.35;

    overflow-wrap: anywhere;
}

.policy-card-description {
    color: #596c82;

    font-size: 0.85rem;
    line-height: 1.6;

    overflow-wrap: anywhere;
}


/* ============================================================
   9. ΔΕΞΙΑ ΠΛΕΥΡΑ — ΦΩΤΟΓΡΑΦΙΑ
   ============================================================ */

.safety-trust-visual {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 510px;
}


/* Απαλή λάμψη πίσω από τη φωτογραφία */

.safety-trust-visual::before {
    content: "";

    position: absolute;
    z-index: -1;

    width: 94%;
    aspect-ratio: 1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(199, 225, 255, 0.65) 0%,
            rgba(223, 237, 255, 0.25) 65%,
            transparent 75%
        );
}


/* Περίβλημα φωτογραφίας */

.safety-trust-image-wrapper {
    position: relative;

    width: 100%;
    max-width: 590px;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: 42% 42% 35% 35%;

    background: #e8f2ff;

    box-shadow:
        0 25px 65px rgba(40, 87, 150, 0.13);
}


/* Φωτογραφία από Django Admin */

.safety-trust-main-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* ============================================================
   10. DECORATIVE ICONS

   Τα εικονίδια τοποθετούνται σύμφωνα
   με τις επιλογές του Django Admin.

   Χωρίς πρόσθετο λευκό background,
   border ή shadow.
   ============================================================ */

.safety-trust-floating-icon {
    position: absolute;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 76px;
    height: 76px;

    padding: 0;

    border: none;
    border-radius: 0;

    background: transparent;
    box-shadow: none;

    pointer-events: none;
}

.safety-trust-floating-icon img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    border: none;
    background: transparent;
    box-shadow: none;
}


/* ============================================================
   11. ΘΕΣΕΙΣ DECORATIVE ICONS
   ============================================================ */

.icon-position-top_left {
    top: 8%;
    left: -5%;
}

.icon-position-top_right {
    top: 5%;
    right: -4%;
}

.icon-position-middle_left {
    top: 43%;
    left: -8%;
}

.icon-position-middle_right {
    top: 43%;
    right: -7%;
}

.icon-position-bottom_left {
    bottom: 6%;
    left: -4%;
}

.icon-position-bottom_right {
    bottom: 5%;
    right: -4%;
}


/* ============================================================
   12. POLICY MODAL — ΒΑΣΙΚΗ ΔΙΑΤΑΞΗ
   ============================================================ */

.policy-modal[hidden] {
    display: none !important;
}

.policy-modal {
    position: fixed;
    inset: 0;

    z-index: 10000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    isolation: isolate;
}


/* ============================================================
   13. MODAL BACKDROP
   ============================================================ */

.policy-modal-backdrop {
    position: absolute;
    inset: 0;

    z-index: 0;

    background: rgba(12, 25, 46, 0.72);

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}


/* ============================================================
   14. MODAL DIALOG
   ============================================================ */

.policy-modal-dialog {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;

    width: min(100%, 900px);

    max-height: min(85vh, 850px);
    max-height: min(85dvh, 850px);

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.65);

    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.28);
}


/* ============================================================
   15. MODAL HEADER
   ============================================================ */

.policy-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    flex-shrink: 0;

    padding: 25px 32px;

    border-bottom:
        1px solid var(--safety-border, #e3eaf3);

    background: #ffffff;
}

.policy-modal-title {
    margin: 0;

    color: #142b4d;

    font-size: clamp(1.35rem, 2vw, 1.8rem);
    font-weight: 750;

    line-height: 1.3;
}


/* ============================================================
   16. MODAL CLOSE BUTTON
   ============================================================ */

.policy-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    padding: 0;

    border: none;
    border-radius: 50%;

    background: #edf3fa;
    color: #243d5b;

    font-size: 1.8rem;
    line-height: 1;

    cursor: pointer;

    transition:
        background-color 200ms ease,
        color 200ms ease,
        transform 200ms ease;
}

.policy-modal-close:hover {
    background: #dceaff;
    color: #1f65b5;

    transform: rotate(90deg);
}

.policy-modal-close:focus-visible {
    outline: 3px solid #3478d4;
    outline-offset: 3px;
}


/* ============================================================
   17. MODAL BODY
   ============================================================ */

.policy-modal-body {
    flex: 1;
    min-height: 0;

    overflow-y: auto;
    overscroll-behavior: contain;

    padding: 32px 38px 42px;

    color: #394d63;

    font-size: 1rem;
    line-height: 1.9;

    scrollbar-width: thin;
    scrollbar-color: #a7bdd8 #edf3fa;
}

.policy-modal-body::-webkit-scrollbar {
    width: 9px;
}

.policy-modal-body::-webkit-scrollbar-track {
    background: #edf3fa;
}

.policy-modal-body::-webkit-scrollbar-thumb {
    border: 2px solid #edf3fa;
    border-radius: 10px;

    background: #a7bdd8;
}


/* ============================================================
   18. MODAL CONTENT
   ============================================================ */

.policy-modal-content {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.policy-modal-content p {
    margin: 0 0 18px;
}

.policy-modal-content p:last-child {
    margin-bottom: 0;
}

.policy-modal-content h2,
.policy-modal-content h3,
.policy-modal-content h4 {
    margin: 28px 0 12px;

    color: #142b4d;
    line-height: 1.4;
}

.policy-modal-content ul,
.policy-modal-content ol {
    margin: 0 0 20px;
    padding-left: 28px;
}

.policy-modal-content a {
    color: #246bc4;

    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ============================================================
   19. TABLET — ΕΩΣ 1100px
   ============================================================ */

@media (max-width: 1100px) {

    .safety-trust-section {
        padding-right: 5%;
        padding-bottom: 85px;
        padding-left: 5%;
    }

    .safety-trust-container {
        gap: 45px;
    }

    .safety-trust-title {
        font-size: clamp(2.1rem, 4vw, 3.2rem);
    }

    .safety-trust-policy-card {
        padding: 18px;
        min-height: 120px;
    }

    .policy-card-icon {
        flex-basis: 44px;

        width: 44px;
        height: 44px;
    }

    .policy-card-icon img {
        width: 26px;
        height: 26px;
    }

    .safety-trust-visual {
        min-height: 420px;
    }

    .safety-trust-floating-icon {
        width: 62px;
        height: 62px;
    }
}


/* ============================================================
   20. ΜΙΚΡΑ TABLETS — ΕΩΣ 900px
   ============================================================ */

@media (max-width: 900px) {

    .safety-trust-section {
        margin-top: -45px;
        padding-top: 125px;
    }

    .safety-trust-container {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .safety-trust-content {
        max-width: 760px;
        margin: 0 auto;
    }

    .safety-trust-visual {
        width: min(100%, 570px);

        min-height: 450px;

        margin: 0 auto;
    }

    .safety-trust-image-wrapper {
        max-width: 490px;
    }
}


/* ============================================================
   21. MOBILE — ΕΩΣ 600px
   ============================================================ */

@media (max-width: 600px) {

    .safety-trust-section {
        margin-top: -30px;

        padding: 105px 20px 75px;
    }

    .safety-trust-eyebrow {
        margin-bottom: 14px;
        font-size: 0.73rem;
    }

    .safety-trust-title {
        margin-bottom: 20px;

        font-size: clamp(2rem, 8vw, 2.7rem);
    }

    .safety-trust-description {
        margin-bottom: 28px;

        font-size: 0.98rem;
        line-height: 1.75;
    }

    .safety-trust-policies {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .safety-trust-policy-card {
        min-height: 95px;

        padding: 17px;

        border-radius: 16px;
    }

    .safety-trust-visual {
        width: 100%;
        min-height: 320px;
    }

    .safety-trust-image-wrapper {
        width: 88%;
        border-radius: 35%;
    }

    .safety-trust-floating-icon {
        width: 52px;
        height: 52px;
    }

    .icon-position-top_left,
    .icon-position-middle_left,
    .icon-position-bottom_left {
        left: 0;
    }

    .icon-position-top_right,
    .icon-position-middle_right,
    .icon-position-bottom_right {
        right: 0;
    }

    /* Modal */

    .policy-modal {
        padding: 12px;
    }

    .policy-modal-dialog {
        width: 100%;

        max-height: 92vh;
        max-height: 92dvh;

        border-radius: 16px;
    }

    .policy-modal-header {
        padding: 18px 20px;
    }

    .policy-modal-title {
        font-size: 1.3rem;
    }

    .policy-modal-close {
        flex-basis: 38px;

        width: 38px;
        height: 38px;
    }

    .policy-modal-body {
        padding: 22px 20px 30px;

        font-size: 0.95rem;
        line-height: 1.8;
    }

    /*
       Μικρότερο κύμα σε κινητά.
    */

    .safety-trust-section::before {
        clip-path: polygon(
            0 28px,
            15% 16px,
            35% 25px,
            50% 35px,
            65% 22px,
            85% 15px,
            100% 28px,
            100% 100%,
            0 100%
        );
    }
}


/* ============================================================
   22. MOBILE — ΟΜΑΛΗ ΚΑΜΠΥΛΗ
   ============================================================ */

@supports (clip-path: shape(from 0 0, line to 100% 0, close)) {

    @media (max-width: 600px) {

        .safety-trust-section::before {
            clip-path: shape(
                from 0% 28px,

                curve to 50% 23px
                    with 17% 10px / 33% 42px,

                curve to 100% 28px
                    with 67% 8px / 83% 42px,

                line to 100% 100%,
                line to 0% 100%,
                close
            );
        }
    }
}


/* ============================================================
   23. ACCESSIBILITY — REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .safety-trust-policy-card,
    .policy-modal-close {
        transition: none;
    }

    .safety-trust-policy-card:hover,
    .policy-modal-close:hover {
        transform: none;
    }
}


/* ============================================================
   END — TURNONLEARNING SECTION 4
   ============================================================ */