/* =========================================
   PORTFOLIO.CSS — COMPLETE WITH ALL FEATURES
   
   SECTIONS IN THIS FILE:
   1.  Loading Screen
   2.  Portfolio Hero
   3.  Intro Text
   4.  Portfolio Cards (shared styles)
   5.  Main Grid & Sizes
   6.  Info Card
   7.  Full Width Banner (with parallax)
   8.  Dark Editorial Section
   9.  Sticky Editorial Section
   10. Horizontal Scroll Showcase
   11. Second Grid
   12. CTA
   13. Project Modal
   14. Reveal Animations
   15. Grain Texture & Smooth Scroll
   16. Responsive — 1100px
   17. Responsive — 768px
   18. Responsive — 480px
========================================= */


/* =========================================
   FIX: style.css sets .section-tag to 30px
   which is too large for portfolio tags.
   This overrides it back for this page only.
========================================= */

.portfolio-hero .section-tag,
.portfolio-editorial-intro .section-tag,
.portfolio-info .section-tag,
.portfolio-banner-content .section-tag,
.portfolio-dark-left .section-tag,
.sticky-left .section-tag,
.horizontal-header .section-tag,
.portfolio-cta .section-tag,
.modal-category {
    font-size: 11px;
}

/* effects */



/* =========================================
   1. LOADING SCREEN
   — To disable: delete this block + loader JS section
   — To change duration: edit the setTimeout in JS (currently 2200ms)
========================================= */

.loader {
    position: fixed;
    inset: 0;
    background: var(--dark-color);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.loader.loader-hidden {
    opacity: 0;
    visibility: hidden;
}

.loader-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.loader-logo {
    width: 280px;
    opacity: 0;
    animation: loaderFadeIn 0.8s ease 0.3s forwards;
}

.loader-line {
    width: 30px;
    height: 3px;
    background: var(--primary-color);
    animation: loaderLine 1s ease 0.8s forwards;
}

.loader-text {
    color: rgba(255,255,255,0.5);
    letter-spacing: 4px;
    font-size: 30px;
    opacity: 0;
    animation: loaderFadeIn 0.8s ease 1.4s forwards;
}

@keyframes loaderFadeIn {
    to { opacity: 1; }
}

@keyframes loaderLine {
    to { width: 200px; }
}


/* =========================================
   2. PORTFOLIO HERO
   — Image zooms slowly on hover (cinematic)
========================================= */

.portfolio-hero {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

/* video  */
.hero-video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:0;
}
/* end  */

.portfolio-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.08);
    transition: transform 8s ease;
}

.portfolio-hero:hover img {
    transform: scale(1.02);
}

.portfolio-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.82), rgba(0,0,0,0.35));
}

.portfolio-hero-content {
    position: absolute;
    left: 50%;
    bottom: 200px;
    transform: translateX(-50%);
    z-index: 3;
    max-width: 950px;
    width: 90%;
    text-align: center;
}

.portfolio-hero-content .section-tag{
    font-size: 20px;
}

.portfolio-hero-content h1 {
    font-size: clamp(70px, 9vw, 90px);
    line-height: 0.9;
    color: #fff;
    font-weight: 400;
    margin-bottom: 30px;
}

.portfolio-hero-text {
    font-size: 20px;
    line-height: 1.9;
    color: var(--primary-color);
    text-align: center;
}

/* HERO STATS */

.portfolio-hero-stats {
    position: absolute;
    right: 50px;
    bottom: 50px;
    z-index: 3;
    display: flex;
    gap: 25px;
}

.hero-stat {
    padding: 30px;
    min-width: 190px;
    backdrop-filter: blur(20px);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;
}

.hero-stat h3 {
    font-size: 34px;
    color: #fff;
    margin-bottom: 10px;
    font-weight: 400;
}

.hero-stat p {
    color: rgba(255,255,255,0.7);
    letter-spacing: 2px;
    font-size: 11px;
}


/* =========================================
   3. INTRO TEXT
========================================= */

.portfolio-editorial-intro {
    padding: 40px 80px;
    background: #F5F1EA;
    text-align: center;
}

.portfolio-editorial-intro h2 {
    font-size: clamp(25px, 6vw, 50px);
    line-height: 1;
    font-weight: 400;
    max-width: 1200px;
    margin: auto;
}

