.sector_main_title h2, .portfolio_section h2, .portfolio_section h4,
.upcoming_content h3, .upcoming_meta h3 {
    color: #000000 !important;
    font-weight: 700;
}

/* 1. Global Title Spacing */
.sector_main_title { 
    text-align: center; 
    margin-bottom: 20px !important; 
}

/* 2. Fix for Workmanship & Upcoming (Adds space ABOVE them) */
/* This targets every title EXCEPT the very first one on the page */
.sector_main_title:not(:first-of-type) {
    margin-top: 50px !important; 
    padding-top: 10px !important;
    border-top: 1px solid #eee; /* Optional: adds a subtle divider line */
}

/* 3. Keep the first title clean at the top for Desktop */
.portfolio_section .sector_main_title:first-of-type {
    margin-top: 0 !important;
    padding-top: 120px !important; /* Pushes the 'Our Past Projects' down on PC */
}

/* ============================================================
   1. PORTFOLIO-SPECIFIC UPCOMING SECTION
   ============================================================ */

/* DESKTOP: 4 Columns */
.upcoming_grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    margin-top: 30px !important;
}

.upcoming_img_box {
    position: relative !important;
    width: 100% !important;
    height: 220px !important; 
    overflow: hidden !important;
    border-radius: 8px 8px 0 0 !important;
}

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

.status_label {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    right: auto !important; /* Forces it away from the left:15px in style.css */
    background: #faba00 !important;
    color: #fff !important;
    padding: 5px 15px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-radius: 3px !important;
    z-index: 10 !important;
}

.upcoming_meta {
    padding: 15px !important;
    text-align: center !important;
    background: #fff !important;
}


/* ============================================================
   2. PROJECT MODAL (HYPHEN)
   ============================================================ */
.modal-overlay {
    display: none;
    position: fixed;
    z-index: 10000;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9);
}

.modal-content-box {
    background-color: #fff;
    margin: 70px auto 2vh; 
    padding: 20px;
    width: 90%;
    max-width: 1000px;
    height: auto; 
    max-height: 85vh; 
    border-radius: 12px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
}

.modal-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 30px;
    overflow-y: auto;
}

#mainModalImg {
    width: 100% !important;
    max-height: 50vh !important;
    object-fit: contain !important;
    background: #000;
    border-radius: 8px;
}

.thumb-container {
    display: flex; gap: 8px; margin-top: 10px; height: 70px; overflow-x: auto; flex-shrink: 0;
}

.modal-thumb { width: 80px; height: 60px; object-fit: cover; border-radius: 4px; cursor: pointer; border: 2px solid transparent; flex-shrink: 0; }
.modal-thumb:hover { border-color: #faba00; }

.project_info_stacked {
    display: flex; flex-direction: column; gap: 12px; margin-top: 20px;
    background: #f9f9f9; padding: 15px; border-radius: 8px; border: 1px solid #eee;
}

.info_row { display: flex; justify-content: space-between; font-size: 14px; border-bottom: 1px dotted #ccc; padding-bottom: 5px; }
.info_row span { font-weight: 700; color: #faba00; }

/* ============================================================
   3. GALLERY MODAL (UNDERSCORE)
   ============================================================ */
.modal_overlay {
    display: none;
    position: fixed;
    z-index: 100000;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.95);
    overflow-y: auto;
    padding: 100px 20px 40px;
}

.modal_content { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; max-width: 1200px; margin: auto; }
.modal_content img { width: 100%; max-width: 350px; height: 250px; object-fit: cover; border-radius: 8px; border: 2px solid #faba00; }

.close_btn, .close-btn {
    position: absolute;
    top: 15px; right: 25px;
    color: #faba00; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 100001;
    transition: color 0.2s;
}
.close_btn:hover, .close-btn:hover { color: #000000 !important; }

/* ============================================================
   4. CARDS & +7 PHOTOS
   ============================================================ */
.gallery_card { background: #f9f9f9; padding: 15px; border-radius: 10px; border-top: 3px solid #faba00; height: 100%; }
.photo_grid_mini { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; cursor: pointer; position: relative; }
.photo_grid_mini img { width: 100%; height: 75px; object-fit: cover; border-radius: 4px; }
.more_overlay { position: absolute; bottom: 0; right: 0; width: 50%; height: 75px; background: rgba(250, 186, 0, 0.8); color: white; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; border-radius: 4px; }

/* ============================================================
   5. MOBILE RESPONSIVENESS (Issues 1 & 2)
   ============================================================ */
@media (max-width: 768px) {
    .project_grid, .upcoming_grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Centers portrait cards */
    }

    .project_card {
        width: 100% !important;
        max-width: 400px !important; /* Prevents portrait cards from looking weirdly wide */
        margin: 0 auto 30px !important;
    }

    /* FIX: Ensures images inside the card center themselves if portrait */
    .project_img img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
        height: auto;
    }

    .modal-content-box { width: 92% !important; margin: 20px auto !important; max-height: 70vh !important; overflow-y: auto; }
    .modal-grid { display: flex !important; flex-direction: column !important; }
    #mainModalImg { height: 250px !important; }

    /* Table Stacking */
    .mobile-stack tr { display: block !important; margin-bottom: 15px; border: 1px solid #eee; padding: 10px; border-radius: 8px; }
    .mobile-stack td { display: flex !important; justify-content: space-between; padding: 10px 0 !important; border-bottom: 1px solid #f4f4f4 !important; }
    .mobile-stack td::before { content: attr(data-label); font-weight: 700; color: #faba00; text-transform: uppercase; font-size: 10px; }
    .mobile-stack thead { display: none !important; }

    .upcoming_grid {
        display: flex !important;
        flex-direction: column !important; /* THE FIX: Vertical stack */
        align-items: center !important;
        gap: 30px !important;
    }

    .upcoming_card_flat {
        width: 100% !important;
        max-width: 380px !important; /* Keeps it centered and sharp */
    }

    .upcoming_img_box {
        height: 220px !important; /* Consistent height for mobile */
    }

    /* OVERRIDE: Resets the 120px desktop gap back to 40px for phones */
    .portfolio_section .sector_main_title:first-of-type {
        padding-top: 40px !important; 
    }

    /* Tightens the overall section gap on mobile */
    .portfolio_section { 
        padding-top: 40px !important; 
    }
}