/* Page-specific styles for page-people.php */

:root{
    --people-red:#BC1116;
    --people-black:#0b0b0b;
    --people-white:#f7f7f4;
    /* Set from JS to the rendered .site-header height; used to tuck the
       bento gallery flush under the sticky header within one screen. */
    --people-header-h:0px;
}

.people-page{
    color:var(--people-black);
    /* overflow-x removed here: on an ancestor of the pinned #people-bento,
    it forces overflow-y:auto and breaks GSAP ScrollTrigger's position:fixed
    pin, so the bento Flip never expands on scroll. Clipped on html/body instead. */
    font-family:'ArtifaktLegend',Arial,sans-serif;
}

.people-page a{
    text-decoration:none;
    color:inherit;
}

/* Hero */
.people-hero{
    min-height:78vh;
    position:relative;
    padding:60px 4vw 60px;
    display:grid;
    grid-template-columns:2fr 1fr;
    overflow:hidden;
}

.people-hero:before{
    content:"";
    position:absolute;
    left:52%;
    top:6%;
    height:72%;
    border-left:1px solid #d4d4cf;
}

.people-hero-copy p{
    font:800 11px Arial;
    letter-spacing:3px;
    margin:0;
}

.people-hero-copy p:before{
    content:"";
    display:inline-block;
    width:36px;
    border-top:2px solid var(--people-red);
    vertical-align:middle;
    margin-right:14px;
}

.people-hero-copy h1{
    font-family:'Space','Space Grotesk',Arial,sans-serif;
    font-size:clamp(60px, 9vw, 145px);
    line-height:.78;
    letter-spacing:-.075em;
    margin:52px 0 0;
    font-weight:900;
}

.people-hero-copy h1 em{
    color:var(--people-red);
    font-style:normal;
}

.people-hero-note{
    align-self:end;
    padding:0 2vw 55px 8vw;
    display:flex;
    flex-direction:column;
    gap:22px;
    font-size:14px;
    line-height:1.65;
}

/* Bento scrub gallery (GSAP Flip + ScrollTrigger) */
.people-bento-wrap{
    position:relative;
    width:100%;
    height:calc(100dvh - var(--people-header-h));
    min-height:calc(100vh - var(--people-header-h));
    box-sizing:border-box;
    /* The gallery should occupy only the visible viewport under the header. */
    margin-top:0;
    padding-top:0;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:transparent;
}

.people-bento{
    position:relative;
    width:100%;
    height:100%;
    flex:none;
    display:grid;
    gap:1vh;
    grid-template-columns:repeat(3, 32.5vw);
    /* Same 23vh:49.5vh ratio as the sample (Effect Gsap/style.css) so each
       item scales up by the same factor Flip captured; 1fr broke that ratio
       and made the gaps stretch unevenly mid-scroll. */
    grid-template-rows:repeat(4, calc((100dvh - var(--people-header-h)) * .23));
    justify-content:center;
    align-content:center;
}

.people-bento.gallery--final{
    grid-template-columns:repeat(3, 100vw);
    /* Based on the visible height (viewport minus header), not the raw
       viewport, so the flipped center tile lands flush under the header
       instead of a few vh short and clipped by the wrap's overflow:hidden. */
    grid-template-rows:repeat(4, calc((100dvh - var(--people-header-h)) * .495));
    gap:1vh;
}

.people-bento-item{
	background:#e7e7e4;
    background-position:50% 50%;
    background-size:cover;
    flex:none;
    position:relative;
    overflow:hidden;
}

.people-bento-item img{
    display:block;
    object-fit:cover;
    width:100%;
    height:100%;
    position:relative;
    z-index:1;
}

.people-bento-item:not(.people-bento-item--cue){
    isolation:isolate;
}

.people-bento-item:not(.people-bento-item--cue)::after{
    content:"";
    position:absolute;
    inset:0;
    border:2px solid rgba(188,17,22,.72);
    box-shadow:inset 0 0 18px rgba(188,17,22,.38),
        0 0 18px rgba(188,17,22,.28);
    pointer-events:none;
    z-index:2;
    animation:people-bento-led 2.8s ease-in-out infinite;
}

.people-bento-item:not(.people-bento-item--cue) img{
    transform-origin:center center;
    animation:people-bento-float 5.5s ease-in-out infinite;
}

.people-bento .people-bento-item:nth-child(1) img,
.people-bento .people-bento-item:nth-child(6) img{
    animation-delay:-1.2s;
}

.people-bento .people-bento-item:nth-child(2) img,
.people-bento .people-bento-item:nth-child(7) img{
    animation-delay:-2.7s;
}

