/* ════════════════════════════════════════════════════════════════
   AI ACT — komponenty stránky /transparentnost-ai/
   Doplněk k clanek-assets/article.css. Typografii textu řeší
   article.css, karty přebírají .benefit-card z styles.css. Tady
   je jen to, co nikde jinde není: dvojice seznamů s check/cross
   odrážkami, galerie oficiálních ikon, barevné varianty,
   aplikované ukázky na videu a kontaktní box.
   ════════════════════════════════════════════════════════════════ */

/* ─── Hlavička: datum aktualizace ─────────────────────────────── */

.aiact-header {
  max-width: 760px;
  margin: 0 auto;
}

.aiact-updated {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}

/* ─── Perex ───────────────────────────────────────────────────── */

.aiact-lead {
  max-width: 760px;
  margin: 0 auto 8px;
  font-size: 21px;
  line-height: 1.65;
  color: var(--black);
}

@media (max-width: 560px) {
  .aiact-lead { font-size: 19px; }
}

/* ─── Dvojice seznamů: označujeme / neoznačujeme ──────────────────
   Karty jsou .benefit-card ze styles.css. Tady jen mřížka, hutnější
   padding pro textový výčet a odrážky check / cross.
   ──────────────────────────────────────────────────────────────── */

.aiact-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 28px 0 32px;
  align-items: start;
}

@media (max-width: 760px) {
  .aiact-split { grid-template-columns: 1fr; }
}

/* Výčet snese menší vnitřní okraj než textová benefit karta na HP */
.aiact-split .benefit-card {
  gap: 0;
  padding: 30px 30px 32px;
}

.aiact-split .benefit-card h3 {
  margin: 0 0 16px !important;
  font-size: clamp(20px, 1.9vw, 23px) !important;
}

.aiact-split .benefit-card ul {
  margin: 0 !important;
  padding: 0 !important;
}

.aiact-split .benefit-card ul li {
  margin: 0 0 12px !important;
  padding-left: 30px !important;
  font-size: 16px;
  line-height: 1.6;
  color: var(--body-color);
}

.aiact-split .benefit-card ul li:last-child { margin-bottom: 0 !important; }

/* Odrážky: check pro „označujeme", cross pro „neoznačujeme".
   Ikona jako inline SVG v background-image — jinak by se musela
   opakovat v markupu u každé z jedenácti položek. */
.aiact-split .benefit-card ul li::before {
  content: '' !important;
  position: absolute;
  left: 0;
  top: .3em;
  width: 19px;
  height: 19px;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 19px 19px;
}

.aiact-card--yes ul li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.aiact-card--no ul li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DC2626' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
}

/* ─── Galerie oficiálních ikon ────────────────────────────────── */

.aiact-icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 28px 0 12px;
}

@media (max-width: 760px) {
  .aiact-icons { grid-template-columns: 1fr; }
}

.aiact-icon {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: var(--white);
}

.aiact-icon-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 148px;
  padding: 26px 20px;
  background: var(--surface-warm);
  border-bottom: 1px solid var(--border);
}

/* Ikona musí být čitelná i s textovým labelem — proto takhle velká.
   Zdroj je SVG, takže velikost nic nestojí na ostrosti. */
.aiact-icon-stage img {
  width: auto;
  max-width: 100%;
  height: 58px;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Základní ikona „AI" je kvadratická — dorovnáváme výšku písmen */
.aiact-icon-stage img.is-square { height: 72px; }

.aiact-icon-body { padding: 18px 20px 20px; }

.aiact-icon-body h3 {
  margin: 0 0 7px !important;
  font-size: 16px !important;
  line-height: 1.3;
  font-family: 'Nunito Sans', system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.aiact-icon-body p {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--muted) !important;
}

/* ─── Barevné varianty ────────────────────────────────────────── */

.aiact-variants {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 24px 0 12px;
}

@media (max-width: 620px) {
  .aiact-variants { grid-template-columns: repeat(2, 1fr); }
}

.aiact-variant {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.aiact-variant-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 18px 12px;
}

/* Podklady demonstrují, proti čemu je varianta určená */
.aiact-variant-stage--light {
  background: #E9E7DF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 16 16 0' stroke='%23D6D3C8' stroke-width='1'/%3E%3C/svg%3E");
}

.aiact-variant-stage--dark {
  background: #1E2436 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 16 16 0' stroke='%232C3348' stroke-width='1'/%3E%3C/svg%3E");
}

.aiact-variant-stage img {
  width: auto;
  max-width: 100%;
  height: 34px;
  margin: 0 !important;
  border-radius: 0 !important;
}

.aiact-variant-label {
  padding: 10px 14px 12px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  background: var(--white);
}

.aiact-variant-label strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
}

/* ─── Aplikované ukázky na videu ──────────────────────────────── */

.aiact-examples {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin: 28px 0 12px;
}

@media (max-width: 760px) {
  .aiact-examples { grid-template-columns: 1fr; }
}

.aiact-example {
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  background: var(--white);
}

.aiact-example-video {
  position: relative;
  background: var(--black);
  aspect-ratio: 9 / 16; /* zdroj je 406×720 s SAR 405:406 → zobrazuje se jako 9:16 */
}

.aiact-example-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aiact-example-body { padding: 20px 22px 22px; }

.aiact-example-body p {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--muted) !important;
}

.aiact-example-body p + p { margin-top: 10px !important; }

/* Kontakt řeší .cta-section ze styles.css — vlastní box tu není. */