/**
 * Project Detail Pages Stylesheet
 *
 * This file contains styles specific to project detail pages.
 * It extends the existing site styles (main.css, custom-theme.css)
 * and implements a responsive 12-column grid system.
 *
 * IMPORTANT: Keep fonts and styling consistent with homepage
 * - Uses thsk font family (loaded globally via Typekit)
 * - White background (#ffffff)
 * - Black text (#000000)
 * - Maintains existing spacing and rhythm
 */

/* ============================================
   CUSTOM FONT
   ============================================ */

@font-face {
  font-family: 'Helvetica Medium';
  src: url('../src/helvmn.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

/* ============================================
   CSS CUSTOM PROPERTIES (Variables)
   ============================================ */

:root {
  /* Spacing Scale */
  --spacing-xs: 0.5rem;   /* 8px */
  --spacing-sm: 1rem;     /* 16px */
  --spacing-md: 2rem;     /* 32px */
  --spacing-lg: 3rem;     /* 48px */
  --spacing-xl: 4rem;     /* 64px */
  --spacing-xxl: 6rem;    /* 96px */

  /* Grid System */
  --grid-columns: 12;
  --grid-gap: 1.5rem;     /* 24px */
  --grid-gap-mobile: 1rem; /* 16px */

  /* Content Width */
  --content-max-width: 1200px;
  --content-padding: 2rem;
  --content-padding-mobile: 1rem;

  /* Colors (match site theme) */
  --color-bg: #ffffff;
  --color-text: #000000;
  --color-border: #e5e5e5;
  --color-tag-bg: rgba(255, 255, 255, 0.1);
  --color-tag-backdrop: rgba(255, 255, 255, 0.8);

  /* Typography (sizes match existing site) */
  --font-family: 'Helvetica Medium', Helvetica, Arial, sans-serif;
  --font-size-base: 1rem;          /* 16px */
  --font-size-lg: 1.125rem;        /* 18px */
  --font-size-xl: 1.5rem;          /* 24px */
  --font-size-2xl: 2rem;           /* 32px */
  --font-size-3xl: 2.5rem;         /* 40px */
  --line-height-base: 1.6;
  --line-height-heading: 1.2;

  /* Responsive Breakpoints */
  --breakpoint-mobile: 540px;
  --breakpoint-tablet: 932px;
  --breakpoint-desktop: 1024px;
}


/* ============================================
   LAYOUT: CONTENT WRAPPER
   ============================================ */

.content-wrapper {
  margin: 0 auto;
  padding: 0 var(--content-padding);
}

@media (max-width: 540px) {
  .content-wrapper {
    padding: 0 var(--content-padding-mobile);
  }
}


/* ============================================
   GRID SYSTEM: 12-COLUMN RESPONSIVE GRID
   ============================================ */

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
}

@media (max-width: 932px) {
  .grid-12 {
    gap: var(--grid-gap-mobile);
  }
}

@media (max-width: 540px) {
  .grid-12 {
    grid-template-columns: 1fr;
  }
}

/* Grid Column Span Utilities */
.col-span-1  { grid-column: span 1; }
.col-span-2  { grid-column: span 2; }
.col-span-3  { grid-column: span 3; }
.col-span-4  { grid-column: span 4; }
.col-span-5  { grid-column: span 5; }
.col-span-6  { grid-column: span 6; }
.col-span-7  { grid-column: span 7; }
.col-span-8  { grid-column: span 8; }
.col-span-9  { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }

/* Full-width on mobile */
@media (max-width: 540px) {
  [class*="col-span-"] {
    grid-column: span 1 !important;
  }
}


/* ============================================
   HERO + INTRO SECTION (COMBINED LAYOUT)
   ============================================ */

.project-hero-intro {
  margin-bottom: var(--spacing-xl);
}

/* 2-column grid: text left (smaller), image right (larger) */
/* Figma proportions: text 439px, image 902px = 1:2 ratio */
.hero-intro-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--spacing-lg);
  align-items: start;
}

/* Text column */
.hero-intro-text {
  /* Content stays on the left */
}

/* Image column */
.hero-intro-image {
  width: 100%;
  overflow: hidden;
}

.hero-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Tablet: adjust gap */
@media (max-width: 932px) {
  .hero-intro-grid {
    gap: var(--spacing-lg);
  }
}

/* Mobile: stack vertically */
@media (max-width: 540px) {
  .hero-intro-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .project-hero-intro {
    margin-bottom: var(--spacing-lg);
  }
}


/* ============================================
   STICKY TEXT + SCROLLING IMAGES LAYOUT
   ============================================ */

.project-sticky-layout {
  margin-bottom: var(--spacing-xl);
}

.sticky-layout-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--spacing-lg);
  align-items: start;
}

/* Left column: Sticky text */
.sticky-text-column {
  position: sticky;
  top: var(--spacing-lg);
  align-self: start;
  overflow-anchor: none;
}