.portfolio-editorial-intro h2::after {
    content: "";
    display: block;
    width: 120px;
    height: 2px;
    background: var(--primary-color);
    margin: 25px auto 0;
}


/* filters */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    
    padding: 40px 80px;
    background: #F5F1EA;
}

.filter-btn {
    padding: 12px 24px;
    border: 1px solid rgba(0,0,0,0.15);
    background: transparent;
    color: rgba(0,0,0,0.6);
    font-size: 11px;
    letter-spacing: 2px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.filter-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}


/* =========================================
   4. PORTFOLIO CARDS — SHARED STYLES
   — COMMENTED OUT: conflicts with mock4.css
   — Restore these if you remove mock4.css
   — from this page and go back to the old card style
========================================= */

/*
.portfolio-section {
    padding: 60px 80px 100px;
    background: #F5F1EA;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
*/

/* CARD — now an anchor tag */
/*
.portfolio-card {
    position: relative;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    text-decoration: none;
    display: block;
    color: inherit;
}

.portfolio-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}
*/

/* IMAGE */
/*
.card-img-wrap {
    position: relative;
    width: 100%;
    height: 260px;
    overflow: hidden;
}

.card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.portfolio-card:hover .card-img-wrap img {
    transform: scale(1.05);
}
*/

/* CARD BODY */
/*
.card-body {
    padding: 20px 24px 24px;
}

.card-title {
    font-size: 24px;
    font-weight: 600;
    color: #111;
    margin-bottom: 14px;
    line-height: 1.2;
}
*/

/* THUMBNAILS */
/*
.card-thumbs {
    display: flex;
    gap: 8px;
}

.card-thumbs img {
    width: 60px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    opacity: 0.75;
    transition: opacity 0.3s ease;
}

.portfolio-card:hover .card-thumbs img {
    opacity: 1;
}
*/

/* new portfolio section  */
/* =========================================
   PORTFOLIO SECTION
========================================= */

.portfolio-section {
    padding: 80px;
    background: #F5F1EA;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
}

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

.portfolio-card {
    position: relative;
    height: 420px;
    border-radius: 20px;
    text-decoration: none;
    display: block;
    background: #111;
    overflow: visible; /* visible so the divider can sit in the gap */

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

/* clip only the inner image/overlay, not the whole card */
.portfolio-card .card-img-wrap,
.portfolio-card::after,
.portfolio-card::before {
    border-radius: 20px;
    overflow: hidden;
}

.portfolio-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, .18);
}

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

.card-img-wrap {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
}

.card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    filter: grayscale(100%);

    transition:
        transform .9s ease,
        filter .9s ease;
}

.portfolio-card:hover .card-img-wrap img {
    transform: scale(1.08);
    filter: grayscale(0%);
}

/* =========================================
   OVERLAY
========================================= */

.portfolio-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 20px;

    background: linear-gradient(
        to top,
        rgba(0, 0, 0, .82),
        rgba(0, 0, 0, .05)
    );

    transition: .4s ease;
}

.portfolio-card:hover::after {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, .65),
        rgba(0, 0, 0, 0)
    );
}

/* =========================================
   VIEW PROJECT BUTTON
========================================= */

.portfolio-card::before {
    content: "VIEW CATEGORY";

    position: absolute;
    top: 50%;
    left: 50%;

    z-index: 3;

    transform: translate(-50%, -50%) scale(.85);

    opacity: 0;

    color: #fff;

    padding: 14px 24px;

    border-radius: 999px;

    border: 1px solid rgba(255, 255, 255, .25);

    backdrop-filter: blur(12px);

    letter-spacing: 2px;

    font-size: 11px;

    white-space: nowrap;

    transition: .4s ease;
}

.portfolio-card:hover::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* =========================================
   CARD TAG (top-left label)
========================================= */

.card-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;

    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);

    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);

    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* =========================================
   CONTENT
========================================= */

.card-body {
    position: absolute;

    left: 22px;
    right: 22px;
    bottom: 22px;

    z-index: 2;
}

.card-title {
    font-size: 28px;
    font-weight: 400;
    line-height: 1;

    color: burlywood;

    margin-bottom: 14px;
}