.people-bento .people-bento-item:nth-child(4) img,
.people-bento .people-bento-item:nth-child(8) img{
    animation-delay:-3.8s;
}

@keyframes people-bento-led{
    0%, 100%{
        border-color:rgba(188,17,22,.62);
        box-shadow:inset 0 0 16px rgba(188,17,22,.34),
            0 0 16px rgba(188,17,22,.24);
    }
    50%{
        border-color:rgba(188,17,22,1);
        box-shadow:inset 0 0 30px rgba(188,17,22,.68),
            0 0 30px rgba(188,17,22,.5);
    }
}

@keyframes people-bento-float{
    0%, 100%{ transform:scale(1) translateY(0); }
    50%{ transform:scale(1.025) translateY(-.35%); }
}

.people-bento .people-bento-item:nth-child(1){ grid-area:1 / 1 / 3 / 2; }
.people-bento .people-bento-item:nth-child(2){ grid-area:1 / 2 / 2 / 3; }
.people-bento .people-bento-item:nth-child(3){ grid-area:2 / 2 / 4 / 3; }
.people-bento .people-bento-item:nth-child(4){ grid-area:1 / 3 / 3 / 4; }
.people-bento .people-bento-item:nth-child(5){ grid-area:3 / 1 / 4 / 2; }
.people-bento .people-bento-item:nth-child(6){ grid-area:3 / 3 / 5 / 4; }
.people-bento .people-bento-item:nth-child(7){ grid-area:4 / 1 / 5 / 2; }
.people-bento .people-bento-item:nth-child(8){ grid-area:4 / 2 / 5 / 3; }

/* Frame 5 has no photo yet: this cell doubles as the "keep scrolling" cue
   since it's the tile that swells to full width as the bento Flip resolves.
   The Flip tween scales this box via CSS transform, so the text below (sized
   in vw/em, no fixed px) grows in lockstep with the box automatically. */
.people-bento-item--cue{
    background:transparent;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:6% 7%;
}

.people-scroll-cue{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.7em;
    max-width:100%;
    color:var(--people-red);
    font:900 clamp(11px, 1.65vw, 27px) 'Space','Space Grotesk',Arial,sans-serif;
    letter-spacing:.08em;
    text-transform:uppercase;
    text-align:center;
    line-height:1.3;
    white-space:normal;
    overflow-wrap:break-word;
    transform-origin:center center;
}

.people-scroll-cue-text{
    display:inline-block;
    /* letter-spacing adds trailing space after the last char, which skews
       flex-centering left; this margin cancels that extra sliver of width. */
    margin-right:-.08em;
    animation:people-scroll-cue-pulse 1.8s ease-in-out infinite;
}

.people-scroll-cue-arrow{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:2.2em;
    height:2.2em;
    flex:none;
    animation:people-scroll-cue-bounce 1.6s ease-in-out infinite;
}

.people-scroll-cue-arrow:before,
.people-scroll-cue-arrow:after{
    content:"";
    position:absolute;
    inset:0;
    border:2px solid var(--people-red);
    border-radius:50%;
    animation:people-scroll-cue-ripple 1.8s ease-out infinite;
}

.people-scroll-cue-arrow:after{
    animation-delay:.6s;
}

.people-scroll-cue-arrow-glyph{
    position:absolute;
    top:50%;
    left:50%;
    width:.5em;
    height:.5em;
    border-right:.15em solid var(--people-red);
    border-bottom:.15em solid var(--people-red);
    transform:translate(-65%, -75%) rotate(45deg);
}

@keyframes people-scroll-cue-pulse{
    0%, 100%{ opacity:1; transform:scale(1); text-shadow:0 0 0 rgba(188,17,22,0); }
    50%{ opacity:.7; transform:scale(1.04); text-shadow:0 0 18px rgba(188,17,22,.5); }
}

@keyframes people-scroll-cue-bounce{
    0%, 50%, 100%{ transform:translateY(0); }
    25%{ transform:translateY(8px); }
}

@keyframes people-scroll-cue-ripple{
    0%{ transform:scale(.6); opacity:.9; }
    100%{ transform:scale(1.9); opacity:0; }
}

.people-scroll{
    position:absolute;
    bottom:42px;
    left:4vw;
    font-size:10px;
    font-weight:700;
    letter-spacing:2px;
}

.people-scroll i{
    color:var(--people-red);
    font-size:20px;
    margin-left:12px;
    font-style:normal;
}

.people-red-block{
    position:absolute;
    background:var(--people-red);
    width:16vw;
    height:15px;
    right:0;
    bottom:0;
}