.sticky-text-inner {
  /* All text content inside remains in normal flow */
}

/* Right column: Scrolling images */
.scrolling-images-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-image {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.project-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.project-image video {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  background-color: #000;
}

.project-image-row {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.project-image-row .project-image {
  flex: 1;
  min-width: 0;
}

.project-image figcaption {
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-style: italic;
  font-weight: 400;
  color: var(--color-text);
  margin-top: 4px;
  line-height: var(--line-height-base);
}

/* Tablet: adjust gap and spacing */
@media (max-width: 932px) {
  .sticky-layout-grid {
    gap: var(--spacing-md);
  }

  .scrolling-images-column {
    gap: var(--spacing-md);
  }

  .sticky-text-column {
    top: var(--spacing-md);
  }
}

/* Mobile: stack vertically, remove sticky behavior */
@media (max-width: 540px) {
  .sticky-layout-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .sticky-text-column {
    position: relative;
    top: auto;
  }

  .scrolling-images-column {
    gap: var(--spacing-sm);
  }

  .project-sticky-layout {
    margin-bottom: var(--spacing-lg);
  }
}


/* Mobile: split layout — description top → media → description bottom */
@media (max-width: 768px) {
  .project-split-layout .sticky-layout-grid {
    display: flex;
    flex-direction: column;
  }
  .project-split-layout .sticky-text-column,
  .project-split-layout .sticky-text-inner {
    display: contents;
  }
  .project-split-layout .project-text-top {
    order: 1;
  }
  .project-split-layout .scrolling-images-column {
    order: 2;
  }
  .project-split-layout .project-text-bottom {
    order: 3;
  }
}

/* Project Header: Title + Type on same line */
.project-header {
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.project-title {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
  line-height: 22.4px;
  letter-spacing: 0;
  vertical-align: middle;
  color: var(--color-text);
  margin: 0;
}

.project-type {
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: var(--line-height-heading);
  color: var(--color-text);
  opacity: 0.7;
}

@media (max-width: 540px) {
  .project-title {
    font-size: 0.875rem;
  }
  .project-type {
    font-size: 0.875rem;
  }
}


/* ============================================
   TAGLINE & TAGS
   ============================================ */

/* Bold summary tagline */
.project-tagline {
  font-family: var(--font-family);
  font-size: var(--font-size-lg);
  font-weight: 600;
  line-height: var(--line-height-base);
  color: var(--color-text);
  margin: 0 0 12px 0;
}

/* Inline tags */
.project-tags-inline {
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: 12px;
}

.project-tags-inline span:not(:last-child)::after {
  content: ", ";
}

@media (max-width: 540px) {
  .project-tagline {
    font-size: var(--font-size-base);
  }
}


/* ============================================
   CONTRIBUTION & PROJECT SECTIONS
   ============================================ */

.project-contribution,
.project-section {
  margin-bottom: 12px;
}

.project-contribution h3,
.project-section h3 {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
  line-height: 22.4px;
  letter-spacing: 0;
  vertical-align: middle;
  color: var(--color-text);
  margin: 0 0 0 0;
  text-transform: capitalize;
}

.project-contribution p,
.project-contribution ul,
.project-contribution li,
.project-section p,
.project-section ul,
.project-section li {
  font-family: var(--font-family);
  font-size: 14px;
  line-height: var(--line-height-base);
  color: var(--color-text);
  margin: 0 0 0 0;
}

.project-contribution p + p {
  margin-top: 12px;
}

.project-contribution p:last-child,
.project-section p:last-child {
  margin-bottom: 0;
}

@media (max-width: 540px) {
  .project-contribution p,
  .project-section p {
    font-size: 0.875rem;
  }
}


/* ============================================
   DETAILS TOGGLE BUTTON
   ============================================ */

.details-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin: 16px 0 8px 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: var(--line-height-heading);
  color: var(--color-text);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.details-toggle img {
  display: inline-block;
  vertical-align: middle;
  margin-top: -4px;
}

.details-toggle[aria-expanded="true"] img:nth-child(1) {
  display: none;
}

.details-toggle[aria-expanded="false"] img:nth-child(1) {
  transform: rotate(180deg);
  display: inline;
}

.details-toggle[aria-expanded="true"] img:nth-child(2) {
  display: inline;
}

.details-toggle[aria-expanded="false"] img:nth-child(2) {
  display: none;
}

.details-toggle:hover {
  opacity: 0.8;
}

.details-toggle:focus {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.details-toggle-icon {
  display: none;
}

/* ============================================
   COLLAPSIBLE DETAILS SECTION
   ============================================ */

.project-details {
  padding-top: 0;
  overflow-anchor: none;
}

.project-details[hidden] {
  display: none;
}

.details-list {
  margin: 0;
}

.details-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--spacing-sm);
  align-items: baseline;
  margin-bottom: 4px;
}

.details-item:last-child {
  margin-bottom: 0;
}

@media (max-width: 540px) {
  .details-item {
    grid-template-columns: 1fr;
    gap: var(--spacing-xs);
  }
}

.details-list dt {
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--color-text);
  margin: 0 0 0 0;
  text-transform: capitalize;
}

.details-list dd {
  font-family: var(--font-family);
  font-size: 14px;
  line-height: var(--line-height-base);
  font-weight: 400;
  color: var(--color-text);
  margin: 0;
}

.details-list dd:last-child {
  margin-bottom: 0;
}

@media (max-width: 540px) {
  .details-list dd {
    font-size: 0.875rem;
  }
}

.team-section {
  margin-top: var(--spacing-sm);
}

.team-heading {
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--color-text);
  margin: 0 0 var(--spacing-xs) 0;
  text-transform: capitalize;
}

