* {
    box-sizing: border-box;
}


/* ================================================================
   CONTACT PAGE — V2 THEME
================================================================ */

.contact-page {
    --contact-bg: #ffffff;

    --contact-soft: #f8f4ef;
    --contact-soft-2: #f3eee8;

    --contact-border: #eadfd6;
    --contact-border-strong: #ddcfc4;

    --contact-text: #292522;
    --contact-muted: #6f6862;

    --contact-accent: #4f9298;
    --contact-accent-dark: #39777d;
    --contact-accent-soft: #e2f0ef;

    --contact-blue: #557c9c;
    --contact-blue-dark: #456882;

    color: var(--contact-text);
    background: var(--contact-bg);
}


/* ================================================================
   CONTACT HERO
================================================================ */

.contact-hero {
    position: relative;

    padding:
        68px
        24px
        82px;

    overflow: hidden;

    background:
        #ffffff;
}


.contact-hero-inner {
    position: relative;
    z-index: 2;

    display: grid;

    /* Η εικόνα θέλει περισσότερο χώρο από το παλιό γραφικό, οπότε η δεξιά στήλη μεγαλώνει. */
    grid-template-columns:
        minmax(0, 1fr)
        520px;

    align-items: center;

    gap: 48px;

    width:
        min(
            1180px,
            100%
        );

    margin:
        0
        auto;
}


/* ================================================================
   HERO COPY
================================================================ */

.contact-hero-copy {
    max-width: 760px;
}


.contact-hero-eyebrow {
    margin:
        0
        0
        17px;

    color:
        var(--contact-accent);

    font-size:
        12px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;
}


.contact-hero-title {
    margin: 0;

    color:
        var(--contact-text);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            42px,
            5vw,
            68px
        );

    font-weight:
        700;

    line-height:
        0.98;

    letter-spacing:
        -0.04em;
}


.contact-hero-title span {
    display:
        block;

    color:
        var(--contact-accent);
}


.contact-hero-description {
    max-width:
        650px;

    margin:
        26px
        0
        0;

    color:
        var(--contact-muted);

    font-size:
        17px;

    line-height:
        1.75;
}


/* ================================================================
   HERO BUTTONS
================================================================ */

.contact-hero-actions {
    display: flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        30px;
}


.contact-hero-button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    min-height:
        52px;

    padding:
        0
        20px;

    border-radius:
        14px;

    font-size:
        13px;

    font-weight:
        800;

    text-decoration:
        none;

    transition:
        transform 0.22s ease,
        color 0.22s ease,
        background 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}


.contact-hero-button.is-primary {
    border:
        1px solid
        var(--contact-accent);

    color:
        #ffffff;

    background:
        var(--contact-accent);

    box-shadow:
        0 10px 24px
        rgba(57, 119, 125, 0.18);
}


.contact-hero-button.is-primary:hover {
    transform:
        translateY(-2px);

    border-color:
        var(--contact-accent-dark);

    background:
        var(--contact-accent-dark);

    box-shadow:
        0 14px 28px
        rgba(57, 119, 125, 0.24);
}


.contact-hero-button.is-secondary {
    border:
        1px solid
        var(--contact-border-strong);

    color:
        var(--contact-text);

    background:
        #ffffff;
}


.contact-hero-button.is-secondary:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(79, 146, 152, 0.42);

    color:
        var(--contact-accent-dark);

    background:
        var(--contact-accent-soft);
}


/* ================================================================
   BENEFITS
================================================================ */

.contact-hero-benefits {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;

    margin-top:
        25px;
}


.contact-hero-benefit {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    min-height:
        34px;

    padding:
        7px
        11px;

    border:
        1px solid
        rgba(79, 146, 152, 0.18);

    border-radius:
        999px;

    color:
        var(--contact-accent-dark);

    background:
        rgba(226, 240, 239, 0.55);

    font-size:
        11px;

    font-weight:
        700;
}


.contact-hero-benefit img {
    display:
        block;

    width:
        20px;

    height:
        20px;

    object-fit:
        contain;
}


/* ================================================================
   COMMUNICATION VISUAL
================================================================ */

.contact-hero-visual {
    position: relative;

    width: 520px;
    height: 348px;

    justify-self: end;

    overflow: hidden;

    background:
        url("../images/contact/waveform.png?v=3")
        center / contain
        no-repeat;

    /*
     * Απαλό fade στις άκρες,
     * ώστε να δένει με το λευκό hero.
     */
    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            #000 8%,
            #000 92%,
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            transparent 0%,
            #000 7%,
            #000 93%,
            transparent 100%
        );

    -webkit-mask-composite:
        source-in;

    mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            #000 8%,
            #000 92%,
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            transparent 0%,
            #000 7%,
            #000 93%,
            transparent 100%
        );

    mask-composite:
        intersect;
}


