/* ================================
   PAGES - Page-Specific Styles
   ================================ */

/* ---- Work Page ---- */
.work-intro {
  padding-top: var(--space-16);
  padding-bottom: var(--space-64);
}

.work-intro p {
  max-width: var(--content-width);
  color: var(--color-gray);
  font-size: 1.125rem;
  line-height: 1.6;
}

.work-grid {
  padding-top: var(--space-16);
  padding-bottom: var(--space-64);
}

.work-grid .grid {
  gap: var(--space-32);
}

/* ---- About Page ---- */

/* About Intro */
.about-intro {
  padding: var(--space-48) 0;
  border-bottom: 1px solid var(--color-light);
}

.about-intro .lead {
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--color-dark);
  max-width: var(--content-width);
  margin-bottom: var(--space-24);
}

.about-intro .secondary {
  font-size: 1.125rem;
  color: var(--color-gray);
  max-width: var(--content-width);
}

/* About Sections */
.about-section {
  padding-top: var(--space-48);
  padding-bottom: var(--space-48);
}

.about-section h2 {
  margin-bottom: var(--space-24);
  color: var(--color-dark);
}

/* Timeline */
.timeline {
  max-width: var(--content-width);
}

.timeline-item {
  padding: var(--space-32) 0;
  border-bottom: 1px solid var(--color-light);
}

.timeline-item:last-child {
  border-bottom: none;
}

.timeline-item__period {
  display: block;
  font-size: 0.875rem;
  color: var(--color-gray);
  margin-bottom: var(--space-8);
}

.timeline-item__role {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: var(--space-4);
}

.timeline-item__company {
  display: block;
  font-size: 1rem;
  color: var(--color-primary);
  font-weight: 500;
  margin-bottom: var(--space-16);
}

.timeline-item__desc {
  font-size: 1rem;
  color: var(--color-gray);
  line-height: 1.5;
}

/* Competencies */
.about-section--alt {
  background: white;
}

.competency {
  padding: var(--space-24);
  background: var(--color-bg);
  border-radius: 4px;
}

.competency h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: var(--space-8);
}

.competency p {
  font-size: 1rem;
  color: var(--color-gray);
  line-height: 1.5;
  margin-bottom: 0;
}

/* ---- Contact Page ---- */
.contact-content {
  padding: var(--space-48) 0 var(--space-64);
}

.contact-content .container {
  max-width: var(--content-width);
}

.contact-intro {
  font-size: 1.375rem;
  line-height: 1.4;
  color: var(--color-dark);
  margin-bottom: var(--space-32);
}

.contact-content p {
  margin-bottom: var(--space-24);
  color: var(--color-text);
}

.contact-details {
  margin: var(--space-48) 0;
  padding: var(--space-32) 0;
  border-top: 1px solid var(--color-light);
  border-bottom: 1px solid var(--color-light);
}

.contact-link {
  display: block;
  font-size: 1.25rem;
  margin-bottom: var(--space-16);
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-link:last-child {
  margin-bottom: 0;
}

.contact-link:hover {
  color: var(--color-secondary);
}

.contact-note {
  font-size: 0.9375rem;
  color: var(--color-gray);
}

/* ---- Case Study Pages ---- */
/*
 * VERTICAL RHYTHM PATTERN
 * -----------------------
 * Rule: Use margin-bottom only, never margin-top (prevents collapsing)
 *
 * Spacing scale:
 * - Section padding: var(--space-48)
 * - After h2 headings: var(--space-24)
 * - Between process steps: var(--space-64)
 * - Step to its media: var(--space-24) (tight grouping)
 * - After media: var(--space-64) (before next step)
 * - Inside components: var(--space-16)
 *
 * Process Step Structure:
 * .process-step
 *   .process-step__number   (01, 02, etc.)
 *   .process-step__content
 *     .process-step__header (h3)
 *     .process-step__body   (paragraphs)
 * .process-step__media      (optional: image, image-compare, grid)
 */

/* Case Study Section - base container */
.case-study-section {
  padding: var(--space-48) 0;
}

/* Section headings */
.case-study-section h2 {
  color: var(--color-dark);
  margin-bottom: var(--space-24);
}

/* Text content - readable width */
.case-study-content {
  max-width: var(--content-width);
}

.case-study-content p {
  margin-bottom: var(--space-16);
}

.case-study-content p:last-child {
  margin-bottom: 0;
}

.case-study-content h2 {
  margin-bottom: var(--space-24);
}

.case-study-content ul {
  margin-bottom: var(--space-16);
  color: var(--color-text);
}

/* Subheadings within content blocks */
.case-study-content p:has(+ .case-study-content__subhead) {
  margin-bottom: var(--space-32);
}

.case-study-content__subhead {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: var(--space-16);
}

.case-study-section li {
  margin-bottom: var(--space-8);
}

.case-study-section li:last-child {
  margin-bottom: 0;
}

/* ---- Process Step Component ---- */
.process-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-24);
  margin-bottom: var(--space-64);
  max-width: var(--content-width);
}

