/**
 * SIPINTER SMK Assa'adah - Portal Profil Sekolah Stylesheet
 * File: portal-profil-sekolah.css (Tier 3 Feature CSS)
 */

/* ==========================================================================
   SECTION: HALAMAN PROFIL SEKOLAH (.cms-profile-*)
   ========================================================================== */

    /* 1. Profil Hero Header */
    .cms-profile-hero {
        background: linear-gradient(135deg, #064e3b 0%, #092e24 45%, #0f172a 100%);
        position: relative;
        padding: 56px 0 48px;
        color: #ffffff;
        overflow: hidden;
    }

    .cms-profile-hero-pattern {
        position: absolute;
        inset: 0;
        background-image:
            radial-gradient(rgba(16, 185, 129, 0.15) 1px, transparent 1px),
            radial-gradient(rgba(245, 158, 11, 0.08) 1.5px, transparent 1.5px);
        background-size: 28px 28px, 48px 48px;
        background-position: 0 0, 14px 14px;
        opacity: 0.8;
        pointer-events: none;
    }

    .cms-profile-hero-glow {
        position: absolute;
        top: -30%;
        right: -10%;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(16, 185, 129, 0.22) 0%, transparent 70%);
        pointer-events: none;
    }

    .cms-profile-hero-badge {
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.22);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        color: #ffffff;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.5px;
        padding: 5px 14px;
        border-radius: 50px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    /* 2. Executive Card (Sambutan Kepala Sekolah) */
    .cms-profile-exec-card {
        background: #ffffff;
        border-radius: var(--cms-radius-xl);
        border: 1px solid var(--cms-border-color);
        box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
        overflow: hidden;
        position: relative;
    }

    .cms-profile-exec-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #10b981 0%, #059669 50%, #f59e0b 100%);
    }

    .cms-profile-kepsek-frame {
        background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
        border-radius: var(--cms-radius-lg);
        border: 1px solid var(--cms-border-color);
        padding: 16px;
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    .cms-profile-kepsek-img {
        width: 100%;
        max-height: 330px;
        object-fit: cover;
        object-position: top center;
        border-radius: calc(var(--cms-radius-lg) - 6px);
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
    }

    .cms-profile-kepsek-sticky {
        position: -webkit-sticky;
        position: sticky;
        top: 96px;
        z-index: 2;
    }

    .cms-profile-quote-bubble {
        position: relative;
        padding: 8px 12px;
    }

    .cms-profile-quote-icon {
        font-size: 2.2rem;
        color: var(--cms-primary);
        opacity: 0.18;
        line-height: 1;
        margin-bottom: 12px;
    }

    /* 5. Visi & Misi Styles */
    .cms-profile-visi-box {
        background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #ffffff 100%);
        border: 1px solid rgba(5, 150, 105, 0.25);
        border-left: 5px solid var(--cms-primary);
        border-radius: var(--cms-radius-lg);
        padding: 28px 30px;
        box-shadow: 0 4px 16px rgba(5, 150, 105, 0.04);
        position: relative;
        overflow: hidden;
    }

    .cms-profile-visi-text {
        font-family: var(--cms-head);
        font-size: clamp(1.15rem, 1.8vw, 1.45rem);
        font-weight: 700;
        line-height: 1.5;
        color: var(--cms-navy);
        font-style: italic;
    }

    .cms-profile-misi-card {
        background: #ffffff;
        border: 1px solid var(--cms-border-color);
        border-radius: var(--cms-radius-md);
        padding: 18px 20px;
        height: 100%;
        display: flex;
        gap: 16px;
        align-items: flex-start;
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.02);
        transition: all 0.25s ease;
    }

    .cms-profile-misi-card:hover {
        border-color: var(--cms-primary);
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(5, 150, 105, 0.08);
    }

    .cms-profile-misi-badge {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: #ffffff;
        font-family: var(--cms-head);
        font-weight: 800;
        font-size: 0.9375rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        box-shadow: 0 4px 10px rgba(5, 150, 105, 0.25);
    }

    .cms-profile-misi-text {
        font-size: 0.9375rem;
        color: #334155;
        line-height: 1.6;
        margin-bottom: 0;
    }

    /* 6. Tujuan & Sasaran Mutu Cards */
    .cms-profile-goal-card {
        background: #ffffff;
        border: 1px solid var(--cms-border-color);
        border-radius: var(--cms-radius-lg);
        padding: 26px 24px;
        height: 100%;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
        transition: all 0.25s ease;
    }

    .cms-profile-goal-card:hover {
        border-color: var(--cms-primary);
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
    }

    /* 7. Sejarah Lembaga Editorial Card */
    .cms-profile-history-card {
        background: #ffffff;
        border: 1px solid var(--cms-border-color);
        border-radius: var(--cms-radius-xl);
        padding: 34px 32px;
        box-shadow: 0 4px 18px rgba(15, 23, 42, 0.03);
        position: relative;
    }

    .cms-profile-history-body {
        font-size: 1rem;
        line-height: 1.85;
        color: #334155;
    }


    /* Responsive adjustments */
    @media (max-width: 991.98px) {
        .cms-profile-hero {
            padding: 42px 0 38px;
        }

        .cms-profile-exec-card {
            padding: 0;
        }

        .cms-profile-kepsek-img {
            max-height: 280px;
        }

        .cms-profile-history-card {
            padding: 24px 20px;
        }

        .cms-profile-visi-box {
            padding: 22px 20px;
        }
    }

    @media (max-width: 575.98px) {
        .cms-profile-hero {
            padding: 32px 0 28px;
        }

        .cms-profile-misi-card {
            padding: 14px 16px;
        }

        .cms-profile-misi-badge {
            width: 32px;
            height: 32px;
            font-size: 0.8125rem;
        }
    }

    /* ==========================================================================
   SECTION: DIREKTORI GURU & GTK (.cms-gtk-*)
   ========================================================================== */
    .cms-gtk-search-card {
        background: #ffffff;
        border: 1px solid var(--cms-border-color);
        border-radius: var(--cms-radius-xl);
        padding: 24px 28px;
        box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
    }

    .cms-gtk-card {
        background: #ffffff;
        border: 1px solid var(--cms-border-color);
        border-radius: var(--cms-radius-xl);
        overflow: hidden;
        box-shadow: 0 3px 14px rgba(15, 23, 42, 0.03);
        transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
        display: flex;
        flex-direction: column;
    }

    .cms-gtk-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
        border-color: rgba(5, 150, 105, 0.3);
    }

    .cms-gtk-banner {
        height: 78px;
        background: linear-gradient(135deg, rgba(5, 150, 105, 0.12) 0%, rgba(16, 185, 129, 0.22) 50%, rgba(15, 23, 42, 0.06) 100%);
        position: relative;
        overflow: hidden;
    }

    .cms-gtk-banner-decor {
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(5, 150, 105, 0.18) 1.2px, transparent 1.2px);
        background-size: 14px 14px;
        opacity: 0.8;
    }

    .cms-gtk-avatar-wrap {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        border: 4px solid #ffffff;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
        margin: -45px auto 14px;
        background: #ffffff;
        position: relative;
        overflow: hidden;
        z-index: 2;
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .cms-gtk-card:hover .cms-gtk-avatar-wrap {
        transform: scale(1.06);
        box-shadow: 0 6px 20px rgba(5, 150, 105, 0.25);
    }

    .cms-gtk-avatar-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .cms-gtk-initials {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-weight: 800;
        font-size: 1.4rem;
        letter-spacing: 0.5px;
    }

    .cms-gtk-body {
        padding: 0 18px 24px;
        text-align: center;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    .cms-gtk-name {
        font-size: 1rem;
        font-weight: 700;
        color: var(--cms-navy);
        line-height: 1.35;
        margin-bottom: 6px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 2.7em;
    }

    .cms-gtk-role {
        font-size: 0.825rem;
        font-weight: 600;
        color: var(--cms-primary-dark);
    }

    @media (max-width: 575.98px) {
        .cms-gtk-search-card {
            padding: 18px 16px;
        }

        .cms-gtk-avatar-wrap {
            width: 82px;
            height: 82px;
            margin: -41px auto 12px;
        }

        .cms-gtk-banner {
            height: 66px;
        }
    }

    /* 6. Gedung & Kampus Utama Card */
    .cms-profile-building-card {
        background: #0f172a;
        border-radius: var(--cms-radius-xl, 1rem);
        border: 1px solid var(--cms-border-color, rgba(226, 232, 240, 0.8));
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
        overflow: hidden;
        position: relative;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .cms-profile-building-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
    }

    .cms-profile-building-img {
        width: 100%;
        height: auto;
        min-height: 260px;
        max-height: 440px;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        display: block;
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .cms-profile-building-card:hover .cms-profile-building-img {
        transform: scale(1.02);
    }