/* ================== Tokens & Base ================== */

:root {

    --brand: #076B50;

    --brand-2: #055943;

    --gold: #C9A227;

    --ink: #1f2937;

    --muted: #6b7280;

    --bg: #fff;

    --card: #fff;

    --line: #e7eeec;

    --r-lg: 18px;

    --r-md: 12px;

    --r-sm: 8px;

    --shadow: 0 12px 28px rgba(0, 0, 0, .06);

    --ease: .25s cubic-bezier(.2, .7, .2, 1);

}



* {

    box-sizing: border-box

}



img {

    max-width: 100%;

    display: block

}



a {

    color: inherit;

    text-decoration: none

}



body {

    margin: 0;

    background: var(--bg);

    color: var(--ink);

}



.container {

    max-width: 1400px;

    margin: 0 auto;

    padding: 0 16px

}



.section {

    margin-block: 44px

}



.h1 {

    font-size: clamp(24px, 4vw, 34px);

    font-weight: 900;

    margin: 0

}



.h2 {

    font-size: clamp(18px, 2.2vw, 24px);

    font-weight: 900;

    margin: 0

}



.h3 {

    font-size: 16px;

    font-weight: 800;

    margin: 0

}



.muted {

    color: var(--muted)

}



.card {

    background: var(--card);

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

    border-radius: var(--r-lg);

    box-shadow: var(--shadow)

}



/* ================== Hero ================== */

/* فقط برای هیرو صفحه درباره ما */

.hero--about .hero-wrap {

    position: relative;

}



.hero--about .hero-wrap::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    /* سایه از پایین به بالا: پایین پررنگ، بالا محو */

    background: linear-gradient(to top,

            rgba(0, 0, 0, .78) 0%,

            rgba(0, 0, 0, .62) 24%,

            rgba(0, 0, 0, .38) 42%,

            rgba(0, 0, 0, 0) 62%);

    z-index: 1;

}



/* متن بالاتر از سایه بماند */

.hero--about .text {

    position: absolute;

    /* موجود بود، برای اطمینان */

    z-index: 2;

}



/* در موبایل کمی شدیدتر که خوانایی بهتر بشه */

@media (max-width:640px) {

    .hero--about .hero-wrap::after {

        background: linear-gradient(to top,

                rgba(0, 0, 0, .85) 0%,

                rgba(0, 0, 0, .70) 30%,

                rgba(0, 0, 0, .45) 50%,

                rgba(0, 0, 0, 0) 70%);

    }

}



.hero {

    position: relative

}



.hero-wrap {

    position: relative;

    overflow: hidden;

    border-radius: 12px

}



.hero img {

    width: 100%;

    height: 380px;

    object-fit: cover;

    object-position: center

}



.hero .geo {

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .30;

    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140"><g fill="none" stroke="%23076B50" stroke-width="1"><path d="M70 0 140 70 70 140 0 70Z"/><circle cx="70" cy="70" r="18"/></g></svg>');

    background-size: 140px 140px;

    background-repeat: repeat;

}



.hero .text {

    position: absolute;

    inset: auto 0 0 0;

    color: #fff;

    padding: 28px 18px 20px;

    background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent 55%);

}



.hero .text h1 {

    margin-bottom: 6px;

    letter-spacing: .2px

}



.hero .text p {

    margin: 0;

    opacity: .92;

    color: #fff;

}



/* ================== Divider ================== */

.divider {

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 22px 0 8px

}



.divider:before,

