/**
 * Portfolio — component styles
 *
 * Tokens live in design-system.css (load before this file).
 * Site pages: index.html, work.html, about.html.
 */

/* ==========================================================================
   1. Base reset & defaults
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  background-color: var(--color-slate-50);
  color: var(--color-slate-900);
  line-height: var(--line-height-body);
}

a {
  color: inherit;
  text-decoration: none;
}

/* ==========================================================================
   2. Page shell
   ========================================================================== */

.page {
  min-height: 100vh;
  background: radial-gradient(
    circle at top,
    var(--color-hero-sky) 0%,
    var(--color-slate-50) 40%,
    var(--color-slate-50) 100%
  );
}

.main {
  padding-bottom: var(--space-main-bottom);
}

/* ==========================================================================
   3. Site header & navigation
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: var(--border-width-default) solid var(--color-header-border);
  background-color: var(--color-header-bg);
  backdrop-filter: blur(var(--space-s));
}

.site-header__inner {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: calc(var(--space-s) - var(--border-width-default));
  min-height: var(--space-header);
  width: 100%;
  max-width: var(--max-content);
  padding-inline: var(--space-gutter);
  padding-block: calc(var(--space-s) + var(--space-xxs) + var(--space-xxs));
}

@media (min-width: 768px) {
  .site-header__inner {
    flex-wrap: nowrap;
    height: var(--space-header);
    min-height: 0;
    padding-block: 0;
  }
}

@media (min-width: 640px) {
  .site-header__inner {
    padding-inline: var(--space-gutter-wide);
  }
}

.brand {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-brand);
}

.nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--space-s) - var(--border-width-default)) var(--space-gutter);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-slate-600);
}

@media (max-width: 767px) {
  .brand {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
  }

  .btn-resume--mobile {
    order: 2;
    flex: 0 0 auto;
  }

  .nav {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    padding-top: calc(var(--space-s) - var(--border-width-default));
    border-top: var(--border-width-default) solid var(--color-header-border);
  }

  .nav__cta {
    display: none;
  }
}

@media (min-width: 768px) {
  .nav {
    gap: var(--space-lg);
    flex-wrap: nowrap;
  }
}

.nav__link {
  transition: color 0.15s ease;
}

.nav__link:hover {
  color: var(--color-slate-900);
}

.nav__link[aria-current="page"] {
  color: var(--color-slate-900);
  font-weight: var(--font-weight-semibold);
}

.nav__cta {
  border-radius: var(--radius-pill);
  background-color: var(--color-sky-500);
  padding-block: calc(var(--space-xs) + var(--border-width-default));
  padding-inline: var(--space-m);
  color: var(--color-white);
  transition: background-color 0.15s ease;
}

.nav__cta:hover {
  background-color: var(--color-sky-600);
}

.btn-resume--mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  border: var(--border-width-default) solid var(--color-slate-300);
  padding-block: calc(var(--space-xs) + var(--border-width-default));
  padding-inline: var(--space-m);
  font-size: var(--font-size-sm);
}

@media (min-width: 768px) {
  .btn-resume--mobile {
    display: none;
  }
}

/* ==========================================================================
   4. Main layout — section container & headings
   ========================================================================== */

.section {
  margin-inline: auto;
  margin-top: var(--space-section);
  width: 100%;
  max-width: var(--max-content);
  border-top: var(--border-width-default) solid var(--color-slate-200);
  padding-inline: var(--space-gutter);
  padding-top: var(--space-xxxl);
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xxl);
  min-width: 0;
}

@media (min-width: 640px) {
  .section {
    padding-inline: var(--space-gutter-wide);
  }
}

.hero {
  margin-top: 0;
  margin-inline: auto;
  width: 100%;
  max-width: var(--max-content);
  border-top: none;
  padding-inline: var(--space-gutter);
  padding-top: var(--space-xxxl);
  padding-bottom: 0;
}

@media (min-width: 640px) {
  .hero {
    padding-inline: var(--space-gutter-wide);
    padding-top: var(--space-section);
    padding-bottom: 0;
  }
}

