/*
 * components.css
 * ----------------------------------------------------------------------------
 * Reusable building blocks shared by every site. Each block is a class name
 * used in the templates under shared/components and shared/layouts.
 *
 * Only reads tokens (colors, fonts) and the layout scale from base.css. No
 * hard-coded colors live here, so changing brands/tokens.json restyles all
 * three sites.
 *
 * Contents
 *   1. .wrap         centered page-width container
 *   2. .site-header  logo or wordmark, endorsement line, navigation
 *   3. .hero         large opening block on a page
 *   4. .section      vertical spacing between page sections
 *   5. .button       links styled as buttons
 *   6. .cards        grid of bordered panels
 *   7. .site-footer  dark footer with brand cross-links
 *   8. .prose        long-form text from Markdown pages
 *   9. .page-header  title block at the top of interior pages
 *  10. .breadcrumbs  "Home / Projects / ..." trail
 *  11. .steps        numbered process list
 *  12. .service      one service section on a services page
 *  13. .tags         small labels (platforms, project scope)
 *  14. .project-card project summary in a grid
 *  15. .case         single project (case study) page
 *  16. .cta          closing call-to-action band
 *  17. .form         contact and inquiry forms
 *  18. .link-list    the /links page
 * ----------------------------------------------------------------------------
 */

/* ===== 1. Container ======================================================== */
.wrap {
  width: min(100% - 2 * var(--space-5), var(--page-max));
  margin-inline: auto;
}

/* ===== 2. Header ===========================================================
 * Markup: shared/components/header.njk
 */
.site-header {
  border-bottom: var(--rule);
}
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  padding-block: var(--space-5);
}

/* Logo link: holds either the SVG lockup or the text wordmark.
 * --logo-h is the lockup's height. The endorsement line below it is indented
 * by 1.25 x that height, which is where the wordmark starts in the brand's
 * construction grid (logomark 8 units wide + 2 units gap = 10 of 8). */
.brandmark {
  --logo-h: 2.5rem; /* 40 px on phones */
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: 100%;
  color: var(--color-ink);
  text-decoration: none;
}
@media (min-width: 40rem) {
  .brandmark {
    --logo-h: 3rem; /* 48 px on wider screens */
  }
}
.brandmark img {
  height: var(--logo-h);
  width: auto;
  max-width: 100%;
}

/* Text wordmark, shown until the final logo SVGs arrive. Brand rule:
 * Zilla Slab Bold, small caps, ink. */
.brandmark__wordmark {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  font-variant-caps: small-caps;
  letter-spacing: 0.02em;
}

/* "A Convenient Enterprises Company" under CW and KS. Brand rule: Source
 * Sans 3 SemiBold caps, small. */
.brandmark__endorsement {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-stone-700);
}
/* With the logo image: place the endorsement where the brand's endorsed
 * lockup puts it. Left edge lines up with the wordmark (1.25 x logo height);
 * the negative top margin pulls it up into the space under the wordmark so
 * its baseline sits on the bottom edge of the logomark, as in the grid. */
.brandmark__endorsement--logo {
  margin-top: -0.8em;
  padding-left: calc(var(--logo-h) * 1.25);
  line-height: 1;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding: 0;
  list-style: none;
}
.site-nav a {
  color: var(--color-ink);
  font-weight: 600;
  text-decoration: none;
}
.site-nav a:hover,
.site-nav a[aria-current] {
  color: var(--color-accent);
  text-decoration: underline;
}

/* ===== 3. Hero =============================================================
 * Opening block: eyebrow label, big heading, lead paragraph, buttons.
 */