.divider:after {

    content: "";

    height: 1px;

    flex: 1;

    background: linear-gradient(to left, transparent, #b9ccbf 30%, transparent)

}



.kufic {

    display: inline-block;

    border: 1px solid #b9ccbf;

    border-radius: 6px;

    padding: 2px 8px;

    color: #2b564a;

    font-weight: 900;

    font-size: 12px;

    letter-spacing: 1px

}



/* ================== Tabs ================== */

.tabbar {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-top: 20px

}



.tab-scroll {

    display: flex;

    gap: 6px;

    overflow: auto hidden;

    scroll-behavior: smooth;

    padding: 6px;

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

    border-radius: 999px;

    background: #fff;

    max-width: min(100%, 980px)

}



.tab-scroll::-webkit-scrollbar {

    display: none

}



.tab-btn {

    white-space: nowrap;

    border: 1px solid transparent;

    background: transparent;

    color: #304045;

    padding: 8px 14px;

    border-radius: 999px;

    cursor: pointer;

    transition: var(--ease);

    font-weight: 700;

    font-size: 14px

}



.tab-btn:hover {

    background: #f2f7f5

}



.tab-btn[aria-selected="true"] {

    background: #0d5c46;

    border-color: #0d5c46;

    color: #fff

}



.nav-arrow {

    border: 0;

    background: transparent;

    width: 36px;

    height: 36px;

    border-radius: 8px;

    display: grid;

    place-items: center;

    cursor: pointer;

    transition: var(--ease)

}



.nav-arrow i {

    color: #222;

}



.nav-arrow:hover {

    background: transparent

}



.nav-arrow:disabled {

    opacity: .35;

    cursor: not-allowed

}



.panels {

    margin-top: 16px

}





.tab {

    display: none;

    gap: 16px;

    align-items: center

}



.tab[aria-hidden="false"] {

    display: grid;

    grid-template-columns: 1.05fr .95fr

}



@media (max-width:960px) {

    .tab[aria-hidden="false"] {

        grid-template-columns: 1fr

    }

}



.tab .img-card {

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

    border-radius: 16px;

    overflow: hidden

}



.tab .img-card img {

    width: 100%;

    height: 260px;

    object-fit: cover

}



.tab .body .h2 {

    margin-bottom: 6px

}



.tab .body p {

    margin: 6px 0;

    line-height: 1.95;

    color: #374151

}



/* ================== Values ================== */

.values {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 12px

}



@media (max-width:900px) {

    .values {

        grid-template-columns: 1fr

    }

}



.val {

    display: grid;

    grid-template-columns: 48px 1fr;

    gap: 12px;

    align-items: start;

    padding: 14px;

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

    border-radius: 14px;

    background: #fff

}



.ico {

    width: 48px;

    height: 48px;

    border-radius: 12px;

    display: grid;

    place-items: center;

    background: #076B50;

    color: #fff

}



.val h3 {

    margin: 2px 0 4px

}



.val p {

    margin: 0;

    color: #4b5563;

    line-height: 1.9;

    font-size: 14px

}



/* ================== Faculty ================== */

.fac-head {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 26px;

    margin-bottom: 10px

}



.fac-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px

}



@media (max-width:1040px) {

    .fac-grid {

        grid-template-columns: 1fr

    }

}



.row {

    display: grid;

    grid-template-columns: 96px 1fr auto;

    gap: 14px;

    align-items: center;

    padding: 12px;

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

    border-radius: 14px;

    background: #fff;

    transition: var(--ease);

    width: 100%

}



.row:hover {

    border: 1px solid #055943

}



.avatar {

    width: 96px;

    height: 96px;

    border-radius: 14px;

    overflow: hidden;

    border: 1px solid var(--line)

}



.meta .role {

    color: var(--muted);

    font-weight: 600

}



.tags {

    display: flex;

    gap: 6px;

    flex-wrap: wrap;

    margin-top: 4px

}



.tag {

    border: 1px dashed #d9e8e3;

    background: #f5fbf8;

    color: #214e42;

    border-radius: 999px;

    padding: 2px 10px;

    font-size: 12px;

    font-weight: 800

}



.actions {

    display: flex;

    gap: 6px

}



.icon-btn {

    width: 38px;

    height: 38px;

    border-radius: 10px;

    border: 1px solid #dfe8e5;

    background: #fff;

    color: #245a4c;

    display: grid;

    place-items: center;

    transition: var(--ease)

}



.icon-btn:hover {

    transform: translateY(-2px)

}



.cta-mini {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 12px;

    border-radius: 999px;

    border: 1px solid #cfe5de;

    background: #eaf5f0;

    color: #0d5c46;

    font-weight: 800

}



/* ================== CTA Section ================== */

.cta {

    position: relative;

    overflow: hidden;

    border-radius: 12px;

    background: #fff

}



.cta-inner {

    display: flex;

    flex-wrap: wrap;

    gap: 16px;

    align-items: center;

    justify-content: space-between;

    padding: 18px

}



.cta .text h3 {

    margin: 0 0 4px

}



.cta .text p {

    margin: 0;

    color: #445555

}



.cta .btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: var(--brand);

    color: #fff;

    padding: 10px 16px;

    border-radius: 999px;

    border: 0;

    font-weight: 900;

    cursor: pointer

}



