/* =========================================================
   VANGIA — SPECIAL SERVICES
   File: /inc/vangia-special.css
   ========================================================= */

.vangia-special{
    --vs-dark:#071c31;
    --vs-text:#536171;
    --vs-gold:#b9822b;
    --vs-border:#e5e1db;
    --vs-bg:#ffffff;
    --vs-card:#fbfaf8;

    width:100%;
    padding:80px 20px 90px;
    background:var(--vs-bg);
}

.vangia-special *,
.vangia-special *::before,
.vangia-special *::after{
    box-sizing:border-box;
}

.vangia-special__inner{
    width:100%;
    max-width:1480px;
    margin:0 auto;
}


/* =========================================================
   INTRO
   ========================================================= */

.vangia-special__intro{
    max-width:850px;
    margin:0 auto 48px;
    text-align:center;
}

.vangia-special__eyebrow{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:17px;

    margin-bottom:20px;

    color:var(--vs-gold);
    font-size:12px;
    font-weight:600;
    line-height:1;
    letter-spacing:.22em;
}

.vangia-special__eyebrow span{
    display:block;
    width:36px;
    height:1px;
    background:var(--vs-gold);
}

.vangia-special__intro h2{
    margin:0 0 16px;

    color:var(--vs-dark);
    font-size:clamp(36px,3.2vw,52px);
    font-weight:400;
    line-height:1.1;
    letter-spacing:-.025em;
}

.vangia-special__intro p{
    max-width:760px;
    margin:0 auto;

    color:var(--vs-text);
    font-size:17px;
    line-height:1.7;
}

.vangia-special__intro strong{
    color:var(--vs-dark);
    font-weight:600;
}


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

.vangia-special__grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
}


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

.vangia-special__card{
    display:grid;
    grid-template-columns:minmax(0,1.12fr) minmax(220px,.88fr);
    align-items:stretch;

    min-height:330px;

    overflow:hidden;

    background:var(--vs-card);
    border:1px solid var(--vs-border);
    border-radius:12px;

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

.vangia-special__card:hover{
    transform:translateY(-3px);
    border-color:#d6c8b3;
    box-shadow:0 16px 40px rgba(7,28,49,.07);
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.vangia-special__content{
    display:flex;
    flex-direction:column;

    min-width:0;
    padding:27px 32px 26px;
}


/* =========================================================
   NUMBER + ICON
   ========================================================= */

.vangia-special__top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    margin-bottom:20px;
}

.vangia-special__number{
    position:relative;

    color:#9299a0;
    font-size:16px;
    font-weight:400;
    line-height:1;
}

.vangia-special__number::after{
    content:"";

    display:block;

    width:18px;
    height:1px;

    margin-top:10px;

    background:var(--vs-gold);
}

.vangia-special__icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:42px;
    height:42px;

    color:var(--vs-gold);
}

.vangia-special__icon svg{
    display:block;

    width:38px;
    height:38px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}


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

