/* ==========================================================================
   Components — one block per artboard section.
   ========================================================================== */

/* --- Client strip (Home) -------------------------------------------------- */
/* A single inline row: label then names, not a stacked block. */

.clients { background: var(--c-surface-alt); border-bottom: 1px solid var(--c-line); }
.clients__inner {
  max-width: var(--w-container);
  margin: 0 auto;
  padding: 26px var(--pad-gutter);
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 52px);
  flex-wrap: wrap;
}
.clients__label {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-accent-link);
  flex: 0 0 auto;
}
.clients__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: clamp(18px, 3vw, 42px);
  flex-wrap: wrap;
  align-items: center;
}
.clients__list li {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #5A6067;
}

/* --- Service grid (Home) ------------------------------------------------- */
/* minmax(300px) is what the artboard specifies: at the 1400px container that
   resolves to 4 columns, so the eight services sit 4 + 4. A smaller minimum
   yields 5 + 3 and leaves a hole in the second row. */

/* Explicit counts, not auto-fit: there are exactly 8 services, and 8 divides
   evenly only by 4, 2 and 1. auto-fit resolves to 5 or 3 at some widths and
   leaves a visible hole in the last row. */
.service-grid { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1100px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .service-grid { grid-template-columns: 1fr; }
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 210px;
  padding: var(--pad-card);
  text-decoration: none;
  color: inherit;
  transition: background-color .15s ease;
}
.service-card:hover { background: var(--c-surface-hover); color: inherit; }

.service-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.service-card__no {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--c-accent-link);
}
.service-card__norm {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--c-text-7);
  text-align: right;
}
.service-card__title {
  margin: 0;
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--c-heading);
  /* Long compounds like "prefabrykowanych" must wrap, not spill past the card. */
  overflow-wrap: break-word;
  hyphens: auto;
}
.service-card__short {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--c-text-7);
  text-wrap: pretty;
  overflow-wrap: break-word;
}
.service-card__more {
  margin-top: auto;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-accent-link);
}

/* --- Case cards (Home + Realizacje) -------------------------------------- */

.case-card {
  display: block;
  background: var(--c-surface-card-2);
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--c-line-3);
}
.case-card:hover { color: inherit; border-color: var(--c-accent-link); }
.case-card__media { overflow: hidden; }
.case-card__media img { display: block; width: 100%; height: auto; }
.case-card__body { padding: var(--pad-card); }
.case-card .h3 { margin: 10px 0 0; }
.case-card__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--c-line);
}
.case-card__metrics dt {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-text-7);
}
.case-card__metrics dd {
  margin: 6px 0 0;
  font-family: var(--f-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--c-heading);
}

.section-foot {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--c-text-6);
  max-width: 60ch;
  margin: clamp(28px, 3vw, 40px) 0 20px;
}

/* --- Certificates -------------------------------------------------------- */

.cert-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 520px) {
  .cert-grid { grid-template-columns: 1fr; }
}
.cert-card { padding: clamp(20px, 2.2vw, 26px); }
.cert-card__tag {
  display: block;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-accent-link);
  margin-bottom: 10px;
}
.cert-card p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--c-text-5); }

/* --- Post cards ---------------------------------------------------------- */

.post-card {
  display: block;
  background: var(--c-surface-card);
  border: 1px solid var(--c-line);
  padding: var(--pad-card);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease;
}
.post-card:hover { border-color: var(--c-accent-link); color: inherit; }
.post-card .h3 { margin: 12px 0 10px; font-size: 19px; }
.post-card__lead { margin: 0; font-size: 15px; line-height: 1.7; color: var(--c-text-5); }
.post-card__more {
  display: inline-block;
  margin-top: 18px;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-accent-link);
}

/* --- Oferta: TOC + service sections ------------------------------------- */

.toc-bar { border-bottom: 1px solid var(--c-line); padding-block: clamp(18px, 2vw, 26px); }

.service-section { padding-block: var(--pad-section); border-bottom: 1px solid var(--c-line); }
.service-section:nth-child(even) { background: var(--c-surface-alt); }
.service-section__head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.service-section__no {
  font-family: var(--f-mono);
  font-size: var(--t-svc-no);
  font-weight: 600;
  color: var(--c-accent);
  line-height: 1;
}
.service-section__norm {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-text-7);
  border: 1px solid var(--c-line-chip-off);
  padding: 6px 10px;
}
.service-section__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--gap-grid); align-items: start; }
.service-section__figures { display: flex; flex-direction: column; gap: 18px; }
.service-section__figures figure { margin: 0; border: 1px solid var(--c-line); }
.service-section__figures img { display: block; width: 100%; height: auto; }
.service-section__figures figcaption {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--c-text-7);
  padding: 10px 12px;
  background: var(--c-surface-card);
}
.service-section__foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap-grid); margin-top: clamp(30px, 3.5vw, 46px); padding-top: clamp(26px, 3vw, 36px); border-top: 1px solid var(--c-line); }

