/* ============================================================
   PILVAN TEAM — 3D NEUMORPHIC / SKEUOMORPHIC TEAM SECTION
   All selectors are scoped under .pilvan-team-section
   ============================================================ */

:root {
    --pilvan-team-white: #ffffff;
    --pilvan-team-surface: #f7f9fc;
    --pilvan-team-navy: #0a2342;
    --pilvan-team-navy-dark: #06172d;
    --pilvan-team-navy-soft: #dce5ef;
    --pilvan-team-text: #14263b;
    --pilvan-team-muted: #687789;
}

/* ---------- SECTION SHELL ---------- */

.pilvan-team-section {
    position: relative;
    /* width: 100%; */
    background: var(--pilvan-team-white);
    padding: 40px 0 35px;
    font-family: "Poppins", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    color: var(--pilvan-team-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
    margin: 25px;
  background: linear-gradient(145deg, #cdcdcd, #6c6c6c);
  box-shadow: inset 25px 25px 45px rgba(25, 24, 24, 0.27), inset -20px -20px 40px rgba(36, 35, 35, 0.58), inset 7px 7px 16px rgba(0, 0, 0, 0.65), inset -7px -7px 16px rgba(29, 29, 29, 0.54);
  border-radius: 30px;
}

.pilvan-team-section *,
.pilvan-team-section *::before,
.pilvan-team-section *::after {
    box-sizing: border-box;
}

.pilvan-team-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding-inline: 28px;
}

/* ---------- HEADER ---------- */

.pilvan-team-header {
    max-width: 780px;
    margin: 0 auto 62px;
    padding: 36px 34px 34px;
    text-align: center;
    border-radius: 20px;
    background: linear-gradient(160deg, #fbfcfe 0%, #f4f7fb 100%);
    box-shadow:
        inset 7px 7px 18px rgba(6, 23, 45, 0.075),
        inset -7px -7px 18px rgba(255, 255, 255, 0.95),
        0 0 0 1px rgba(10, 35, 66, 0.05),
        0 1px 0 rgba(255, 255, 255, 0.9);
}

.pilvan-team-title {
    margin: 0 0 14px;
    font-size: clamp(1.55rem, 2.4vw, 2.05rem);
    line-height: 1.22;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--pilvan-team-navy-dark);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.pilvan-team-intro {
    margin: 0 auto;
    max-width: 640px;
    font-size: 0.955rem;
    line-height: 1.75;
    font-weight: 400;
    color: var(--pilvan-team-muted);
}

/* ---------- GRID : 3 + 3 + 1 ---------- */

.pilvan-team-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    perspective: 1400px;
    perspective-origin: 50% 40%;
    align-items: stretch;
}

/* THE 7TH MEMBER — ALWAYS CENTER COLUMN ON DESKTOP */
.pilvan-team-profile--last {
    grid-column: 2;
}

/* ---------- PROFILE (OUTER RAISED SHELL) ---------- */

.pilvan-team-profile {
    position: relative;
    display: flex;
    min-width: 0;
    height: 100%;
    padding: 13px;
    border-radius: 18px;
    background: linear-gradient(150deg, #ffffff 0%, #f2f5fa 100%);
    box-shadow:
        14px 14px 30px rgba(10, 35, 66, 0.085),
        -12px -12px 28px rgba(255, 255, 255, 0.98),
        0 0 0 1px rgba(10, 35, 66, 0.055);
    transform-style: preserve-3d;
    will-change: transform;
}

.pilvan-team-profile::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(10, 35, 66, 0.045);
}

/* ---------- PROFILE INNER (RECESSED MOULD) ---------- */

.pilvan-team-profile-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 14px;
    padding: 14px;
    border-radius: 14px;
    background: #0a1626;
  box-shadow: inset 8px 8px 18px rgba(6, 23, 45, 0.82), inset -8px -8px 18px rgba(12, 27, 61, 0.95), 0 0 0 1px rgba(10, 35, 66, 0.85);
    transform-style: preserve-3d;
}

/* ---------- PHOTO WELL (RECESSED CAVITY) ---------- */

.pilvan-team-photo {
    position: relative;
    padding: 10px;
    border-radius: 13px;
    background: linear-gradient(150deg, #eef2f8 0%, #ffffff 100%);
    box-shadow:
        inset 5px 5px 13px rgba(6, 23, 45, 0.13),
        inset -5px -5px 13px rgba(255, 255, 255, 0.95),
        0 0 0 1px rgba(10, 35, 66, 0.04);
    transform-style: preserve-3d;
}

.pilvan-team-photo-inner {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: #e9eef5;
    box-shadow:
        5px 5px 14px rgba(6, 23, 45, 0.14),
        -4px -4px 12px rgba(255, 255, 255, 0.95),
        0 0 0 1px rgba(10, 35, 66, 0.09);
    will-change: transform;
}

.pilvan-team-photo-inner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    border: 0;
    margin: 0;
    padding: 0;
}

.pilvan-team-photo-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 1px rgba(10, 35, 66, 0.10),
        inset 0 2px 8px rgba(6, 23, 45, 0.10);
}