/* ================================================================
   ANIMATED WAVEFORM
================================================================ */

.contact-waveform {
    position: absolute;
    z-index: 5;

    left: 2%;
    right: 2%;

    top: 50%;

    height: 100px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    transform:
        translateY(-50%);

    pointer-events:
        none;

    opacity:
        0.94;

    filter:
        drop-shadow(
            0 0 3px
            rgba(79, 146, 152, 0.34)
        );
}


/*
 * Η πολύ λεπτή κεντρική γραμμή
 * που είχε και το original artwork.
 */
.contact-waveform::before {
    content: "";

    position: absolute;

    z-index: 1;

    left: 0;
    right: 0;

    top: 50%;

    height: 1px;

    transform:
        translateY(-50%);

    background:
        linear-gradient(
            90deg,

            transparent 0%,

            rgba(
                79,
                146,
                152,
                0.22
            ) 8%,

            rgba(
                183,
                231,
                232,
                0.70
            ) 30%,

            rgba(
                255,
                255,
                255,
                0.98
            ) 52%,

            rgba(
                187,
                234,
                235,
                0.80
            ) 70%,

            rgba(
                79,
                146,
                152,
                0.30
            ) 90%,

            transparent 100%
        );

    box-shadow:
        0 0 4px
        rgba(
            255,
            255,
            255,
            0.85
        ),

        0 0 10px
        rgba(
            79,
            146,
            152,
            0.20
        );
}


/*
 * Glow γύρω από το δυνατό
 * σημείο του waveform.
 */
.contact-waveform::after {
    content: "";

    position: absolute;

    z-index: 0;

    left: 30%;
    right: 15%;

    top: 50%;

    height: 42px;

    transform:
        translateY(-50%);

    background:
        radial-gradient(
            ellipse at 58% 50%,

            rgba(
                255,
                255,
                255,
                0.26
            ) 0%,

            rgba(
                157,
                218,
                221,
                0.13
            ) 35%,

            transparent 72%
        );

    filter:
        blur(8px);
}


/* ================================================================
   WAVEFORM BARS
================================================================ */

.contact-waveform i {
    position: relative;

    z-index: 2;

    display: block;

    flex:
        0 0 1px;

    width: 1px;

    height:
        var(--wave-height);

    min-height:
        2px;

    border-radius:
        999px;

    transform-origin:
        center center;

    background:
        linear-gradient(
            180deg,

            rgba(
                79,
                146,
                152,
                0.12
            ) 0%,

            rgba(
                160,
                220,
                222,
                0.72
            ) 22%,

            rgba(
                255,
                255,
                255,
                1
            ) 48%,

            rgba(
                255,
                255,
                255,
                1
            ) 52%,

            rgba(
                79,
                146,
                152,
                0.72
            ) 78%,

            rgba(
                79,
                146,
                152,
                0.10
            ) 100%
        );

    animation:
        contactWavePulse
        var(--wave-speed)
        ease-in-out
        var(--wave-delay)
        infinite
        alternate;
}


/* ================================================================
   WAVE ANIMATION
================================================================ */

@keyframes contactWavePulse {

    0% {
        transform:
            scaleY(0.42);

        opacity:
            0.48;
    }

    30% {
        transform:
            scaleY(0.72);

        opacity:
            0.72;
    }

    58% {
        transform:
            scaleY(1.08);

        opacity:
            1;
    }

    78% {
        transform:
            scaleY(0.84);

        opacity:
            0.80;
    }

    100% {
        transform:
            scaleY(0.55);

        opacity:
            0.58;
    }

}


/* Accessibility */
@media (
    prefers-reduced-motion:
    reduce
) {

    .contact-waveform i {
        animation:
            none;

        transform:
            scaleY(0.72);
    }

}


/* ================================================================
   MESSAGE LINES
================================================================ */

.contact-hero-message span {
    display:
        block;

    height:
        2px;

    margin-bottom:
        16px;

    border-radius:
        999px;

    background:
        rgba(85, 124, 156, 0.20);
}


.contact-hero-message span:nth-child(1) {
    width:
        150px;
}


.contact-hero-message span:nth-child(2) {
    width:
        105px;
}


.contact-hero-message span:nth-child(3) {
    width:
        135px;

    margin-bottom:
        0;
}


/* ================================================================
   ORBIT / CONTACT POINTS
================================================================ */

.contact-hero-orbit {
    position:
        absolute;

    inset:
        0;
}


