/* Video portfolio: the client videos on one page, grouped by kind, with a player that opens over the page.
   The page is built like the case study page and loads its stylesheet (case-study.css) for the dark folder at the top,
   the page width and the "//" dividers. This file adds the list of contents in the folder, the rows of videos and the player. */
html.pf-open{overflow:hidden}
.pf-page{padding-bottom:26px}
.pf-page .cs-hero h1 em{white-space:normal}
.pf-page .cs-grid{grid-template-columns:1.2fr 1fr}

/* The folder's list of contents: one line per kind of video, each a jump down the page. */
.pf-index{width:100%;max-width:430px;margin-left:auto}
.pf-index-title{display:block;margin-bottom:12px;font-size:10px;font-weight:600;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:#ffffff8f}
.pf-index ul{list-style:none;margin:0;padding:0;border-top:1px solid #ffffff26}
.pf-index a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:54px;padding:13px 2px;border-bottom:1px solid #ffffff26;color:#fff;font-size:clamp(17px,1.5vw,20px);font-weight:600;line-height:1.3;letter-spacing:-.02em;transition:color .15s,padding .15s}
.case-page .pf-index svg{width:16px;height:16px;color:#ffe01a}
.case-page .pf-index a:focus-visible{outline-color:#ffe01a;outline-offset:2px}
@media(hover:hover){.pf-index a:hover{color:#ffe01a;padding-left:8px}}

/* One section per kind of video. The site header stays on screen, so a jump from the row above lands below it. */
.pf-group{padding-block:0;scroll-margin-top:96px}
.pf-group .h2{font-size:clamp(28px,3.2vw,42px);line-height:1.1;margin-bottom:26px}
.pf-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
.pf-grid-wide{grid-template-columns:minmax(0,1fr)}
.pf-grid + .pf-grid{margin-top:20px}
.pf-card{position:relative;display:block;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#131313;color:#fff}
.pf-grid-wide .pf-card{aspect-ratio:16/9}
.pf-card img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s}
.pf-play,.pf-time{position:absolute;display:grid;place-items:center;background:#131313b8;color:#fff}
.pf-play{left:50%;top:50%;width:52px;height:52px;border-radius:50%;transform:translate(-50%,-50%);transition:background-color .2s,color .2s}
.case-page .pf-play svg{width:20px;height:20px;margin-left:2px}
.pf-time{right:9px;bottom:9px;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:600;line-height:1.5;font-variant-numeric:tabular-nums}
.pf-label{margin-top:10px;font-size:11px;line-height:1.5;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#131313}
.pf-label::before{content:'// ';content:'// '/''}
.pf-label::after{content:' //';content:' //'/''}
@media(hover:hover){
    .pf-card:hover img{transform:scale(1.04)}
    .pf-card:hover .pf-play{background:#ffe01a;color:#131313}
}

/* The player: the video in the middle of a dark screen, its name and the two arrows under it, the close button in the corner.
   --pf-room-w and --pf-room-h are the space the video has: the screen less the padding, and less the row of buttons under it. */
.pf-player{--pf-pad:12px;--pf-room-w:calc(100vw - 2*var(--pf-pad));--pf-room-h:calc(100vh - 2*var(--pf-pad) - 56px);width:100vw;max-width:none;height:100vh;max-height:none;margin:0;border:0;padding:var(--pf-pad);background:#0b0b0b;color:#fff;font-family:var(--font-body)}
/* Phones hide and show their address bar: the smaller, live height keeps the buttons on screen. */
@supports(height:100dvh){.pf-player{--pf-room-h:calc(100dvh - 2*var(--pf-pad) - 56px);height:100dvh}}
.pf-player[open]{display:flex;flex-direction:column;gap:10px}
.pf-player::backdrop{background:#0b0b0b}
.pf-stage{flex:1;min-height:0;display:grid;place-items:center}
/* A tall video is as high as the room allows, a wide one as wide, each never bigger than the film itself and never out of shape. */
.pf-player video{display:block;height:min(var(--pf-room-h),960px,calc(var(--pf-room-w)*16/9));width:auto;aspect-ratio:9/16;border-radius:14px;background:#000}
.pf-player.is-wide video{width:min(var(--pf-room-w),1280px,calc(var(--pf-room-h)*16/9));height:auto;aspect-ratio:16/9}
.pf-bar{flex:none;display:flex;align-items:center;justify-content:center;gap:14px;min-height:46px}
.pf-bar p{min-width:0;flex:0 1 300px;display:grid;gap:1px;margin:0;text-align:center}
.pf-bar strong{font-size:14px;font-weight:600;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-bar span{font-size:11px;line-height:1.4;color:#b9b9b9;font-variant-numeric:tabular-nums}
.pf-bar button,.pf-close{display:grid;place-items:center;flex:none;width:46px;height:46px;border:1px solid #ffffff33;border-radius:50%;background:#ffffff14;color:#fff;cursor:pointer}
.pf-bar button:hover,.pf-close:hover{background:#ffffff2e}
.case-page .pf-player :is(button,video):focus-visible{outline:2px solid #ffe01a;outline-offset:3px}
.pf-close{position:absolute;z-index:1;right:12px;top:12px;background:#131313cc}
/* The icon pack draws the close cross in black; on the dark player every icon takes its button's white. */
.pf-player svg [stroke]:not([stroke="none"]){stroke:currentColor}

@media(min-width:601px){
    .pf-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 16px}
    .pf-grid-wide{grid-template-columns:repeat(2,minmax(0,1fr))}
    .pf-grid + .pf-grid{margin-top:26px}
    .pf-player{--pf-pad:20px}
    .pf-close{right:20px;top:20px}
}
@media(min-width:861px){
    .pf-grid:not(.pf-grid-wide){grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* On a phone: the close button on its own row above the video instead of over it, the video across the full width,
   and a larger name with the arrows at the two edges under it. The rows and the phone's safe areas take about 150px. */
@media(max-width:600px){
    .pf-player{--pf-room-w:100vw;--pf-room-h:calc(100vh - 150px);padding:max(10px,env(safe-area-inset-top)) 0 max(12px,env(safe-area-inset-bottom))}
    .pf-player[open]{gap:12px}
    .pf-close{position:static;align-self:flex-end;margin-right:12px}
    .pf-player video{border-radius:0}
    .pf-bar{justify-content:space-between;padding-inline:12px}
    .pf-bar strong{font-size:16px}
    .pf-bar span{font-size:12px}
}
@supports(height:100dvh){@media(max-width:600px){.pf-player{--pf-room-h:calc(100dvh - 150px)}}}
@media(max-width:800px){
    /* The folder's two halves stack: the stills sit under the text, across the full width. */
    .pf-page .cs-grid{grid-template-columns:minmax(0,1fr)}
    .pf-index{max-width:none;margin:10px 0 0}
}
@media(prefers-reduced-motion:reduce){.pf-card img,.pf-play,.pf-index a{transition:none}}