/* PPDO Public Website Phase 45
   Submenu Visibility Fix
   Replace:
   public/assets/css/public-menu.css
*/

/* Main nav must allow dropdowns to show */
.public-nav{
    position:relative!important;
    z-index:5000!important;
    overflow:visible!important;
}

.public-nav a,
.public-nav .nav-group-title{
    cursor:pointer!important;
    user-select:none!important;
}

/* Group wrapper */
.public-nav .nav-group{
    position:relative!important;
    display:inline-flex!important;
    align-items:center!important;
    flex:0 0 auto!important;
    overflow:visible!important;
}

/* Main menu title */
.public-nav .nav-group-title{
    display:inline-flex!important;
    align-items:center!important;
    gap:4px!important;
    min-height:42px!important;
    padding:0 14px!important;
    color:#ffffff!important;
    font-weight:800!important;
    text-decoration:none!important;
    white-space:nowrap!important;
}

.public-nav .nav-group-title::after{
    content:"▾"!important;
    font-size:10px!important;
    margin-left:3px!important;
    opacity:.85!important;
}

/* Dropdown hidden by default */
.public-nav .nav-dropdown{
    display:none!important;
    position:absolute!important;
    top:100%!important;
    left:0!important;
    min-width:245px!important;
    max-width:360px!important;
    background:#ffffff!important;
    border-top:4px solid #f1c232!important;
    border-radius:0 0 14px 14px!important;
    box-shadow:0 18px 40px rgba(15,23,42,.25)!important;
    padding:8px!important;
    z-index:999999!important;
    overflow:visible!important;
}

/* Show dropdown on hover, keyboard focus, and JS click */
.public-nav .nav-group:hover > .nav-dropdown,
.public-nav .nav-group:focus-within > .nav-dropdown,
.public-nav .nav-group.open > .nav-dropdown{
    display:block!important;
}

/* Dropdown links */
.public-nav .nav-dropdown > a,
.public-nav .nav-dropdown .has-flyout > a{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    width:100%!important;
    min-height:40px!important;
    padding:10px 12px!important;
    border-radius:8px!important;
    color:#123a6f!important;
    background:#ffffff!important;
    text-decoration:none!important;
    font-weight:800!important;
    font-size:13px!important;
    line-height:1.15!important;
    box-sizing:border-box!important;
    white-space:nowrap!important;
}

.public-nav .nav-dropdown > a:hover,
.public-nav .nav-dropdown .has-flyout > a:hover{
    background:#eaf6ff!important;
    color:#0b3a66!important;
}

/* Flyout wrapper */
.public-nav .has-flyout{
    position:relative!important;
    overflow:visible!important;
}

/* Sub-submenu hidden by default */
.public-nav .nav-flyout{
    display:none!important;
    position:absolute!important;
    top:0!important;
    left:100%!important;
    min-width:235px!important;
    background:#ffffff!important;
    border-left:4px solid #f1c232!important;
    border-radius:0 14px 14px 0!important;
    box-shadow:0 18px 40px rgba(15,23,42,.25)!important;
    padding:8px!important;
    z-index:1000000!important;
}

/* Show flyout on hover/focus/js */
.public-nav .has-flyout:hover > .nav-flyout,
.public-nav .has-flyout:focus-within > .nav-flyout,
.public-nav .has-flyout.open > .nav-flyout{
    display:block!important;
}

.public-nav .nav-flyout a{
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-height:38px!important;
    padding:9px 11px!important;
    border-radius:8px!important;
    color:#123a6f!important;
    background:#ffffff!important;
    text-decoration:none!important;
    font-size:13px!important;
    font-weight:800!important;
    box-sizing:border-box!important;
    white-space:nowrap!important;
}

.public-nav .nav-flyout a:hover{
    background:#eaf6ff!important;
}

/* Parent containers should not clip menus */
.public-header,
.public-header *,
.public-nav-wrap,
.public-topbar,
.site-header,
.header,
nav{
    overflow:visible!important;
}

