/* Pakstoor :: pks-cards-art.css :: v1.0-000002 :: 2026-10-12 */
/*
  Copyright © 2026 Pakstoor (Pty) Ltd. All rights reserved.
  Mini pictures (css/pks-art.css paint) in card grids and article headings: /help topic cards + articles,
  /safety rule cards. Replaces the small rainbow line icons with the /how-it-works picture style.
*/

/* ---------- picture on top of a card ---------- */
.pks-help-card-art,
.pks-visual-card-art {
  display: block;
  width: 100%;
  max-width: 150px;
  margin: 0 0 10px;
  pointer-events: none;
}
.pks-help-card:has(.pks-help-card-art),
.pks-visual-card:has(.pks-visual-card-art) {
  border-radius: 16px !important;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
html[data-theme="light"] .pks-help-card:has(.pks-help-card-art):not(#pks-x),
html[data-theme="light"] .pks-visual-card:has(.pks-visual-card-art):not(#pks-x) {
  background: #FFFFFF !important;
  border: 1px solid #E7E3DD !important;
  box-shadow: 0 1px 2px rgba(20, 18, 15, .04) !important;
}
html[data-theme="light"] .pks-help-card:has(.pks-help-card-art):not(#pks-x):hover {
  border-color: #D9A625 !important;
  box-shadow: 0 10px 24px -16px rgba(138, 100, 16, .45) !important;
  transform: translateY(-2px);
}
html:not([data-theme="light"]) .pks-help-card:has(.pks-help-card-art):hover { border-color: rgba(217, 166, 37, .6) !important; }

/* ---------- picture beside an article heading ---------- */
.dossier-section-head:has(> .dossier-head-art) { position: relative; padding-right: 190px; }
.dossier-head-art {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 168px;
  pointer-events: none;
}
@media (max-width: 760px) {
  .dossier-section-head:has(> .dossier-head-art) { padding-right: 0; }
  .dossier-head-art { position: static; transform: none; width: 132px; margin: 8px 0 0; grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .pks-help-card-art, .pks-visual-card-art { max-width: 112px; margin-bottom: 6px; }
}

/* ---- 2026-10-12 display QA fixes ---- */
html:not([data-theme="light"]) .dossier-page :is(.dossier-card, .dossier-callout, .dossier-disclosure, .dossier-evidence-meta) a:not(.btn):not(.cat-tile):not([class*="cta"]) { color: #E7BE52; }