/* =========================================================
   about.css — Profile page
   ========================================================= */

.page-about section{
    padding:15px 20px;
}

.about{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding-top:20px;
}

.about-content,
.story-container,
.reference-list{
    width:100%;
    max-width:700px;
    margin:auto;
}

/* shared glass panel */
.about-content,
.story-content,
.reference-list{
    background:linear-gradient(135deg,rgba(255,255,255,.25),rgba(255,255,255,.08));
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid var(--glass-border);
    box-shadow:0 20px 50px rgba(0,0,0,.25);
}

.about-content{
    padding:40px;
}

.about-content p{
    margin-bottom:8px;
    color:var(--main-text);
}

.typing{
    min-height:1.6em;
}

.about-buttons{
    display:flex;
    justify-content:center;
    gap:12px;
    margin-top:20px;
    flex-wrap:wrap;
}

.primary-btn,
.secondary-btn{
    padding:10px 18px;
    border-radius:999px;
    font-size:13px;
    font-weight:500;
    transition:background .25s ease, color .25s ease;
}

.primary-btn{
    background:#111;
    color:#fff;
}

.primary-btn:hover{
    background:#000;
}

.secondary-btn{
    border:1px solid rgba(255,255,255,.7);
    color:#fff;
    cursor:pointer;
}

.secondary-btn:hover{
    background:#fff;
    color:#111;
}

/* ---------- Testimonials ---------- */

.references-section{
    padding:20px;
}

.story-container{
    padding:20px;
}

.story-images{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-bottom:20px;
}

.story-btn{
    width:70px;
    height:70px;
    padding:3px;
    border:0;
    border-radius:50%;
    background:transparent;
    cursor:pointer;
    transition:transform .3s ease, background .3s ease;
}

.story-btn img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
}

.story-btn.active{
    background:#facc15;
    transform:scale(1.15);
    padding:2px;
}

.story-content{
    position:relative;
    max-width:100%;
    background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,.10));
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    padding:35px;
    box-shadow:0 20px 45px rgba(0,0,0,.25);
    text-align:center;
}

.story-content::before{
    content:"";
    position:absolute;
    top:-16px;
    left:var(--speaker-position,50%);
    transform:translateX(-50%);
    border-left:16px solid transparent;
    border-right:16px solid transparent;
    border-bottom:18px solid rgba(255,255,255,.22);
    transition:left .3s ease;
}

.story-content h3{
    font-size:16px;
    margin-bottom:3px;
}

.story-content h3 a{
    color:#fff;
}

.story-content span{
    color:var(--secondary-text);
    font-size:11px;
}

.story-content p{
    margin-top:10px;
    color:var(--main-text);
    font-size:13px;
    line-height:1.6;
    text-align:left;
}

.linkedin-icon{
    position:absolute;
    top:12px;
    right:12px;
    width:32px;
    height:32px;
    padding:4px;
    background:#fff;
    border-radius:6px;
    box-shadow:0 3px 8px rgba(0,0,0,.15);
}

.story-toggle{
    background:none;
    border:0;
    padding:0;
    color:#2563eb;
    font-weight:600;
    font-size:inherit;
    cursor:pointer;
}

.story-toggle:hover{
    text-decoration:underline;
}

/* ---------- Skills ---------- */

.skills-section{
    padding:15px 20px 40px;
}

.skills-grid{
    max-width:1200px;
    margin:auto;
    display:flex;
    gap:18px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.skills-grid::-webkit-scrollbar{
    display:none;
}

.skill-category{
    flex:0 0 270px;
    scroll-snap-align:start;
    display:flex;
    flex-direction:column;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.25);
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    overflow:hidden;
}

.skill-category h3{
    padding:16px;
    color:#fff;
    font-size:1rem;
    border-bottom:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.05);
}

.skill-category ul{
    list-style:none;
    height:220px;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.45) transparent;
}

.skill-category ul::-webkit-scrollbar{ width:3px; }
.skill-category ul::-webkit-scrollbar-track{ background:transparent; }
.skill-category ul::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.45);
    border-radius:999px;
}