.hero {
  padding-block: var(--space-9) var(--space-8);
}
.hero__eyebrow {
  margin-bottom: var(--space-4);
  color: var(--color-accent);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.hero h1 {
  max-width: 18ch;
}
.hero__lead {
  margin-top: var(--space-5);
  max-width: 52ch;
  color: var(--color-stone-700);
  font-size: 1.25rem;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* ===== 4. Sections ========================================================= */
.section {
  padding-block: var(--space-8);
  border-top: var(--rule);
}
.section__intro {
  margin-bottom: var(--space-6);
}
.section__intro p {
  margin-top: var(--space-3);
  color: var(--color-stone-700);
}

/* ===== 5. Buttons ==========================================================
 * .button          solid accent fill (one per view, for the main action)
 * .button--quiet   outlined, for secondary actions
 */
.button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  background: var(--color-accent);
  color: var(--color-paper);
  font: inherit; /* <button> elements don't inherit the page font by default */
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
}
.button:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
}
/* Disabled (for example a form that isn't live yet): flat and muted. */
.button:disabled,
.button:disabled:hover {
  background: var(--color-stone-200);
  border-color: var(--color-stone-200);
  color: var(--color-stone-700);
  cursor: not-allowed;
}
.button--quiet {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-stone-400);
}
.button--quiet:hover {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ===== 6. Cards ============================================================
 * Grid that fits as many 16 rem columns as the width allows, then wraps.
 */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-5);
  padding: 0;
  list-style: none;
}
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.card p {
  color: var(--color-stone-700);
}
.card__link {
  margin-top: auto;
  padding-top: var(--space-3);
  font-weight: 600;
}

/* ===== 7. Footer ===========================================================
 * Markup: shared/components/footer.njk. Dark band: ink background, paper
 * text, accent-light links (the light accent passes contrast on ink).
 */
.site-footer {
  /* No top margin: the last page section already ends with padding. */
  padding-block: var(--space-7) var(--space-6);
  background: var(--color-ink);
  color: var(--color-paper);
}
.site-footer a {
  color: var(--color-accent-light);
}
/* Footer logo: one-color-light lockup above the columns. */
.site-footer__logo {
  display: block;
  height: 2.25rem;
  width: auto;
  max-width: 100%;
  margin-bottom: var(--space-6);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-6);
}
.site-footer h2 {
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-stone-400);
}
.site-footer ul {
  display: grid;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}
.site-footer__legal {
  max-width: none; /* full-width divider line, not the paragraph measure */
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-stone-700);
  color: var(--color-stone-400);
  font-size: 0.875rem;
}

/* ===== 8. Prose ============================================================
 * Spacing for long text written in Markdown (about pages, policies).
 */
.prose {
  padding-block: var(--space-8);
}
/* Inside a .section (home page body text), the section already supplies
 * the vertical spacing, so the prose block adds none of its own. */
.section .prose {
  padding-block: 0;
}
.prose > * + * {
  margin-top: var(--space-4);
}
.prose h2,
.prose h3 {
  margin-top: var(--space-7);
}
.prose ul,
.prose ol {
  padding-left: var(--space-5);
}

/* ===== 9. Page header ======================================================
 * Top of interior pages: optional breadcrumbs, title, lead paragraph.
 * Markup: shared/components/page-header.njk
 */
.page-header {
  padding-block: var(--space-8) var(--space-7);
  border-bottom: var(--rule);
}
.page-header h1 {
  max-width: 22ch;
}
.page-header__lead {
  margin-top: var(--space-4);
  max-width: 56ch;
  color: var(--color-stone-700);
  font-size: 1.25rem;
}

/* ===== 10. Breadcrumbs ===================================================== */
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  color: var(--color-stone-700);
}
/* Slash between steps, drawn by CSS so screen readers don't read it. */
.breadcrumbs li + li::before {
  content: "/";
  margin-right: var(--space-2);
  color: var(--color-stone-400);
}

/* ===== 11. Steps ===========================================================
 * Numbered process, numbers drawn by CSS from the list order.
 */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-5);
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  padding-top: var(--space-4);
  border-top: 2px solid var(--color-accent);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-accent);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
}
.steps h3 {
  margin-bottom: var(--space-2);
}
.steps p {
  color: var(--color-stone-700);
}

/* ===== 12. Service sections ================================================
 * Two columns on wide screens: name and summary left, details right.
 * Stacks to one column on phones.
 */
.service {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  padding-block: var(--space-7);
  border-top: var(--rule);
  scroll-margin-top: var(--space-5); /* room above when jumped to by #link */
}
.service:first-of-type {
  border-top: 0;
}
@media (min-width: 52rem) {
  .service {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-7);
  }
}
.service__summary {
  margin-top: var(--space-3);
  color: var(--color-stone-700);
}
.service ul.service__points {
  display: grid;
  gap: var(--space-2);
  padding-left: var(--space-5);
}