/* ---------- CONTENT (CARVED-INFORMATION PANEL) ---------- */

.pilvan-team-content {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 17px 17px 19px;
    border-radius: 12px;
    background: linear-gradient(160deg, #f4f7fb 0%, #fbfcfe 100%);
    box-shadow:
        inset 6px 6px 14px rgba(6, 23, 45, 0.10),
        inset -6px -6px 14px rgba(255, 255, 255, 0.98),
        0 0 0 1px rgba(10, 35, 66, 0.05);
}

.pilvan-team-name {
    margin: 0 0 7px;
    font-size: 1.015rem;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--pilvan-team-navy-dark);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}

.pilvan-team-role {
    margin: 0 0 12px;
    font-size: 0.775rem;
    line-height: 1.45;
    font-weight: 600;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    color: var(--pilvan-team-navy);
    opacity: 0.92;
}

.pilvan-team-desc {
    margin: 0;
    font-size: 0.855rem;
    line-height: 1.68;
    font-weight: 400;
    color: var(--pilvan-team-muted);
}

.pilvan-team-desc strong {
    font-weight: 700;
    color: var(--pilvan-team-text);
}

/* ---------- LAPTOP REFINEMENT ---------- */

@media (max-width: 1280px) {
    .pilvan-team-grid {
        gap: 26px;
    }
    .pilvan-team-profile {
        padding: 11px;
        border-radius: 16px;
    }
    .pilvan-team-profile-inner {
        gap: 12px;
        padding: 12px;
        border-radius: 12px;
    }
    .pilvan-team-photo {
        padding: 8px;
        border-radius: 11px;
    }
    .pilvan-team-content {
        padding: 15px 14px 16px;
    }
    .pilvan-team-name {
        font-size: 0.95rem;
    }
    .pilvan-team-role {
        font-size: 0.725rem;
    }
    .pilvan-team-desc {
        font-size: 0.81rem;
        line-height: 1.6;
    }
}

/* ---------- TABLET : 2 + 2 + 2 + 1 (7TH CENTERED) ---------- */

@media (max-width: 1024px) {
    .pilvan-team-section {
        padding: 76px 0 92px;
    }

    .pilvan-team-header {
        margin-bottom: 48px;
        padding: 30px 26px 28px;
    }

    .pilvan-team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
        perspective: 1100px;
    }

    .pilvan-team-profile--last {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - 12px);
    }
}

/* ---------- MOBILE : 1 PER ROW ---------- */

@media (max-width: 640px) {
    .pilvan-team-section {
        padding: 58px 0 74px;
    }

    .pilvan-team-container {
        padding-inline: 16px;
    }

    .pilvan-team-header {
        margin-bottom: 34px;
        padding: 24px 20px 22px;
        border-radius: 16px;
    }

    .pilvan-team-intro {
        font-size: 0.9rem;
        line-height: 1.68;
    }

    .pilvan-team-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        perspective: 800px;
    }

    .pilvan-team-profile--last {
        grid-column: auto;
        justify-self: stretch;
        width: 100%;
    }

    .pilvan-team-profile {
        padding: 10px;
        border-radius: 15px;
        box-shadow:
            8px 8px 20px rgba(10, 35, 66, 0.07),
            -8px -8px 18px rgba(255, 255, 255, 0.98),
            0 0 0 1px rgba(10, 35, 66, 0.05);
    }

    .pilvan-team-profile-inner {
        padding: 11px;
        border-radius: 12px;
        gap: 11px;
        box-shadow:
            inset 5px 5px 12px rgba(6, 23, 45, 0.09),
            inset -5px -5px 12px rgba(255, 255, 255, 0.95),
            0 0 0 1px rgba(10, 35, 66, 0.03);
    }

    .pilvan-team-photo {
        padding: 8px;
        border-radius: 10px;
    }

    .pilvan-team-photo-inner {
        aspect-ratio: 4 / 3;
        border-radius: 8px;
        box-shadow:
            3px 3px 10px rgba(6, 23, 45, 0.11),
            -3px -3px 9px rgba(255, 255, 255, 0.95),
            0 0 0 1px rgba(10, 35, 66, 0.08);
    }

    .pilvan-team-photo-inner img {
        object-position: center 20%;
    }

    .pilvan-team-content {
        padding: 15px 14px 16px;
        border-radius: 10px;
    }

    .pilvan-team-name {
        font-size: 1rem;
    }

    .pilvan-team-role {
        font-size: 0.735rem;
        margin-bottom: 10px;
    }

    .pilvan-team-desc {
        font-size: 0.845rem;
        line-height: 1.66;
    }
}

/* ---------- REDUCED MOTION ---------- */

@media (prefers-reduced-motion: reduce) {
    .pilvan-team-section * {
        animation: none !important;
        transition: none !important;
    }

    .pilvan-team-grid {
        perspective: none;
    }

    .pilvan-team-profile,
    .pilvan-team-profile-inner,
    .pilvan-team-photo,
    .pilvan-team-photo-inner {
        transform: none !important;
        transform-style: flat;
        will-change: auto;
    }
}