/* ============================================================
   RESUME PAGE STYLES
   Used only by: resume.html
   Global styles (nav, footer, buttons, colors) are in styles.css
   ============================================================ */

/* ============================================================
   STICKY HEADER — "Leïca Lucien" name block + Download button
   ─────────────────────────────────────────────────────────────
   "position: sticky" keeps the header in the normal page flow
   (unlike "position: fixed" which removes it). It scrolls with
   the page until it hits "top: 78px" — the height of the fixed
   nav bar — and then it locks in place while you scroll.

   "z-index: 99" makes sure the sticky header sits above the
   credits content below it, but underneath the nav (z-index: 100).

   "box-shadow" adds a very subtle warm shadow so the header looks
   slightly "lifted" above the credits as you scroll past it.
   ============================================================ */

/* The outer header spans the full page width for the background color */
.resume-header {
  position: sticky;
  top: 78px;    /* ← STICKY BEHAVIOR: locks here when scrolling (= nav height) */
  z-index: 99;  /* stays above credits, below nav */

  background: var(--cream-deep);
  border-bottom: 0.5px solid var(--border);
  padding: 20px 0; /* no horizontal padding — inner wrapper centers the content */

  /* Subtle shadow that appears when the header is "stuck" */
  box-shadow: 0 2px 16px rgba(26, 16, 8, 0.07);
}

/* ─────────────────────────────────────────────────────────────
   INNER WRAPPER — centers the name and button to match credits.
   "max-width: 880px" and "margin: 0 auto" are the same values
   used on .resume-body below, so the left edge of the name and
   the left edge of the first credit row line up perfectly.
   ───────────────────────────────────────────────────────────── */
.resume-header-inner {
  width: 100%;        /* claim full space first, then apply the cap below */
  max-width: 880px;   /* ← same as .resume-body — aligns header with credits */
  margin: 0 auto;     /* centers the 880px block horizontally */
}

/* Eyebrow sits above the name row */
.resume-header-inner .eyebrow { margin-bottom: 12px; }

/*
  Name and button in a single flex row — button sits RIGHT of the name,
  so it ends near the title column boundary in the credits below.
  No space-between, so the button stays close to the name.
*/
/*
  Name left, button right — both within the same 880px container.
  The button's right edge lines up with the far-right edge of the credits below.
*/
.resume-name-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

/* The large italic name in the header */
.resume-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 42px;
  font-weight: 300;
  font-style: italic;
  color: var(--ink);
}

/* ============================================================
   CENTERED CREDITS BLOCK
   ─────────────────────────────────────────────────────────────
   "max-width" sets the maximum width the content area can grow to.
   "margin: 0 auto" centers that block — the browser splits the
   remaining space equally on left and right.

   To make the credits wider or narrower, change the 880px value
   here AND in .resume-header-inner above.
   ============================================================ */
.resume-body {
  max-width: 880px;   /* ← CENTERED WIDTH: change this to adjust the credits block width */
  margin: 0 auto;     /* ← CENTERING: splits leftover space equally on both sides */
  padding: 52px 0;    /* top/bottom spacing only — max-width handles the sides */
}

/* Section headings: THEATER, FILM, COMMERCIALS, TRAINING, SPECIAL SKILLS */
.resume-section-head {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 400;
  margin-bottom: 28px;
  margin-top: 44px; /* space above each new section */
  display: block;
}

/* The first section heading (Theater) has no top margin */
.resume-section-head:first-child {
  margin-top: 0;
}

/* ─────────────────────────────────────────────────────────────
   CREDIT ROWS — each production listed as a horizontal row:
   Title (left) | Role (middle) | Company (right)

   "grid-template-columns: 40% 13% 1fr" controls the column widths:
   - 40% = title column
   - 13% = role column
   - 1fr = company gets the remaining space
   ───────────────────────────────────────────────────────────── */
.credit {
  display: grid;
  grid-template-columns: 40% 13% 1fr; /* ← COLUMN ALIGNMENT: adjust these percentages */
  align-items: baseline; /* lines up text across all three columns */
  margin-bottom: 12px;   /* ← ROW SPACING: space between each credit */
}

/* The play/film title — italic serif on the left */
.credit-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  font-style: italic;
  color: var(--ink);
}

/* The role (Lead / Supporting / Extra) — terracotta in the middle */
.credit-role {
  font-size: 11px;
  font-weight: 400;
  color: var(--terra);
  letter-spacing: 0.05em;
}

/* The company and director — muted gold on the right */
.credit-company {
  font-size: 11px;
  color: var(--warm-muted);
  font-weight: 300;
}

/* ─────────────────────────────────────────────────────────────
   TRAINING ROWS — two columns only (no role column):
   Subject (left) | School / Teacher (right)

   53% = 40% (title) + 13% (role) from credits above,
   so the company column stays aligned across both sections.
   ───────────────────────────────────────────────────────────── */
.training-item {
  display: grid;
  grid-template-columns: 53% 1fr;
  align-items: baseline;
  margin-bottom: 12px; /* matches credit row spacing */
}

/* The training subject — italic serif on the left */
.training-subject {
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  font-style: italic;
  color: var(--ink);
}

/* The school or teacher — muted gold on the right */
.training-detail {
  font-size: 11px;
  color: var(--warm-muted);
  font-weight: 300;
}

/* ─────────────────────────────────────────────────────────────
   SPECIAL SKILLS SECTION
   Same max-width and margin: 0 auto as .resume-body above,
   so the section header and text stay aligned with the credits.
   ───────────────────────────────────────────────────────────── */
.skills-section {
  max-width: 880px;  /* matches .resume-body */
  margin: 0 auto;
  padding: 0 0 72px;
}

.skills-text {
  font-size: 14px;
  color: var(--warm-mid);
  font-weight: 300;
  line-height: 1.8;
  max-width: 800px;
  margin-top: 12px; /* matches credit/training row spacing */
}

/* ============================================================
   RESPONSIVE — tablet (991px and below)
   ============================================================ */
@media (max-width: 991px) {
  /* Add horizontal padding back — max-width is wider than the screen here */
  .resume-body { padding: 36px 24px; }
  .resume-header { padding: 32px 0; }
  /* Add side padding and stack name + button vertically on tablet */
  .resume-header-inner { padding: 0 24px; }
  .resume-name-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .skills-section { padding: 0 24px 56px; }

  /* Stack each credit row vertically instead of side by side */
  .credit {
    grid-template-columns: 1fr;
    margin-bottom: 24px;
  }
  .credit-role { margin-top: 2px; }
  .credit-company { margin-top: 2px; }

  /* Stack training rows too */
  .training-item {
    grid-template-columns: 1fr;
    margin-bottom: 12px;
  }
  .training-detail { margin-top: 2px; }
}

/* ============================================================
   RESPONSIVE — mobile (479px and below)
   ============================================================ */
@media (max-width: 479px) {
  .resume-body { padding: 28px 20px; }
  .resume-header { padding: 24px 0; }
  .resume-header-inner { padding: 0 20px; }
  .skills-section { padding: 0 20px 48px; }
}