/* ==========================================================================
   components.css — reusable pieces
   --------------------------------------------------------------------------
   1. Buttons and links
   2. Covers (image frames) and the grey-to-colour hover
   3. Work card
   4. Filter bar
   5. Accordion (<details>)
   6. Ruled list (services, awards)
   7. Project index table + hover preview
   8. Forms
   9. Timeline
   10. Process steps
   11. Price cards
   12. Pagination, tags, author box
   13. Reveal on scroll
   14. GLightbox adjustments
   ========================================================================== */

/* 1. Buttons and links ---------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: var(--s2) var(--s3);
  border: var(--rule-thin) solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}

.btn:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--surface);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
}

.btn--ghost:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.btn svg {
  width: 1em;
  height: 1em;
}

.text-link { font-weight: 500; }

/* 2. Covers --------------------------------------------------------------- */
.cover {
  position: relative;
  overflow: hidden;
  background: var(--rule);
}

.cover img { width: 100%; }

.caption {
  margin-top: var(--s1);
  color: var(--muted-text);
  font-size: var(--fs-small);
}

/* 3. Work card ------------------------------------------------------------ */
.work-card {
  display: block;
  text-decoration: none;
}

.work-card__body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s1) var(--s2);
  padding-top: var(--s2);
}

/* Hover and keyboard focus: the title turns cobalt and gains an underline (no movement). */
.work-card__title {
  font-size: var(--fs-h3);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: var(--rule-thin);
  text-underline-offset: 0.2em;
  transition: color 200ms var(--ease), text-decoration-color 200ms var(--ease);
}

.work-card__meta {
  display: flex;
  gap: var(--s2);
  color: var(--muted-text);
  font-size: var(--fs-small);
}

.work-card:hover .work-card__title,
.work-card:focus-visible .work-card__title {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* 4. Filter bar ----------------------------------------------------------- */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  list-style: none;
}

.filter button {
  padding: var(--s1) var(--s2);
  border: var(--rule-thin) solid var(--muted);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-small);
  cursor: pointer;
}

.filter button:hover { border-color: var(--ink); }

.filter button[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

/* 5. Accordion ------------------------------------------------------------ */
.accordion { border-top: var(--rule-thin) solid var(--ink); }

.accordion details { border-bottom: var(--rule-thin) solid var(--rule); }

.accordion summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  padding-block: var(--s3);
  cursor: pointer;
  list-style: none;
}

.accordion summary::-webkit-details-marker { display: none; }

.accordion summary h3,
.accordion summary span {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-heading);
}

.accordion summary::after {
  content: "+";
  flex: none;
  font-size: var(--fs-h3);
  line-height: 1;
  transition: transform 200ms var(--ease);
}

.accordion details[open] summary::after { transform: rotate(45deg); }

.accordion summary:hover { color: var(--accent); }

.accordion__panel {
  display: grid;
  gap: var(--s2);
  max-width: var(--measure);
  padding-bottom: var(--s4);
}

/* 6. Ruled list ----------------------------------------------------------- */
.ruled-list {
  list-style: none;
  border-top: var(--rule-thin) solid var(--ink);
}

.ruled-list > li {
  display: grid;
  gap: var(--s1);
  padding-block: var(--s3);
  border-bottom: var(--rule-thin) solid var(--rule);
}

.ruled-list p { color: var(--muted-text); }

/* 7. Project index table -------------------------------------------------- */
.index-table {
  width: 100%;
  border-collapse: collapse;
  border-top: var(--rule-thin) solid var(--ink);
}

.index-table th {
  padding-block: var(--s2);
  border-bottom: var(--rule-thin) solid var(--rule);
  color: var(--muted-text);
  font-size: var(--fs-small);
  font-weight: 400;
  text-align: left;
}

.index-table td {
  padding-block: var(--s2);
  border-bottom: var(--rule-thin) solid var(--rule);
  vertical-align: baseline;
}

.index-table td:first-child,
.index-table th:first-child {
  width: 4.5rem;
  color: var(--muted-text);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}

.index-table a {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  text-decoration: none;
}

.index-table__cat {
  display: none;
  color: var(--muted-text);
  font-size: var(--fs-small);
  text-align: right;
}

.index-table tr:hover a { color: var(--accent); }

.index-preview { display: none; }