.process-step:last-child {
  margin-bottom: 0;
}

/* Tighten when media follows (image is part of step) */
.process-step:has(+ .process-step__media) {
  margin-bottom: var(--space-24);
}

.process-step__number {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-light);
  line-height: 1;
}

.process-step__content {
  /* Container for header + body */
}

.process-step__header {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: var(--space-8);
}

.process-step__body {
  color: var(--color-text);
  line-height: 1.6;
}

.process-step__body p {
  margin-bottom: var(--space-16);
}

.process-step__body p:last-child {
  margin-bottom: 0;
}

/* Process step media - images after step content */
.process-step__media {
  margin-bottom: var(--space-64);
}

.process-step__media:last-child {
  margin-bottom: 0;
}

.process-step__media .case-study-image,
.process-step__media .image-compare {
  margin-bottom: 0;
}

/* Prototype link styling */
.prototype-link {
  display: inline-block;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.prototype-link:hover {
  color: var(--color-secondary);
}

/* ---- Case Study Images ---- */
.case-study-image {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  border-radius: 4px;
  margin-bottom: var(--space-32);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.case-study-image:last-child {
  margin-bottom: 0;
}

/* Contained image - same width as text */
.case-study-image--contained {
  max-width: var(--content-width);
}

/* Side-by-side layout: text left, image right */
.case-study-split {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-48);
  align-items: center;
}

.case-study-split--reverse {
  grid-template-columns: 1.2fr 1fr;
}

.case-study-split__content {
  max-width: none;
}

.case-study-split__content h3:first-child {
  margin-top: 0;
}

.case-study-split__image {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

@media (max-width: 900px) {
  .case-study-split,
  .case-study-split--reverse {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }

  .case-study-split__image {
    order: 2;
  }
}

/* Case Study Hero */
.case-hero {
  padding: var(--space-32) 0;
}

/* Full-width hero */
.case-hero--full {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: var(--space-32) 0;
  background-color: white;
  overflow-x: auto;
}

.case-hero__image {
  display: block;
  width: 100%;
  min-width: 1200px;
  height: auto;
}

@media (max-width: 1200px) {
  .case-hero--full {
    padding: var(--space-16);
  }

  .case-hero__image {
    width: auto;
    max-width: none;
    height: 400px;
    object-fit: contain;
    object-position: left center;
  }
}

/* Alternating background - more subtle */
.case-study-section--alt {
  background-color: var(--color-bg);
}

/* Image spacing in case studies */
.case-study-section .grid {
  margin-bottom: var(--space-32);
}

.case-study-section .grid:last-child {
  margin-bottom: 0;
}

.case-study-section .grid .case-study-image {
  margin-bottom: 0;
}

/* Image Compare - Hover Reveal */
.image-compare {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: var(--space-32);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.image-compare:last-child {
  margin-bottom: 0;
}

.image-compare--single {
  max-width: 900px;
}

.image-compare__base,
.image-compare__reveal {
  display: block;
  width: 100%;
  height: auto;
}

.image-compare__reveal {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.image-compare:hover .image-compare__reveal {
  opacity: 1;
}

.image-compare__label {
  position: absolute;
  bottom: var(--space-16);
  right: var(--space-16);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 0.75rem;
  padding: var(--space-4) var(--space-8);
  border-radius: 4px;
  transition: opacity 0.3s ease;
}

.image-compare:hover .image-compare__label {
  opacity: 0;
}

/* Back link at bottom */
.back-link-bottom {
  margin-top: var(--space-64);
  padding-top: var(--space-32);
  border-top: 1px solid var(--color-light);
}