/* ============================================================
   projects.css
   Limestone Investments – Projects Page
   Colors: Primary #EB265A | Accent #1EABAD | Text #666666
   ============================================================ */

/* ── Shared Utilities ── */
.pj-tag {
    display: inline-block;
    padding: 4px 16px;
    background: rgba(235, 38, 90, 0.10);
    color: #EB265A;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-left: 3px solid #EB265A;
    margin-bottom: 14px;
}

.pj-heading {
    color: #EB265A;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.25;
}

.pj-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 30px;
    background: #EB265A;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    border: 2px solid #EB265A;
    text-decoration: none;
    transition: background 0.3s, color 0.3s, transform 0.2s;
    margin-top: 10px;
}
.pj-btn-primary:hover {
    background: #1EABAD;
    border-color: #1EABAD;
    color: #ffffff;
    transform: translateY(-2px);
    text-decoration: none;
}

.pj-btn-white {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 30px;
    background: transparent;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    border: 2px solid #ffffff;
    text-decoration: none;
    transition: background 0.3s, color 0.3s, transform 0.2s;
}
.pj-btn-white:hover {
    background: #ffffff;
    color: #EB265A;
    transform: translateY(-2px);
    text-decoration: none;
}


/* ============================================================
   SECTION 1 – INTRO + STATS
   ============================================================ */
.pj-intro {
    padding: 70px 0;
    background: #ffffff;
}

.pj-intro p {
    color: #666666;
    font-size: 15px;
    line-height: 1.85;
    margin-bottom: 24px;
}

