/* Compact desktop composition for the vehicle-situations grid. */
@media (min-width: 721px) {
  .car-types { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; align-items: stretch; }
  .car-types article:nth-child(n),
  .car-types article:first-child { grid-column: auto; grid-row: auto; }
  .car-types article:nth-child(n) img,
  .car-types article:first-child img { flex: none; height: auto; min-height: 0; max-height: none; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; background: #0d1510; }
  .car-types .card-body { padding: 22px; }
  .car-types h3 { font-size: 24px; line-height: 1.18; margin: 16px 0 10px; }
  .car-types .card-top { color: #c1cbbd; }
  .car-types p { color: #c5cec1; line-height: 1.55; }
  .car-types a { color: var(--lime); font-weight: 700; }
}

@media (max-width: 720px) {
  .car-types, .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .car-types article:nth-child(n), .cases article:nth-child(n) { grid-column: auto; grid-row: auto; }
  .car-types article:nth-child(n) img { height: auto; min-height: 0; max-height: none; aspect-ratio: 4 / 3; object-fit: cover; background: #0d1510; }
  .car-types .card-top { color: #c1cbbd; }
  .car-types p { color: #c5cec1; line-height: 1.55; }
  .car-types a { color: var(--lime); font-weight: 700; }
}

/* Captions on case photos need their own contrast layer. */
.cases article:after { height: 30%; background: linear-gradient(transparent, rgba(8, 14, 10, .5)); }
.cases { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; }
.cases article:nth-child(n), .cases article:first-child { grid-column: auto; grid-row: auto; height: auto; aspect-ratio: 4 / 3; }
.cases img { height: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; }
.cases img { cursor: zoom-in; object-position: center 42%; }
.cases img:focus { outline: 2px solid var(--lime); outline-offset: -3px; }
.cases p {
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 16px 13px;
  background: rgba(8, 14, 10, .9);
  color: #f4f7ed;
  line-height: 1.35;
  text-shadow: none;
  backdrop-filter: blur(5px);
}

.lightbox[hidden] { display: none; }
.lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 32px; background: rgba(4, 8, 5, .92); backdrop-filter: blur(8px); }
.lightbox figure { max-width: min(1200px, 92vw); max-height: 90vh; margin: 0; text-align: center; }
.lightbox figure img { display: block; width: auto; height: auto; max-width: 92vw; max-height: 82vh; object-fit: contain; border-radius: 7px; box-shadow: 0 24px 80px rgba(0, 0, 0, .55); }
.lightbox figcaption { color: #f4f7ed; font-size: 14px; margin-top: 12px; }
.lightbox-close { position: fixed; top: 18px; right: 24px; width: 44px; height: 44px; border: 1px solid rgba(244, 247, 237, .38); border-radius: 50%; background: rgba(8, 14, 10, .75); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.lightbox-close:hover { border-color: var(--lime); color: var(--lime); }
body.lightbox-open { overflow: hidden; }

@media (max-width: 720px) {
  .lightbox { padding: 18px; }
  .lightbox figure img { max-width: 94vw; max-height: 76vh; }
}

@media (max-width: 520px) {
  .car-types, .cases { grid-template-columns: 1fr; }
}