.contact-hero-orbit::before {
    content: "";

    position:
        absolute;

    top:
        20px;

    right:
        0;

    width:
        340px;

    height:
        250px;

    border:
        1px solid
        rgba(85, 124, 156, 0.10);

    border-radius:
        50%;

    transform:
        rotate(8deg);
}


.contact-hero-orbit i {
    position:
        absolute;

    display:
        block;

    width:
        10px;

    height:
        10px;

    border-radius:
        50%;

    background:
        var(--contact-accent);

    box-shadow:
        0 0 0 6px
        rgba(79, 146, 152, 0.08);
}


.contact-hero-orbit i:nth-child(1) {
    top:
        46px;

    right:
        44px;
}


.contact-hero-orbit i:nth-child(2) {
    right:
        330px;

    bottom:
        65px;

    width:
        8px;

    height:
        8px;

    background:
        var(--contact-blue);
}


.contact-hero-orbit i:nth-child(3) {
    right:
        70px;

    bottom:
        12px;

    width:
        7px;

    height:
        7px;
}


/* ================================================================
   HERO RESPONSIVE
================================================================ */

@media (max-width: 980px) {

    .contact-hero {
        padding:
            54px
            22px
            66px;
    }


    .contact-hero-inner {
        grid-template-columns:
            1fr;

        gap:
            36px;
    }


    .contact-hero-visual {
        justify-self:
            center;

        width:
            min(520px, 100%);

        height:
            auto;

        aspect-ratio:
            520 / 348;

        transform:
            none;
    }

}


@media (max-width: 620px) {

    .contact-hero {
        padding:
            44px
            16px
            54px;
    }


    .contact-hero-title {
        font-size:
            clamp(
                36px,
                11vw,
                48px
            );
    }


    .contact-hero-description {
        margin-top:
            20px;

        font-size:
            15px;

        line-height:
            1.65;
    }


    .contact-hero-actions {
        display:
            grid;

        grid-template-columns:
            1fr;

        margin-top:
            24px;
    }


    .contact-hero-button {
        width:
            100%;
    }


    .contact-hero-benefits {
        gap:
            7px;
    }


    .contact-hero-visual {
        width:
            100%;

        height:
            auto;

        aspect-ratio:
            520 / 348;

        margin-top:
            -10px;

        transform:
            none;

        opacity:
            1;
    }


    /* Οι μπάρες έχουν ύψη σε px για desktop. Στο μικρό πλάτος τις χαμηλώνουμε, για να μη βγαίνουν έξω από τη σφαίρα. */
    .contact-waveform {
        transform:
            translateY(-50%)
            scaleY(0.7);
    }

}

.contact-page-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 450px;
    padding: 40px 24px;
    text-align: center;
}

/* ================================================================
   CONTACT MAIN SECTION
================================================================ */

.contact-page-main-section {
    position: relative;

    padding:
        72px
        24px
        96px;

    scroll-margin-top:
        110px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0,
            #fbfaf8 80px,
            #f8f4ef 210px,
            #f8f4ef 100%
        );
}


.contact-page-main-inner {
    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(310px, 0.72fr);

    align-items: start;

    gap:
        24px;

    width:
        min(
            1180px,
            100%
        );

    margin:
        0
        auto;
}


/* ================================================================
   FORM PANEL
================================================================ */

.contact-page-form-panel {
    position: relative;

    padding:
        34px
        36px
        38px;

    overflow: hidden;

    border:
        1px solid
        var(--contact-border);

    border-radius:
        24px;

    background:
        rgba(
            255,
            255,
            255,
            0.96
        );

    box-shadow:
        0 16px 42px
        rgba(
            67,
            55,
            46,
            0.055
        );
}


/*
 * Μικρό accent στην πάνω πλευρά.
 */

.contact-page-form-panel::before {
    content: "";

    position: absolute;

    top: 0;
    left: 36px;

    width:
        64px;

    height:
        4px;

    border-radius:
        0
        0
        999px
        999px;

    background:
        var(--contact-accent);
}


/* ================================================================
   SIDE COLUMN
================================================================ */

.contact-page-side-column {
    display: grid;

    align-content:
        start;

    gap:
        18px;
}


/* ================================================================
   SHARED SIDE CARDS
================================================================ */

.contact-page-direct-card,
.contact-page-hours-card {
    position: relative;

    padding:
        27px
        26px;

    overflow: hidden;

    border:
        1px solid
        var(--contact-border);

    border-radius:
        20px;

    box-shadow:
        0 12px 32px
        rgba(
            67,
            55,
            46,
            0.045
        );
}