.pj-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.pj-stat-box {
    padding: 36px 28px;
    background: #f9f9f9;
    border: 1px solid #eeeeee;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: background 0.3s;
}
.pj-stat-box:hover { background: #f0f0f0; }

.pj-stat-box--accent {
    background: #EB265A;
    border-color: #EB265A;
}
.pj-stat-box--accent:hover { background: #d41e4f; }
.pj-stat-box--accent .pj-stat-num,
.pj-stat-box--accent .pj-stat-label { color: #ffffff; }

.pj-stat-num {
    display: block;
    font-size: 36px;
    font-weight: 800;
    color: #EB265A;
    line-height: 1;
    margin-bottom: 8px;
}

.pj-stat-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #666666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* ============================================================
   SECTION 2 – FILTER + CARDS GRID
   ============================================================ */
.pj-grid-section {
    padding: 70px 0 80px;
    background: #f9f9f9;
}

.pj-grid-section p {
    color: #666666;
    font-size: 15px;
    line-height: 1.8;
}

/* Filter Tabs */
.pj-filter-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 36px;
}

.pj-filter {
    padding: 9px 22px;
    background: #ffffff;
    border: 1.5px solid #e0e0e0;
    color: #666666;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.pj-filter:hover,
.pj-filter.active {
    background: #EB265A;
    border-color: #EB265A;
    color: #ffffff;
}

/* Cards */
.pj-card-wrap {
    margin-bottom: 28px;
    transition: opacity 0.3s, transform 0.3s;
}
.pj-card-wrap.pj-hidden {
    display: none;
}

.pj-card {
    background: #ffffff;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s, transform 0.3s;
}
.pj-card:hover {
    box-shadow: 0 10px 40px rgba(235, 38, 90, 0.12);
    transform: translateY(-6px);
}

/* Card Image */
.pj-card__img-wrap {
    position: relative;
    overflow: hidden;
    height: 210px;
    background: #eeeeee;
}
.pj-card__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.pj-card:hover .pj-card__img-wrap img {
    transform: scale(1.06);
}

/* Placeholder for cards without images */
.pj-card__img-wrap--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f9f9f9, #eeeeee);
}
.pj-placeholder-icon i {
    font-size: 56px;
    color: #EB265A;
    opacity: 0.25;
}

/* Badges */
.pj-card__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 4px 12px;
    background: #EB265A;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.pj-card__badge--teal { background: #1EABAD; }
.pj-card__badge--gold { background: #c8960c; }
.pj-card__badge--crown {
    top: auto;
    bottom: 14px;
    left: 14px;
    background: rgba(0,0,0,0.60);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    gap: 5px;
}
.pj-card__badge--crown i { font-size: 10px; color: #FFD700; }

/* Card Body */
.pj-card__body {
    padding: 24px 22px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    border-top: 3px solid #EB265A;
}

.pj-card__body h4 {
    color: #EB265A;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.3;
}

.pj-card__body p {
    color: #666666;
    font-size: 13px;
    line-height: 1.75;
    flex: 1;
    margin-bottom: 14px;
}

.pj-card__meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #f0f0f0;
}
.pj-card__meta span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #999999;
    font-weight: 500;
}
.pj-card__meta i {
    color: #1EABAD;
    font-size: 12px;
}


/* ============================================================
   SECTION 3 – SPOTLIGHT / FEATURED
   ============================================================ */
.pj-spotlight {
    padding: 80px 0;
    background: #ffffff;
}

.pj-spotlight p {
    color: #666666;
    font-size: 15px;
    line-height: 1.8;
}

.pj-spotlight-row {
    margin-bottom: 60px;
    padding-bottom: 60px;
    border-bottom: 1px solid #f0f0f0;
}
.pj-spotlight-row:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.pj-spotlight__img-wrap {
    position: relative;
    overflow: hidden;
}
.pj-spotlight__img-wrap img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s;
}
.pj-spotlight__img-wrap:hover img { transform: scale(1.04); }

.pj-spotlight__img-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    padding: 8px 18px;
    background: #EB265A;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pj-spotlight__img-badge--teal { background: #1EABAD; }
.pj-spotlight__img-badge i { color: #FFD700; }

.pj-spotlight__content { padding-left: 20px; }
.pj-spotlight__content h3 {
    color: #EB265A;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 14px;
}

.pj-spotlight__list {
    list-style: none;
    padding: 0;
    margin: 16px 0 20px;
}
.pj-spotlight__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #666666;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 8px;
}
.pj-spotlight__list li i {
    color: #1EABAD;
    font-size: 15px;
    margin-top: 3px;
    flex-shrink: 0;
}

@media (max-width: 991.98px) {
    .pj-spotlight__content { padding-left: 0; padding-top: 24px; }
    .pj-spotlight__img-wrap img { height: 260px; }
}


/* ============================================================
   SECTION 4 – SECTORS + CTA STRIP
   ============================================================ */
.pj-sectors {
    padding: 80px 0 70px;
    background: #f9f9f9;
}

.pj-sectors p {
    color: #666666;
    font-size: 15px;
    line-height: 1.8;
}

.pj-sector-card {
    background: #ffffff;
    padding: 40px 30px;
    height: 100%;
    border-top: 4px solid #EB265A;
    text-align: center;
    transition: box-shadow 0.3s, transform 0.3s;
}
.pj-sector-card:hover {
    box-shadow: 0 8px 36px rgba(235, 38, 90, 0.12);
    transform: translateY(-6px);
}
.pj-sector-card--accent {
    background: #EB265A;
    border-top-color: #1EABAD;
}
.pj-sector-card--accent h4,
.pj-sector-card--accent p { color: #ffffff; }
.pj-sector-card--accent p { opacity: 0.90; }

.pj-sector-card__icon {
    width: 68px;
    height: 68px;
    background: rgba(235, 38, 90, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
}
.pj-sector-card--accent .pj-sector-card__icon { background: rgba(255,255,255,0.15); }

.pj-sector-card__icon i {
    font-size: 28px;
    color: #EB265A;
}
.pj-sector-card--accent .pj-sector-card__icon i { color: #ffffff; }

.pj-sector-card h4 {
    color: #EB265A;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
}

.pj-sector-card p {
    font-size: 14px;
    line-height: 1.75;
    margin-bottom: 20px;
}

.pj-sector-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #EB265A;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: gap 0.3s, color 0.3s;
}
.pj-sector-link:hover { gap: 10px; color: #1EABAD; text-decoration: none; }

.pj-sector-link--light { color: #ffffff; }
.pj-sector-link--light:hover { color: #1EABAD; }

/* CTA Strip */
.pj-cta-strip {
    background: #EB265A;
    padding: 48px 0;
    position: relative;
    overflow: hidden;
}
.pj-cta-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 90% 50%, rgba(30,171,173,0.20) 0%, transparent 60%);
    pointer-events: none;
}
.pj-cta-strip h3 {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 6px;
}
.pj-cta-strip p {
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    margin: 0;
}

@media (max-width: 767.98px) {
    .pj-heading { font-size: 24px; }
    .pj-stats-grid { grid-template-columns: 1fr 1fr; }
    .pj-cta-strip .text-lg-right { text-align: left !important; margin-top: 20px; }
    .pj-spotlight__content { padding-left: 0; }
}