.vangia-special__content h3{
    margin:0 0 11px;

    color:var(--vs-dark);

    font-size:22px;
    font-weight:600;
    line-height:1.2;
    letter-spacing:-.015em;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.vangia-special__content > p{
    margin:0 0 18px;

    color:var(--vs-text);

    font-size:15px;
    line-height:1.62;
}


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

.vangia-special__link{
    display:inline-flex;
    align-items:center;
    gap:9px;

    width:max-content;
    margin-top:auto;

    color:var(--vs-gold);

    font-size:14px;
    font-weight:600;
    line-height:1;

    text-decoration:none;

    transition:
        gap .25s ease,
        color .25s ease;
}

.vangia-special__link span{
    display:inline-block;

    font-size:18px;
    font-weight:400;
    line-height:1;

    transition:transform .25s ease;
}

.vangia-special__link:hover{
    gap:13px;
    color:var(--vs-dark);
}

.vangia-special__link:hover span{
    transform:translateX(2px);
}


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

.vangia-special__image{
    position:relative;

    min-width:0;
    min-height:100%;

    overflow:hidden;
}

.vangia-special__image::after{
    content:"";

    position:absolute;
    inset:0;

    background:linear-gradient(
        90deg,
        rgba(251,250,248,.08),
        transparent 24%
    );

    pointer-events:none;
}

.vangia-special__image img{
    position:absolute;
    inset:0;

    display:block;

    width:100%;
    height:100%;

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

    transition:transform .6s cubic-bezier(.2,.7,.2,1);
}

.vangia-special__card:hover .vangia-special__image img{
    transform:scale(1.035);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1180px){

    .vangia-special{
        padding:70px 20px 80px;
    }

    .vangia-special__intro{
        margin-bottom:42px;
    }

    .vangia-special__grid{
        grid-template-columns:1fr;

        width:100%;
        max-width:900px;
        margin:0 auto;
    }

    .vangia-special__card{
        grid-template-columns:minmax(0,1fr) 330px;
        min-height:320px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:680px){

    .vangia-special{
        padding:55px 16px 65px;
    }


    /* INTRO */

    .vangia-special__intro{
        margin-bottom:34px;
    }

    .vangia-special__eyebrow{
        gap:10px;

        margin-bottom:16px;

        font-size:10px;
        letter-spacing:.18em;
    }

    .vangia-special__eyebrow span{
        width:22px;
    }

    .vangia-special__intro h2{
        margin-bottom:14px;
        font-size:34px;
    }

    .vangia-special__intro p{
        font-size:15px;
        line-height:1.65;
    }


    /* GRID */

    .vangia-special__grid{
        gap:16px;
    }


    /* CARD */

    .vangia-special__card{
        display:flex;
        flex-direction:column;

        min-height:0;
    }


    /* IMAGE FIRST */

    .vangia-special__image{
        order:-1;

        width:100%;
        height:210px;
        min-height:210px;
    }

    .vangia-special__image img{
        position:absolute;
        inset:0;

        width:100%;
        height:100%;

        object-fit:cover;
    }


    /* CONTENT */

    .vangia-special__content{
        padding:24px 23px 26px;
    }

    .vangia-special__top{
        margin-bottom:17px;
    }

    .vangia-special__number{
        font-size:15px;
    }

    .vangia-special__icon{
        width:38px;
        height:38px;
    }

    .vangia-special__icon svg{
        width:34px;
        height:34px;
    }

    .vangia-special__content h3{
        margin-bottom:10px;
        font-size:21px;
    }

    .vangia-special__content > p{
        margin-bottom:20px;

        font-size:14.5px;
        line-height:1.65;
    }

}

/* =========================================================
   APPROACH / Η ΠΡΟΣΕΓΓΙΣΗ ΜΑΣ
   ========================================================= */

.vangia-special__approach{
    position:relative;

    display:grid;
    grid-template-columns:.95fr 1.65fr;
    align-items:center;

    margin-top:26px;
    padding:42px 44px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 10% 50%,
            rgba(185,130,43,.08),
            transparent 34%
        ),
        linear-gradient(
            120deg,
            #071b25 0%,
            #0b2229 55%,
            #10282b 100%
        );

    border-radius:14px;
}


/* subtle decorative circle */

.vangia-special__approach::before{
    content:"";

    position:absolute;
    left:-110px;
    top:50%;

    width:430px;
    height:430px;

    transform:translateY(-50%);

    border:1px solid rgba(255,255,255,.08);
    border-radius:50%;

    pointer-events:none;
}


/* =========================
   LEFT
   ========================= */

.vangia-special__approach-intro{
    position:relative;
    z-index:2;

    padding-right:45px;
}

.vangia-special__approach-eyebrow{
    margin-bottom:15px;

    color:#d0a256;

    font-size:11px;
    font-weight:600;
    line-height:1;
    letter-spacing:.22em;
}

.vangia-special__approach-intro h2{
    margin:0;

    color:#fff;

    font-size:clamp(31px,2.6vw,44px);
    font-weight:400;
    line-height:1.12;
    letter-spacing:-.025em;
}


/* =========================
   RIGHT ITEMS
   ========================= */

.vangia-special__approach-items{
    position:relative;
    z-index:2;

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

.vangia-special__approach-item{
    min-width:0;

    padding:0 30px;

    border-left:1px solid rgba(255,255,255,.12);
}

.vangia-special__approach-item:first-child{
    border-left:0;
}


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

.vangia-special__approach-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:48px;
    height:48px;

    margin-bottom:16px;

    color:#c9943e;

    border:1px solid rgba(201,148,62,.75);
    border-radius:50%;
}

.vangia-special__approach-icon svg{
    width:27px;
    height:27px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}


/* =========================
   TEXT
   ========================= */

.vangia-special__approach-item h3{
    margin:0 0 8px;

    color:#fff;

    font-size:16px;
    font-weight:600;
    line-height:1.3;
}

.vangia-special__approach-item p{
    margin:0;

    color:rgba(255,255,255,.67);

    font-size:13px;
    font-weight:400;
    line-height:1.55;
}


/* =========================================================
   APPROACH — TABLET
   ========================================================= */

@media (max-width:1050px){

    .vangia-special__approach{
        grid-template-columns:1fr;

        padding:38px;
    }

    .vangia-special__approach-intro{
        padding:0 0 32px;
    }

    .vangia-special__approach-intro h2 br{
        display:none;
    }

    .vangia-special__approach-items{
        border-top:1px solid rgba(255,255,255,.12);
        padding-top:30px;
    }

    .vangia-special__approach-item:first-child{
        padding-left:0;
    }

}


/* =========================================================
   APPROACH — MOBILE
   ========================================================= */

@media (max-width:680px){

    .vangia-special__approach{
        margin-top:18px;

        padding:32px 25px;

        border-radius:12px;
    }

    .vangia-special__approach-intro{
        padding-bottom:27px;
    }

    .vangia-special__approach-eyebrow{
        margin-bottom:13px;

        font-size:10px;
    }

    .vangia-special__approach-intro h2{
        font-size:31px;
    }

    .vangia-special__approach-items{
        grid-template-columns:1fr;

        padding-top:5px;

        border-top:1px solid rgba(255,255,255,.12);
    }

    .vangia-special__approach-item,
    .vangia-special__approach-item:first-child{
        padding:24px 0;

        border-left:0;
        border-bottom:1px solid rgba(255,255,255,.10);
    }

    .vangia-special__approach-item:last-child{
        padding-bottom:0;
        border-bottom:0;
    }

    .vangia-special__approach-icon{
        width:44px;
        height:44px;

        margin-bottom:13px;
    }

    .vangia-special__approach-icon svg{
        width:24px;
        height:24px;
    }

    .vangia-special__approach-item h3{
        font-size:16px;
    }

    .vangia-special__approach-item p{
        max-width:340px;

        font-size:13.5px;
    }

}


/* =========================================================
   SPECIAL SERVICES — INTRO POINTS
   ========================================================= */

.vangia-special-points{
    width:100%;
    max-width:620px;
    margin-left:auto;

    border-top:1px solid #e5e1db;
}


/* ITEM */

.vangia-special-point{
    position:relative;

    padding:26px 0 27px;

    border-bottom:1px solid #e5e1db;
}


/* NUMBER + ICON */

.vangia-special-point__head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:12px;
}

