/* EDI message cards: Generace comparison-card appearance, 10. 9. 2026. */
@property --edi-card-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
html body .edi-site #zpravy .edi-message-grid > article {
  --edi-card-color: #ce202f;
  position: relative;
  padding: 26px 24px;
  background: #fff;
  border: 1px solid #879eae !important;
  border-top: 3px solid var(--edi-card-color) !important;
  box-shadow: 0 6px 18px -4px rgb(7 26 45 / 12%), 0 2px 5px rgb(7 26 45 / 5%) !important;
}
html body .edi-site #zpravy .edi-message-grid > article:nth-child(4n+2) { --edi-card-color: #21b7dd; }
html body .edi-site #zpravy .edi-message-grid > article:nth-child(4n+3) { --edi-card-color: #1783c7; }
html body .edi-site #zpravy .edi-message-grid > article:nth-child(4n+4) { --edi-card-color: #7750bb; }
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .edi-site #zpravy .edi-message-grid > article::after {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 1.5px;
    pointer-events: none;
    background: conic-gradient(from var(--edi-card-angle), transparent 0deg 307deg, color-mix(in srgb, var(--edi-card-color) 13%, transparent) 321deg, color-mix(in srgb, var(--edi-card-color) 60%, transparent) 336deg, rgb(255 255 255 / 68%) 346deg, color-mix(in srgb, var(--edi-card-color) 52%, transparent) 355deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: edi-card-border-flash 7.2s linear infinite;
  }
  .edi-site #zpravy .edi-message-grid > article:nth-child(4n+2)::after { animation-delay: -1.8s; }
  .edi-site #zpravy .edi-message-grid > article:nth-child(4n+3)::after { animation-delay: -3.6s; }
  .edi-site #zpravy .edi-message-grid > article:nth-child(4n+4)::after { animation-delay: -5.4s; }
}
@keyframes edi-card-border-flash { to { --edi-card-angle: 360deg; } }
html body .edi-site.motion-paused #zpravy .edi-message-grid > article::after { animation-play-state: paused !important; }
@media (max-width: 640px) {
  html body .edi-site #zpravy .edi-message-grid > article { padding: 20px; }
}