/* Tablet/mobile: use tap-to-open full-width dropdown */
@media (max-width:900px){
    .public-nav{
        position:relative!important;
        display:flex!important;
        align-items:center!important;
        gap:0!important;
        width:100%!important;
        overflow-x:auto!important;
        overflow-y:visible!important;
        -webkit-overflow-scrolling:touch!important;
        scrollbar-width:none!important;
    }

    .public-nav::-webkit-scrollbar{
        display:none!important;
    }

    .public-nav .nav-group{
        position:static!important;
    }

    .public-nav .nav-group-title{
        min-height:38px!important;
        padding:0 10px!important;
        font-size:12px!important;
    }

    .public-nav .nav-dropdown{
        display:none!important;
        position:fixed!important;
        top:auto!important;
        left:8px!important;
        right:8px!important;
        width:auto!important;
        min-width:0!important;
        max-width:none!important;
        max-height:62vh!important;
        overflow:auto!important;
        background:#ffffff!important;
        border-top:4px solid #f1c232!important;
        border-radius:12px!important;
        box-shadow:0 18px 45px rgba(15,23,42,.35)!important;
        padding:8px!important;
        z-index:2147482000!important;
    }

    .public-nav .nav-group.open > .nav-dropdown{
        display:block!important;
    }

    /* JS sets top, fallback below */
    .public-nav .nav-dropdown{
        top:118px!important;
    }

    .public-nav .nav-dropdown > a,
    .public-nav .nav-dropdown .has-flyout > a{
        min-height:42px!important;
        font-size:13px!important;
        white-space:normal!important;
    }

    .public-nav .has-flyout{
        position:relative!important;
    }

    .public-nav .nav-flyout{
        display:none!important;
        position:relative!important;
        top:auto!important;
        left:auto!important;
        min-width:0!important;
        width:100%!important;
        border-left:0!important;
        border-top:1px solid #dce9f5!important;
        border-radius:10px!important;
        box-shadow:none!important;
        background:#f8fbff!important;
        margin:4px 0 6px!important;
        padding:6px!important;
    }

    .public-nav .has-flyout.open > .nav-flyout,
    .public-nav .has-flyout:hover > .nav-flyout,
    .public-nav .has-flyout:focus-within > .nav-flyout{
        display:block!important;
    }

    .public-nav .nav-flyout a{
        white-space:normal!important;
        background:#f8fbff!important;
    }
}

/* Very small mobile */
@media (max-width:430px){
    .public-nav .nav-group-title{
        font-size:11px!important;
        padding:0 8px!important;
    }

    .public-nav .nav-dropdown{
        left:6px!important;
        right:6px!important;
        top:104px!important;
    }
}


/* PPDO Public Website Phase 50 - Open Submenu Pages as Modal */

.ppdo-public-modal-backdrop{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100vh!important;
    height:100dvh!important;
    background:rgba(15,23,42,.68)!important;
    z-index:2147483000!important;
    display:none!important;
    align-items:center!important;
    justify-content:center!important;
    padding:18px!important;
    box-sizing:border-box!important;
}

.ppdo-public-modal-backdrop.show{
    display:flex!important;
}

.ppdo-public-modal{
    width:min(1100px,calc(100vw - 36px))!important;
    max-width:1100px!important;
    max-height:calc(100vh - 36px)!important;
    max-height:calc(100dvh - 36px)!important;
    background:#ffffff!important;
    border-radius:22px!important;
    box-shadow:0 28px 70px rgba(0,0,0,.36)!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    border:1px solid rgba(255,255,255,.65)!important;
}