.cta svg {

    position: absolute;

    inset: auto auto -16px -16px;

    opacity: .50

}



/* ================== Reveal (on scroll) ================== */

.reveal {

    opacity: 0;

    transform: translateY(18px);

    transition: opacity .6s var(--ease), transform .6s var(--ease)

}



.reveal.show {

    opacity: 1;

    transform: none

}



/* ================== Gallery (Pro) ================== */

.gallery-head {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 28px;

    margin-bottom: 10px

}



.pro-gallery {

    --gap: 10px;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: var(--gap)

}



@media (max-width:1024px) {

    .pro-gallery {

        grid-template-columns: repeat(3, 1fr)

    }

}



@media (max-width:640px) {

    .pro-gallery {

        grid-template-columns: repeat(2, 1fr)

    }

}



.pro-gallery .g {

    position: relative;

    aspect-ratio: 1/1;

    border-radius: 12px;

    overflow: hidden;

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

    cursor: pointer;

    background: #f7faf8;

    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;

}



.pro-gallery .g:hover {

    transform: translateY(-2px);

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

    border-color: #cfe5de

}



.pro-gallery .g img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transform: scale(1.01);

    transition: transform .6s ease

}



.pro-gallery .g:hover img {

    transform: scale(1.06)

}



.gallery-more {

    display: flex;

    justify-content: center;

    margin-top: 12px

}



/* ================== Gallery Modal ================== */

.pg-backdrop {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, .7);

    backdrop-filter: blur(1px);

    opacity: 0;

    pointer-events: none;

    transition: opacity .25s ease;

    z-index: 70

}



.pg-backdrop.show {

    opacity: 1;

    pointer-events: auto

}



.pg-modal {

    position: fixed;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%) scale(.98);

    width: min(96vw, 1100px);

    max-height: 92vh;

    background: var(--card);

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

    border-radius: 16px;

    box-shadow: 0 40px 120px rgba(0, 0, 0, .35);

    display: grid;

    grid-template-rows: auto auto;

    gap: 8px;

    padding: 10px;

    opacity: 0;

    pointer-events: none;

    transition: transform .25s ease, opacity .25s ease;

    z-index: 1000

}



.pg-modal.show {

    opacity: 1;

    pointer-events: auto;

    transform: translate(-50%, -50%) scale(1)

}



.pg-close {

    position: absolute;

    inset: 10px auto auto 10px;

    width: 44px;

    height: 44px;

    border-radius: 12px;

    border: 0;

    background: #db1032;

    color: #fff;

    cursor: pointer;

    display: grid;

    place-items: center;

    transition: transform .15s ease, box-shadow .2s ease;

    z-index: 2

}



.pg-close:hover {

    box-shadow: 0 0 0 3px rgba(219, 16, 50, .18);

    transform: translateY(-1px)

}



.pg-stage {

    position: relative;

    margin: 0;

    display: grid;

    place-items: center;

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

    border-radius: 12px;

    overflow: hidden

}



.pg-stage img {

    width: 100%;

    max-height: 64vh;

    object-fit: contain;

    background: #0b0b0b

}



.pg-stage.loading::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(90deg, #f3f7f5 0%, #ffffff 50%, #f3f7f5 100%);

    animation: shimmer 1.2s infinite

}



@keyframes shimmer {

    from {

        transform: translateX(-100%)

    }



    to {

        transform: translateX(100%)

    }

}



.pg-nav {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 46px;

    height: 46px;

    border-radius: 12px;

    border: 0;

    background: rgba(255, 255, 255, .9);

    color: #0d5c46;

    cursor: pointer;

    display: grid;

    place-items: center;

    transition: transform .15s ease, box-shadow .2s ease, background .2s ease

}



.pg-prev {

    right: 10px

}



.pg-next {

    left: 10px

}



.pg-nav:hover {

    box-shadow: 0 0 0 3px rgba(144, 218, 192, .35);

    transform: translateY(-50%) translateY(-1px)

}



.pg-nav i {

    font-size: 20px;

    line-height: 1

}



.pg-meta {

    display: grid;

    gap: 8px

}



.pg-caption {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 6px 6px 0;

    color: var(--ink)

}



.pg-counter {

    background: #f1f6f4;

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

    padding: 2px 8px;

    border-radius: 999px;

    font-weight: 800;

    font-size: .86rem

}



