/*==================================================
        PORTFOLIO HERO
==================================================*/

.page-hero {
    position: relative;

    min-height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 120px 0 100px;

    overflow: hidden;
}

.portfolio-hero {
    background:
        linear-gradient(
            rgba(8, 8, 8, 0.8),
            rgba(8, 8, 8, 0.94)
        ),
        url("../images/backgrounds/project-bg.jpg");

    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.portfolio-hero::before {
    position: absolute;
    inset: 0;
    z-index: 1;

    content: "";

    background:
        radial-gradient(
            circle at top right,
            rgba(212, 175, 55, 0.12),
            transparent 45%
        ),
        linear-gradient(
            180deg,
            transparent 62%,
            rgba(5, 5, 5, 0.86) 100%
        );

    pointer-events: none;
}

.portfolio-hero .container {
    position: relative;
    z-index: 3;

    width: min(92%, 1100px);
    max-width: 1100px;

    margin: 0 auto 58px;

    text-align: center;
}

.portfolio-hero .hero-badge {
    justify-content: center;
}

.portfolio-hero .hero-actions {
    justify-content: center;

    margin-top: 30px;
}

.page-hero .container {
    position: relative;
    z-index: 2;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 22px;

    color: #d4af37;

    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.hero-badge span {
    display: block;

    width: 44px;
    height: 1px;

    background: #d4af37;
}

.page-hero h1 {
    margin: 0 0 24px;

    color: #ffffff;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(4rem, 5.5vw, 6rem);
    font-weight: 600;
    line-height: 0.98;

    text-shadow:
        0 12px 40px rgba(0, 0, 0, 0.55);
}

.portfolio-hero .container > p {
    max-width: 820px;

    margin: 0 auto;

    color: #ececec;

    font-size: 1.08rem;
    line-height: 1.85;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}


/*==================================================
        PORTFOLIO HERO VIDEO
==================================================*/

.hero-video {
    position: relative;
    inset: auto;
    z-index: 2;

    display: block;

    width: min(94%, 1440px);
    height: auto;

    margin: 0 auto;

    overflow: hidden;

    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 24px;

    background: #090909;

    opacity: 1;
    filter: none;
    transform: none;
    animation: none;
    pointer-events: auto;

    box-shadow:
        0 32px 90px rgba(0, 0, 0, 0.58),
        0 0 38px rgba(212, 175, 55, 0.05);
}
.hero-video::after {
    position: absolute;
    inset: 0;

    border-radius: inherit;

    content: "";

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.02);

    pointer-events: none;
}

.hero-video video {
    display: block;

    width: 100%;
    aspect-ratio: 16 / 8.5;

    object-fit: cover;
    object-position: center;

    border-radius: inherit;

    filter:
        brightness(1.18)
        contrast(1.04)
        saturate(1.06);
}

/*==================================================
        PORTFOLIO HERO — TABLET
==================================================*/

@media (max-width: 900px) {

    .page-hero {
        min-height: auto;

        padding: 130px 0 82px;
    }

    .portfolio-hero {
        background-attachment: scroll;
    }

    .portfolio-hero .container {
        width: min(92%, 760px);

        margin-bottom: 42px;
    }

    .page-hero h1 {
        font-size: clamp(3.4rem, 8vw, 4.8rem);
    }

    .portfolio-hero .container > p {
        font-size: 1rem;
    }

    .hero-video {
        width: min(92%, 900px);
    }

    .hero-video video {
        aspect-ratio: 16 / 9;
    }

}


/*==================================================
        PORTFOLIO HERO — MOBILE
==================================================*/

@media (max-width: 576px) {

.page-hero {
    padding: 112px 0 28px;
}

.portfolio-hero .container {
    width: 100%;

    margin-bottom: 28px;
    padding: 0 22px;
}

    .hero-badge {
        gap: 10px;

        font-size: 0.68rem;
        letter-spacing: 0.18em;
    }

    .hero-badge span {
        width: 28px;
    }

    .page-hero h1 {
        font-size: clamp(2.9rem, 12vw, 3.8rem);
    }

    .portfolio-hero .container > p {
        font-size: 0.96rem;
        line-height: 1.75;
    }

    .portfolio-hero .hero-actions {
        margin-top: 24px;
    }

    .portfolio-hero .hero-actions .btn {
        width: 100%;
    }

    .hero-video {
        width: calc(100% - 28px);

        border-radius: 18px;
    }

    .hero-video {
        margin-bottom: 0;

        opacity: 1;
        filter: none;
        transform: none;
        animation: none;
    }

    .hero-video video {
        aspect-ratio: 16 / 10;

        filter:
            brightness(1.08)
            contrast(1.02)
            saturate(1.04);
    }

}

#portfolio {
    padding-top: 52px;
}

/*==================================================
ECHO CRAFT PORTFOLIO
========================================================== */

.portfolio-grid{
    display:grid;
   grid-template-columns:repeat(3,1fr);
   
    gap:32px;
    margin-top:60px;
}

.portfolio-card{
    background:#1b1714;
    border:1px solid rgba(209,169,72,.25);
    border-radius:22px;
    overflow:hidden;
    transition:.35s ease;
}

