/* ============================================================
   Director's greeting (/Page/Greeting) — "Ерөнхий захирлын
   мэндчилгээ". Scoped under .gr so it can't affect other pages.
   ============================================================ */

.gr {
    --gr-brand: #3f51b5;
    --gr-brand-d: #2c3a91;
    --gr-brand-l: #5c6bc0;
    --gr-accent: #ff7a59;
    --gr-ink: #16225a;
    --gr-body: #4d5468;
    --gr-muted: #8a90a2;
    --gr-line: #e4e7f2;
    --gr-bg-soft: #f6f7fb;
    --gr-radius: 18px;
    --gr-shadow: 0 22px 46px -22px rgba(22, 27, 51, .35);
    --gr-shadow-sm: 0 12px 26px -16px rgba(22, 27, 51, .28);

    font-family: 'Roboto', 'Segoe UI', system-ui, sans-serif;
    color: var(--gr-body);
    line-height: 1.8;
    padding-bottom: 90px;
}
.gr * { box-sizing: border-box; }
.gr h1, .gr h2, .gr h3, .gr h4 { font-family: 'Montserrat', 'Roboto', sans-serif; color: var(--gr-ink); margin: 0; }
.gr__wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }

/* ---------- Hero ---------- */
.gr-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    color: #fff;
    padding: 66px 22px 84px;
    background: linear-gradient(130deg, var(--gr-brand-d), var(--gr-brand) 55%, var(--gr-brand-l));
}
.gr-hero::before,
.gr-hero::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.gr-hero::before { width: 320px; height: 320px; top: -150px; right: -70px; }
.gr-hero::after { width: 230px; height: 230px; bottom: -120px; left: -50px; background: rgba(255, 122, 89, .18); }
.gr-hero__eyebrow {
    position: relative;
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: #fff;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .25);
    padding: 7px 16px; border-radius: 999px; margin-bottom: 18px;
}
.gr-hero h1 { position: relative; color: #fff; font-size: clamp(26px, 3.6vw, 40px); font-weight: 800; }
.gr-hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; }
.gr-hero__wave svg { width: 100%; height: 60px; display: block; }

/* ---------- Layout ---------- */
.gr-body { position: relative; margin-top: -50px; }
.gr-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 34px;
    align-items: start;
}
@media (max-width: 860px) { .gr-layout { grid-template-columns: 1fr; gap: 26px; } }

/* ---------- Profile card ---------- */
.gr-profile {
    background: #fff;
    border-radius: var(--gr-radius);
    box-shadow: var(--gr-shadow);
    overflow: hidden;
    position: sticky;
    top: 96px;
}
@media (max-width: 860px) { .gr-profile { position: static; } }
.gr-profile__photo { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--gr-bg-soft); }
.gr-profile__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gr-profile__body { padding: 22px 22px 26px; }
.gr-profile__name {
    display: flex; align-items: center; gap: 9px;
    font-size: 19px; font-weight: 700; color: var(--gr-ink);
    margin-bottom: 16px;
}
.gr-profile__name i { color: var(--gr-brand); }
.gr-creds { list-style: none; margin: 0; padding: 0; }
.gr-creds li {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 10px 0;
    border-top: 1px solid var(--gr-line);
    font-size: 14px;
    color: var(--gr-body);
    line-height: 1.5;
}
.gr-creds li i {
    flex: none;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 8px;
    font-size: 13px;
    color: #fff;
    background: linear-gradient(135deg, var(--gr-brand-l), var(--gr-brand));
    margin-top: 1px;
}

/* ---------- Message ---------- */
.gr-message {
    position: relative;
    background: #fff;
    border-radius: var(--gr-radius);
    box-shadow: var(--gr-shadow);
    padding: 46px 48px 40px;
}
.gr-message__quote {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 90px;
    line-height: 1;
    color: rgba(63, 81, 181, .14);
    height: 46px;
}
.gr-message h2 {
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 800;
    margin: 0 0 22px;
}
.gr-message h2 span { color: var(--gr-brand); }
.gr-message p {
    margin: 0 0 18px;
    font-size: 16.5px;
    color: var(--gr-body);
}
.gr-message p:last-of-type { margin-bottom: 0; }

/* signature */
.gr-sign {
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid var(--gr-line);
}
.gr-sign__label { font-size: 14px; color: var(--gr-muted); margin-bottom: 4px; }
.gr-sign__name {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px; font-weight: 700; color: var(--gr-ink);
    margin-bottom: 2px;
}
.gr-sign__title { font-size: 14px; color: var(--gr-brand); font-weight: 500; }

@media (max-width: 600px) {
    .gr-message { padding: 32px 24px 28px; }
}