.pg-thumbs {

    display: grid;

    grid-auto-flow: column;

    gap: 8px;

    overflow: auto hidden;

    padding-bottom: 6px

}



.pg-thumbs::-webkit-scrollbar {

    height: 8px

}



.pg-thumbs::-webkit-scrollbar-thumb {

    background: #dfe8e5;

    border-radius: 999px

}



.pg-thumbs .t {

    flex: 0 0 auto;

    width: 92px;

    aspect-ratio: 16/10;

    border-radius: 10px;

    border: 2px solid transparent;

    overflow: hidden;

    cursor: pointer;

    background: #f7faf8;

    transition: border-color .2s ease, transform .2s ease

}



.pg-thumbs .t img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block

}



.pg-thumbs .t:hover {

    transform: translateY(-1px)

}



.pg-thumbs .t.active {

    border-color: #0d5c46

}



@media (max-width:640px) {

    .pg-stage img {

        max-height: 56vh

    }



    .pg-nav {

        width: 42px;

        height: 42px

    }

}



/* ================== Prefers Reduced Motion ================== */

@media (prefers-reduced-motion:reduce) {



    .pg-modal,

    .pg-backdrop,

    .pro-gallery .g img,

    .reveal {

        transition: none !important

    }

}



/* ================== Utilities (optional) ================== */

[dir="rtl"] .pg-prev i::before {

    transform: none

}



[dir="rtl"] .pg-next i::before {

    transform: none

}



/* پیش‌نمایش مطمئن با پس‌زمینه (حتی اگر <img> دیر بیاد) */

.pro-gallery .g {

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}



/* اگر هم img لود شد، روی بک‌گراند می‌شینه */

.pro-gallery .g img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



/* --- PRO GALLERY: SAFE BUTTON RESET --- */

.pro-gallery .g {

    display: block;

    /* مطمئن شو خودش بلاک هست */

    padding: 0;

    /* پدینگ پیشفرض دکمه‌ها حذف */

    border: 1px solid var(--line, #e7eeec);

    background-color: #f7faf8;

    /* رنگ زمینه تا قبل از لود */

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

    aspect-ratio: 1/1;

    border-radius: 12px;

    overflow: hidden;

    cursor: pointer;

    transition: transform .25s, box-shadow .25s, border-color .25s;

}



.pro-gallery .g:hover {

    transform: translateY(-2px);

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

    border-color: #cfe5de;

}



.pro-gallery .g img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    /* مهم: حتماً دیده شود */

}



/* =========================

   Faculty – Responsive Fix

   (paste at the end of about.css)

========================= */



/* پایه: ناحیه‌بندی گرید کارت استاد */

.fac-grid .row {

    display: grid;

    grid-template-columns: 96px 1fr auto;

    /* آواتار | متن | اکشن‌ها */

    grid-template-areas: "avatar meta actions";

    align-items: center;

    gap: 14px;

}



/* نگاشت نواحی */

.fac-grid .avatar {

    grid-area: avatar;

}



.fac-grid .meta {

    grid-area: meta;

    min-width: 0;

}



.fac-grid .actions {

    grid-area: actions;

}



/* جلوگیری از شکست بد تیترهای خیلی بلند */

.fac-grid .meta .h3 {

    font-weight: 800;

    line-height: 1.5;

    word-break: break-word;

    /* اگر اسم طولانی شد، نشکنه طرح */

    overflow-wrap: anywhere;

}



/* دکمه‌های اکشن: لمس‌پذیرتر */

.fac-grid .icon-btn {

    width: 42px;

    height: 42px;

    border-radius: 12px;

}



/* آواتار همیشه مربعی و کاور درست */

.fac-grid .avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



/* --------- Breakpoint 1: <= 1040px --------- */

/* خود گرید به تک‌ستونه می‌ره (تو CSS قبلی‌ات هست)،

     اینجا فقط کارت را کمی فشرده‌تر و سازگارتر می‌کنیم */

@media (max-width:1040px) {

    .fac-grid {

        grid-template-columns: 1fr;

    }



    .fac-grid .row {

        grid-template-columns: 88px 1fr auto;

    }



    .fac-grid .avatar {

        width: 88px;

        height: 88px;

    }

}



/* --------- Breakpoint 2: <= 780px --------- */