/* =========================================
   THUMBNAILS
========================================= */

.card-thumbs {
    display: flex;
    gap: 8px;
}

.card-thumbs img {
    width: 45px;
    height: 32px;

    object-fit: cover;

    border-radius: 4px;

    opacity: .75;

    transition: .4s ease;
}

.portfolio-card:hover .card-thumbs img {
    opacity: 1;
}

/* =========================================
   VERTICAL DIVIDER BETWEEN CARDS
========================================= */

/* The divider sits on the right edge of each card, in the gap */
.card-divider {
    position: absolute;
    top: 5%;
    right: -14px; /* half the gap (24px / 2 = 12px, +1 for center) */
    width: 5px;
    height: 90%;
    z-index: 10;
    pointer-events: none;

    /* Gold gradient that fades at top and bottom */
    background: linear-gradient(
        to bottom,
        transparent 0%,
        #b8860b 20%,
        #c9a84c 50%,
        #b8860b 80%,
        transparent 100%
    );

    border-radius: 2px;
}

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

/* 5 columns */
@media (max-width: 1400px) {
    .portfolio-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    /* hide divider on the 5th card (last in first row) */
    .portfolio-card:nth-child(5) .card-divider {
        display: none;
    }
}

/* 4 columns */
@media (max-width: 1200px) {
    .portfolio-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .portfolio-card:nth-child(5) .card-divider {
        display: block;
    }

    /* hide divider on every 4th card */
    .portfolio-card:nth-child(4n) .card-divider {
        display: none;
    }
}

/* 3 columns */
@media (max-width: 1100px) {
    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .portfolio-card:nth-child(4n) .card-divider {
        display: block;
    }

    /* hide divider on every 3rd card */
    .portfolio-card:nth-child(3n) .card-divider {
        display: none;
    }
}

/* 2 columns */
@media (max-width: 768px) {
    .portfolio-section {
        padding: 60px 25px;
    }

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

    .portfolio-card {
        height: 320px;
    }

    .card-title {
        font-size: 22px;
    }

    .card-thumbs img {
        width: 40px;
        height: 28px;
    }

    .portfolio-card:nth-child(3n) .card-divider {
        display: block;
    }

    /* hide divider on every 2nd card */
    .portfolio-card:nth-child(2n) .card-divider {
        display: none;
    }
}

/* 1 column — no dividers needed */
@media (max-width: 500px) {
    .portfolio-section {
        padding: 40px 16px;
    }

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

    .portfolio-card {
        height: 380px;
    }

    .card-divider {
        display: none;
    }
}


/* GOLD LINE */
.card-gold-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--primary-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
    z-index: 3;
}

.portfolio-card:hover .card-gold-line {
    transform: scaleX(1);
}


/* =========================================
   7. FULL WIDTH BANNER
   — Parallax handled by JS (.parallax-img)
   — Hover triggers slow cinematic zoom
========================================= */

.portfolio-banner {
    position: relative;
    height: 850px;
    overflow: hidden;
}

.portfolio-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.08);
    transition: transform 8s ease;
    will-change: transform;
}

.portfolio-banner:hover img {
    transform: scale(1.02);
}

.portfolio-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.82), rgba(0,0,0,0.15));
}

.portfolio-banner-content {
    position: absolute;
    left: 80px;
    bottom: 100px;
    z-index: 2;
    color: #fff;
    max-width: 900px;
}

.portfolio-banner-content p {
    letter-spacing: 4px;
    margin-bottom: 25px;
}

.portfolio-banner-content h2 {
    font-size: clamp(50px, 6vw, 100px);
    line-height: 0.95;
    font-weight: 400;
}


/* =========================================
   8. DARK EDITORIAL SECTION (original, unchanged)
========================================= */

.portfolio-dark-section {
    padding: 60px 80px;
    background: #111;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
}

.portfolio-dark-left h2 {
    font-size: clamp(50px, 6vw, 90px);
    line-height: 1;
    font-weight: 400;
    color: #fff;
}

.portfolio-dark-left h2::after {
    content: "";
    display: block;
    width: 120px;
    height: 2px;
    background: var(--primary-color);
    margin-top: 25px;
}

.portfolio-dark-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 40px;
}

.portfolio-dark-right p {
    font-size: 18px;
    line-height: 2;
    color: rgba(255,255,255,0.7);
}


