/* =========================================
   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;
}


/* =========================================
   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;
}

.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 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: rgba(255,255,255,0.75);
    /* max-width: 700px; */
    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
   — Cinematic hover: zoom + text rises + gradient deepens + gold line
   — To adjust hover lift: change translateY in :hover
   — To adjust zoom: change scale in img:hover
========================================= */

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

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

/* CARD */
.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;
}

.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);
}

/* PHOTO BADGE */
.photo-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 10px;
    letter-spacing: 2px;
    padding: 6px 12px;
    border-radius: 4px;
    backdrop-filter: blur(6px);
}

/* CARD BODY */
.card-body {
    padding: 28px 28px 32px;
}

.card-category {
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--primary-color);
    margin-bottom: 10px;
    font-weight: 500;
}

.card-title {
    font-size: 26px;
    font-weight: 600;
    color: #111;
    margin-bottom: 8px;
    line-height: 1.2;
}

.card-location {
    font-size: 13px;
    color: rgba(0,0,0,0.45);
    margin-bottom: 14px;
    letter-spacing: 0.5px;
}

.card-desc {
    font-size: 14px;
    line-height: 1.75;
    color: rgba(0,0,0,0.6);
    margin-bottom: 20px;
}

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

.card-thumbs img {
    width: 72px;
    height: 52px;
    object-fit: cover;
    border-radius: 6px;
    opacity: 0.85;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

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

/* 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);
}

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

@media (max-width: 768px) {
    .portfolio-section {
        padding: 40px 25px 80px;
    }
    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .card-img-wrap {
        height: 220px;
    }
}


/* =========================================
   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
   — Left text sticks while right images scroll past it
   — To remove: delete section from HTML and this CSS block
   — To change sticky offset: adjust top value in .sticky-left
========================================= */

.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
   — Cards scroll left as user scrolls down
   — Speed/distance: adjustHorizontalScroll() in JS
   — Card width: .h-card width below
   — Card height: .h-card height below
   — Add cards: duplicate .h-card block in HTML
========================================= */

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

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

.horizontal-header h2 {
    font-size: clamp(40px, 5vw, 80px);
    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;
}

/* JS moves this via translateX */
.horizontal-track {
    display: flex;
    gap: 30px;
    width: max-content;
    will-change: transform;
}

.h-card {
    position: relative;
    width: 480px;
    height: 600px;
    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);
}


/* =========================================
   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
   — Opens on card click
   — Close: X button, click outside, or Escape key
   — Background darkness: edit rgba below
   — Image max size: edit .modal-img
========================================= */

.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;
    /* Large tap target on mobile */
    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       → slides up
   — .reveal-left  → slides from left
   — .reveal-right → slides from right
   — .reveal-zoom  → scales up
   — JS adds .active when element enters viewport
   
   NOTE: reveal-left/right use a smaller translate
   on mobile to prevent horizontal overflow
========================================= */

.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
   — Grain opacity: 0.03 = very subtle
   — To disable grain: delete body::before
========================================= */

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-grid,
    .portfolio-dark-section,
    .two-grid {
        grid-template-columns: 1fr;
    }

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

    /* Sticky no longer sticks on tablet — just flows normally */
    .sticky-left {
        position: static;
        height: auto;
        padding: 80px;
    }

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

    /* Stats drop below hero content and wrap */
    .portfolio-hero-stats {
        /* position: static; */
        /* padding: 0 80px 80px; */
        /* flex-wrap: wrap; */
        gap: 20px;
    }

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


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

@media(max-width: 768px) {

    /* HERO */

    .portfolio-hero {
        height: 100svh; /* svh = safe viewport height on mobile browsers */
    }

    .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;
    }

    /* Stats stack vertically on mobile */
    .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 */

    .portfolio-section {
        padding: 30px 25px 30px;
    }

    .portfolio-grid,
    .portfolio-row,
    .portfolio-right {
        gap: 20px;
    }

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

    /* All cards same height on mobile */
    .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
       On mobile: disable the JS scroll effect,
       let cards scroll naturally with touch */

    .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;
        /* Smooth momentum scrolling on iOS */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* hide scrollbar Firefox */
    }

    .horizontal-track-wrapper::-webkit-scrollbar {
        display: none; /* hide scrollbar Chrome/Safari */
    }

    /* On mobile the track just lays flat — user swipes it */
    .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 — smaller translate prevents horizontal overflow on narrow screens */
    .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;
    }

    /* NEW CARD STYLES */
    .card-img-wrap {
        height: 200px;
    }

    .card-body {
        padding: 20px;
    }

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

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

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

    /* HERO — fix centering on mobile */
    .portfolio-hero-content {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        bottom: 140px;
        width: 90%;
    }

    /* MODAL NAV BUTTONS */
    .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;
    }

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

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

}