.contact-page-direct-card h2,
.contact-page-hours-card h2 {
    margin: 0;

    color:
        var(--contact-text);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        25px;

    font-weight:
        700;

    line-height:
        1.2;

    letter-spacing:
        -0.025em;
}


/* ================================================================
   DIRECT CONTACT CARD
================================================================ */

.contact-page-direct-card {
    background:
        linear-gradient(
            145deg,
            #e8f3f2 0%,
            #f5f9f7 55%,
            #ffffff 100%
        );

    border-color:
        rgba(
            79,
            146,
            152,
            0.22
        );
}


/*
 * Διακριτικό communication detail.
 */

.contact-page-direct-card::after {
    content: "";

    position: absolute;

    right:
        -55px;

    bottom:
        -65px;

    width:
        150px;

    height:
        150px;

    border:
        1px solid
        rgba(
            79,
            146,
            152,
            0.12
        );

    border-radius:
        50%;

    pointer-events:
        none;
}


.contact-page-direct-list {
    display: grid;

    gap:
        12px;

    margin-top:
        23px;
}


/* ================================================================
   DIRECT CONTACT ITEM
================================================================ */

.contact-page-direct-item {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr);

    align-items:
        center;

    gap:
        13px;

    padding:
        11px
        12px;

    border:
        1px solid
        rgba(
            79,
            146,
            152,
            0.13
        );

    border-radius:
        14px;

    background:
        rgba(
            255,
            255,
            255,
            0.68
        );

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.contact-page-direct-item:hover {
    transform:
        translateX(3px);

    border-color:
        rgba(
            79,
            146,
            152,
            0.30
        );

    background:
        rgba(
            255,
            255,
            255,
            0.92
        );
}


/* ================================================================
   DIRECT ICON
================================================================ */

.contact-page-direct-icon {
    display: flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        42px;

    height:
        42px;

    border:
        1px solid
        rgba(
            79,
            146,
            152,
            0.16
        );

    border-radius:
        13px;

    color:
        var(--contact-accent-dark);

    background:
        var(--contact-accent-soft);

    font-size:
        18px;

    line-height:
        1;
}


/* ================================================================
   DIRECT COPY
================================================================ */

.contact-page-direct-content {
    display: grid;

    gap:
        3px;

    min-width:
        0;
}


.contact-page-direct-content > span {
    color:
        var(--contact-muted);

    font-size:
        11px;

    font-weight:
        700;

    line-height:
        1.4;
}


.contact-page-direct-content a {
    width:
        fit-content;

    max-width:
        100%;

    color:
        var(--contact-text);

    font-size:
        13px;

    font-weight:
        800;

    line-height:
        1.45;

    text-decoration:
        none;

    overflow-wrap:
        anywhere;

    transition:
        color 0.2s ease;
}


.contact-page-direct-content a:hover {
    color:
        var(--contact-accent-dark);
}


/* ================================================================
   HOURS CARD
================================================================ */

.contact-page-hours-card {
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fbf8f4 100%
        );
}


.contact-page-hours-title {
    display: flex;

    align-items:
        center;

    gap:
        12px;

    margin:
        0;
}


.contact-page-hours-title-icon {
    display:
        block;

    flex:
        0
        0
        auto;

    width:
        29px;

    height:
        29px;

    object-fit:
        contain;
}


/* ================================================================
   HOURS
================================================================ */

.contact-page-hours-list {
    display: grid;

    gap:
        0;

    margin-top:
        22px;

    border-top:
        1px solid
        var(--contact-border);
}


.contact-page-hours-row {
    display: flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    padding:
        13px
        0;

    border-bottom:
        1px solid
        var(--contact-border);
}


.contact-page-hours-row span {
    color:
        var(--contact-muted);

    font-size:
        13px;

    line-height:
        1.45;
}


.contact-page-hours-row strong {
    color:
        var(--contact-text);

    font-size:
        13px;

    font-weight:
        700;

    line-height:
        1.45;

    text-align:
        right;
}


/* ================================================================
   HOURS NOTE
================================================================ */

.contact-page-hours-note {
    margin:
        18px
        0
        0;

    padding:
        13px
        15px;

    border:
        1px solid
        rgba(
            79,
            146,
            152,
            0.15
        );

    border-radius:
        12px;

    color:
        var(--contact-accent-dark);

    background:
        var(--contact-accent-soft);

    font-size:
        12px;

    font-weight:
        700;

    line-height:
        1.55;
}


/* ================================================================
   MAIN SECTION RESPONSIVE
================================================================ */