/* =========================================
   9. STICKY EDITORIAL SECTION
========================================= */

.sticky-editorial {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--light-color);
    min-height: 100vh;
}

.sticky-left {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px;
    background: var(--beige-color);
}

.sticky-left h2 {
    font-size: clamp(40px, 4vw, 70px);
    line-height: 1.05;
    font-weight: 400;
    margin: 20px 0 30px;
}

.sticky-left h2::after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    background: var(--primary-color);
    margin-top: 25px;
}

.sticky-left p {
    font-size: 17px;
    line-height: 1.9;
    color: rgba(0,0,0,0.6);
    max-width: 380px;
}

.sticky-right {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 80px 80px 80px 40px;
}

.sticky-image {
    border-radius: 20px;
    overflow: hidden;
    height: 600px;
}

.sticky-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease;
}

.sticky-image:hover img {
    transform: scale(1.04);
}


/* =========================================
   10. HORIZONTAL SCROLL SHOWCASE
========================================= */

.horizontal-section {
    background: var(--dark-color);
    padding: 10px 0 80px;
    overflow: hidden;
}

.horizontal-header {
    padding: 0 80px 40px;
    color: #fff;
}

.horizontal-header h2 {
    font-size: clamp(25px, 5vw, 55px);
    font-weight: 400;
    line-height: 1;
    margin: 15px 0 20px;
}

.horizontal-hint {
    color: var(--primary-color);
    letter-spacing: 3px;
    font-size: 12px;
}

.horizontal-track-wrapper {
    overflow: hidden;
    padding: 20px 80px;
}

.horizontal-track {
    display: flex;
    gap: 30px;
    width: max-content;
    will-change: transform;
}

.h-card {
    position: relative;
    width: 340px;
    height: 500px;
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.h-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}

.h-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease;
}

.h-card:hover img {
    transform: scale(1.06);
}

.h-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.05));
    transition: background 0.5s ease;
}

.h-card:hover .h-card-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.95), rgba(0,0,0,0.15));
}

.h-card-content {
    position: absolute;
    left: 35px;
    bottom: 35px;
    color: #fff;
    z-index: 2;
    transition: transform 0.5s ease;
}

.h-card:hover .h-card-content {
    transform: translateY(-6px);
}

.h-card-content p {
    font-size: 11px;
    letter-spacing: 4px;
    margin-bottom: 12px;
    color: rgba(255,255,255,0.7);
}

.h-card-content h3 {
    font-size: 32px;
    font-weight: 400;
    line-height: 1;
}

.h-card .card-gold-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--primary-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
    z-index: 3;
}

.h-card:hover .card-gold-line {
    transform: scaleX(1);
}

/* =========================================
   H-CARD: GRAYSCALE + VIEW PROJECT
========================================= */

.h-card img {
    filter: grayscale(100%);
    transition: filter .9s ease, transform 1s ease;
}

.h-card:hover img {
    filter: grayscale(0%);
}

.h-card::before {
    content: "VIEW PROJECT";

    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;

    transform: translate(-50%, -50%) scale(.85);
    opacity: 0;

    color: #fff;
    font-size: 11px;
    letter-spacing: 2px;
    white-space: nowrap;

    padding: 14px 24px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .25);
    backdrop-filter: blur(12px);

    transition: .4s ease;
}

.h-card:hover::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}


/* =========================================
   11. SECOND GRID
========================================= */

.second-grid { padding-top: 40px; }


/* =========================================
   12. CTA
========================================= */

.portfolio-cta {
    padding: 40px 80px;
    background: #F5F1EA;
    text-align: center;
}

.portfolio-cta h2 {
    font-size: clamp(50px, 6vw, 90px);
    line-height: 1;
    font-weight: 400;
    max-width: 1000px;
    margin: 30px auto 50px;
}

.portfolio-cta h2::after {
    content: "";
    display: block;
    width: 120px;
    height: 2px;
    background: var(--primary-color);
    margin: 25px auto 0;
}


/* =========================================
   13. PROJECT MODAL
========================================= */

.project-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    padding: 20px;
}

.project-modal.modal-open {
    opacity: 1;
    visibility: visible;
}