/* 8. Forms ---------------------------------------------------------------- */
.form {
  display: grid;
  gap: var(--s3);
}

.field {
  display: grid;
  gap: var(--s1);
}

.field label,
.field legend {
  font-size: var(--fs-small);
  font-weight: 500;
}

.field__hint {
  color: var(--muted-text);
  font-size: var(--fs-small);
}

.input {
  width: 100%;
  padding: var(--s2);
  border: var(--rule-thin) solid var(--muted);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-body);
}

.input:focus-visible {
  border-color: var(--accent);
  outline-offset: 0;
}

textarea.input {
  min-height: 10rem;
  resize: vertical;
}

.form.was-validated .input:invalid {
  border-color: var(--ink);
  border-width: 2px;
}

.form__status {
  min-height: calc(var(--fs-small) * var(--lh-body));
  font-size: var(--fs-small);
}

.form__status.is-error {
  color: var(--ink);
  font-weight: 600;
}

.form__status.is-success {
  color: var(--accent);
  font-weight: 600;
}

/* 9. Timeline ------------------------------------------------------------- */
.timeline {
  display: grid;
  gap: var(--s4);
  padding-left: var(--s3);
  border-left: var(--rule-thin) solid var(--ink);
  list-style: none;
}

.timeline li {
  position: relative;
  display: grid;
  gap: var(--s1);
}

.timeline li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: calc(var(--s3) * -1 - var(--s1) / 2);
  width: var(--s1);
  height: var(--s1);
  background: var(--ink);
}

.timeline time {
  color: var(--muted-text);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}

/* 10. Process steps ------------------------------------------------------- */
.steps {
  display: grid;
  gap: var(--s4);
  list-style: none;
  counter-reset: step;
}

.steps li {
  display: grid;
  align-content: start;
  gap: var(--s1);
  padding-top: var(--s2);
  border-top: var(--rule-heavy) solid var(--ink);
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  line-height: 1;
}

.steps p { color: var(--muted-text); }

/* 11. Price cards --------------------------------------------------------- */
.prices {
  display: grid;
  gap: var(--gutter);
}

.price {
  display: grid;
  align-content: start;
  gap: var(--s2);
  padding: var(--s4) var(--s3);
  border: var(--rule-thin) solid var(--rule);
  background: var(--surface);
}

.price--featured { border-color: var(--ink); }

.price__amount {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  line-height: 1;
}

.price ul {
  display: grid;
  gap: var(--s1);
  padding-left: var(--s2);
  font-size: var(--fs-small);
}

/* 12. Pagination, tags, author box ---------------------------------------- */
.pagination ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  list-style: none;
}

.pagination a,
.pagination span {
  display: inline-block;
  min-width: 2.75rem;
  padding: var(--s1) var(--s2);
  border: var(--rule-thin) solid var(--muted);
  font-size: var(--fs-small);
  text-align: center;
  text-decoration: none;
}

.pagination [aria-current="page"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.tag {
  display: inline-block;
  padding: calc(var(--s1) / 4) var(--s1);
  border: var(--rule-thin) solid var(--ink);
  font-size: var(--fs-small);
  text-decoration: none;
}

.author-box {
  display: grid;
  gap: var(--s2);
  padding-block: var(--s4);
  border-top: var(--rule-thin) solid var(--ink);
  border-bottom: var(--rule-thin) solid var(--rule);
}

.author-box img { width: var(--s6); }

/* 13. Reveal on scroll — main.js adds .reveal-ready to <html>, then .is-visible.
   If the script does not run, content simply stays visible. ------------------ */
.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(var(--s3));
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.reveal-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-ready .reveal {
    opacity: 1;
    transform: none;
  }
}

/* 14. GLightbox adjustments ----------------------------------------------- */
.glightbox-clean .gslide-description { background: var(--paper); }

.glightbox-clean .gslide-title {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
}

/* Breakpoints ------------------------------------------------------------- */
@media (min-width: 768px) {
  .index-table__cat { display: table-cell; }

  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gutter);
  }

  .prices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .index-preview {
    position: fixed;
    top: 50%;
    right: var(--page-pad);
    z-index: 5;
    display: block;
    width: 22rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%);
    transition: opacity 250ms var(--ease);
  }

  .index-preview.is-active { opacity: 1; }

  /* Leave room on the right for the preview. */
  .index-table { width: calc(100% - 22rem - var(--gutter)); }
}