/* ===============================
   PROJECT / WORKS PAGE
=============================== */

body.site{
background:#3d5a8a;
}


/* ===============================
   VIDEO PLAYER
=============================== */

#player-container{
position:relative;
margin:60px auto 50px;
max-width:950px;
border-radius:18px;
overflow:hidden;
background:#eee;
box-shadow:0 10px 30px rgba(0,0,0,.12);
}


#player-container video{
width:100%;
display:block;
border-radius:18px;
}


/* controls */

.video-controls{
position:absolute;
bottom:0;
left:0;
width:100%;

display:flex;
align-items:center;
gap:16px;

padding:16px 20px;

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

transition:.3s;
}


.hidden{
opacity:0;
pointer-events:none;
}


#player-container:hover .video-controls{
opacity:1;
pointer-events:auto;
}


/* buttons */

.video-controls button{
border:none;
background:none;
color:white;
font-size:20px;
cursor:pointer;
transition:.2s;
}


.video-controls button:hover{
transform:scale(1.15);
}


/* volume */

#change-vol{
width:120px;
cursor:pointer;
}


#full-screen{
margin-left:auto;
}


/* hover colors */

#play-button:hover{ color:#1fb144; }

#pause-button:hover{ color:#f4c32f; }

#stop-button:hover{ color:#f28c28; }

#full-screen:hover{ color:#3d5a8a; }



/* ===============================
   ROLE BUTTONS
=============================== */

.works-role-section{
margin-top:10px;
margin-bottom:60px;
}


.works-role-pills{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:20px 22px;
max-width:1000px;
margin:0 auto;
}


/* button base */

.role-pill{
font-family:'Poppins',sans-serif;
font-size:.8rem;
font-weight:700;
letter-spacing:.05em;

padding:12px 26px;

border-radius:999px;

text-transform:uppercase;

color:white;

white-space:nowrap;

border:none; /* removed dark stroke */

cursor:pointer;

transition:
transform .18s ease,
box-shadow .18s ease,
filter .18s ease;
}


/* colors */

.role-orange{
background:#f28c28;
}


.role-yellow{
background:#f4c32f;
color:#3d5a8a;
}


.role-green{
background:#1fb144;
}


/* hover */

.role-pill:hover{
transform:translateY(-3px);
filter:brightness(1.05);
}


/* active */

.role-pill.is-active{
transform:translateY(-3px) scale(1.05);
}


/* glow */

.role-orange:hover,
.role-orange.is-active{
box-shadow:0 8px 18px rgba(242,140,40,.35);
}


.role-yellow:hover,
.role-yellow.is-active{
box-shadow:0 8px 18px rgba(244,195,47,.35);
}


.role-green:hover,
.role-green.is-active{
box-shadow:0 8px 18px rgba(31,177,68,.35);
}


.role-pill:active{
transform:scale(.96);
box-shadow:none;
}



/* ===============================
   GRID
=============================== */

.works-row{
display:flex;
flex-wrap:wrap;
gap:34px;
justify-content:center;
}


.work-column{
width:100%;
max-width:320px;
display:flex;
}


.work-link{
text-decoration:none;
color:inherit;
width:100%;
}



/* ===============================
   CARD
=============================== */

.work-item{
background:#f4f4f4;
border-radius:10px;
padding:20px;

display:flex;
flex-direction:column;
height:100%;

transition:.25s;
}


.work-item:hover{
transform:translateY(-6px);
box-shadow:0 16px 30px rgba(0,0,0,.12);
}



/* ===============================
   IMAGE
=============================== */

.work-photo-box{
margin-bottom:16px;
}


.work-thumb{
width:100%;
aspect-ratio:3/4;

border-radius:8px;

overflow:hidden;

background:white;

border:none; /* removed dark border */
}


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



/* ===============================
   TEXT
=============================== */

.work-title{
font-family:'Poppins',sans-serif;
font-weight:800;
font-size:1.05rem;

color:#3d5a8a;

margin-bottom:6px;

text-transform:uppercase;
}


.work-text{
font-family:'Poppins',sans-serif;
font-size:.85rem;

color:#777;

line-height:1.5;
}



/* ===============================
   RESPONSIVE
=============================== */

@media(min-width:768px){

.work-column{
width:calc(50% - 20px);
}

}


@media(min-width:1024px){

.work-column{
width:calc(33.333% - 20px);
}

}



/* ===============================
   SPACING
=============================== */

.works-inner{
margin-top:20px;
margin-bottom:90px;
}


@media(max-width:600px){

#player-container{
margin-top:40px;
margin-bottom:40px;
}

.works-role-pills{
gap:16px;
}

.role-pill{
padding:10px 18px;
font-size:.75rem;
}

}