.hero__layout {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 900px) {
  .hero__layout {
    grid-template-columns: minmax(0, 1fr)
      minmax(var(--layout-hero-figure-column-min), var(--layout-hero-figure-column-max));
    gap: clamp(var(--space-xl), 5vw, calc(var(--space-xxl) + var(--space-m) + var(--space-xs)));
  }
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
}

.hero__figure {
  margin: 0;
  justify-self: start;
}

@media (max-width: 899px) {
  .hero__figure {
    order: -1;
  }
}

@media (min-width: 900px) {
  .hero__figure {
    justify-self: end;
  }
}

.hero__photo {
  display: block;
  width: 100%;
  max-width: min(var(--layout-hero-photo-max), 85vw);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-card-lg);
  border: var(--border-width-default) solid var(--color-slate-200);
  box-shadow: var(--shadow-soft);
}

@media (min-width: 900px) {
  .hero__photo {
    max-width: 100%;
  }
}

.section__title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-slate-900);
}

@media (min-width: 640px) {
  .section__title {
    font-size: var(--font-size-2xl);
  }
}

.section__intro {
  margin: 0;
  max-width: var(--max-line-length);
  font-size: var(--font-size-body);
  line-height: var(--line-height-relaxed);
  color: var(--color-slate-600);
}

@media (min-width: 640px) {
  .section__intro {
    font-size: var(--font-size-body-lg);
  }
}

.section__body {
  margin: 0;
  color: var(--color-slate-600);
}

.section__cta {
  margin: 0;
}

.section--page-start {
  margin-top: 0;
  border-top: none;
  padding-top: var(--space-xl);
  padding-bottom: 0;
}

@media (min-width: 640px) {
  .section--page-start {
    padding-top: calc(var(--space-xxl) - var(--space-m));
    padding-bottom: 0;
  }
}

/* ==========================================================================
   5. Hero — badge, headline, lead, actions
   ========================================================================== */

.hero__badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  border: var(--border-width-default) solid var(--color-slate-200);
  background-color: var(--color-white);
  padding-block: var(--space-xxs);
  padding-inline: calc(var(--space-s) - var(--border-width-default));
  font-size: var(--font-size-sm);
  color: var(--color-slate-700);
  box-shadow: var(--shadow-badge);
}

.hero__title {
  margin: 0;
  max-width: var(--max-line-length-wide);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

@media (min-width: 640px) {
  .hero__title {
    font-size: var(--font-size-hero);
  }
}

.hero__lead {
  margin: 0;
  max-width: var(--max-line-length);
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-slate-600);
}

.hero__lead strong {
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate-900);
}

.hero__actions {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--space-s) - var(--border-width-default));
}

/* ==========================================================================
   6. Buttons
   ========================================================================== */

