/* Cards — DESIGN.md §5.5. No shadows, no card backgrounds: image + text on paper. */

/* Brand / model card. The whole card is one link; hover = slow image push + arrow. */
.card { position: relative; display: grid; gap: var(--s-2); align-content: start; text-decoration: none; color: inherit; }
.card__media { position: relative; overflow: hidden; border-radius: var(--r-2); background: var(--paper-sunk); aspect-ratio: 16 / 10; }
.card__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%;
  transform: scale(1.0001); transition: transform 600ms var(--ease-out); }
.card__name { font: 700 var(--step-1)/1.1 var(--font-display); font-stretch: 85%; display: flex; align-items: baseline; gap: var(--s-2); }
.card__name .arrow { margin-left: auto; opacity: 0; transform: translateX(-4px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.card__meta { font: 500 0.75rem/1.3 var(--font-mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .02em; }
@media (hover: hover) and (pointer: fine) {
  .card:hover .card__media img { transform: scale(1.04); }
  .card:hover .card__name .arrow { opacity: 1; transform: none; }
}
.card:focus-visible { outline: none; }
.card:focus-visible .card__media { outline: 2px solid var(--focus); outline-offset: 3px; }
.card--wide .card__media { aspect-ratio: 16 / 9; }

/* "Zdjęcie poglądowe" caption on photos: a small dark chip, legible on light concrete too. */
.hero__photo figcaption, .model__photo figcaption {
  font: 500 0.6875rem/1 var(--font-mono); color: #fff; background: rgb(23 22 15 / .55);
  padding: 3px 6px; border-radius: 2px; }

/* Typographic card: a model that would repeat the photo shown right before it (several models
   share their brand's photo) gets its name typeset instead of a duplicate picture. */
.card__type { display: grid; align-content: end; gap: var(--s-1); width: 100%; height: 100%; padding: var(--s-4);
  background: var(--paper-sunk); color: var(--ink-3); }
.card__type b { font: 800 var(--step-4)/0.9 var(--font-display); font-stretch: 72%; letter-spacing: -0.01em; color: var(--ink-2); overflow-wrap: anywhere; }
.card__type small { font: 500 0.6875rem/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .03em; }
@media (hover: hover) and (pointer: fine) { .card:hover .card__type b { color: var(--ink); } }

/* Placeholder when a record has no photo yet (no logos — ever) */
.photo-ph { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ink-3);
  font: 500 0.6875rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-3); }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); } }

/* Article cards */
.acard { position: relative; display: grid; gap: var(--s-3); align-content: start; text-decoration: none; color: inherit; }
.acard__media { overflow: hidden; border-radius: var(--r-2); aspect-ratio: 3 / 2; background: var(--paper-sunk); }
.acard__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; transition: transform 600ms var(--ease-out); }
.acard h3, .acard h2 { font-size: var(--step-2); font-weight: 700; font-stretch: 85%; line-height: var(--lh-snug); }
.acard p { color: var(--ink-2); }
.acard .label { color: var(--ink-3); }
.acard__excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: hover) and (pointer: fine) {
  .acard:hover .acard__media img { transform: scale(1.03); }
  .acard:hover :is(h2, h3) { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--accent); }
}
.acard:focus-visible { outline: none; }
.acard:focus-visible .acard__media { outline: 2px solid var(--focus); outline-offset: 3px; }
.acard--compact { grid-template-columns: 112px minmax(0, 1fr); align-items: center; }
.acard--compact .acard__media { aspect-ratio: 1; }
.acard--compact h3 { font-size: var(--step-1); }

/* Inline "book this car" card (articles, related) */
.mention { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s-4); align-items: center;
  padding: var(--s-3); border: 1.5px solid var(--ink); border-radius: var(--r-2); background: var(--surface); }
.mention img, .mention .photo-ph { width: 120px; height: 75px; object-fit: cover; object-position: 50% 62%; border-radius: var(--r-1); background: var(--paper-sunk); }
.mention__body { display: grid; gap: 2px; min-width: 0; }
.mention__name { font: 700 var(--step-1)/1.1 var(--font-display); font-stretch: 85%; }
.mention .btn { grid-column: 1 / -1; }
@media (min-width: 560px) {
  .mention { grid-template-columns: 120px minmax(0, 1fr) auto; }
  .mention .btn { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .card__media img, .acard__media img, .card__name .arrow { transition-property: opacity !important; }
  .card:hover .card__media img, .acard:hover .acard__media img { transform: none; }
}
.acard__text { display: grid; gap: var(--s-2); align-content: start; min-width: 0; }