/* ==========================================================================
   PAGE-SPECIFIC COMPONENTS — about.html, contact.html, process.html,
   resume.html. These four pages don't share the story-driven case-study
   template, so their components live here instead of components.css.
   Ported from the legacy styles.css during the Fase 2 migration.
   ========================================================================== */

/* ---- Shared: simple intro hero used by all four pages ---- */
.hero{ padding: var(--space-6) 0 var(--space-5); position: relative; overflow: hidden; }
.hero h1{ font-size: clamp(2.3rem, 5vw, 3.75rem); max-width: 15ch; }
.hero-sub{ font-size: 1.18rem; color: var(--ink-soft); max-width: 46ch; margin-bottom: var(--space-3); }

/* ---- Shared: section intro (eyebrow + h2 + optional p) ---- */
.section-head{ max-width: 700px; margin-bottom: var(--space-4); }
.section-head h2{ font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
.section-head p{ color: var(--ink-soft); font-size: 1.08rem; max-width: 56ch; }

/* ---- About page ---- */
.about-grid{ display: grid; grid-template-columns: 7fr 3fr; gap: var(--space-5); align-items: start; }
.about-portrait{ border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); }
.fact-list{ margin-top: var(--space-3); display: grid; gap: .9rem; }
.fact-list div{ display: flex; justify-content: space-between; border-bottom: 1px dashed var(--line); padding-bottom: .6rem; font-size: .92rem; }
.fact-list span:first-child{ color: var(--ink-faint); }
.fact-list span:last-child{ font-weight: 600; }

.timeline{ display: grid; gap: 0; }
.timeline-item{ display: grid; grid-template-columns: 150px 1fr; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.timeline-item:last-child{ border-bottom: none; }
.timeline-item .when{ font-family: var(--font-mono); font-size: .82rem; color: var(--ink-faint); }
.timeline-item h4{ margin: 0 0 .2em; font-size: 1.08rem; }
.timeline-item p{ margin: 0; color: var(--ink-soft); font-size: .92rem; }

.values-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.value-card{ padding: var(--card-gap); border-top: 2px solid var(--accent); }
.value-card h3{ font-size: var(--text-lg); }
.value-card p{ color: var(--ink-soft); font-size: var(--text-md); }

/* ---- Process page ---- */
.process-track{ display: grid; gap: var(--space-4); }
.process-step{ display: grid; grid-template-columns: 90px 1fr; gap: var(--space-3); position: relative; padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.process-step:last-child{ border-bottom: none; }
.process-step .ph{ font-family: var(--font-mono); font-size: .78rem; color: var(--ink-faint); letter-spacing: .08em; text-transform: uppercase; }
.process-step .pnum{ font-family: var(--font-display); font-size: 2.4rem; color: var(--accent-soft); font-weight: 600; -webkit-text-stroke: 1.5px var(--accent); }
.process-step h3{ font-size: 1.55rem; }
.process-step .what{ color: var(--ink-soft); font-size: 1.05rem; max-width: 62ch; }
.process-cols{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-2); }
.process-col h4{ font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin-bottom: .6em; }
.process-col ul li{ padding: .35em 0 .35em 1.1em; position: relative; color: var(--ink-soft); font-size: .95rem; }
.process-col ul li::before{ content: "—"; position: absolute; left: 0; color: var(--accent); }
/* .tool-chips / .tool-chip moved to components.css — now used on index.html
   too, not just the 4 legacy pages this file is scoped to. */

/* ---- Resume page ---- */
.resume-hero{ display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--space-4); align-items: center; }
.resume-card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); text-align: center; }
.resume-card .file-icon{ width: 54px; margin: 0 auto var(--space-2); }
.skills-grid{ display: flex; flex-wrap: wrap; gap: .55rem; }
.skill-chip{ background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .5em 1.1em; font-size: .88rem; }
/* Note: the resume's "Selected achievements" stats now reuse .impact-card / .impact-number
   from components.css (same component as the home hero achievements and case study impact
   numbers) instead of a page-local .impact-stat, so all three animate on scroll consistently. */

/* ---- Contact page ---- */
.contact-grid{ display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--space-5); }
.contact-methods{ display: grid; gap: var(--space-2); }
.contact-method{ display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); text-decoration: none; color: var(--ink); transition: border-color .15s ease, transform .15s ease; }
.contact-method:hover{ border-color: var(--ink); transform: translateY(-2px); }
.contact-method .icon{ width: 42px; height: 42px; border-radius: 50%; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; flex: none; }
.contact-method .icon svg{ width: 20px; height: 20px; color: var(--accent-deep); }
.contact-method b{ display: block; font-size: 1rem; }
.contact-method span{ font-size: .86rem; color: var(--ink-soft); }

.form-card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); }
.field{ margin-bottom: var(--space-2); }
.field label{ display: block; font-size: .85rem; font-weight: 600; margin-bottom: .4em; }
.field input, .field select, .field textarea{
  width: 100%; padding: .8em .9em; border-radius: var(--radius-sm); border: 1px solid var(--line);
  font-family: var(--font-body); font-size: .96rem; background: var(--bg); color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline: none; border-color: var(--accent); background: var(--surface); }
.field textarea{ min-height: 120px; resize: vertical; }
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.form-actions{ display: flex; gap: .8rem; flex-wrap: wrap; margin-top: var(--space-2); }
.form-note{ font-size: .82rem; color: var(--ink-faint); margin-top: var(--space-2); }

/* ---------------------------------- Responsive ---------------------------*/
@media (max-width: 980px){
  .process-cols{ grid-template-columns: 1fr; }
  .about-grid{ grid-template-columns: 1fr; }
  .about-portrait{ max-width: 320px; margin: 0 auto; }
  .values-grid{ grid-template-columns: 1fr; }
  .resume-hero{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 600px){
  .form-row{ grid-template-columns: 1fr; }
  .process-step{ grid-template-columns: 1fr; }
}

/* ---- Bullet list inside a timeline item (role accomplishments) ---- */
.timeline-item ul{ margin: .6rem 0 0; display: grid; gap: .35rem; }
.timeline-item ul li{ padding-left: 1.1em; position: relative; color: var(--ink-soft); font-size: .92rem; }
.timeline-item ul li::before{ content: "—"; position: absolute; left: 0; color: var(--accent); }