.ppdo-public-modal-head{
    flex:0 0 auto!important;
    min-height:64px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    padding:14px 72px 14px 20px!important;
    background:linear-gradient(135deg,#7e2b58,#5f1e42)!important;
    border-bottom:3px solid #f1c232!important;
    color:#ffffff!important;
    position:relative!important;
}

.ppdo-public-modal-title{
    margin:0!important;
    font-size:21px!important;
    line-height:1.1!important;
    font-weight:900!important;
    color:#ffffff!important;
    letter-spacing:.02em!important;
}

.ppdo-public-modal-close{
    position:absolute!important;
    top:50%!important;
    right:18px!important;
    transform:translateY(-50%)!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    border-radius:50%!important;
    border:2px solid rgba(255,255,255,.95)!important;
    background:#ffffff!important;
    color:#7e2b58!important;
    font-size:28px!important;
    line-height:1!important;
    font-weight:900!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    cursor:pointer!important;
    box-shadow:0 10px 24px rgba(0,0,0,.24)!important;
}

.ppdo-public-modal-body{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch!important;
    padding:22px!important;
    background:#f8fbff!important;
}

.ppdo-public-modal-body .public-header,
.ppdo-public-modal-body .public-nav,
.ppdo-public-modal-body header,
.ppdo-public-modal-body nav,
.ppdo-public-modal-body footer{
    display:none!important;
}

.ppdo-public-modal-body .page-shell,
.ppdo-public-modal-body .public-main,
.ppdo-public-modal-body main,
.ppdo-public-modal-body .container{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
}

.ppdo-public-modal-loading,
.ppdo-public-modal-error{
    padding:24px!important;
    text-align:center!important;
    color:#123a6f!important;
    font-weight:800!important;
}

body.ppdo-public-modal-open{
    overflow:hidden!important;
}

@media (max-width:768px){
    .ppdo-public-modal-backdrop{
        padding:8px!important;
    }

    .ppdo-public-modal{
        width:calc(100vw - 16px)!important;
        max-width:calc(100vw - 16px)!important;
        max-height:calc(100dvh - 16px)!important;
        border-radius:16px!important;
    }

    .ppdo-public-modal-head{
        min-height:56px!important;
        padding:11px 58px 11px 14px!important;
    }

    .ppdo-public-modal-title{
        font-size:15px!important;
        line-height:1.15!important;
    }

    .ppdo-public-modal-close{
        right:10px!important;
        width:38px!important;
        height:38px!important;
        min-width:38px!important;
        min-height:38px!important;
        font-size:25px!important;
    }

    .ppdo-public-modal-body{
        padding:12px!important;
    }
}


/* PPDO Public Website Phase 51 - Wide Screen Modal Width Fix
   Wide desktop screens get a wider modal; mobile remains compact.
*/

/* Default desktop/laptop: wider than Phase 50 */
.ppdo-public-modal{
    width:min(1500px,calc(100vw - 96px))!important;
    max-width:min(1500px,calc(100vw - 96px))!important;
    max-height:calc(100vh - 52px)!important;
    max-height:calc(100dvh - 52px)!important;
}

/* Body uses the modal width properly */
.ppdo-public-modal-body{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    overflow:auto!important;
}

.ppdo-public-modal-body > *{
    max-width:100%!important;
}

/* Large monitor: almost full-wide, but still with clean side margin */
@media (min-width:1500px){
    .ppdo-public-modal{
        width:86vw!important;
        max-width:1680px!important;
    }
}

/* Very wide monitor */
@media (min-width:1900px){
    .ppdo-public-modal{
        width:88vw!important;
        max-width:1760px!important;
    }
}

/* Keep content from being too cramped in modal */
@media (min-width:901px){
    .ppdo-public-modal-body{
        padding:28px 34px!important;
    }

    .ppdo-public-modal-body .mandate-sheet,
    .ppdo-public-modal-body .public-card,
    .ppdo-public-modal-body .page-card,
    .ppdo-public-modal-body .content-card{
        width:100%!important;
        max-width:100%!important;
        box-sizing:border-box!important;
    }
}

/* Tablet */
@media (max-width:900px){
    .ppdo-public-modal{
        width:calc(100vw - 32px)!important;
        max-width:calc(100vw - 32px)!important;
        max-height:calc(100dvh - 32px)!important;
    }

    .ppdo-public-modal-body{
        padding:16px!important;
    }
}

/* Mobile: only here liliit ang modal */
@media (max-width:768px){
    .ppdo-public-modal-backdrop{
        padding:8px!important;
    }

    .ppdo-public-modal{
        width:calc(100vw - 16px)!important;
        max-width:calc(100vw - 16px)!important;
        max-height:calc(100dvh - 16px)!important;
        border-radius:16px!important;
    }

    .ppdo-public-modal-body{
        padding:12px!important;
    }
}


/* PPDO Public Website Phase 52 - Personnel Profile Modal */

/* Make org/person boxes clearly clickable */
.ppdo-person-box,
.ppdo-top-box,
.org-box,
.org-card{
    cursor:pointer!important;
}

.ppdo-person-box .ppdo-name,
.ppdo-top-box .ppdo-name,
.org-box .org-box-name,
.org-card .org-name{
    text-decoration:none!important;
}

/* Profile modal */
.ppdo-person-profile-backdrop{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100vh!important;
    height:100dvh!important;
    background:rgba(15,23,42,.72)!important;
    z-index:2147483300!important;
    display:none!important;
    align-items:center!important;
    justify-content:center!important;
    padding:18px!important;
    box-sizing:border-box!important;
}

.ppdo-person-profile-backdrop.show{
    display:flex!important;
}

.ppdo-person-profile-modal{
    width:min(1120px,calc(100vw - 36px))!important;
    max-width:1120px!important;
    max-height:calc(100vh - 36px)!important;
    max-height:calc(100dvh - 36px)!important;
    background:#ffffff!important;
    border-radius:24px!important;
    overflow:hidden!important;
    box-shadow:0 30px 80px rgba(0,0,0,.38)!important;
    display:flex!important;
    flex-direction:column!important;
    border:1px solid rgba(255,255,255,.7)!important;
}

.ppdo-person-profile-head{
    position:relative!important;
    flex:0 0 auto!important;
    min-height:74px!important;
    display:flex!important;
    align-items:center!important;
    padding:16px 78px 16px 24px!important;
    background:linear-gradient(135deg,#7e2b58,#5f1e42)!important;
    border-bottom:4px solid #f1c232!important;
    color:#ffffff!important;
}

.ppdo-person-profile-title{
    margin:0!important;
    color:#ffffff!important;
    font-size:22px!important;
    line-height:1.15!important;
    font-weight:900!important;
    letter-spacing:.02em!important;
    text-transform:uppercase!important;
}

.ppdo-person-profile-close{
    position:absolute!important;
    top:50%!important;
    right:18px!important;
    transform:translateY(-50%)!important;
    width:46px!important;
    height:46px!important;
    border-radius:50%!important;
    border:2px solid rgba(255,255,255,.95)!important;
    background:#ffffff!important;
    color:#7e2b58!important;
    font-size:30px!important;
    line-height:1!important;
    font-weight:900!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    cursor:pointer!important;
    box-shadow:0 10px 24px rgba(0,0,0,.25)!important;
}

.ppdo-person-profile-body{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch!important;
    padding:26px!important;
    background:#f8fbff!important;
    display:grid!important;
    grid-template-columns:minmax(260px,380px) minmax(0,1fr)!important;
    gap:26px!important;
    align-items:start!important;
}

.ppdo-person-profile-photo-wrap{
    background:#ffffff!important;
    border:1px solid #dbe6ef!important;
    border-radius:22px!important;
    padding:14px!important;
    box-shadow:0 14px 34px rgba(15,23,42,.10)!important;
}

.ppdo-person-profile-photo{
    width:100%!important;
    height:460px!important;
    max-height:55vh!important;
    object-fit:cover!important;
    object-position:center top!important;
    border-radius:16px!important;
    background:#eef3f8!important;
    display:block!important;
    border:1px solid #dbe6ef!important;
}

.ppdo-person-profile-photo-placeholder{
    width:100%!important;
    height:460px!important;
    max-height:55vh!important;
    border-radius:16px!important;
    background:linear-gradient(135deg,#eef4fb,#ffffff)!important;
    border:1px dashed #aebdd0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:#64748b!important;
    font-weight:900!important;
    text-align:center!important;
    padding:16px!important;
}

.ppdo-person-profile-info{
    background:#ffffff!important;
    border:1px solid #dbe6ef!important;
    border-radius:22px!important;
    padding:24px!important;
    box-shadow:0 14px 34px rgba(15,23,42,.10)!important;
}

.ppdo-person-profile-name{
    margin:0 0 10px!important;
    color:#073b63!important;
    font-size:34px!important;
    line-height:1.08!important;
    font-weight:900!important;
    text-transform:uppercase!important;
}

.ppdo-person-profile-designation{
    color:#365b7b!important;
    font-size:17px!important;
    line-height:1.35!important;
    font-weight:900!important;
    text-transform:uppercase!important;
    margin-bottom:8px!important;
}

.ppdo-person-profile-department{
    display:inline-flex!important;
    align-items:center!important;
    margin:0 0 18px!important;
    padding:7px 11px!important;
    border-radius:999px!important;
    background:#eaf6ff!important;
    color:#075f96!important;
    border:1px solid #bfdbfe!important;
    font-size:12px!important;
    font-weight:900!important;
    letter-spacing:.04em!important;
    text-transform:uppercase!important;
}

.ppdo-person-profile-details{
    color:#172033!important;
    font-size:16px!important;
    line-height:1.75!important;
    border-top:1px solid #e1eaf2!important;
    padding-top:18px!important;
}

.ppdo-person-profile-details:empty::before{
    content:"No additional profile details encoded yet."!important;
    color:#64748b!important;
    font-style:italic!important;
}

/* When profile opens inside submenu modal, keep it above */
.ppdo-public-modal-backdrop .ppdo-person-profile-backdrop{
    z-index:2147483400!important;
}

/* Tablet */
@media (max-width:900px){
    .ppdo-person-profile-body{
        grid-template-columns:1fr!important;
        padding:18px!important;
        gap:18px!important;
    }

    .ppdo-person-profile-photo{
        height:360px!important;
        max-height:none!important;
        object-fit:contain!important;
        background:#ffffff!important;
    }

    .ppdo-person-profile-photo-placeholder{
        height:260px!important;
    }

    .ppdo-person-profile-name{
        font-size:26px!important;
    }
}

/* Mobile */
@media (max-width:640px){
    .ppdo-person-profile-backdrop{
        padding:8px!important;
    }

    .ppdo-person-profile-modal{
        width:calc(100vw - 16px)!important;
        max-width:calc(100vw - 16px)!important;
        max-height:calc(100dvh - 16px)!important;
        border-radius:16px!important;
    }

    .ppdo-person-profile-head{
        min-height:58px!important;
        padding:12px 58px 12px 14px!important;
    }

    .ppdo-person-profile-title{
        font-size:15px!important;
    }

    .ppdo-person-profile-close{
        right:10px!important;
        width:38px!important;
        height:38px!important;
        font-size:26px!important;
    }

    .ppdo-person-profile-body{
        padding:12px!important;
        gap:12px!important;
    }

    .ppdo-person-profile-photo-wrap,
    .ppdo-person-profile-info{
        border-radius:14px!important;
        padding:12px!important;
    }

    .ppdo-person-profile-photo{
        height:300px!important;
        border-radius:10px!important;
    }

    .ppdo-person-profile-name{
        font-size:21px!important;
    }

    .ppdo-person-profile-designation{
        font-size:13px!important;
    }

    .ppdo-person-profile-details{
        font-size:13px!important;
        line-height:1.6!important;
    }
}


/* PPDO Public Website Phase 53 - Personnel Modal Design Cleanup */

/* Override previous Phase 52 modal layout */
.ppdo-person-profile-backdrop{
    background:rgba(9,18,35,.76)!important;
    padding:24px!important;
}

.ppdo-person-profile-modal{
    width:min(980px,calc(100vw - 48px))!important;
    max-width:980px!important;
    max-height:calc(100dvh - 48px)!important;
    background:#ffffff!important;
    border-radius:18px!important;
    overflow:hidden!important;
    box-shadow:0 30px 80px rgba(0,0,0,.40)!important;
}

.ppdo-person-profile-head{
    min-height:62px!important;
    padding:13px 72px 13px 22px!important;
    background:#7e2b58!important;
    border-bottom:4px solid #f1c232!important;
}

.ppdo-person-profile-title{
    font-size:20px!important;
    line-height:1.15!important;
    letter-spacing:.04em!important;
    color:#fff!important;
}

.ppdo-person-profile-close{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    right:16px!important;
    background:#ffffff!important;
    color:#7e2b58!important;
    border:0!important;
    font-size:30px!important;
}

/* Cleaner two-column body */
.ppdo-person-profile-body{
    padding:24px!important;
    background:#f6f9fd!important;
    display:grid!important;
    grid-template-columns:320px minmax(0,1fr)!important;
    gap:22px!important;
    align-items:start!important;
}

/* Photo card */
.ppdo-person-profile-photo-wrap{
    padding:12px!important;
    border-radius:18px!important;
    background:#ffffff!important;
    border:1px solid #d9e4ef!important;
    box-shadow:0 14px 34px rgba(15,23,42,.10)!important;
}

.ppdo-person-profile-photo{
    width:100%!important;
    height:360px!important;
    max-height:360px!important;
    object-fit:cover!important;
    object-position:center top!important;
    border-radius:14px!important;
    border:1px solid #dbe6ef!important;
    background:#eef3f8!important;
    display:block!important;
}

/* Never show placeholder unless JS adds .is-visible */
.ppdo-person-profile-photo-placeholder{
    display:none!important;
}

.ppdo-person-profile-photo-placeholder.is-visible{
    width:100%!important;
    height:300px!important;
    border-radius:14px!important;
    background:linear-gradient(135deg,#eef4fb,#ffffff)!important;
    border:1px dashed #aebdd0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:#64748b!important;
    font-weight:900!important;
    text-align:center!important;
    padding:16px!important;
}

.ppdo-person-profile-photo.is-hidden{
    display:none!important;
}

/* Info card */
.ppdo-person-profile-info{
    padding:24px 26px!important;
    border-radius:18px!important;
    background:#ffffff!important;
    border:1px solid #d9e4ef!important;
    box-shadow:0 14px 34px rgba(15,23,42,.10)!important;
    min-height:360px!important;
}

.ppdo-person-profile-name{
    font-size:29px!important;
    line-height:1.08!important;
    color:#073b63!important;
    margin:0 0 10px!important;
    font-weight:900!important;
    letter-spacing:.03em!important;
    text-transform:uppercase!important;
}

.ppdo-person-profile-designation{
    color:#365b7b!important;
    font-size:15px!important;
    line-height:1.35!important;
    font-weight:900!important;
    text-transform:uppercase!important;
    margin:0 0 10px!important;
}

.ppdo-person-profile-department{
    display:inline-flex!important;
    align-items:center!important;
    margin:0 0 16px!important;
    padding:7px 11px!important;
    border-radius:999px!important;
    background:#eaf6ff!important;
    color:#075f96!important;
    border:1px solid #bfdbfe!important;
    font-size:11px!important;
    font-weight:900!important;
    letter-spacing:.04em!important;
    text-transform:uppercase!important;
}

.ppdo-person-profile-department.is-empty{
    display:none!important;
}

.ppdo-person-profile-details{
    border-top:1px solid #e1eaf2!important;
    padding-top:16px!important;
    color:#172033!important;
    font-size:15px!important;
    line-height:1.7!important;
}

/* Smaller empty-details message */
.ppdo-person-profile-details.is-empty{
    color:#64748b!important;
    font-size:14px!important;
    font-style:italic!important;
    background:#f8fbff!important;
    border:1px dashed #cbd8e6!important;
    border-radius:12px!important;
    padding:14px!important;
    margin-top:14px!important;
}

/* Remove old duplicate org modal if it appears behind */
#orgModal.org-modal{
    z-index:3999!important;
}

/* Tablet */
@media (max-width:900px){
    .ppdo-person-profile-backdrop{
        padding:12px!important;
    }

    .ppdo-person-profile-modal{
        width:calc(100vw - 24px)!important;
        max-width:calc(100vw - 24px)!important;
        max-height:calc(100dvh - 24px)!important;
        border-radius:16px!important;
    }

    .ppdo-person-profile-body{
        grid-template-columns:1fr!important;
        padding:16px!important;
        gap:14px!important;
    }

    .ppdo-person-profile-photo{
        height:330px!important;
        max-height:330px!important;
        object-fit:contain!important;
        background:#ffffff!important;
    }

    .ppdo-person-profile-info{
        min-height:0!important;
        padding:18px!important;
    }

    .ppdo-person-profile-name{
        font-size:24px!important;
    }
}

/* Mobile */
@media (max-width:640px){
    .ppdo-person-profile-backdrop{
        padding:8px!important;
    }

    .ppdo-person-profile-modal{
        width:calc(100vw - 16px)!important;
        max-width:calc(100vw - 16px)!important;
        max-height:calc(100dvh - 16px)!important;
        border-radius:14px!important;
    }

    .ppdo-person-profile-head{
        min-height:54px!important;
        padding:10px 56px 10px 14px!important;
    }

    .ppdo-person-profile-title{
        font-size:14px!important;
    }

    .ppdo-person-profile-close{
        right:10px!important;
        width:36px!important;
        height:36px!important;
        min-width:36px!important;
        min-height:36px!important;
        font-size:26px!important;
    }

    .ppdo-person-profile-body{
        padding:10px!important;
        gap:10px!important;
    }

    .ppdo-person-profile-photo-wrap,
    .ppdo-person-profile-info{
        border-radius:12px!important;
        padding:10px!important;
    }

    .ppdo-person-profile-photo{
        height:285px!important;
        max-height:285px!important;
        border-radius:10px!important;
    }

    .ppdo-person-profile-name{
        font-size:20px!important;
    }

    .ppdo-person-profile-designation{
        font-size:12px!important;
    }

    .ppdo-person-profile-details{
        font-size:13px!important;
        line-height:1.6!important;
    }
}