.vangia-special-point__number{
    display:flex;
    align-items:center;
    gap:12px;

    color:#b9822b;

    font-size:12px;
    font-weight:600;
    letter-spacing:.12em;
}

.vangia-special-point__number::after{
    content:"";

    display:block;

    width:25px;
    height:1px;

    background:#b9822b;
}


/* ICON */


.vangia-special-point__icon-img{
    display:block;
    width:48px;
    height:48px;
    object-fit:contain;
    object-position:center;
}


/* TITLE */

.vangia-special-point h3{
    margin:0 0 8px;

    color:#071c31;

    font-size:19px;
    font-weight:600;
    line-height:1.3;
    letter-spacing:-.01em;
}


/* DESCRIPTION */

.vangia-special-point p{
    max-width:510px;

    margin:0;

    color:#596675;

    font-size:14px;
    font-weight:400;
    line-height:1.65;
}


/* subtle hover */

.vangia-special-point{
    transition:padding-left .3s ease;
}

.vangia-special-point:hover{
    padding-left:8px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:767px){

    .vangia-special-points{
        max-width:none;
        margin-top:25px;
    }

    .vangia-special-point{
        padding:22px 0 23px;
    }

    .vangia-special-point:hover{
        padding-left:0;
    }

    .vangia-special-point h3{
        font-size:18px;
    }

    .vangia-special-point p{
        max-width:none;

        font-size:14px;
        line-height:1.65;
    }

}