/*
  JOSIAH LEINBACH — PROFESSIONAL PORTFOLIO
  projects.css — Projects Page Styles

  Loaded after styles.css, which supplies the shared design tokens,
  nav, footer, page-wrapper, ornamental-rule, and section-label.
  This file handles only the projects-specific layout.

  ORGANIZATION:
  1. Page Header (shared pattern, redeclared for clarity)
  2. Projects Grid Container
  3. Project Card
  4. Project Card Fields (tag, title, desc, meta, link)
  5. Placeholder Style
  6. Responsive Adjustments

  WHEN YOU ADD MORE PROJECTS:
  No changes to this CSS file are needed when adding new project
  cards to projects.html. The grid will reflow automatically:
  - 1 project:  single centered card
  - 2 projects: two columns on wide screens, single on small
  - 3+ projects: two columns on wide screens, wrapping naturally
  The only time you might want to adjust this file is if you want
  a three-column layout — change the minmax value in .projects-grid
  from 280px to 200px.
*/


/* ================================================================
  1. PAGE HEADER

  Identical pattern to publications.html and cv.html.
  Redeclared here so projects.css is self-contained and does not
  depend on those page-specific files being loaded.
================================================================ */

.page-header {
  text-align: center;
  padding: 4rem 0 3rem;
}

.page-title {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 6vw, 3.25rem);
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

/* Intro sentence beneath the ornamental rule: Cormorant italic,
   body color — a brief framing statement for the page */
.page-intro {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--color-text-body);
  line-height: 1.75;
  max-width: 32rem;
  margin: 0 auto;
}


/* ================================================================
  2. PROJECTS GRID CONTAINER

  A CSS Grid container that holds all project cards. The grid
  uses auto-fit with a minmax column definition so it reflows
  automatically as you add more cards:

    1 card  → one column, card centered via justify-content
    2 cards → two columns at 280px minimum each
    3+ cards → two columns, cards wrap to new rows as needed

  You do not need to change this file when adding new cards.
================================================================ */

.projects-grid {
  /* margin-top separates the grid from the page header */
  margin-top: 3rem;

  display: grid;

  /* auto-fit: create as many columns as fit.
     minmax(280px, 1fr): each column is at least 280px wide
     and grows to fill available space equally.
     On a 740px container this produces two columns;
     on narrow screens it collapses to one. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  /* When only one card is present and it doesn't fill the full
     grid width, justify-content: center keeps it centered
     rather than stretching to fill the left column only */
  justify-content: center;

  gap: 2rem;
}


/* ================================================================
  3. PROJECT CARD

  Each project is an <article class="project-card"> — a self-
  contained block with a gold top-border accent, dark surface
  background, and structured fields inside.

  The card uses flexbox in column direction so the link at the
  bottom always sits at the foot of the card regardless of how
  much description text is above it. This ensures cards in the
  same row align their bottom links even if their descriptions
  are different lengths.
================================================================ */

.project-card {
  background-color: var(--color-surface);   /* Deep navy panel */
  border: 1px solid var(--color-accent-dim);
  border-top: 2px solid var(--color-accent); /* Gold accent — same as .work-item on index.html */

  /* Flexbox column: allows the link to be pushed to the bottom */
  display: flex;
  flex-direction: column;

  padding: 1.75rem;

  /* Smooth border brightening on hover — gives the card a
     sense of interactivity without any movement */
  transition: border-color 0.2s ease;
}

.project-card:hover {
  border-color: var(--color-accent);
}


/* ================================================================
  4. PROJECT CARD FIELDS

  Each field is a distinct typographic element. The hierarchy
  reads: tag (smallest, gold) → title (largest, vellum) →
  description (body, steel blue) → meta (smallest, muted) →
  link (small, gold).
================================================================ */

/* Discipline tag: Gill Sans small caps in gold — same treatment
   as .work-tag on the home page and .pub-badge labels */
.project-tag {
  font-family: var(--font-sans);
  font-size: 1rem;     /* 16px */
  font-variant: small-caps;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}

/* Project title: Cormorant semibold — the most prominent element
   in the card after the gold top border draws the eye */
.project-title {
  font-family: var(--font-serif);
  font-size: 1.375rem;     /* 22px */
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.25;
  margin-bottom: 0.85rem;
}

/* Description container: flex-grow: 1 pushes the meta and link
   below it to the bottom of the card, keeping card footers
   visually aligned across a row */
.project-desc {
  flex-grow: 1;
  margin-bottom: 1rem;
}

/* Description prose: Cormorant at reading size.
   Paragraphs within .project-desc can be plain <p> tags — no
   extra classes needed. */
.project-desc p,
.project-desc {
  font-family: var(--font-serif);
  font-size: 1rem;         /* 16px */
  text-align: justify;
  color: var(--color-text-body);
  line-height: 1.8;
}

/* Status / meta line: Gill Sans light, muted — a quiet label
   indicating project status or date range */
.project-meta {
  font-family: var(--font-sans);
  font-size: 0.6875rem;    /* 11px */
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 1rem;

  /* A thin top border separates the meta from the description
     above it — the same convention used in the publication entries */
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-accent-dim);
}

/* Project link: same treatment as .pub-link and .cv-honor-link —
   Gill Sans, gold, no underline by default, underline on hover */
.project-link {
  font-family: var(--font-sans);
  font-size: 0.75rem;      /* 12px */
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  text-decoration: none;
  transition: opacity 0.2s ease;
  /* align-self: flex-start prevents the link from stretching
     to full card width when the card is in flex column layout */
  align-self: flex-start;
}

.project-link:hover {
  opacity: 0.7;
  text-decoration: underline;
}


/* ================================================================
  5. PLACEHOLDER STYLE

  .project-placeholder is applied to the temporary descriptive
  text that marks where your project description will go.
  It is styled dimmer than normal body text so it is visually
  obvious — at a glance — that it needs to be replaced.

  Once you add your real description, delete the entire
  <span class="project-placeholder"> element and replace it
  with plain <p> paragraph tags.
================================================================ */

.project-placeholder {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 300;
  font-style: italic;
  color: var(--color-text-muted);
  opacity: 0.5;            /* Visibly dimmer than real content */
  line-height: 1.7;
}


/* ================================================================
  6. RESPONSIVE ADJUSTMENTS

  The grid already handles most responsive behavior via auto-fit.
  These rules fine-tune spacing on small screens.
================================================================ */

@media (max-width: 540px) {

  /* Tighten page header on small screens */
  .page-header {
    padding: 2.5rem 0 2rem;
  }

  /* Reduce grid gap on small screens — cards are stacked
     vertically so less gap is needed between them */
  .projects-grid {
    gap: 1.25rem;
    margin-top: 2rem;
  }

}