.portfolio-card:hover{
    transform:translateY(-8px);
    border-color:#d1a948;
    box-shadow:0 20px 45px rgba(0,0,0,.35);
}

.portfolio-card img{
    width:100%;
    height:240px;
    object-fit:cover;
    display:block;
    background:#111;
}

.portfolio-card-content{
    padding:28px;
}

.portfolio-category{
    display:inline-block;
    color:#d1a948;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:.72rem;
    margin-bottom:14px;
}

.portfolio-card h3{
    color:#fff;
    font-size:2rem;
    margin-bottom:14px;
    font-family:"Cormorant Garamond",serif;
}

.portfolio-card p{
    color:#c9c9c9;
    line-height:1.8;
    margin-bottom:28px;
}

.primaryButton{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 28px;
    background:#d1a948;
    color:#111;
    border-radius:999px;
    font-weight:700;
    text-decoration:none;
    transition:.3s ease;
}

.primaryButton:hover{
    transform:translateY(-2px);
    filter:brightness(1.08);
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px;
    max-width:1200px;
    margin:60px auto 0;
}

.feature-card{
    background:#1b1714;
    border:1px solid rgba(209,169,72,.25);
    border-radius:22px;
    padding:34px;
    transition:.3s ease;
}

.feature-card:hover{
    border-color:#d1a948;
    transform:translateY(-6px);
}

.feature-card i{
    font-size:2rem;
    color:#d1a948;
    margin-bottom:18px;
}

.feature-card h3{
    color:#fff;
    font-size:1.45rem;
    margin-bottom:14px;
}

.feature-card p{
    color:#c9c9c9;
    line-height:1.7;
}

.ctaSection{
    text-align:center;
    padding:120px 0;
}

.ctaSection h2{
    color:#fff;
    font-size:3rem;
    margin-bottom:20px;
    font-family:"Cormorant Garamond",serif;
}

.ctaSection p{
    color:#c9c9c9;
    max-width:700px;
    margin:0 auto 40px;
}

@media (max-width:1100px){

    .portfolio-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width:768px){

    .portfolio-grid{
        grid-template-columns:1fr;
    }

    .feature-grid{
        grid-template-columns:1fr;
    }

    .portfolio-card img{
        height:220px;
    }

}

/*==================================================
    PORTFOLIO COLLECTION — FINAL 3 × 3 GRID
==================================================*/

#portfolio .container{

    width:min(92%, 1100px);

}

.portfolio-grid{

    display:grid;

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

    gap:28px;

    width:100%;

    max-width:1050px;

    margin:60px auto 0;

}

.portfolio-card{

    width:100%;

    min-width:0;

    background:#1b1714;

    border:1px solid rgba(209,169,72,.25);

    border-radius:22px;

    overflow:hidden;

    transition:.35s ease;

}

.portfolio-thumb{

    position:relative;

    width:100%;

    aspect-ratio:4 / 3;

    overflow:hidden;

    background:#111;

}

.portfolio-thumb img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:center;

}

.portfolio-card-content{

    padding:24px;

}

.portfolio-card h3{

    font-size:1.65rem;

}

.portfolio-card p{

    margin-bottom:22px;

    line-height:1.65;

}

@media(max-width:1050px){

    .portfolio-grid{

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

    }

}

@media(max-width:700px){

    .portfolio-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================
   PORTFOLIO MOBILE CAROUSELS
========================================== */

.portfolioCarouselSection {
    overflow: hidden;
}

.portfolioCarouselSection .mobileCarouselShell {
    position: relative;
}

.portfolioCarouselSection .mobileCarouselHint {
    display: none;
}


/* ==========================================
   MOBILE SWIPE MODE
========================================== */

@media (max-width: 768px) {

    .portfolioCarouselSection .portfolio-grid,
    .portfolioCarouselSection .feature-grid {
        display: flex;
        grid-template-columns: none;
        gap: 16px;

        width: auto;
        max-width: none;

        margin: 0 -20px;
        padding: 8px 34px 24px;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .portfolioCarouselSection .portfolio-grid::-webkit-scrollbar,
    .portfolioCarouselSection .feature-grid::-webkit-scrollbar {
        display: none;
    }

    .portfolioCarouselSection .portfolio-card,
    .portfolioCarouselSection .feature-card {
        flex: 0 0 88%;
        width: 88%;
        max-width: 420px;
        min-width: 0;

        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    .portfolioCarouselSection .portfolio-card {
        min-height: 520px;
    }

    .portfolioCarouselSection .feature-card {
        min-height: 320px;
        padding: 36px 28px;
    }

    .portfolioCarouselSection .mobileCarouselHint {
        display: flex;
        justify-content: center;
        margin-top: 22px;
    }

    .portfolioCarouselSection .portfolio-card img {
        height: 220px;
    }

}


/* ==========================================
   SMALL PHONES
========================================== */

@media (max-width: 576px) {

    .portfolioCarouselSection .portfolio-grid,
    .portfolioCarouselSection .feature-grid {
        gap: 14px;
        padding-right: 30px;
        padding-left: 30px;
    }

    .portfolioCarouselSection .portfolio-card,
    .portfolioCarouselSection .feature-card {
        flex-basis: 90%;
        width: 90%;
    }

}