.btn--primary {
  border-radius: var(--radius-pill);
  background-color: var(--color-fuchsia-500);
  padding-block: calc(var(--space-s) - var(--border-width-default));
  padding-inline: var(--space-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  transition: background-color 0.15s ease;
}

.btn--primary:hover {
  background-color: var(--color-fuchsia-600);
}

.btn--outline {
  border-radius: var(--radius-pill);
  border: var(--border-width-default) solid var(--color-slate-300);
  background-color: var(--color-white);
  padding-block: calc(var(--space-s) - var(--border-width-default));
  padding-inline: var(--space-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate-800);
  transition: border-color 0.15s ease;
}

.btn--outline:hover {
  border-color: var(--color-slate-400);
}

/* ==========================================================================
   7. Work grid & case-study modals
   ========================================================================== */

.work-grid {
  margin: 0;
  display: grid;
  gap: var(--space-gutter);
}

@media (min-width: 768px) {
  .work-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/*
 * Component: Work card
 * --------------------------------------------------------------------------
 * Root:     .work-card
 * Title:    .work-card__title  (h2 or h3 to match page outline)
 * Summary:  .work-card__text
 * Details:  .work-card__meta  +  .work-card__meta-label
 * Action:   .work-card__action  (link to case study page)
 */

.work-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  border-radius: var(--radius-card-lg);
  border: var(--border-width-default) solid var(--color-slate-200);
  background-color: var(--color-white);
  padding: var(--space-lg);
  box-shadow: var(--shadow-soft);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.work-card:hover {
  transform: translateY(var(--space-card-shift));
}

.work-card__title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.work-card__text {
  margin: 0;
  color: var(--color-slate-700);
}

.work-card__meta {
  margin: 0;
  list-style: none;
  padding-left: 0;
}

.work-card__meta li {
  font-size: var(--font-size-sm);
  color: var(--color-slate-600);
}

.work-card__meta li + li {
  margin-top: calc(var(--space-xs) + var(--border-width-default));
}

.work-card__meta-label {
  font-weight: var(--font-weight-medium);
  color: var(--color-slate-800);
}

.work-card__action {
  margin: 0;
  display: inline-flex;
  align-self: flex-start;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-sky-600);
  transition: color 0.15s ease;
}

.work-card__action:hover {
  color: var(--color-sky-700);
}

button.work-card__action {
  font: inherit;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
}

a.work-card__action {
  text-decoration: none;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/*
 * Case study page (standalone; optional “On this page” TOC from 900px)
 */
.case-study {
  padding-bottom: var(--space-xxl);
}

.case-study__back {
  display: inline-flex;
  align-self: flex-start;
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-sky-600);
  text-decoration: none;
  transition: color 0.15s ease;
}

.case-study__back:hover {
  color: var(--color-sky-700);
}

.case-study__title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-slate-900);
}

@media (min-width: 640px) {
  .case-study__title {
    font-size: var(--font-size-2xl);
  }
}

.case-study__lede {
  margin: 0;
  font-size: var(--font-size-body);
  line-height: var(--line-height-highlight);
  color: var(--color-slate-700);
}

.case-study__meta {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--font-size-sm);
  color: var(--color-slate-600);
}

.case-study__meta li + li {
  margin-top: calc(var(--space-xs) + var(--border-width-default));
}

.case-study-layout {
  display: block;
}

.case-study-layout__toc {
  display: none;
}

.case-study-layout__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxl);
  min-width: 0;
}

.case-study-layout__main > header {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

@media (min-width: 900px) {
  .case-study-layout {
    display: grid;
    grid-template-columns: minmax(0, var(--layout-case-study-toc-max)) minmax(0, 1fr);
    gap: var(--space-xxl);
    align-items: start;
  }

  .case-study-layout__toc {
    display: block;
    position: sticky;
    top: calc(var(--space-xxxl) + var(--space-lg));
    align-self: start;
  }
}

.on-this-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  border-radius: var(--radius-card-lg);
  border: var(--border-width-default) solid var(--color-slate-200);
  padding: var(--space-m);
  background-color: var(--color-white);
  box-shadow: var(--shadow-soft);
}

.on-this-page__heading {
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-slate-500);
}

.on-this-page__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.on-this-page__link {
  display: block;
  padding-block: calc(var(--space-xs) + var(--border-width-default));
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-slate-700);
  text-decoration: none;
  border-top: var(--border-width-default) solid var(--color-slate-100);
  transition: color 0.15s ease;
}

.on-this-page__list li:first-child .on-this-page__link {
  border-top: none;
  padding-top: 0;
}

.on-this-page__link:hover {
  color: var(--color-sky-600);
}

.case-study__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.case-study__section h2 {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-slate-900);
  scroll-margin-top: calc(var(--space-xxxl) + var(--space-xl));
}

.case-study__section p {
  margin: 0;
  font-size: var(--font-size-modal-body);
  line-height: var(--line-height-relaxed);
  color: var(--color-slate-700);
}

/* ==========================================================================
   8. Process
   ========================================================================== */

.process-list {
  margin: 0;
  display: grid;
  gap: calc(var(--space-s) - var(--border-width-default));
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

@media (min-width: 640px) {
  .process-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.process-item {
  border-radius: var(--radius-process);
  border: var(--border-width-default) solid var(--color-slate-200);
  background-color: var(--color-white);
  padding: var(--space-m);
  color: var(--color-slate-700);
}

/* ==========================================================================
   9. About — tags & button
   ========================================================================== */

.about-tags {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--space-s) - var(--border-width-default));
}