.skill-category li{
    color:#fff;
    padding:12px 16px;
    font-size:13px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.skill-category li:last-child{
    border-bottom:none;
}

@media (min-width:769px){

    .skills-grid{
        width:100%;
        max-width:700px;
        display:grid;
        grid-template-columns:repeat(2,1fr);
        overflow:visible;
    }

    .skill-category{
        width:100%;
        flex:none;
    }
}

/* ---------- Certifications & education ---------- */

.certifications-section{
    padding:20px;
}

.education-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-bottom:15px;
}

.certifications-section .education-list{
    width:100%;
    max-width:700px;
    margin:0 auto 15px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.25);
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    padding:30px;
}

.certifications{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px 30px;
}

.education-item{
    display:flex;
    gap:20px;
    align-items:flex-start;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);
    border:1px solid rgba(255,255,255,.18);
    padding:10px;
    transition:background .3s ease, transform .3s ease;
}

.education-item:hover{
    background:rgba(255,255,255,.16);
    transform:translateY(-3px);
}

.education-year{
    min-width:140px;
    font-weight:600;
    color:#c2b646;
}

.education-details h3{
    margin-bottom:2px;
    font-size:1rem;
    color:var(--main-text);
}

.education-details p{
    margin:0;
    color:#ddd;
}

.issuer{
    display:flex;
    align-items:center;
    gap:8px;
}

.badge-btn{
    display:inline-flex;
    padding:0;
    border:0;
    background:none;
    cursor:zoom-in;
    margin-top:2px;
}

.badge-icon{
    width:17px;
    height:17px;
    object-fit:contain;
    transition:transform .25s ease;
}

.badge-btn:hover .badge-icon{
    transform:scale(1.15);
}

.google-text{
    background:linear-gradient(90deg,#4285F4,#EA4335,#FBBC05,#34A853);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    font-weight:600;
}

.green-text{
    color:#4ade80 !important;
    font-weight:600;
}

/* ---------- Referees ---------- */

.phone-book{
    padding:20px;
}

.reference-list{
    overflow:hidden;
}

.reference-row{
    display:flex;
    align-items:center;
    padding:15px 25px;
    border-bottom:1px solid rgba(0,0,0,.08);
    transition:background .25s ease;
}

.reference-row:last-child{
    border-bottom:none;
}

.reference-row:hover{
    background:rgba(255,255,255,.15);
}

.reference-row > div{
    flex:1;
}

.reference-row strong{
    display:block;
    font-size:14px;
    color:#fff;
}

.reference-row span{
    display:block;
    font-size:11px;
    color:var(--secondary-text);
}

.reference-row a{
    width:130px;
    color:var(--link-color);
    font-size:12px;
    font-weight:500;
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width:768px){

    .about-content{
        max-width:500px;
        padding:25px;
    }

    .about-content p{
        font-size:13px;
        margin-bottom:10px;
    }

    .about-buttons{
        gap:10px;
        margin-top:15px;
    }

    .primary-btn,
    .secondary-btn{
        padding:9px 15px;
        font-size:12px;
    }

    .story-container{
        max-width:500px;
        padding:15px;
    }

    .story-images{
        gap:15px;
        margin-bottom:15px;
    }

    .story-btn{
        width:55px;
        height:55px;
    }

    .story-content{
        padding:15px;
    }

    .story-content h3{
        font-size:14px;
    }

    .story-content p{
        line-height:1.55;
        max-width:620px;
        margin:10px auto 0;
    }

    .linkedin-icon{
        width:28px;
        height:28px;
    }

    .certifications-section{
        padding:10px;
    }

    .certifications-section .education-list{
        max-width:none;
        padding:15px;
        gap:8px;
        margin-bottom:10px;
    }

    .certifications{
        gap:12px;
    }

    .education-item{
        flex-direction:column;
        gap:3px;
    }

    .certifications .education-item{
        min-height:70px;
        justify-content:center;
    }

    .education-year{
        min-width:auto;
        font-size:13px;
    }

    .education-details h3{
        font-size:.95rem;
        margin-bottom:0;
    }

    .certifications .education-details h3{
        font-size:13px;
    }

    .certifications .education-details p{
        font-size:11px;
    }

    .issuer{
        gap:5px;
    }

    .phone-book{
        padding:15px;
    }

    .reference-list{
        max-width:500px;
    }

    .reference-row{
        padding:10px 15px;
    }

    .reference-row strong{ font-size:13px; }
    .reference-row span{ font-size:10px; }
    .reference-row a{ font-size:11px; }
}