/* ---------------------------------------------------------------------- */
/* --- COLOR PALETTE (From Brand Guidelines) --- */
/* ---------------------------------------------------------------------- */
:root {
    /* Primary (Bright Green) */
    --color-primary: #22c55e;
    /* Dark Text, Primary Headers (Slate 900) */
    --color-text-dark: #1e293b;
    /* Body Text, Secondary */
    --color-text-grey: #475569;
    /* Hero Overlay (Slate 900 with transparency) */
    --color-hero-overlay: rgba(13, 22, 38, 0.95);
    /* White */
    --color-white: #ffffff;
}

/* ---------------------------------------------------------------------- */
/* --- GLOBAL CONTAINER (Used by .detail-container) --- */
/* ---------------------------------------------------------------------- */
.detail-container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* ---------------------------------------------------------------------- */
/* --- HERO SECTION: .portfolio-detail-hero --- */
/* ---------------------------------------------------------------------- */
.portfolio-detail-hero {
    position: relative;
    width: 100%;
    /* Ensure a decent height for visual impact across devices */
    min-height: 500px;
    display: flex;
    align-items: center; /* Vertically center content */
    padding: 6rem 0; /* Extra vertical padding */
    overflow: hidden;
}

/* Background Image */
.portfolio-detail-hero img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the area without distortion */
    z-index: 1;
}

/* Dark Overlay (Slate 900) */
.portfolio-detail-hero .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-hero-overlay);
    z-index: 2;
}

/* Content Container positioning */
.portfolio-detail-hero .detail-container {
    position: relative;
    z-index: 3;
    color: var(--color-white);
    /* Max width for the content itself, centered */
    max-width: 900px; 
    margin: 0 auto;
    text-align: left;
}

/* ---------------------------------------------------------------------- */
/* --- TYPOGRAPHY & INFO --- */
/* ---------------------------------------------------------------------- */
.portfolio-detail-hero .category {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    background-color: var(--color-primary);
    color: var(--color-text-dark); /* Dark text on bright primary background */
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.portfolio-detail-hero h1 {
    font-size: 2.9rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--color-white);
}

.portfolio-detail-hero .intro {
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.9);
}

/* ---------------------------------------------------------------------- */
/* --- METADATA (Client & Date) WITH ICONS --- */
/* ---------------------------------------------------------------------- */
.meta {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping on smaller devices */
    gap: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.meta p {
    /* Reset base styles for p inside meta */
    margin: 0;
    padding: 0;
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
}

.meta p strong {
    font-weight: 700;
    margin-right: 0.5rem;
}

/* Styling the icons (assuming user places the <i> tag correctly) */
.meta p i {
    color: var(--color-primary);
    font-size: 1.25rem;
    margin-right: 0.5rem;
}

/* Specific structure to place icon before the text block for Client/Date */
.meta p {
    /* Example: Client: <i class="fa-solid fa-user"></i> John Doe */
    /* The user's current structure is: <p><strong>Client:</strong> John Doe</p>
       We will assume the icon is placed *before* the value, and target the strong tag for the icon placement.
       Since we cannot modify the HTML, the icon will need to be placed by the user. 
       I'll provide styling for the assumed final structure: */
    display: flex;
    align-items: center;
}

/* ---------------------------------------------------------------------- */
/* --- RESPONSIVENESS --- */
/* ---------------------------------------------------------------------- */

/* Tablet and Smaller Desktop (< 1024px) */
@media (max-width: 1024px) {
    .portfolio-detail-hero {
        min-height: 400px;
    }
    
    .portfolio-detail-hero h1 {
        font-size: 3rem;
    }
    
    .portfolio-detail-hero .intro {
        font-size: 1.1rem;
    }
}

/* Mobile View (Max 640px) */
@media (max-width: 640px) {
    .portfolio-detail-hero {
        min-height: 350px;
        /* Increase padding to ensure content isn't cramped */
        padding: 4rem 0;
    }
    
    .portfolio-detail-hero h1 {
        font-size: 2.25rem;
        margin-bottom: 1rem;
    }
    
    .portfolio-detail-hero .intro {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    /* Stack metadata vertically on small screens */
    .meta {
        flex-direction: column;
        gap: 1rem;
    }
}

/* ---------- BODY ---------- */
.portfolio-detail-body {
  background: #fff;
  padding: 5rem 0;
}

.project-content {
  max-width: 800px;
  margin: 0 auto;
}

.project-content h2 {
  color: #0f172a;
  font-size: 1.6rem;
  margin-top: 2rem;
  margin-bottom: 0.8rem;
}

.project-content p {
  color: #475569;
  line-height: 1.7;
  font-size: 1rem;
}

.project-content blockquote {
  background: #f0fdf4;
  border-left: 5px solid #22c55e;
  padding: 1.2rem 1.5rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: #065f46;
  border-radius: 8px;
}

.btn.visit-site {
  display: inline-block;
  margin-top: 1.5rem;
  background: #22c55e;
  color: #fff;
  padding: 10px 25px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s ease;
}

.btn.visit-site:hover {
  background: #16a34a;
}

/* ---------- SHARE SECTION ---------- */
.share-section {
  text-align: center;
  margin-top: 3rem;
}

.share-section h3 {
  color: #0f172a;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.share-icons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.share-btn {
  font-size: 1.3rem;
  color: #22c55e;
  transition: transform 0.3s ease, color 0.3s ease;
}

.share-btn:hover {
  color: #16a34a;
  transform: translateY(-3px);
}

.share-count {
  font-size: 0.9rem;
  color: #475569;
}

/* ---------- NOT FOUND ---------- */
.not-found {
  text-align: center;
  padding: 5rem 1rem;
}

.not-found h2 {
  color: #0f172a;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.not-found p {
  color: #475569;
  margin-bottom: 2rem;
}