@media (max-width: 1000px) {

    .contact-page-main-inner {
        grid-template-columns:
            1fr;
    }


    .contact-page-side-column {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 700px) {

    .contact-page-offices-grid {
        grid-template-columns:
            1fr;
    }


    .contact-page-office-card {
        grid-template-columns:
            minmax(0, 1fr)
            145px;

        min-height:
            200px;
    }


    .contact-page-office-map,
    .contact-page-office-map img {
        min-height:
            200px;
    }
    
    .contact-page-main-section {
        padding:
            54px
            16px
            68px;
    }


    .contact-page-form-panel {
        padding:
            26px
            20px
            28px;

        border-radius:
            19px;
    }


    .contact-page-form-panel::before {
        left:
            20px;
    }


    .contact-page-side-column {
        grid-template-columns:
            1fr;
    }


    .contact-page-direct-card,
    .contact-page-hours-card {
        padding:
            22px
            20px;

        border-radius:
            18px;
    }


    .contact-page-hours-row {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            4px;
    }


    .contact-page-hours-row strong {
        text-align:
            left;
    }

}

.departments-editor {
    display: grid;
    gap: 16px;
}

.departments-list {
    display: grid;
    gap: 18px;
}

.department-editor-card {
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #faf8f6;
}

.department-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.department-editor-header strong {
    color: var(--text);
    font-size: 14px;
}

/* ================================================================
   CONTACT DEPARTMENTS
================================================================ */

.contact-page-departments {
    position: relative;

    width:
        min(
            1180px,
            100%
        );

    margin:
        84px
        auto
        0;
}


/* ================================================================
   DEPARTMENTS TITLE
================================================================ */

.contact-page-departments-title {
    max-width:
        760px;

    margin:
        0
        0
        34px;

    color:
        var(--contact-text);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            32px,
            3.4vw,
            44px
        );

    font-weight:
        700;

    line-height:
        1.1;

    letter-spacing:
        -0.035em;

    text-align:
        left;
}


/* ================================================================
   DEPARTMENTS GRID
================================================================ */

.contact-page-departments-grid {
    display: grid;

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

    gap:
        14px;
}


/* ================================================================
   DEPARTMENT CARD
================================================================ */

.contact-page-department-card {
    position: relative;

    display: grid;

    grid-template-columns:
        64px
        minmax(0, 1fr);

    align-items:
        start;

    gap:
        18px;

    min-width:
        0;

    min-height:
        170px;

    padding:
        24px;

    overflow:
        hidden;

    border:
        1px solid
        var(--contact-border);

    border-radius:
        20px;

    background:
        rgba(
            255,
            255,
            255,
            0.95
        );

    box-shadow:
        0 12px 32px
        rgba(
            67,
            55,
            46,
            0.045
        );

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


.contact-page-department-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(
            79,
            146,
            152,
            0.32
        );

    box-shadow:
        0 18px 38px
        rgba(
            57,
            119,
            125,
            0.075
        );
}


/*
 * Μικρό accent πάνω δεξιά.
 */

.contact-page-department-card::after {
    content: "";

    position:
        absolute;

    top:
        -42px;

    right:
        -42px;

    width:
        105px;

    height:
        105px;

    border:
        1px solid
        rgba(
            79,
            146,
            152,
            0.10
        );

    border-radius:
        50%;

    pointer-events:
        none;
}


/* ================================================================
   DEPARTMENT ICON
================================================================ */

.contact-page-department-icon {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        64px;

    height:
        64px;

    margin:
        0;

    border:
        1px solid
        rgba(
            79,
            146,
            152,
            0.16
        );

    border-radius:
        18px;

    background:
        var(--contact-accent-soft);
}


.contact-page-department-icon img {
    display:
        block;

    width:
        70px;

    height:
        70px;

    object-fit:
        contain;
}


/* ================================================================
   DEPARTMENT CONTENT
================================================================ */

.contact-page-department-content {
    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    height:
        100%;
}


.contact-page-department-card h3 {
    margin:
        2px
        0
        0;

    color:
        var(--contact-text);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        20px;

    font-weight:
        700;

    line-height:
        1.25;

    letter-spacing:
        -0.015em;

    white-space:
        normal;
}


.contact-page-department-card p {
    max-width:
        420px;

    margin:
        9px
        0
        0;

    color:
        var(--contact-muted);

    font-size:
        13px;

    line-height:
        1.6;

    overflow-wrap:
        anywhere;
}


/* ================================================================
   DEPARTMENT EMAIL
================================================================ */

