/* =====================================================
PORTFOLIO DETAIL
===================================================== */

.portfolio-detail{

padding:40px 0 80px;

background:#fff;

}

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

.detail-grid{

display:grid;

grid-template-columns:1fr 420px;

gap:40px;

align-items:start;

margin-top:40px;

margin-bottom:70px;

}
/* =====================================================
HERO IMAGE
===================================================== */

.hero-image{

width:100%;

height:500px;

object-fit:cover;

border-radius:22px;

display:block;

box-shadow:0 18px 45px rgba(15,23,42,.08);

}
.page-hero{

padding:110px 0 20px;

}
.hero-image:hover{

transform:scale(1.02);

}

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

.info-card{

background:#fff;

border-radius:22px;

padding:30px;

box-shadow:0 10px 35px rgba(15,23,42,.07);

position:sticky;

top:110px;

}

.info-card h3{

font-size:20px;

font-weight:700;

margin-bottom:25px;

color:#0F172A;

}

.info-card ul{

list-style:none;

margin:0;

padding:0;

}

.info-card li{

display:flex;

justify-content:space-between;

align-items:flex-start;

padding:18px 0;

border-bottom:1px solid #EEF2F7;

gap:20px;

}

.info-card li:last-child{

border-bottom:none;

}

.info-card strong{

font-weight:700;

color:#0F172A;

min-width:120px;

}

.info-card span{

text-align:right;

color:#64748B;

line-height:1.7;

}

/* =====================================================
DESCRIPTION
===================================================== */

.description-section{

margin-bottom:70px;

}

.description-section h2{

font-size:24px;

font-weight:800;

margin-bottom:25px;

color:#0F172A;

}

.description-content{

font-size:17px;

line-height:2;

color:#475569;

}

.description-content p{

margin-bottom:20px;

}

.description-content img{

max-width:100%;

border-radius:16px;

margin:20px 0;

}

/* =====================================================
GALLERY
===================================================== */

.gallery-section{

margin:70px 0;

}

.gallery-section h2{

font-size:26px;

font-weight:800;

margin-bottom:30px;

color:#0F172A;

}

.gallery-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

}

.gallery-item{

overflow:hidden;

border-radius:18px;

background:#F8FAFC;

box-shadow:0 8px 25px rgba(15,23,42,.06);

}

.gallery-item a{

display:block;

}

.gallery-item img{

width:100%;

aspect-ratio:1/1;

object-fit:cover;

display:block;

transition:.35s;

cursor:pointer;

}

.gallery-item:hover img{

transform:scale(1.08);

}

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

.video-section{

margin:70px 0;

}

.video-section h2{

font-size:32px;

font-weight:800;

margin-bottom:30px;

}

.video-wrapper{

position:relative;

padding-bottom:56.25%;

height:0;

overflow:hidden;

border-radius:22px;

box-shadow:0 10px 35px rgba(15,23,42,.08);

}

.video-wrapper iframe{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

border:none;

}

/* =====================================================
RELATED
===================================================== */

.related-section{

margin-top:90px;

}

.related-section h2{

font-size:28px;

font-weight:800;

margin-bottom:30px;

}

.related-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:28px;

}

.related-card{

display:block;

background:#fff;

border-radius:22px;

overflow:hidden;

text-decoration:none;

box-shadow:0 10px 30px rgba(15,23,42,.07);

transition:.35s;

}

.related-card:hover{

transform:translateY(-8px);

box-shadow:0 18px 45px rgba(15,23,42,.12);

}

.related-thumb{

overflow:hidden;

}

.related-thumb img{

width:100%;

aspect-ratio:4/3;

object-fit:cover;

transition:.4s;

}

.related-card:hover img{

transform:scale(1.08);

}

.related-content{

padding:22px;

}

.related-content h3{

font-size:20px;

font-weight:700;

color:#0F172A;

margin-bottom:10px;

}

.related-content p{

color:#64748B;

margin-bottom:8px;

}

.related-content span{

font-size:14px;

color:#94A3B8;

}

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

@media(max-width:992px){

.detail-grid{

grid-template-columns:1fr;

gap:35px;

}

.info-card{

position:relative;

top:auto;

}

.gallery-grid{

grid-template-columns:repeat(2,1fr);

}

.related-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.portfolio-detail{

padding:20px 0 60px;

}

.description-section h2,

.gallery-section h2,

.video-section h2,

.related-section h2{

font-size:28px;

}

.gallery-grid{

grid-template-columns:repeat(2,1fr);

gap:14px;

}

.related-grid{

grid-template-columns:1fr;

}

.info-card{

padding:22px;

}

.info-card h3{

font-size:22px;

}

.info-card li{

flex-direction:column;

gap:8px;

}

.info-card span{

text-align:left;

}

}

@media(max-width:480px){

.gallery-grid{

grid-template-columns:repeat(2,1fr);

gap:12px;

}

.hero-image{

border-radius:16px;

}

}

.project-cta{

    margin:60px 0;

    padding:40px;

    background:#F8FAFC;

    border:1px solid #E5E7EB;

    border-radius:20px;

    text-align:center;

}

.project-cta h3{

    font-size:28px;

    color:#081B42;

    margin-bottom:12px;

}

.project-cta p{

    max-width:680px;

    margin:0 auto 24px;

    color:#64748B;

    line-height:1.8;

}