/* اکشن‌ها می‌آیند زیر متن تا فضا باز شود، چینش دو ردیفی تمیز */

@media (max-width:780px) {

    .fac-grid .row {

        grid-template-columns: 80px 1fr;

        /* دو ستون */

        grid-template-areas:

            "avatar meta"

            "actions actions";

        /* اکشن‌ها زیرش */

        align-items: start;

    }



    .fac-grid .avatar {

        width: 80px;

        height: 80px;

    }



    .fac-grid .actions {

        justify-self: start;

        /* در RTL: سمت راست کارت */

        display: flex;

        gap: 8px;

        margin-top: 6px;

        flex-wrap: wrap;

        /* اگر جا کم بود، بشکنه */

    }

}



/* --------- Breakpoint 3: <= 560px --------- */

/* آواتار می‌آید بالا، متن زیرش، اکشن‌ها در یک ردیف اسکرولی */

@media (max-width:560px) {

    .fac-grid .row {

        grid-template-columns: 1fr;

        /* تک‌ستون */

        grid-template-areas:

            "avatar"

            "meta"

            "actions";

        gap: 10px;

        text-align: start;

        /* خوانایی بهتر در RTL */

    }



    .fac-grid .avatar {

        width: 88px;

        height: 88px;

        justify-self: start;

        /* در RTL: راست کارت */

    }



    .fac-grid .meta .h3 {

        font-size: 15px;

        /* کمی فشرده‌تر روی موبایل */

    }



    .fac-grid .meta .role {

        font-size: 14px;

    }



    .fac-grid .tags .tag {

        font-size: 11px;

        padding: 2px 8px;

    }



    /* اکشن‌ها: اسکرول افقی نرم اگر جا کم شد */

    .fac-grid .actions {

        display: grid;

        grid-auto-flow: column;

        gap: 8px;

        overflow: auto hidden;

        padding-bottom: 2px;

        /* جا برای اسکرول‌بار */

    }



    .fac-grid .actions::-webkit-scrollbar {

        height: 6px;

    }



    .fac-grid .actions::-webkit-scrollbar-thumb {

        background: #dfe8e5;

        border-radius: 999px;

    }



    .fac-grid .icon-btn {

        width: 44px;

        height: 44px;

        /* تاچ‌تارگت استاندارد */

    }

}



/* --------- جزئیات ظاهری بهتر --------- */



/* در هاور کارت روی دسکتاپ */

@media (hover:hover) {

    .fac-grid .row:hover {

        border-color: #055943;

        transform: translateY(-1px);

        box-shadow: 0 10px 24px rgba(0, 0, 0, .04);

    }

}



/* فاصله‌ی تگ‌ها اگر خیلی زیاد شدند */

.fac-grid .tags {

    row-gap: 6px;

}



/* جلوگیری از کشیدگی اکشن‌ها در دسکتاپ */

.fac-grid .actions {

    display: flex;

    gap: 6px;

    align-items: center;

    justify-self: end;

    /* کنار کارت */

}





:root {

    --primary: #076b50;

    --primary-dark: #055943;

    --fac-line: #e6eaee;

    --fac-card: #fff;

    --fac-ink: #121a27;

    --fac-muted: #5f6b72;

    --fac-z-bg: 10040;

    --fac-z-modal: 10050;

    --fac-glass: rgba(255, 255, 255, .72);

}



/* Backdrop */

.fac-modal-bg {

    position: fixed;

    inset: 0;

    background: rgba(18, 26, 39, .55);

    backdrop-filter: blur(4px);

    -webkit-backdrop-filter: blur(4px);

    opacity: 0;

    pointer-events: none;

    transition: opacity .28s ease;

    z-index: var(--fac-z-bg)

}



.fac-modal-bg.show {

    opacity: 1;

    pointer-events: auto

}



/* Shell */