.modal-close {
    position: absolute;
    top: 40px;
    right: 50px;
    background: none;
    border: none;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 2;
    padding: 10px;
    line-height: 1;
}

.modal-close:hover {
    opacity: 1;
    transform: rotate(90deg);
}

.modal-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    width: 100%;
    max-width: 90vw;
    max-height: 90vh;
    transform: scale(0.95);
    transition: transform 0.5s ease;
}

.project-modal.modal-open .modal-inner {
    transform: scale(1);
}

.modal-img {
    max-width: 80vw;
    max-height: 65vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 16px;
}

.modal-info {
    text-align: center;
    color: #fff;
}

.modal-category {
    letter-spacing: 4px;
    font-size: 11px;
    color: var(--primary-color);
    margin-bottom: 12px;
    text-transform: uppercase;
}

.modal-title {
    font-size: clamp(28px, 4vw, 56px);
    font-weight: 400;
    line-height: 1;
}


/* =========================================
   14. REVEAL ANIMATIONS
========================================= */

.reveal {
    opacity: 0;
    translate: 0 60px;
    transition: opacity 0.3s ease, scale 0.3s ease;
}

.reveal.active {
    opacity: 1;
    translate: 0 0;
}

.reveal-left {
    opacity: 0;
    translate: -60px 0;
    transition: opacity 0.3s ease, scale 0.3s ease;
}

.reveal-left.active {
    opacity: 1;
    translate: 0 0;
}

.reveal-right {
    opacity: 0;
    translate: 60px 0;
    transition: opacity 0.3s ease, scale 0.3s ease;
}

.reveal-right.active {
    opacity: 1;
    translate: 0 0;
}

.reveal-zoom {
    opacity: 0;
    scale: 0.95;
    transition: opacity 0.3s ease, scale 0.3s ease;
}

.reveal-zoom.active {
    opacity: 1;
    scale: 1;
}


/* =========================================
   15. GRAIN TEXTURE & SMOOTH SCROLL
========================================= */

html {
    scroll-behavior: smooth;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.03;
    z-index: 9999;
    background-image: url("https://www.transparenttextures.com/patterns/asfalt-light.png");
}


/* =========================================
   16. RESPONSIVE — 1100px (tablet)
========================================= */

@media(max-width: 1100px) {

    .portfolio-dark-section,
    .two-grid {
        grid-template-columns: 1fr;
    }

    /* COMMENTED OUT: conflicts with mock4.css responsive grid
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
    */

    .sticky-editorial {
        grid-template-columns: 1fr;
    }

    .sticky-left {
        position: static;
        height: auto;
        padding: 80px;
    }

    .sticky-right {
        padding: 0 80px 80px;
    }

    .portfolio-hero-stats {
        gap: 20px;
    }

    .tall-card { height: 700px; }
}


/* =========================================
   17. RESPONSIVE — 768px (mobile)
========================================= */

