/* ============================================
   PAGE: Project Detail
   ============================================ */
/* FSD: pages/project-detail → Individual project page layout */
/* PURPOSE: Layout for project detail page with header, hero, and content */
/* DEPENDENCIES: variables.css, markdown-content.css for article styling */
/* SCALED FOR: Readable content width, responsive typography */

/* ANCHOR: PROJECT_DETAIL_PAGE */

/* ============================================
   PROJECT PAGE CONTAINER
   ============================================ */

/* CRITICAL: Project detail page layout */
.project-page {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 180px 0 200px 0 !important;
  color: var(--color-text-light, #FFFFFF) !important;
  position: relative;
  box-sizing: border-box;
}

/* CRITICAL: Project content wrapper
 * PURPOSE: Contains all project content (header + article)
 */
.project-page-content {
  width: min(720px, 100%);
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.project-page-content > * {
  width: 100%;
}

/* ============================================
   PROJECT HEADER
   ============================================ */

/* CRITICAL: Project header section
 * PURPOSE: Contains title, meta info, tags, hero image
 * SPACING: 40px bottom margin for separation from content
 */
.project-header {
  margin-bottom: 40px;
}

/* CRITICAL: Project title
 * TYPOGRAPHY: Large, bold, tight line-height for impact
 * FONT: SF Pro Display 590 weight (semi-bold), 42px size
 * WHY: Negative letter-spacing (-0.02em) for tighter, modern look
 */
.project-title {
  font-family: var(--font-family, 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif);
  font-style: normal;
  font-weight: 590;
  font-size: 42px;
  line-height: 1.1; /* Tight line-height for multi-line titles */
  letter-spacing: -0.02em;
  color: var(--color-text-light, #FFFFFF);
  margin: 0 0 16px 0;
}

/* ============================================
   PROJECT META
   ============================================ */

/* CRITICAL: Meta row (date, views, tags)
 * LAYOUT: Horizontal flex with wrap, 16px gap
 * WHY: Allows meta items to flow naturally on small screens
 */
.project-meta-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* CRITICAL: Tags container
 * LAYOUT: Horizontal wrap with 6px gap
 * REUSED: Works with chip.js component
 */
.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* CRITICAL: Meta item (date, views, etc.)
 * LAYOUT: Icon + text horizontal layout
 * TYPOGRAPHY: Small (14px), muted color
 */
.project-meta-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-family: var(--font-family, 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 14px;
  color: var(--color-text-muted, rgba(255, 255, 255, 0.7));
}

/* CRITICAL: Meta icon styling
 * SIZE: 16px × 16px
 * OPACITY: 0.7 for subtle appearance
 */
.project-meta-icon {
  width: 16px;
  height: 16px;
  opacity: 0.6;
}

/* CRITICAL: Icon theme variants
 * WHY: Allows icons to work on light/dark backgrounds
 */
.project-meta-icon--light {
  filter: brightness(1);
}

.project-meta-icon--dark {
  filter: brightness(0.8);
}

/* ============================================
   PROJECT HERO IMAGE
   ============================================ */

/* CRITICAL: Hero image container
 * LAYOUT: Full width, rounded corners, 24px top margin
 * WHY: Rounded corners match design system (14px radius)
 */
.project-hero {
  margin-top: 24px;
}

.project-hero img {
  width: 100%;
  height: auto;
  display: block; /* Removes inline spacing */
}

/* ============================================
   PROJECT CONTENT
   ============================================ */

/* CRITICAL: Project article content
 * PURPOSE: Contains markdown-rendered content
 * DEPENDENCIES: markdown-content.css for typography
 * NOTE: Actual content styling in markdown-content.css
 */
.project-content {
  width: 100%;
  overflow: visible;
}

/* ============================================
   PROJECT ENDING CTA
   ============================================ */

.project-ending {
  width: calc(100vw - 120px);
  max-width: none;
  min-height: 420px;
  margin-top: 24px;
  margin-left: calc(50% - 50vw + 60px);
  margin-right: calc(50% - 50vw + 60px);
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  padding: 0 60px;
  background:
    linear-gradient(180deg, rgba(14, 14, 14, 0.30) 0%, rgba(14, 14, 14, 0.55) 100%),
    url('/assets/images/endingpicture.jpg') center center / cover no-repeat;
}

.project-ending-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  justify-content: center;
  width: 100%;
  min-height: 420px;
  padding: 56px 0;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.project-ending-title {
  margin: 0;
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 72px;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: -0.04em;
  color: #FFFFFF;
}

.project-ending-text {
  margin: 0;
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 20px;
  line-height: 140%;
  color: rgba(255, 255, 255, 0.9);
  max-width: 560px;
}

.project-ending-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #0E1621;
  text-decoration: none;
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  line-height: 1;
  margin-top: 8px;
  transition: background 0.2s ease, transform 0.2s ease;
}

.project-ending-button:hover {
  background: rgba(255, 255, 255, 0.92);
  transform: translateY(-1px);
}

.project-ending-button img {
  width: 24px;
  height: 24px;
  display: block;
  flex: none;
  filter: brightness(0) saturate(100%) invert(7%) sepia(18%) saturate(1540%) hue-rotate(175deg) brightness(95%) contrast(92%);
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* MOBILE: Smaller padding and typography */
@media (max-width: 768px) {
  .project-page {
    padding: 120px 0 200px 0 !important;
  }
  
  .project-page-content {
    padding: 0 16px;
  }
  
  .project-title {
    font-size: 28px; /* Reduced from 42px */
  }

  .project-ending {
    width: calc(100vw - 32px);
    margin-left: calc(50% - 50vw + 16px);
    margin-right: calc(50% - 50vw + 16px);
    min-height: 320px;
    border-radius: 20px;
    padding: 0 16px;
  }

  .project-ending-content {
    min-height: 320px;
    padding: 32px 0;
    gap: 12px;
    max-width: 100%;
  }

  .project-ending-title {
    font-size: 40px;
  }

  .project-ending-text {
    font-size: 18px;
  }

  .project-ending-button {
    padding: 14px 20px;
    font-size: 16px;
  }
}