.square-list { list-style: none; margin: 0; padding: 0; }
.square-list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-text-3);
}
.square-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 6px;
  height: 6px;
  background: var(--c-accent);
}

.link-stack { display: flex; flex-direction: column; }
.link-stack a {
  padding: 14px 0;
  border-top: 1px solid var(--c-line);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-heading);
}
.link-stack a:last-child { border-bottom: 1px solid var(--c-line); }
.link-stack a:hover { color: var(--c-accent-link); }
.link-stack span { display: block; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em; color: var(--c-text-7); margin-top: 4px; font-weight: 400; }

/* --- Realizacje: case blocks + contract table --------------------------- */

.case-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--gap-grid); background: var(--c-surface-card-2); border: 1px solid var(--c-line-3); margin-bottom: var(--gap-grid); }
.case-detail__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-detail__body { padding: var(--pad-card-lg); }
.case-detail__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.case-detail__chip {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-text-6);
  border: 1px solid var(--c-line-chip-off);
  padding: 5px 9px;
}
.case-detail__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); margin: 22px 0; }
.case-detail__metrics > div { background: var(--c-surface-card); padding: 14px 16px; }
.case-detail__metrics dt { font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-text-7); }
.case-detail__metrics dd { margin: 6px 0 0; font-family: var(--f-mono); font-size: 15px; font-weight: 600; color: var(--c-heading); }

.case-block { border-left: 3px solid var(--c-line-strong); padding-left: 16px; margin-bottom: 18px; }
.case-block--challenge { border-left-color: var(--c-accent); }
.case-block--solution { border-left-color: #9BA1A7; }
.case-block--effect { border-left-color: var(--c-heading); }
.case-block dt { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-text-7); margin-bottom: 6px; }
.case-block dd { margin: 0; font-size: 15px; line-height: 1.66; color: var(--c-text-3); }

.table-scroll { overflow-x: auto; }
.contract-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.contract-table th,
.contract-table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.contract-table thead th {
  background: var(--c-surface-alt);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-text-7);
  font-weight: 500;
  white-space: nowrap;
}
.contract-table tbody tr:hover { background: var(--c-surface-hover); }
.contract-table td:first-child { font-family: var(--f-mono); font-size: 13px; color: var(--c-text-6); white-space: nowrap; }
.contract-table .contract-table__title { font-size: 15.5px; font-weight: 700; color: var(--c-heading); }
.contract-table .contract-table__title a { color: inherit; text-decoration: none; }
.contract-table .contract-table__title a:hover { color: var(--c-accent-link); }
.contract-table__scope { font-size: 13.5px; line-height: 1.6; color: var(--c-text-6); margin: 6px 0 0; }
.contract-table__value { font-family: var(--f-mono); font-size: 14px; font-weight: 600; color: var(--c-heading); white-space: nowrap; }
.filter-count { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; color: var(--c-text-7); margin-top: 18px; }

/* --- O nas: team / references ------------------------------------------- */

.team-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .team-grid { grid-template-columns: 1fr; }
}
.team-card { padding: clamp(22px, 2.4vw, 30px); }
.team-card .h3 { font-size: 19px; margin: 0 0 6px; }
.team-card__role { font-size: 14px; line-height: 1.6; color: var(--c-text-5); margin: 0 0 14px; }
.team-card__lic { font-family: var(--f-mono); font-size: 12px; line-height: 1.8; color: var(--c-text-7); margin: 0; }

.ref-card { background: var(--c-surface-card-2); border: 1px solid var(--c-line-3); padding: var(--pad-card); }
.ref-card__mark { font-family: var(--f-mono); font-size: 34px; line-height: 1; color: var(--c-accent); display: block; margin-bottom: 10px; }
.ref-card blockquote { margin: 0; font-size: 16px; line-height: 1.7; color: var(--c-text-3); }
.ref-card figcaption { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--c-line); font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; color: var(--c-text-7); line-height: 1.7; }

.footnote { font-size: 12.5px; line-height: 1.7; color: var(--c-text-7); max-width: 74ch; margin-top: clamp(22px, 2.5vw, 32px); }

/* --- Kontakt ------------------------------------------------------------- */

