/* Product illustrations: original 24QW previews and Learna onboarding art.
   These are decorative compositions, not reconstructed application screenshots. */
.reference-projects > .ref-card.product-card {
  min-height: 320px;
  justify-content: flex-start;
  gap: 16px;
}
.reference-projects .product-card .hd { position: relative; z-index: 2; }
body #project-grid .product-card .ico.product-brand {
  overflow: hidden;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
}
.reference-projects .product-brand img { display: block; width: 100%; height: 100%; object-fit: contain; }
.reference-projects .product-copy { position: relative; z-index: 2; max-width: 44%; margin-top: auto; }
.reference-projects .product-description { margin: 0; line-height: 1.45; text-wrap: pretty; }
.reference-projects .product-card > .project-tags { max-width: 44%; }
.reference-projects .product-hint { display: block; margin-top: 18px; font-size: 12px; line-height: 1.4; color: var(--ink); text-wrap: pretty; }
.product-scene { position: relative; pointer-events: none; isolation: isolate; }
.reference-projects .product-card > .product-scene { position: absolute; left: 49%; right: -12px; top: 97px; bottom: -16px; }
.product-scene .qw-widget { position: absolute; display: block; width: 164px; height: 164px; object-fit: contain; border-radius: 24px; filter: drop-shadow(0 8px 9px rgb(0 0 0 / .09)); transition: transform 180ms ease-out; }
.qw-scene [data-widget="0"] { left: 12px; top: 5px; transform: rotate(-10deg); z-index: 2; }
.qw-scene [data-widget="1"] { left: 114px; top: 16px; transform: rotate(11deg); z-index: 1; }
.qw-scene [data-widget="2"] { left: 59px; top: 100px; transform: rotate(5deg); z-index: 3; }
.qw-scene[data-variant="1"] [data-widget="0"] { transform: translate(47px, 95px) rotate(5deg); z-index: 3; }
.qw-scene[data-variant="1"] [data-widget="1"] { transform: translate(-102px, -11px) rotate(-10deg); z-index: 2; }
.qw-scene[data-variant="1"] [data-widget="2"] { transform: translate(55px, -84px) rotate(11deg); z-index: 1; }
.qw-scene[data-variant="2"] [data-widget="0"] { transform: translate(102px, 11px) rotate(11deg); z-index: 1; }
.qw-scene[data-variant="2"] [data-widget="1"] { transform: translate(-55px, 84px) rotate(5deg); z-index: 3; }
.qw-scene[data-variant="2"] [data-widget="2"] { transform: translate(-47px, -95px) rotate(-10deg); z-index: 2; }
.learna-path { position: absolute; display: block; width: 220px; height: auto; right: 0; top: -20px; transform: rotate(7deg); transition: transform 180ms ease-out; }
.learna-topic { position: absolute; top: 114px; left: -4px; z-index: 2; display: grid; gap: 3px; max-width: 185px; padding: 11px 14px; border: 1px solid var(--ref-line, var(--line)); border-radius: 14px; background: var(--ref-card, var(--card)); color: var(--ink, var(--text)); box-shadow: 0 4px 12px rgb(0 0 0 / .07); transform: rotate(-4deg); transition: transform 180ms ease-out; }
.learna-topic > span { font-size: 10px; line-height: 1.3; color: var(--ink2, var(--muted)); }
.learna-topic > strong { font-size: 16px; line-height: 1.3; font-weight: 600; text-wrap: balance; }
.reference-projects .product-card > .project-link { z-index: 3; }
@media (hover: hover) and (pointer: fine) {
  html[data-motion="full"] .reference-projects .product-qw:hover .qw-widget[data-widget="0"] { transform: translate(-4px, -3px) rotate(-13deg); }
  html[data-motion="full"] .reference-projects .product-qw:hover .qw-widget[data-widget="1"] { transform: translate(4px, -3px) rotate(14deg); }
  html[data-motion="full"] .reference-projects .product-qw:hover .qw-widget[data-widget="2"] { transform: translateY(-5px) rotate(2deg); }
  html[data-motion="full"] .reference-projects .product-learna:not(.capka):hover .learna-path { transform: translateY(-4px) rotate(5deg); }
  html[data-motion="full"] .reference-projects .product-learna:not(.capka):hover .learna-topic { transform: translate(-3px, -2px) rotate(-2deg); }
}
.reference-projects .product-card:has(.project-link:focus-visible) .product-hint { text-decoration: underline; text-underline-offset: 3px; }
html[data-motion="off"] .product-scene *,
html[data-motion="off"] .reference-projects .product-card { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .product-scene *, html:not([data-motion="full"]) .reference-projects .product-card { transition: none !important; }
  html:not([data-motion="full"]) .reference-projects .product-card,
  html:not([data-motion="full"]) .reference-projects .product-card .more { transform: none !important; transition: none !important; }
  html:not([data-motion="full"]) .reference-projects .product-qw:hover .qw-widget[data-widget="0"] { transform: rotate(-10deg) !important; }
  html:not([data-motion="full"]) .reference-projects .product-qw:hover .qw-widget[data-widget="1"] { transform: rotate(11deg) !important; }
  html:not([data-motion="full"]) .reference-projects .product-qw:hover .qw-widget[data-widget="2"] { transform: rotate(5deg) !important; }
  html:not([data-motion="full"]) .reference-projects .product-learna:not(.capka):hover .learna-path { transform: rotate(7deg) !important; }
  html:not([data-motion="full"]) .reference-projects .product-learna:not(.capka):hover .learna-topic { transform: rotate(-4deg) !important; }
}
@media (max-width: 640px) {
  .reference-projects > .ref-card.product-card { min-height: 0; gap: 20px; }
  .reference-projects .product-copy { max-width: none; margin-top: 0; }
  .reference-projects .product-card > .project-tags { max-width: none; order: 2; }
  .reference-projects .product-card > .product-scene { order: 3; }
  .reference-projects .product-hint { margin-top: 12px; }
  .reference-projects .product-card > .product-scene { position: relative; inset: auto; width: 100%; height: 225px; margin: 2px 0 -28px; }
  .reference-projects .product-card > .qw-scene { width: 278px; max-width: 100%; align-self: center; }
  .reference-projects .product-card > .learna-scene { height: 230px; }
  .reference-projects .learna-path { right: 4%; top: -22px; width: 216px; }
  .reference-projects .learna-topic { top: 117px; left: 0; }
}
@media (max-width: 360px) {
  .reference-projects .product-card .hd { gap: 8px; }
  .reference-projects .product-card .hd .id { gap: 10px; }
  .reference-projects .qw-scene .qw-widget { width: 144px; height: 144px; }
  .reference-projects .qw-scene [data-widget="0"] { left: 0; }
  .reference-projects .qw-scene [data-widget="1"] { left: 77px; }
  .reference-projects .qw-scene [data-widget="2"] { left: 38px; top: 92px; }
}
@media (forced-colors: active) {
  .product-scene .learna-topic { border: 1px solid CanvasText; }
}