.credits-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.credits-list li {
  margin-bottom: var(--spacing-xs);
}

.credits-list li {
  margin-bottom: var(--spacing-xs);
}

.credits-list li:last-child {
  margin-bottom: 0;
}

.credits-list em {
  font-style: normal;
  font-weight: 400;
  color: #808080;
}

.team-note {
  margin-top: var(--spacing-sm);
  font-size: 0.875rem;
  font-style: italic;
  opacity: 0.7;
}


/* ============================================
   GALLERY SECTION
   ============================================ */

.project-gallery {
  margin-bottom: var(--spacing-xxl);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
}

@media (max-width: 932px) {
  .gallery-grid {
    gap: var(--grid-gap-mobile);
  }
}

@media (max-width: 540px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}

.gallery-item {
  margin: 0;
  padding: 0;
  grid-column: span 12; /* Default: full width */
}

/* Layout variations - apply these classes to gallery-item elements */
.gallery-item.col-4  { grid-column: span 4; }  /* 1/3 width */
.gallery-item.col-6  { grid-column: span 6; }  /* 1/2 width */
.gallery-item.col-8  { grid-column: span 8; }  /* 2/3 width */
.gallery-item.col-12 { grid-column: span 12; } /* Full width */

/* Override for mobile: all full-width */
@media (max-width: 540px) {
  .gallery-item {
    grid-column: span 1 !important;
  }
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.gallery-item figcaption {
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-style: italic;
  color: var(--color-text);
  margin-top: var(--spacing-sm);
  padding: 0 var(--spacing-xs);
  line-height: var(--line-height-base);
}


/* ============================================
   EXTERNAL LINKS SECTION
   ============================================ */

.project-links {
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-lg) 0;
  border-top: 1px solid var(--color-border);
}

.project-links h2 {
  font-family: var(--font-family);
  font-size: var(--font-size-xl);
  font-weight: 600;
  line-height: var(--line-height-heading);
  color: var(--color-text);
  margin: 0 0 var(--spacing-md) 0;
}

.links-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.links-list li {
  margin-bottom: var(--spacing-sm);
}

.links-list li:last-child {
  margin-bottom: 0;
}

.links-list a {
  font-family: var(--font-family);
  font-size: var(--font-size-lg);
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: opacity 0.2s ease;
}

.links-list a:hover {
  opacity: 0.7;
}


/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Spacing Utilities */
.mb-xs  { margin-bottom: var(--spacing-xs); }
.mb-sm  { margin-bottom: var(--spacing-sm); }
.mb-md  { margin-bottom: var(--spacing-md); }
.mb-lg  { margin-bottom: var(--spacing-lg); }
.mb-xl  { margin-bottom: var(--spacing-xl); }
.mb-xxl { margin-bottom: var(--spacing-xxl); }

.mt-xs  { margin-top: var(--spacing-xs); }
.mt-sm  { margin-top: var(--spacing-sm); }
.mt-md  { margin-top: var(--spacing-md); }
.mt-lg  { margin-top: var(--spacing-lg); }
.mt-xl  { margin-top: var(--spacing-xl); }
.mt-xxl { margin-top: var(--spacing-xxl); }

/* Text Alignment */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* Visibility */
.hide-mobile  { display: block; }
.show-mobile  { display: none; }

@media (max-width: 540px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }
}


/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Focus styles for keyboard navigation */
a:focus,
button:focus {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

/* Skip to main content link (for screen readers) */
.skip-to-main {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 1rem;
  background: var(--color-text);
  color: var(--color-bg);
  text-decoration: none;
}

.skip-to-main:focus {
  left: 0;
}


/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .site-header,
  .site-footer,
  .project-links {
    display: none;
  }

  .gallery-grid {
    break-inside: avoid;
  }

  .gallery-item {
    page-break-inside: avoid;
  }
}

/* ============================================
   RELATED PROJECTS SECTION
   ============================================ */

.related-projects {
  padding: 0 0 var(--spacing-xl);
  margin-top: 0px;
}

.related-projects-heading {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text);
  padding: 0 32px;
  margin: 0 0 0px;
}
@media (max-width: 768px) {
  .related-projects-heading {
    padding: 0 16px;
  }
}