/* ===== 13. Tags ============================================================ */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}
.tags li {
  padding: var(--space-1) var(--space-3);
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-stone-700);
  font-size: 0.875rem;
  font-weight: 600;
}
.service .tags {
  margin-top: var(--space-5);
}

/* ===== 14. Project cards =================================================== */
.project-card {
  position: relative; /* lets the title link cover the whole card */
}
.project-card__meta {
  color: var(--color-stone-700);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.project-card h3 a {
  color: var(--color-ink);
  text-decoration: none;
}
/* Stretch the title link over the card so the whole card is clickable,
 * while screen readers still hear one link with the project name. */
.project-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.project-card:hover {
  border-color: var(--color-accent);
}
.project-card:hover h3 a {
  color: var(--color-accent);
}

/* ===== 15. Case study page ================================================= */
.case {
  padding-top: var(--space-6); /* the page header above already adds space */
}
.case__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: var(--rule);
}
.case__meta dt {
  color: var(--color-stone-700);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.case__meta dd {
  margin-top: var(--space-1);
  font-weight: 600;
}
.case__figure {
  margin-top: var(--space-7);
}
.case__figure figcaption {
  margin-top: var(--space-2);
  color: var(--color-stone-700);
  font-size: 0.9375rem;
}

/* ===== 16. Call-to-action band ============================================= */
.cta {
  padding-block: var(--space-8);
  border-top: var(--rule);
  background: var(--color-surface);
}
.cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.cta h2 {
  max-width: 24ch;
}
.cta p {
  margin-top: var(--space-3);
  color: var(--color-stone-700);
}

/* ===== 17. Forms =========================================================== */
.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  padding-block: var(--space-7) var(--space-8);
}
@media (min-width: 52rem) {
  .form-layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  }
}
.form {
  display: grid;
  gap: var(--space-5);
}
.form__row {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 40rem) {
  .form__row {
    grid-template-columns: 1fr 1fr;
  }
}
.field {
  display: grid;
  gap: var(--space-2);
}
.field label {
  font-weight: 600;
}
.field__optional {
  color: var(--color-stone-700);
  font-weight: 400;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-stone-400);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
}
.field textarea {
  min-height: 10rem;
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--color-accent);
}
/* Spam trap: a field real visitors never see or fill in. */
.field--trap {
  position: absolute;
  left: -9999px;
}
.form__notice {
  padding: var(--space-4);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.form__status {
  font-weight: 600;
}
.form-aside {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}
.form-aside h2 {
  font-size: 1.25rem;
}
.form-aside p {
  margin-top: var(--space-2);
  color: var(--color-stone-700);
}

/* ===== 18. Link list (/links) ==============================================
 * Big tap targets, one per line, for visitors arriving from social bios.
 */
.link-page {
  max-width: 34rem;
  padding-block: var(--space-8);
  text-align: center;
}
.link-page p {
  margin: var(--space-3) auto 0;
  color: var(--color-stone-700);
}
.link-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: 0;
  list-style: none;
}
.link-list a {
  display: block;
  padding: var(--space-4);
  border: 1px solid var(--color-stone-400);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  font-weight: 600;
  text-decoration: none;
}
.link-list a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ===== 19. Photo gallery ===================================================
 * Grid of photos with captions (shared/components/gallery.njk). Photos are
 * cropped to the same 4:3 shape in the grid; the link opens the full image.
 */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gallery__item {
  margin: 0;
}
.gallery__item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--color-stone-200);
}
.gallery__item a:hover img,
.gallery__item a:focus-visible img {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.gallery__item figcaption {
  margin-top: var(--space-2);
  color: var(--color-stone-700);
  font-size: 0.95em;
}
.gallery__empty {
  color: var(--color-stone-700);
  font-style: italic;
}

/* ===== 20. Gallery category buttons ========================================
 * Row of links above the photos on /work: All, then one per category that
 * has photos (shared/components/gallery-filter.njk). The current one is
 * filled in.
 */
.gallery-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}
.gallery-filter a {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-stone-400);
  border-radius: 999px;
  color: var(--color-ink);
  text-decoration: none;
}
.gallery-filter a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.gallery-filter a[aria-current="page"] {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-paper);
}