/* Directory */
.people-directory{
    padding:120px 4vw 60px;
}

.people-section-head{
    display:grid;
    grid-template-columns:1fr 2fr 1fr;
    align-items:end;
    padding-bottom:50px;
}

.people-section-head>p{
    align-self:start;
    font:800 11px Arial;
    letter-spacing:2px;
    margin:0;
}

.people-section-head>p span{
    color:var(--people-red);
    margin-right:15px;
}

.people-section-head h2{
    font-size:clamp(55px, 7vw, 105px);
    line-height:.82;
    letter-spacing:-.07em;
    margin:0;
}

.people-section-head h2 span{
    color:var(--people-red);
}

.people-section-head>div{
    text-align:right;
    font-size:78px;
    font-weight:200;
    line-height:.65;
    color:var(--people-red);
}

.people-count{
    display:inline-block;
    min-width:2ch;
    text-align:right;
    font-variant-numeric:tabular-nums;
}

.people-section-head small{
    display:inline-block;
    text-align:left;
    color:#111;
    font-size:9px;
    line-height:1.5;
    letter-spacing:1px;
    margin-left:10px;
}

.people-filters{
    border-top:1px solid #aaa;
    border-bottom:1px solid #aaa;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    padding:20px 0;
    gap:8px;
    margin-bottom:48px;
}

.people-search{
    margin-left:auto;
}

.people-search-input{
    border:1px solid #ccc;
    background:transparent;
    padding:10px 16px;
    font:10px Arial;
    letter-spacing:1px;
    width:220px;
    max-width:100%;
    transition:border-color .3s, width .3s;
}

.people-search-input::placeholder{
    color:#999;
}

.people-search-input:focus{
    outline:none;
    border-color:#BC1116;
    width:260px;
}

.people-filter-btn{
    border:0;
    background:transparent;
    padding:10px 16px;
    font:bold 10px Arial;
    letter-spacing:1.2px;
    cursor:pointer;
    transition:.3s;
}

.people-filter-btn:hover,
.people-filter-btn.is-selected{
    background:#BC1116;
    color:#fff;
}

.people-filter-btn.is-selected:before{
    content:"\2022";
    color:var(--people-red);
    margin-right:8px;
}

.people-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:55px 18px;
}

.people-person{
    display:block;
}

.people-person[hidden]{
    display:none;
}

/* GSAP Flip drives opacity/transform during a filter switch; the
   .people-reveal CSS transition must sit out or it fights the tween. */
.people-grid.is-flipping .people-person{
    transition:none;
}

.people-portrait{
    aspect-ratio:3/4;
    position:relative;
    perspective:900px;
}

/* Front (cover + pop) and back (profile info) rotate together as one 3D group on click. */
.people-flip{
    position:absolute;
    inset:0;
    transform-style:preserve-3d;
    transform:rotateY(0deg);
}

.people-flip-front,
.people-flip-back{
    position:absolute;
    inset:0;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}

.people-flip.is-flipped .people-flip-front{
    pointer-events:none;
}

.people-flip-back{
    transform:rotateY(180deg);
    z-index:5;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    background:#fff;
    border:3px solid #BC1116;
    border-radius:16px;
    overflow:hidden;
    pointer-events:none;
}

.people-flip.is-flipped .people-flip-back{
    pointer-events:auto;
}

.people-flip-back-info{
    padding:20px 17px;
}

.people-flip-back-info h4{
    margin:0 0 6px;
    font:bold 20px Arial;
    color:#111;
}

.people-flip-back-info p{
    margin:0 0 10px;
    font:600 15px Arial;
    color:#555;
}

.people-flip-back-info b{
    display:block;
    font:bold 15px Arial;
    letter-spacing:1.5px;
    color:#BC1116;
}

.people-person-back{
    border:none;
    appearance:none;
    width:100%;
    padding:17px;
    background:#111;
    color:#fff;
    font:bold 9px Arial;
    letter-spacing:1.5px;
    text-align:left;
    cursor:pointer;
}

.people-portrait-cover{
    position:absolute;
    inset:0;
    z-index:1;
    border-radius:16px;
    overflow:hidden;
    transform-origin:center 85%;
    transform:perspective(900px) rotateX(0deg) translateY(0) scale(1);
    transition:transform .35s ease, box-shadow .35s ease, filter .35s ease;
	background:#e7e7e4;
}

.people-flip-back-info .people-profile-description{
    max-height:clamp(110px, 19vw, 220px);
    margin:15px 0;
    padding-top:14px;
    overflow:auto;
    border-top:1px solid #ddd;
    color:#333;
    font-size:12px;
    line-height:1.55;
}