@media(max-width: 768px) {

    /* HERO */

    .portfolio-hero {
        height: 100svh;
    }

    .portfolio-hero-content {
        position: absolute !important;
        left: 25px !important;
        right: 25px !important;
        bottom: 220px !important;
        top: auto !important;
        transform: none !important;
        max-width: 100% !important;
        text-align: center;
    }

    .portfolio-hero-content .section-tag{
        font-size: 20px;
    }

    .portfolio-hero-content h1 {
        font-size: clamp(42px, 11vw, 70px);
    }

    .portfolio-hero-text {
        font-size: 15px;
        line-height: 1.7;
    }

    .portfolio-hero-stats {
        position: absolute;
        bottom: 30px;
        left: 25px;
        right: 25px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        padding: 0;
    }

    .hero-stat {
        flex: 1;
        min-width: 0;
        padding: 15px;
    }

    /* INTRO */

    .portfolio-editorial-intro {
        padding: 40px 25px;
    }

    .portfolio-editorial-intro .section-tag{
        font-size: 20px;
    }

    /* SECTIONS */

    /* COMMENTED OUT: conflicts with mock4.css
    .portfolio-section {
        padding: 30px 25px 30px;
    }
    */

    /* COMMENTED OUT: conflicts with mock4.css
    .portfolio-grid,
    .portfolio-row,
    .portfolio-right {
        gap: 20px;
    }
    */

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

    .small-card,
    .wide-card,
    .tall-card {
        height: 340px;
    }

    .portfolio-content {
        left: 20px;
        bottom: 20px;
    }

    .portfolio-content h3 {
        font-size: 26px;
    }

    /* INFO CARD */

    .portfolio-info {
        padding: 40px 25px;
    }

    .portfolio-info h3 {
        font-size: 30px;
    }

    /* BANNER */

    .portfolio-banner {
        height: 480px;
    }

    .portfolio-banner-content {
        left: 25px;
        right: 25px;
        bottom: 40px;
    }

    /* DARK SECTION */

    .portfolio-dark-section {
        padding: 30px 25px;
        gap: 40px;
        grid-template-columns: 1fr;
    }

    .portfolio-dark-left h2{
        font-size: 25px;
    }

    .portfolio-dark-right p {
        font-size: 16px;
    }

    /* STICKY SECTION */

    .sticky-left {
        position: static;
        height: auto;
        padding: 30px 25px 30px;
    }

    .sticky-left h2{
        margin:0px;
        font-size: 20px;
    }

    .sticky-left p{
        font-size: 20px;
    }

    .sticky-right {
        padding: 0 25px 60px;
        gap: 20px;
    }

    .sticky-image {
        height: 300px;
    }

    /* HORIZONTAL SCROLL */

    .horizontal-section {
        padding: 30px 0 30px;
    }

    .horizontal-section h2{
        font-size: 20px;
    }

    .horizontal-header {
        padding: 0 25px 40px;
    }

    .horizontal-track-wrapper {
        overflow-x: auto;
        overflow-y: hidden;
        padding: 10px 25px 30px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .horizontal-track-wrapper::-webkit-scrollbar {
        display: none;
    }

    .horizontal-track {
        transform: none !important;
    }

    .h-card {
        width: 280px;
        height: 380px;
    }

    /* CTA */

    .portfolio-cta {
        padding: 100px 25px;
    }

    /* MODAL */

    .modal-close {
        top: 15px;
        right: 15px;
        font-size: 22px;
    }

    .modal-img {
        max-width: 92vw;
        max-height: 50vh;
    }

    .modal-title {
        font-size: clamp(22px, 6vw, 36px);
    }

    .reveal-left {
        translate: -30px 0;
    }

    .reveal-right {
        translate: 30px 0;
    }

    /* FILTER BAR */
    .filter-bar {
        padding: 20px 25px 30px;
        gap: 8px;
    }

    .filter-btn {
        padding: 10px 16px;
        font-size: 10px;
    }

    /* COMMENTED OUT: conflicts with mock4.css
    .card-img-wrap {
        height: 200px;
    }

    .card-body {
        padding: 20px;
    }

    .card-title {
        font-size: 20px;
    }

    .card-thumbs img {
        width: 60px;
        height: 44px;
    }
    */

    .card-desc {
        font-size: 13px;
    }

    .portfolio-hero-content {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        bottom: 140px;
        width: 90%;
    }

    .modal-prev { left: 10px; }
    .modal-next { right: 10px; }

    .modal-nav {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}


/* =========================================
   18. RESPONSIVE — 480px (small phones)
========================================= */

@media(max-width: 480px) {

    .portfolio-hero-content{
        position: absolute !important;
        left: 25px !important;
        right: 25px !important;
        bottom: 300px !important;
        top: auto !important;
        transform: none !important;
        max-width: 100% !important;
        text-align: center;
    }

    .portfolio-hero-content h1 {
        font-size: clamp(36px, 10vw, 56px);
        margin-bottom: 20px;
    }

    .portfolio-hero-stats{
        display: flex;
        flex-direction: column;
        width: 162px;
    }

    .portfolio-hero-stats h3{
        font-size: 20px;
    }

    .portfolio-hero-stats p{
        font-size: 8px;
    }

    .h-card {
        width: 240px;
        height: 320px;
    }

    .portfolio-content h3 {
        font-size: 22px;
    }

    .filter-btn {
        padding: 8px 14px;
        font-size: 10px;
    }

    /* COMMENTED OUT: conflicts with mock4.css
    .card-title {
        font-size: 18px;
    }

    .card-img-wrap {
        height: 180px;
    }
    */

}