/* ============================================
   OUR TEAM PAGE STYLES
   Used only by team.html: Meet Our Team profile cards, organisational chart and departments.
============================================ */

/* ===== Meet Our Team: photo profile cards =====
   1 column on phones, 2 on tablets, 3 on desktop. A last row with fewer cards is centred. */
.section-intro {
    max-width: 68ch;
    margin-bottom: 2.2rem;
    font-size: 1.1rem;
    color: var(--stone);
}

.profile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    grid-auto-rows: 1fr; /* every card in the grid has the same height */
    max-width: 440px;
    margin-inline: auto;
}

.profile-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(22, 22, 26, .05);
    transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}

.profile-card:hover {
    border-color: #c9c9d0;
    box-shadow: var(--shadow);
    transform: translateY(-4px);
}

/* Portrait frame 4:5. The photograph is the main visual: it fills the frame and keeps the top (faces) in view */
.profile-photo {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #e4e4e9;
    border-bottom: 3px solid var(--brand-red);
}

.profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    transition: transform .5s var(--ease);
}

.profile-card:hover .profile-photo img {
    transform: scale(1.04);
}

/* Neutral placeholder shown until a real photograph is added */
.photo-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    background: linear-gradient(160deg, #ececef 0%, #dcdce2 100%);
    color: #8d8d96;
}

.photo-placeholder svg {
    width: 46%;
    max-width: 150px;
    fill: #c3c3cb;
}

.photo-placeholder span {
    font: 500 .75rem var(--font-body);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.profile-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.3rem 1.4rem 1.5rem;
}

.profile-name {
    margin: 0 0 .15rem;
    font-size: 1.35rem;
}

/* Clearly labelled placeholder name (no invented people) */
.profile-name.is-placeholder {
    color: var(--stone);
    font-style: italic;
    font-weight: 500;
}

.profile-title {
    margin: 0;
    color: #a50f16;
    font-weight: 600;
    letter-spacing: .01em;
}

.profile-dept {
    margin: .15rem 0 .8rem;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--stone);
}

.profile-desc {
    flex: 1;
    margin: 0;
    padding-top: .8rem;
    border-top: 1px solid var(--line);
    font-size: .96rem;
    color: var(--charcoal);
}

@media (min-width: 640px) {
    .profile-grid {
        grid-template-columns: repeat(4, 1fr);
        max-width: none;
    }

    .profile-card {
        grid-column: span 2;
    }

    /* odd last card sits in the middle */
    .profile-card:last-child:nth-child(2n+1) {
        grid-column: 2 / span 2;
    }
}

@media (min-width: 1000px) {
    .profile-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    /* reset the tablet rule, then centre a last row of one or two cards */
    .profile-card:last-child:nth-child(2n+1) {
        grid-column: span 2;
    }

    .profile-card:last-child:nth-child(3n+1) {
        grid-column: 3 / span 2;
    }

    .profile-card:nth-last-child(2):nth-child(3n+1) {
        grid-column: 2 / span 2;
    }

    .profile-card:last-child:nth-child(3n+2) {
        grid-column: 4 / span 2;
    }
}

/* ===== Organisational chart ===== */

.org-chart {
    --chart-line: #b9b9c2; /* connector lines: darker than the page borders so the structure reads clearly */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
}

.org-title {
    text-align: center;
}

.org-level {
    width: 100%;
}

.org-label,
.org-link span {
    font: 600 .78rem var(--font-body);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #a50f16;
}

.org-label {
    text-align: center;
    margin: 0 auto .8rem;
    max-width: none;
}

.org-row {
    display: flex;
    justify-content: center;
}

/* Each node draws its own piece of the connector: a stub up to the horizontal line */
.org-node {
    position: relative;
    flex: 0 1 220px;
    padding: 28px .5rem 0;
}

.org-level:first-child .org-node {
    padding-top: 0;
}

.org-node::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-top: 2px solid var(--chart-line);
}

.org-node:first-child::before {
    left: 50%;
}

.org-node:last-child::before {
    right: 50%;
}

.org-node:only-child::before {
    display: none;
}

.org-node::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    height: 28px;
    border-left: 2px solid var(--chart-line);
}

.org-level:first-child .org-node::before,
.org-level:first-child .org-node::after {
    display: none;
}

.org-link {
    position: relative;
    width: 2px;
    height: 46px;
    margin: 0 auto;
    background: var(--chart-line);
}

.org-link span {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
}

.org-card {
    height: 100%;
    padding: 1.05rem 1.1rem;
    box-shadow: 0 1px 2px rgba(22, 22, 26, .05);
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 3px solid var(--brand-red);
    border-radius: var(--radius);
    transition: box-shadow .2s, transform .2s;
}

.org-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.org-card h3 {
    font-size: 1.02rem;
    margin-bottom: .3rem;
}

.org-card .dept {
    margin: 0;
    font-size: .85rem;
    color: var(--stone);
}

.dept-list {
    border-top: 1px solid var(--line);
}

.dept-row {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1.3fr;
    gap: 1.5rem;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--line);
    align-items: start;
}

.dept-row h3,
.dept-row p {
    margin: 0;
}

.dept-roles {
    color: var(--stone);
    font-size: .92rem;
}

@media (max-width: 1040px) {
    .org-chart {
        align-items: stretch;
    }

    .org-label {
        text-align: left;
    }

    .org-link {
        width: auto;
        height: auto;
        margin: 1.4rem 0 .8rem;
        background: none;
    }

    .org-link span {
        position: static;
        transform: none;
    }

    .org-row {
        flex-direction: column;
        justify-content: flex-start;
        margin-left: .4rem;
        padding-left: 1.1rem;
        border-left: 2px solid var(--chart-line);
    }

    .org-node,
    .org-level:first-child .org-node {
        flex: none;
        padding: 0 0 .8rem;
    }

    .org-node::before,
    .org-node:first-child::before,
    .org-node:last-child::before,
    .org-node:only-child::before,
    .org-level:first-child .org-node::before {
        display: block;
        left: -1.1rem;
        right: auto;
        width: 1.1rem;
        top: 1.4rem;
    }

    .org-node::after,
    .org-level:first-child .org-node::after {
        display: none;
    }

    .dept-row {
        grid-template-columns: 1fr;
        gap: .4rem;
    }
}