.contact-page-department-card a {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    width:
        fit-content;

    max-width:
        100%;

    margin-top:
        auto;

    padding:
        9px
        12px;

    border:
        1px solid
        rgba(
            79,
            146,
            152,
            0.17
        );

    border-radius:
        999px;

    color:
        var(--contact-accent-dark);

    background:
        rgba(
            226,
            240,
            239,
            0.55
        );

    font-size:
        12px;

    font-weight:
        700;

    line-height:
        1.3;

    text-decoration:
        none;

    overflow-wrap:
        anywhere;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}


.contact-page-department-card a:hover {
    color:
        #ffffff;

    border-color:
        var(--contact-accent);

    background:
        var(--contact-accent);
}


/* ================================================================
   DEPARTMENTS RESPONSIVE
================================================================ */

@media (max-width: 820px) {

    .contact-page-departments {
        margin-top:
            64px;
    }


    .contact-page-departments-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 620px) {

    .contact-page-departments-title {
        margin-bottom:
            24px;

        font-size:
            30px;
    }


    .contact-page-department-card {
        grid-template-columns:
            52px
            minmax(0, 1fr);

        gap:
            14px;

        min-height:
            0;

        padding:
            19px;

        border-radius:
            17px;
    }


    .contact-page-department-icon {
        width:
            52px;

        height:
            52px;

        border-radius:
            15px;
    }


    .contact-page-department-icon img {
        width:
            32px;

        height:
            32px;
    }


    .contact-page-department-card h3 {
        font-size:
            18px;
    }


    .contact-page-department-card a {
        margin-top:
            16px;

        white-space:
            normal;
    }

}

/* ================================================================
   CONTACT OFFICES
================================================================ */

.contact-page-offices {
    position: relative;

    width:
        min(
            1180px,
            100%
        );

    margin:
        88px
        auto
        0;
}


/* ================================================================
   OFFICES TITLE
================================================================ */

.contact-page-offices-title {
    max-width:
        760px;

    margin:
        0
        0
        34px;

    color:
        var(--contact-text);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            32px,
            3.4vw,
            44px
        );

    font-weight:
        700;

    line-height:
        1.1;

    letter-spacing:
        -0.035em;

    text-align:
        left;
}


/* ================================================================
   OFFICES GRID
================================================================ */

.contact-page-offices-grid {
    display: grid;

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

    gap:
        14px;
}


/* ================================================================
   OFFICE CARD
================================================================ */

.contact-page-office-card {
    position: relative;

    display: grid;

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

    min-width: 0;
    min-height: 220px;

    overflow: hidden;

    border:
        1px solid
        var(--contact-border);

    border-radius:
        20px;

    background:
        #ffffff;

    box-shadow:
        0 12px 30px
        rgba(67, 55, 46, 0.05);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


.contact-page-office-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(
            79,
            146,
            152,
            0.30
        );

    box-shadow:
        0 20px 44px
        rgba(
            57,
            119,
            125,
            0.08
        );
}



/* ================================================================
   OFFICE CONTENT
================================================================ */

.contact-page-office-content {
    display: flex;

    flex-direction:
        column;

    min-width:
        0;

    padding:
        28px
        26px;
}


.contact-page-office-content h3 {
    margin:
        0
        0
        17px;

    color:
        var(--contact-text);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        23px;

    font-weight:
        700;

    line-height:
        1.2;

    letter-spacing:
        -0.02em;
}





/* ================================================================
   ADDRESS
================================================================ */

.contact-page-office-address {
    display: grid;

    grid-template-columns:
        22px
        minmax(0, 1fr);

    align-items:
        start;

    gap:
        9px;

    margin-bottom:
        13px;
}


.contact-page-office-address > span {
    display: flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        22px;

    height:
        22px;

    margin-top:
        1px;

    border-radius:
        50%;

    color:
        var(--contact-accent-dark);

    background:
        var(--contact-accent-soft);

    font-size:
        7px;

    line-height:
        1;
}


.contact-page-office-address p {
    margin: 0;

    color:
        var(--contact-muted);

    font-size:
        13px;

    line-height:
        1.6;
}


/* ================================================================
   PHONE + EMAIL
================================================================ */

.contact-page-office-contact {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    width:
        fit-content;

    max-width:
        100%;

    margin-top:
        8px;

    color:
        var(--contact-text);

    font-size:
        13px;

    font-weight:
        650;

    line-height:
        1.4;

    text-decoration:
        none;

    overflow-wrap:
        anywhere;

    transition:
        color 0.2s ease;
}


.contact-page-office-contact:hover {
    color:
        var(--contact-accent-dark);
}


.contact-page-office-contact > span:first-child {
    display: flex;

    flex:
        0
        0
        auto;

    align-items:
        center;

    justify-content:
        center;

    width:
        26px;

    height:
        26px;

    border:
        1px solid
        rgba(
            79,
            146,
            152,
            0.16
        );

    border-radius:
        9px;

    color:
        var(--contact-accent-dark);

    background:
        rgba(
            226,
            240,
            239,
            0.55
        );

    font-size:
        11px;
}


