/* credits.css: "Görsel Kaynakları" (views/credits.js of the vehicles module): an info box and the brand
   logo sources side by side, then the car photo credits as one full width table (a grid of small blocks
   below 1024 px). Tokens only; full width with the site gutters. */

.page-head + .crd-sec { padding-top: var(--sp-10); }
.crd-grid { display: flex; flex-direction: column; gap: var(--sp-10); }
.crd-top { display: grid; gap: var(--sp-4) var(--grid-gap); grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 1024px) { .crd-top:not(:has(> :only-child)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.crd-main { min-width: 0; }
.crd-h2 { margin-bottom: var(--sp-5); font-size: clamp(1.375rem, 1.15rem + .75vw, 1.75rem); line-height: 1.2; }
.crd-box { padding: var(--sp-5) var(--sp-6); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-alt); color: var(--ink-2); font-size: .9375rem; line-height: 1.6; }
.crd-logos .crd-h2 { margin-bottom: var(--sp-3); font-size: 1.125rem; }
.crd-list { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.crd-box a, .crd-table a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.crd-box a:hover, .crd-table a:hover { text-decoration-color: currentColor; }
.crd-none { color: var(--ink-2); }

/* One row per photo: car, author, licence, source, change note. */
.crd-table { width: 100%; font-size: .9375rem; line-height: 1.45; }
.crd-table th, .crd-table td { padding: 10px var(--sp-6) 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.crd-table tr > :last-child { padding-right: 0; }
.crd-table thead th { padding-top: 0; border-bottom-color: var(--line-strong); color: var(--muted); font-size: .8125rem; font-weight: var(--fw-semibold); white-space: nowrap; }
.crd-table tbody th { color: var(--ink); font-weight: var(--fw-semibold); }
.crd-brand { color: var(--ink-2); font-weight: var(--fw-medium); }
.crd-table td { color: var(--ink-2); }
.crd-table td:nth-of-type(2), .crd-table td:nth-of-type(4) { white-space: nowrap; }
.crd-table a { overflow-wrap: anywhere; }

/* Below 1024 px: each photo is a small block (the car, then labelled lines), as many columns as fit. */
@media (max-width: 1023.98px) {
  .crd-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .crd-table, .crd-table tr, .crd-table th, .crd-table td { display: block; }
  .crd-table tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); column-gap: var(--sp-8); }
  .crd-table tr { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
  .crd-table tbody th, .crd-table td { padding: 2px 0; border: 0; white-space: normal; }
  .crd-table td:nth-of-type(2), .crd-table td:nth-of-type(4) { white-space: normal; }
  .crd-table tbody th { padding-bottom: var(--sp-1); font-size: 1rem; }
  .crd-table td::before { content: attr(data-label) ": "; color: var(--muted); }
  /* Author and licence share a line. */
  .crd-table td:nth-of-type(1), .crd-table td:nth-of-type(2) { display: inline; }
  .crd-table td:nth-of-type(2)::before { content: " · " attr(data-label) ": "; }
}