.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--gap-grid); align-items: start; }
.contact-panel { border: 1px solid var(--c-line); background: var(--c-surface-card); padding: var(--pad-card); margin-bottom: 18px; }
.contact-panel__label { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--c-text-7); margin: 0 0 12px; }
.contact-panel__data { font-family: var(--f-mono); font-size: 14px; line-height: 1.9; color: var(--c-text-3); margin: 0; }
.contact-panel__data a { color: var(--c-accent-link); text-decoration: none; }
.contact-panel__data a:hover { color: var(--c-accent); }
.contact-phone { font-family: var(--f-mono); font-size: 30px; font-weight: 600; color: var(--c-heading); text-decoration: none; display: inline-block; }
.contact-phone:hover { color: var(--c-accent-link); }
.contact-map { border: 1px solid var(--c-line); filter: grayscale(.35) contrast(1.02); line-height: 0; }
.contact-map iframe { display: block; width: 100%; height: 300px; border: 0; }

/* --- Form ---------------------------------------------------------------- */

.enquiry-form { border: 1px solid var(--c-line); background: var(--c-surface-card); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 22px; }
.enquiry-form fieldset { border: 0; margin: 0; padding: 0; }
.enquiry-form legend { font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--c-text-7); padding: 0; margin-bottom: 12px; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 12px; letter-spacing: .12em; font-weight: 600; text-transform: uppercase; color: var(--c-text-4); }
.field input,
.field textarea {
  background: var(--c-surface-page);
  border: 1px solid var(--c-line-input);
  color: var(--c-body);
  padding: 13px 14px;
  font-size: 15px;
  font-family: var(--f-sans);
  width: 100%;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus,
.field textarea:focus { border-color: var(--c-accent-link); outline: 2px solid transparent; outline-offset: 0; }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #b32d2e; }
.field__error { font-size: 12.5px; color: #b32d2e; font-weight: 600; }

.consent { display: flex; gap: 12px; align-items: flex-start; }
.consent input { margin-top: 3px; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--c-accent); }
.consent label { font-size: 13px; line-height: 1.6; color: var(--c-text-4); letter-spacing: 0; text-transform: none; font-weight: 400; }

.form-rodo { font-size: 12px; line-height: 1.7; color: var(--c-text-7); margin: 0; }
.form-submit { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }

.form-notice { padding: 16px 18px; border-left: 3px solid var(--c-accent); background: var(--c-surface-alt); font-size: 14.5px; line-height: 1.6; }
.form-notice--error { border-left-color: #b32d2e; }

/* Honeypot — off-screen, never display:none (bots skip hidden fields). */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* --- Article ------------------------------------------------------------- */

.article-header { border-bottom: 1px solid var(--c-line); }
.article-meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 18px; }
.article-meta__cat { background: var(--c-accent); color: var(--c-on-accent); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; text-decoration: none; }
.article-meta__date { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; color: var(--c-text-7); }
.article-standfirst { font-size: var(--t-standfirst); line-height: 1.65; color: var(--c-text-3); max-width: 60ch; text-wrap: pretty; margin: 20px 0 0; }
.article-figure { margin: clamp(28px, 3vw, 44px) 0 0; }
.article-figure img { display: block; width: 100%; height: auto; }
.article-figure figcaption { font-family: var(--f-mono); font-size: 11.5px; color: var(--c-text-7); padding-top: 10px; }

.article-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--gap-grid-lg); align-items: start; }
.article-prose { max-width: 70ch; }
.article-prose h2 { font-size: 24px; font-weight: 800; line-height: 1.22; letter-spacing: -.015em; color: var(--c-heading); margin: clamp(30px, 3vw, 42px) 0 12px; }
.article-prose h2:first-child { margin-top: 0; }
.article-prose p { font-size: 17px; line-height: 1.78; color: var(--c-text-3); text-wrap: pretty; margin: 0 0 18px; }
.article-prose blockquote { margin: clamp(26px, 3vw, 36px) 0; padding-left: 20px; border-left: 3px solid var(--c-accent); }
.article-prose blockquote p { font-size: 19px; line-height: 1.6; color: var(--c-heading); font-weight: 500; }
.article-prose .is-style-lead { font-size: var(--t-standfirst); color: var(--c-text-2); }

.article-aside { position: sticky; top: calc(var(--h-header) + 26px); display: flex; flex-direction: column; gap: 18px; }
.aside-card { border: 1px solid var(--c-line); background: var(--c-surface-card); padding: clamp(20px, 2.2vw, 28px); }
.aside-card--cta { border-color: var(--c-accent); }
.aside-card__kicker { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--c-text-7); margin: 0 0 12px; }
.aside-card ol { margin: 0; padding-left: 18px; }
.aside-card li { font-size: 14px; line-height: 1.6; color: var(--c-text-4); margin-bottom: 8px; }

/* --- Pagination ---------------------------------------------------------- */