.tag {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  border: var(--border-width-default) solid var(--color-slate-200);
  background-color: var(--color-white);
  padding-block: var(--space-xxs);
  padding-inline: calc(var(--space-s) - var(--border-width-default));
  font-size: var(--font-size-sm);
  color: var(--color-slate-700);
  box-shadow: var(--shadow-badge);
}

.btn--outline-spaced {
  margin: 0;
  display: inline-flex;
  align-self: flex-start;
  border-radius: var(--radius-pill);
  border: var(--border-width-default) solid var(--color-slate-300);
  background-color: var(--color-white);
  padding-block: calc(var(--space-s) - var(--border-width-default));
  padding-inline: calc(var(--space-gutter) + var(--space-xxs));
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate-800);
  transition: border-color 0.15s ease;
}

.btn--outline-spaced:hover {
  border-color: var(--color-slate-400);
}

/* ==========================================================================
   10. Testimonial
   ========================================================================== */

.testimonial {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  border-radius: var(--radius-card-lg);
  border: var(--border-width-default) solid var(--color-slate-200);
  background-color: var(--color-white);
  padding: var(--space-xl);
  box-shadow: var(--shadow-soft);
}

.testimonial__quote {
  margin: 0;
  font-size: var(--font-size-body-lg);
  color: var(--color-slate-700);
}

.testimonial__cite {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-slate-500);
}

/* ==========================================================================
   11. Contact CTA
   ========================================================================== */

.contact-cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  border-radius: var(--radius-cta);
  background-color: var(--color-slate-900);
  padding-block: calc(var(--space-xl) + var(--space-s));
  padding-inline: calc(var(--space-m) + var(--space-s) + var(--space-xs));
  color: var(--color-slate-100);
}

@media (min-width: 640px) {
  .contact-cta {
    padding-block: calc(var(--space-xxxl) - var(--space-s));
    padding-inline: var(--space-xxl);
  }
}

.contact-cta__title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
}

@media (min-width: 640px) {
  .contact-cta__title {
    font-size: var(--font-size-2xl);
  }
}

.contact-cta__text {
  margin: 0;
  max-width: var(--max-line-length);
  color: var(--color-slate-300);
}

.contact-cta__actions {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--space-s) - var(--border-width-default));
}

.btn--lime {
  border-radius: var(--radius-pill);
  background-color: var(--color-lime-400);
  padding-block: calc(var(--space-s) - var(--border-width-default));
  padding-inline: var(--space-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate-900);
  transition: background-color 0.15s ease;
}

.btn--lime:hover {
  background-color: var(--color-lime-300);
}

.btn--inverse {
  border-radius: var(--radius-pill);
  background-color: var(--color-white);
  padding-block: calc(var(--space-s) - var(--border-width-default));
  padding-inline: var(--space-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate-900);
  transition: background-color 0.15s ease;
}

.btn--inverse:hover {
  background-color: var(--color-slate-100);
}

.btn--ghost-dark {
  border-radius: var(--radius-pill);
  border: var(--border-width-default) solid var(--color-slate-600);
  padding-block: calc(var(--space-s) - var(--border-width-default));
  padding-inline: var(--space-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate-100);
  transition: border-color 0.15s ease;
}

.btn--ghost-dark:hover {
  border-color: var(--color-slate-400);
}

/* ==========================================================================
   12. Footer
   ========================================================================== */

.site-footer {
  margin-inline: auto;
  margin-top: var(--space-footer-top);
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-xs) + var(--border-width-default));
  width: 100%;
  max-width: var(--max-content);
  border-top: var(--border-width-default) solid var(--color-slate-200);
  padding-inline: var(--space-gutter);
  padding-block: var(--space-xl);
  font-size: var(--font-size-sm);
  color: var(--color-slate-500);
}

@media (min-width: 640px) {
  .site-footer {
    padding-inline: var(--space-gutter-wide);
  }
}

.site-footer p {
  margin: 0;
}

.site-footer__line {
  margin: 0;
}