.people-portrait-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* Dims the receding cover layer on hover instead of a flat solid backing. */
.people-portrait-cover:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0) 60%);
    opacity:.35;
    transition:opacity .5s ease;
}

.people-portrait:hover .people-portrait-cover{
    transform:perspective(900px) rotateX(calc(20deg + var(--tilt-y, 0deg))) rotateY(var(--tilt-x, 0deg)) translateY(-4%) scale(.92);
    box-shadow:2px 35px 32px -8px rgba(0,0,0,.75);
    filter:blur(2px);
}

.people-portrait:hover .people-portrait-cover:after{
    opacity:.82;
}

/* Pops out small-to-large in front of the tilted cover on hover, standing in
   for the tutorial's separate cut-out "character" image. Sized larger than
   the frame itself so it overflows past the top only - the bottom stays
   flush with the frame so it never spills over the name/role text below. */
.people-portrait-pop{
    position:absolute;
    left:50%;
    bottom:0;
    z-index:4;
    width:104%;
    max-height:118%;
    object-fit:contain;
    object-position:bottom;
    filter:drop-shadow(0 18px 26px rgba(0,0,0,.5));
    transform:translate3d(-50%, 40px, 0) scale(.82);
    opacity:0;
    transition:opacity .35s ease, transform .35s ease;
    pointer-events:none;
}

.people-portrait:hover .people-portrait-pop{
    opacity:1;
    transform:translate3d(-50%, -6%, 90px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) scale(1);
}

.people-person-num{
    position:absolute;
    top:12px;
    left:12px;
    z-index:4;
    background:#fff;
    padding:6px 8px;
    font:bold 9px Arial;
}

.people-person-view{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    z-index:4;
    overflow:hidden;
    border:none;
    appearance:none;
    width:100%;
    padding:17px;
    background:#111;
    color:#fff;
    font:bold 9px Arial;
    letter-spacing:1.5px;
    text-align:left;
    cursor:pointer;
    opacity:0;
    transform:translateY(12px);
    transition:opacity .35s ease, transform .35s ease;
    pointer-events:none;
}

.people-person-view:before{
    content:"";
    position:absolute;
    inset:0;
    background:#BC1116;
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .4s ease;
}

.people-person-view:hover:before{
    transform:scaleX(1);
}

.people-person-view span{
    position:relative;
    z-index:1;
}

.people-portrait:hover .people-person-view{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}

.people-meta{
    padding:15px 2px;
    border-top:3px solid #111;
    margin-top:5px;
    position:relative;
}

.people-meta:after{
    content:"";
    position:absolute;
    top:-3px;
    left:0;
    width:0;
    border-top:3px solid var(--people-red);
    transition:.5s;
}

.people-portrait:hover ~ .people-meta:after{
    width:100%;
}

.people-meta h3{
    text-transform:uppercase;
    margin:0 0 6px;
    font-size:19px;
}

.people-meta p{
    margin:0;
    color:#777;
    font-size:11px;
}

.people-meta b{
    display:block;
    margin-top:13px;
    font-size:15px;
    letter-spacing:1.35px;
    font-weight:700;
}

/* Scroll reveal */
.people-reveal{
    opacity:0;
    transform:translateY(35px);
    transition:opacity .8s, transform .8s;
}

.people-reveal.is-in{
    opacity:1;
    transform:none;
}

@media (max-width:900px){
    .people-grid{
        grid-template-columns:repeat(2, 1fr);
    }
    .people-hero{
        grid-template-columns:1fr;
    }
    .people-hero-note,
    .people-hero:before{
        display:none;
    }
    .people-section-head{
        grid-template-columns:1fr 2fr;
    }
    .people-section-head>div{
        display:none;
    }
}

@media (max-width:560px){
    .people-hero{
        min-height:auto;
        padding-top:40px;
    }
    .people-hero-copy h1{
        font-size:58px;
    }
    .people-grid{
        grid-template-columns:1fr;
        gap:42px;
    }
    .people-directory{
        padding:85px 5vw;
    }
    .people-section-head{
        display:block;
    }
    .people-section-head>p{
        margin-bottom:35px;
    }
    .people-filters{
        flex-direction:column;
        align-items:flex-start;
    }
    .people-search{
        margin-left:0;
        width:100%;
    }
    .people-search-input{
        width:100%;
    }
    .people-search-input:focus{
        width:100%;
    }
    .people-red-block{
        width:38vw;
    }
}

@media (prefers-reduced-motion: reduce){
    .people-page *{
        transition:none !important;
        animation:none !important;
    }
    .people-reveal{
        opacity:1;
        transform:none;
    }
}