.pagination { margin-top: clamp(36px, 4vw, 56px); display: flex; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers {
  font-family: var(--f-mono);
  font-size: 13px;
  padding: 10px 14px;
  border: 1px solid var(--c-line-chip-off);
  text-decoration: none;
  color: var(--c-text-3);
}
.pagination .page-numbers:hover { border-color: var(--c-accent-link); color: var(--c-accent-link); }
.pagination .page-numbers.current { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }

/* Scope chips are real checkboxes, so selection works with JS disabled. */
.chip:has(input[type="checkbox"]) { display: inline-flex; align-items: center; }
.chip:has(input[type="checkbox"]:checked) {
  background: var(--c-accent);
  color: var(--c-on-accent);
  border-color: var(--c-accent);
}
.chip:has(input[type="checkbox"]:focus-visible) {
  outline: 2px solid var(--c-accent-link);
  outline-offset: 2px;
}

/* --- O nas: story + photo ------------------------------------------------ */

.story {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--gap-grid-lg);
  align-items: start;
}
.story__text { display: flex; flex-direction: column; gap: 18px; }
.story__text p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.76;
  color: var(--c-text-3);
  text-wrap: pretty;
}
.story__figure { margin: 0; border: 1px solid var(--c-line); background: var(--c-surface-card); }
.story__img {
  display: block;
  width: 100%;
  height: clamp(240px, 32vw, 420px);
  object-fit: cover;
  filter: grayscale(.25);
}
.story__figure figcaption {
  padding: 14px 16px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--c-text-5);
  letter-spacing: .04em;
}

/* --- Blog: featured teaser ------------------------------------------------ */

.featured-post {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  background: var(--c-surface-card);
  border: 1px solid var(--c-line);
  text-decoration: none;
  color: inherit;
  margin-bottom: var(--gap-grid);
  transition: border-color .15s ease;
}
.featured-post:hover { border-color: var(--c-accent-link); color: inherit; }
.featured-post__media { overflow: hidden; }
.featured-post__media img { display: block; width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.featured-post__body { padding: var(--pad-card-lg); position: relative; }
.featured-post__badge {
  display: inline-block;
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 9px;
  margin-bottom: 14px;
}
.featured-post .h2--sm { margin: 10px 0 12px; }
.featured-post__lead { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--c-text-5); text-wrap: pretty; }

/* --- Article aside -------------------------------------------------------- */

.aside-card ol { counter-reset: toc; list-style: none; padding: 0; }
.aside-card ol li { counter-increment: toc; margin-bottom: 10px; }
.aside-card ol li a {
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-text-4);
  text-decoration: none;
  display: block;
}
.aside-card ol li a::before {
  content: counter(toc) ". ";
  font-family: var(--f-mono);
  color: var(--c-accent-link);
}
.aside-card ol li a:hover { color: var(--c-accent-link); }
.aside-card__text { margin: 0 0 16px; font-size: 14.5px; line-height: 1.65; color: var(--c-text-4); }
.aside-card__btn { padding: 14px 20px; font-size: 12px; }

/* --- Realizacja: photo gallery ------------------------------------------- */
/* Explicit column counts, not auto-fit — same reason as the service grid:
   auto-fit resolves to odd counts at some widths and leaves holes. */

.photo-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
}
@media (max-width: 1100px) {
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .photo-grid { grid-template-columns: 1fr; }
}

.photo-grid__item { display: block; background: var(--c-surface-card); }
.photo-grid__item[hidden] { display: none; }

.photo-grid__tile {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  line-height: 0;
}
.photo-grid__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: grayscale(.35);
  transition: filter .2s ease;
}
.photo-grid__tile:hover .photo-grid__img,
.photo-grid__tile:focus-visible .photo-grid__img { filter: grayscale(0); }
.photo-grid__tile:focus-visible { outline: 3px solid var(--c-accent); outline-offset: -3px; }

.photo-grid__more { margin-top: clamp(22px, 2.5vw, 32px); }

/* --- Lightbox ------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: rgba(14, 16, 18, .96);
}
.lightbox[hidden] { display: none; }

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(16px, 3vw, 32px);
  border-bottom: 1px solid var(--c-hdr-line);
  flex: 0 0 auto;
}
.lightbox__count {
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: .14em;
  color: var(--c-hdr-nav);
}
.lightbox__stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 2vw, 28px);
  min-height: 0;
}
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.lightbox__btn {
  background: transparent;
  border: 1px solid var(--c-hdr-line-2);
  color: var(--c-hdr-bright);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 10px 16px;
  cursor: pointer;
  flex: 0 0 auto;
}
.lightbox__btn:hover { border-color: var(--c-accent); color: var(--c-accent); }
.lightbox__btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.lightbox__btn[disabled] { opacity: .35; cursor: default; }
.lightbox__btn[disabled]:hover { border-color: var(--c-hdr-line-2); color: var(--c-hdr-bright); }

.lightbox__nav { display: flex; gap: 8px; flex: 0 0 auto; }

/* Photo count in the contract table. */
.contract-table__photos {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--c-text-7);
  white-space: nowrap;
}