/* ================================================================
   MAP LINK
================================================================ */

.contact-page-office-map-link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    width:
        fit-content;

    margin-top:
        auto;

    padding-top:
        22px;

    color:
        var(--contact-accent-dark);

    font-size:
        12px;

    font-weight:
        800;

    line-height:
        1.3;

    text-decoration:
        none;

    transition:
        gap 0.2s ease,
        color 0.2s ease;
}


.contact-page-office-map-link:hover {
    gap:
        13px;

    color:
        var(--contact-blue-dark);
}


/* ================================================================
   MAP IMAGE
================================================================ */

.contact-page-office-map {
    position:
        relative;

    min-width:
        0;

    min-height:
        260px;

    overflow:
        hidden;

    background:
        var(--contact-soft-2);
}





.contact-page-office-map::after {
    content: "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    box-shadow:
        inset 18px 0 32px
        rgba(
            41,
            37,
            34,
            0.06
        );
}


.contact-page-office-map img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    min-height:
        260px;

    object-fit:
        cover;

    transition:
        transform 0.45s ease;
}


.contact-page-office-content {
    padding:
        22px
        20px;
}

.contact-page-office-content h3 {
    margin:
        0
        0
        14px;

    font-size:
        20px;
}

.contact-page-office-map {
    min-height:
        220px;
}

.contact-page-office-map img {
    min-height:
        220px;
}


.contact-page-office-card:hover
.contact-page-office-map img {
    transform:
        scale(1.025);
}


/* ================================================================
   OFFICES RESPONSIVE
================================================================ */

@media (max-width: 950px) {

    .contact-page-offices-grid {
        grid-template-columns:
            1fr;
    }


    .contact-page-office-card,
    .contact-page-office-card:first-child {
        grid-column:
            auto;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(260px, 0.8fr);

        min-height:
            280px;
    }


    .contact-page-office-map,
    .contact-page-office-card:first-child
    .contact-page-office-map {
        min-height:
            280px;
    }


    .contact-page-office-map img,
    .contact-page-office-card:first-child
    .contact-page-office-map img {
        min-height:
            280px;
    }

}


@media (max-width: 620px) {

    .contact-page-offices {
        margin-top:
            64px;
    }


    .contact-page-offices-title {
        margin-bottom:
            24px;

        font-size:
            30px;
    }


    .contact-page-office-card,
    .contact-page-office-card:first-child {
        grid-template-columns:
            1fr;

        min-height:
            0;

        border-radius:
            18px;
    }


    .contact-page-office-content {
        padding:
            21px
            19px;
    }


    .contact-page-office-content h3,
    .contact-page-office-card:first-child
    .contact-page-office-content h3 {
        font-size:
            21px;
    }


    .contact-page-office-map,
    .contact-page-office-card:first-child
    .contact-page-office-map,
    .contact-page-office-map img,
    .contact-page-office-card:first-child
    .contact-page-office-map img {
        min-height:
            0;

        height:
            190px;
    }

}

