/* =====================================================
   PETAR CORE
   Guest Directory + Guest Profile
=====================================================*/

:root{
    --petar-bg:#0f1115;
    --petar-card:#181b22;
    --petar-card2:#1f232d;
    --petar-text:#ffffff;
    --petar-muted:#b8bcc7;
    --petar-border:#2a2f3b;
    --petar-red:#d32027;
    --petar-red-hover:#b8181e;
    --petar-radius:18px;
    --petar-shadow:0 18px 45px rgba(0,0,0,.35);
}

/*=========================
GENERAL
=========================*/

.petar-profile{
    max-width:1200px;
    margin:60px auto;
    padding:0 20px;
    color:var(--petar-text);
}

.petar-message{
    max-width:900px;
    margin:60px auto;
    padding:30px;
    border-radius:16px;
    background:var(--petar-card);
    text-align:center;
}

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

.petar-hero{

    display:grid;

    grid-template-columns:380px 1fr;

    gap:70px;

    background:linear-gradient(180deg,#181818 0%,#111111 100%);

    border:1px solid rgba(255,255,255,.08);

    border-radius:24px;

    padding:55px;

    box-shadow:0 25px 70px rgba(0,0,0,.45);

    align-items:center;

    margin-bottom:45px;

    overflow:hidden;

    position:relative;

}

.petar-photo-column{

    display:flex;
    justify-content:center;

}

.petar-profile-photo{

    width:320px;

    height:420px;

    object-fit:cover;

    border-radius:18px;

    box-shadow:0 18px 45px rgba(0,0,0,.45);

}

.petar-info-column{

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

padding-top:10px;

}

.petar-name{

    font-size:54px;

    line-height:1.1;

    margin:0;

    font-weight:700;

}
.petar-info-content{

    max-width:520px;

}

.petar-specialty{

    margin-top:14px;

    font-size:23px;

    color:#ffffff;

    font-weight:600;

}

.petar-location{

    margin-top:14px;

    color:var(--petar-muted);

    font-size:18px;

}
.petar-biography-preview{

    margin-top:28px;

    max-width:620px;

    color:#d5d5d5;

    font-size:17px;

    line-height:1.8;

}

.petar-read-more{

    display:inline-block;

    margin-top:14px;

    color:#ffffff;

    font-weight:600;

    text-decoration:none;

    transition:.25s;

}

.petar-read-more:hover{

    color:var(--petar-red);

}
/*=========================
SOCIALES
=========================*/

.petar-socials{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:30px;

    align-items:center;

}

.petar-social-title{

    width:100%;

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:1.5px;

    color:#9ca3af;

    margin-bottom:6px;

}

.petar-socials a{

    text-decoration:none;

    color:white;

    background:var(--petar-card2);

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

    padding:10px 18px;

    border-radius:999px;

    transition:.25s;

    font-size:15px;

}

.petar-socials a:hover{

    background:var(--petar-red);

}

/*=========================
BOTÓN
=========================*/

.petar-button{

    margin-top:34px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:240px;

    height:56px;

    border-radius:14px;

    background:var(--petar-red);

    color:white;

    text-decoration:none;

    font-weight:700;

    transition:.25s;

}

.petar-button:hover{

    background:var(--petar-red-hover);

    transform:translateY(-2px);

}

/*=========================
SECCIONES
=========================*/

.petar-section{

    margin-top:45px;

    background:var(--petar-card);

    border-radius:22px;

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

    padding:40px;

    box-shadow:var(--petar-shadow);

}

.petar-section h2{

    margin:0 0 25px;

    font-size:32px;

}

.petar-biography{

    line-height:1.9;

    color:#dddddd;

    font-size:17px;

}

.petar-episode-title{

    margin:0;

    font-size:24px;

}

.petar-date{

    margin-top:8px;

    margin-bottom:30px;

    color:var(--petar-muted);

}

/*=========================
VIDEO
=========================*/

.petar-video{

    position:relative;

    width:100%;

    padding-top:56.25%;

    overflow:hidden;

    border-radius:18px;

}

.petar-video iframe{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    border:none;

}

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

@media(max-width:900px){

    .petar-hero{

        grid-template-columns:1fr;

        text-align:center;

    }

    .petar-info-column{

        align-items:center;

    }

    .petar-name{

        font-size:40px;

    }

    .petar-profile-photo{

        width:100%;

        max-width:340px;

        height:auto;

    }

}