/* ==========================================================================
   SSV College — Principal's Desk (page-specific)
   File: css/PrincipalDesk.css

   Loaded together with css/inner-pages.css (which supplies the shared page
   banner/breadcrumb, the .ssv-callout note box, .ssv-link-card, and the
   .ssv-reveal scroll-in animation reused on this page) and css/site-modern.css
   (design tokens, .ssv-card, .ssv-section, .ssv-label ...).
   Everything here is prefixed "ssv-pd-" so it only ever touches this page.

   Contents
     1. Profile panel (photo, name, role)
     2. Message card (quote mark, text, signature)
     3. "What the College Offers" highlight tiles
   ========================================================================== */


/* 1. PROFILE PANEL --------------------------------------------------------- */
.ssv-pd-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem) 1.5rem;
    text-align: center;
    background: linear-gradient(180deg, var(--warm-bg) 0%, #fff 55%);
}

.ssv-pd-photo {
    position: relative;
    width: clamp(140px, 30vw, 176px);
    height: clamp(140px, 30vw, 176px);
    margin-bottom: 1.25rem;
    border-radius: 50%;
    padding: 6px;
    background: conic-gradient(from 200deg, var(--accent), #FFB067, var(--accent));
    box-shadow: var(--shadow-md);
}
.ssv-pd-photo::before {
    content: "";
    position: absolute;
    inset: -10px;
    border: 1px dashed rgba(255, 122, 0, .35);
    border-radius: 50%;
}
.ssv-pd-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #fff;
    background: var(--border);
}

.ssv-scope .ssv-pd-name { margin-bottom: .4rem; font-size: 1.3rem; line-height: 1.3; }
.ssv-pd-role {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .85rem;
    border-radius: 999px;
    background: #FFF1E3;
    color: var(--accent-ink);
    font-size: .85rem;
    font-weight: 600;
}


/* 2. MESSAGE CARD ----------------------------------------------------------- */
.ssv-pd-message { position: relative; overflow: hidden; padding: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); }

.ssv-pd-message__quote {
    position: absolute;
    top: clamp(.75rem, .5rem + 1vw, 1.5rem);
    right: clamp(1rem, .6rem + 1.5vw, 2rem);
    font-size: clamp(3rem, 2rem + 4vw, 5rem);
    line-height: 1;
    color: var(--warm-bg);
    z-index: 0;
    pointer-events: none;
}
.ssv-pd-message > *:not(.ssv-pd-message__quote) { position: relative; z-index: 1; }

.ssv-pd-message .ssv-about-title { margin-bottom: 1.25rem; }
.ssv-pd-message .ssv-about-text .ssv-callout { margin-top: 1.5rem; margin-bottom: 0; }

.ssv-pd-signature {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin: 2rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--border);
}
.ssv-pd-signature__name { font: 700 1.15rem/1.3 var(--font-head); font-style: italic; color: var(--primary); }
.ssv-pd-signature__role { font-size: .85rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }


/* 3. "WHAT THE COLLEGE OFFERS" HIGHLIGHT TILES ------------------------------ */
.ssv-pd-highlight {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
    padding: clamp(1.15rem, .85rem + 1.2vw, 1.75rem);
}
.ssv-pd-highlight__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: .7rem;
    border-radius: 14px;
    background: linear-gradient(145deg, #FFB067, var(--accent-deep));
    color: #fff;
    font-size: 1.25rem;
    box-shadow: 0 8px 16px rgba(232, 98, 10, .22);
    transition: transform .3s var(--ease);
}
.ssv-pd-highlight:hover .ssv-pd-highlight__icon { transform: scale(1.07) rotate(-4deg); }
.ssv-scope .ssv-pd-highlight__title { font-size: 1.02rem; line-height: 1.35; margin-bottom: .1rem; }
.ssv-pd-highlight__text { font-size: .875rem; line-height: 1.55; color: var(--muted); }

@media (max-width: 575.98px) {
    .ssv-pd-highlight__title { font-size: .95rem; }
}