﻿
/* ========= Shared layout for all project detail pages ========= */

.project-detail-page {
    padding-top: 1.5rem;
    padding-bottom: 3rem;
}

/* HERO WRAPPER
   - Gradient background
   - Blue left accent
   - Thin divider at bottom for nice separation
*/
.project-hero {
    padding: 1.5rem 0 1.25rem;
    background: linear-gradient(180deg, #f9fafb, #ffffff);
    border-radius: 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-left: 4px solid #0d6efd;
    margin-bottom: 1.25rem; /* visual “line” before first content card */
}

.project-breadcrumb {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6c757d;
}

.project-title {
    font-size: 2rem;
    font-weight: 600;
}

/* Optional highlighted info box (used on some pages) */
.highlight-box {
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #f8f9ff, #eef3ff);
    padding: 1rem 1.25rem;
    border: 1px solid rgba(13, 110, 253, 0.1);
}

.project-subtitle {
    max-width: 40rem;
    color: #555;
}

/* Body content area (cards, sections, etc.) */
.project-body {
    padding-top: 1.75rem;
}

/* Reusable content cards */
.project-card {
    border-radius: 0.9rem;
    padding: 1.25rem 1.4rem;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
}

/* Simple bullet list style used in many sections */
.project-feature-list {
    padding-left: 1.1rem;
    margin-bottom: 0;
}

    .project-feature-list li {
        margin-bottom: 0.25rem;
    }

/* “Coming soon” text block */
.project-coming-soon {
    margin-bottom: 0;
}

/* ===== Status card on the right side of hero ===== */

.project-status-card {
    border-radius: 0.9rem;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

    .project-status-card .badge {
        font-size: 0.8rem;
    }

/* ===== CTA card at bottom of page ===== */

.project-cta-card {
    border-radius: 0.9rem;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
}

/* Vertical spacing between stacked cards in project-body */
.project-body > .card + .card,
.project-body > .card + .project-cta-card {
    margin-top: 1.25rem;
}

/* Responsive tweaks */
@media (max-width: 767.98px) {
    .project-title {
        font-size: 1.6rem;
    }
}