@media (max-width: 1150px) {
    .contact-page-offices-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {

    .contact-page-offices-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }

    .contact-page-office-card {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .contact-page-office-content {
        padding: 14px 12px;
    }

    .contact-page-office-content h3 {
        font-size: 16px;
    }

    .contact-page-office-address p,
    .contact-page-office-contact,
    .contact-page-office-map-link {
        font-size: 11px;
    }

    .contact-page-office-map {
        min-height: 120px;
        height: 120px;
    }

    .contact-page-office-map img {
        min-height: 0;
        height: 120px;
    }
}

@media (max-width: 520px) {

    .contact-page-offices-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .contact-page-office-content {
        padding: 12px 10px;
    }

    .contact-page-office-content h3 {
        font-size: 15px;
    }

    .contact-page-office-address p,
    .contact-page-office-contact,
    .contact-page-office-map-link {
        font-size: 10px;
    }

    .contact-page-office-map,
    .contact-page-office-map img {
        min-height: 0;
        height: 105px;
    }
}

@media (max-width: 900px) {
    .contact-page-departments-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .contact-page-department-card {
        grid-template-columns:
            48px minmax(0, 1fr);

        min-height: 0;
        padding: 16px 14px;
    }

    .contact-page-department-icon {
        width: 48px;
        height: 48px;
    }

    .contact-page-department-icon img {
        width: 48px;
        height: 48px;
    }

    .contact-page-department-content {
        min-width: 0;
        width: 100%;
    }

    .contact-page-department-card h3 {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .contact-page-department-card p {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .contact-page-department-card a {
        width: 100%;
        min-width: 0;

        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .contact-page-department-card a span:last-child {
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .contact-page-departments {
        width: 100%;
        margin-top: 36px;
    }

    .contact-page-departments-title {
        font-size: 24px;
    }

    .contact-page-departments-grid {
        grid-template-columns: 1fr;
    }

    .contact-page-department-card {
        min-height: 140px;
    }
}

@media (max-width: 700px) {
    .contact-page-direct-item {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 12px;
    }

    .contact-page-direct-icon {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }

    .contact-page-hours-row {
        display: grid;
        gap: 5px;
    }

    .contact-page-hours-row strong {
        text-align: left;
    }
}

@media (max-width: 1000px) {
    .contact-page-main-inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .contact-page-main-section {
        padding:
            14px
            14px
            48px;
    }

    .contact-page-form-panel,
    .contact-page-direct-card,
    .contact-page-hours-card {
        padding: 20px 16px;
    }
}

@media (max-width: 1100px) {
    .contact-page-departments-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .contact-page-offices-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}

/* ================================================================
   DEPARTMENTS — MOBILE LAYOUT
   Πάνω γραμμή: icon + τίτλος (κεντραρισμένα κάθετα).
   Από κάτω: περιγραφή και email σε όλο το πλάτος της κάρτας.
================================================================ */

@media (max-width: 620px) {

    /* 3 σειρές: icon/τίτλος, περιγραφή, email. Η τελευταία (1fr) σπρώχνει το email στο κάτω μέρος, ώστε να ευθυγραμμίζεται σε κάρτες με διαφορετικό κείμενο. */
    .contact-page-department-card {
        grid-template-columns: 44px minmax(0, 1fr);
        grid-template-rows: auto auto 1fr;
        align-items: center;
        column-gap: 10px;
        row-gap: 10px;
    }

    /* Το div εξαφανίζεται από το layout και τα παιδιά του γίνονται κελιά του grid της κάρτας. */
    .contact-page-department-content {
        display: contents;
    }

    .contact-page-department-icon {
        width: 44px;
        height: 44px;
        border-radius: 13px;
    }

    .contact-page-department-icon img {
        width: 45px;
        height: 45px;
    }

    /* Τίτλος δίπλα στο icon. normal wrap: σπάει μόνο ανάμεσα σε λέξεις, όχι στη μέση («υποστήριξ-η»). */
    .contact-page-department-card h3 {
        grid-column: 2;
        margin: 0;
        font-size: 16px;
        line-height: 1.2;
        overflow-wrap: normal;
        word-break: normal;
    }

    /* Περιγραφή σε όλο το πλάτος, κάτω από icon και τίτλο. */
    .contact-page-department-card p {
        grid-column: 1 / -1;
        align-self: start;
        margin: 0;
    }

    /* Email σε όλο το πλάτος, κεντραρισμένο, στο κάτω μέρος της κάρτας. */
    .contact-page-department-card a {
        grid-column: 1 / -1;
        align-self: end;
        justify-content: center;
        width: 100%;
        margin-top: 0;
    }
}

/* ================================================================
   OFFICES — MOBILE LAYOUT
   Ένα γραφείο ανά σειρά, σε όλο το πλάτος: στοιχεία πάνω, χάρτης κάτω.
   Μπαίνει στο τέλος για να υπερισχύει των παλιών κανόνων 2 στηλών (760px / 520px / 1100px).
================================================================ */

@media (max-width: 760px) {

    .contact-page-offices-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .contact-page-office-card,
    .contact-page-office-card:first-child {
        grid-template-columns: minmax(0, 1.3fr) minmax(120px, 1fr);

    .contact-page-office-content {
        padding: 18px 14px;
    }

    /* Κανονικά μεγέθη ξανά, αφού υπάρχει πλέον όλο το πλάτος (πριν ήταν 10–11px για τις 2 στήλες). */
    .contact-page-office-content h3 {
        font-size: 20px;
    }

    .contact-page-office-address p,
    .contact-page-office-contact {
        font-size: 13px;
    }

    .contact-page-office-map-link {
        font-size: 12px;
    }

    /* Ο χάρτης σε όλο το πλάτος, με σταθερό ύψος για να μη γεμίζει την οθόνη. */
    .contact-page-office-map,
    .contact-page-office-map img,
    .contact-page-office-card:first-child .contact-page-office-map,
    .contact-page-office-card:first-child .contact-page-office-map img {
        min-height: 200px;
        height: 100%;
    }
}