.fac-modal {

    position: fixed;

    inset: auto 0 0 0;

    margin: auto;

    width: min(920px, 94vw);

    max-height: 90vh;

    display: flex;

    flex-direction: column;

    background: linear-gradient(180deg, var(--fac-glass), #fff);

    border: 1px solid rgba(0, 0, 0, .06);

    border-radius: 20px;

    box-shadow: 0 30px 120px rgba(0, 0, 0, .35);

    transform: translateY(22px) scale(.98);

    opacity: 0;

    pointer-events: none;

    transition: transform .35s cubic-bezier(.2, .7, .2, 1), opacity .25s ease;

    z-index: var(--fac-z-modal);

    direction: rtl;

    overflow: hidden

}



.fac-modal.show {

    transform: none;

    opacity: 1;

    pointer-events: auto

}



/* Header */

.facm-head {

    position: sticky;

    top: 0;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    width: 100%;

    padding: 14px 16px;

    color: #fff;

    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 60%);

    border-bottom: 1px solid rgba(255, 255, 255, .12);

    box-shadow: 0 6px 22px rgba(0, 0, 0, .08)

}



.facm-head b {

    font-size: clamp(1.05rem, 1.2vw + .8rem, 1.35rem);

    font-weight: 800;

    line-height: 1.2;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis

}



/* Close button */

.facm-close {

    display: flex;

    align-items: center;

    justify-content: center;

    border: 0;

    background: #fff;

    color: var(--primary);

    width: 42px;

    height: 42px;

    border-radius: 12px;

    cursor: pointer;

    line-height: 0;

    padding: 0;

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

    transition: transform .18s ease, box-shadow .18s ease

}



.facm-close:hover {

    transform: translateY(-1px);

    box-shadow: 0 10px 24px rgba(0, 0, 0, .16)

}



.facm-close:active {

    transform: none

}



.facm-close svg {

    display: block;

    width: 22px;

    height: 22px

}



/* Body */

.facm-body {

    display: grid;

    grid-template-columns: 260px 1fr;

    gap: 16px;

    padding: 16px;

    overflow: auto;

    -webkit-overflow-scrolling: touch

}



@media (max-width:760px) {

    .facm-body {

        grid-template-columns: 1fr

    }

}



/* Cover */

.facm-cover {

    width: 100%;

    aspect-ratio: 1/1;

    object-fit: cover;

    border-radius: 14px;

    border: 1px solid var(--fac-line);

    box-shadow: 0 8px 26px rgba(0, 0, 0, .06);

    background: #fff

}



/* Right column */

.facm-col {

    display: flex;

    flex-direction: column;

    gap: 10px;

    min-width: 0

}



/* Role */

.facm-role {

    color: #27423a;

    font-weight: 700;

    width: fit-content;

    background: linear-gradient(90deg, #eaf7f1, transparent);

    border: 1px solid #d6efe4;

    border-radius: 10px;

    padding: .5rem .65rem;

    line-height: 1.6;

    overflow-wrap: anywhere

}



/* Tags */

.facm-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px

}



.facm-tags .tag {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    font-size: .85rem;

    color: #27423a;

    padding: .3rem .6rem;

    border: 1px solid #dbe7e2;

    background: #f7faf8;

    border-radius: 999px

}



/* Bio */

.facm-bio {

    color: var(--fac-ink);

    line-height: 1.9;

    font-size: 1rem

}



.facm-bio p {

    margin: .35rem 0

}



.facm-bio a {

    color: var(--primary);

    text-decoration: none;

    border-bottom: 1px dashed rgba(7, 107, 80, .35)

}



.facm-bio a:hover {

    border-bottom-color: transparent

}



/* Contacts */

.facm-contacts {

    display: flex;

    flex-wrap: wrap;

    gap: 12px 14px;

    margin-top: 4px

}



.facm-contacts .icon-btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    min-height: 42px;

    padding: .55rem .75rem;

    border-radius: 12px;

    text-decoration: none;

    color: #0a3a2a;

    border: 1px solid #dfe7e4;

    background: #fff;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    max-width: 100%;

    flex: 1 1 100%;

    justify-content: center

}



.facm-contacts .icon-btn i {

    color: var(--primary)

}



@media (min-width:600px) {

    .facm-contacts .icon-btn {

        flex: 0 1 calc(50% - 14px);

        justify-content: flex-start

    }

}



@media (min-width:1024px) {

    .facm-contacts .icon-btn {

        flex: 0 1 calc(33.333% - 14px)

    }

}



/* Scroll */

.facm-body::-webkit-scrollbar {

    height: 10px;

    width: 10px

}



.facm-body::-webkit-scrollbar-thumb {

    background: #d8e4df;

    border-radius: 999px

}



.facm-body::-webkit-scrollbar-track {

    background: transparent

}



/* Lock */

html.faclock,

body.faclock {

    overflow: hidden

}