/* ═══════════════════════════════════════════════════════════════
   services.css — MODULY (ikona-grid + detail stránka)
═══════════════════════════════════════════════════════════════ */

/* ── Mriežka modulov ─────────────────────────────────────── */
.services-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

/* ── Ikona-karta modulu ───────────────────────────────────── */
.module-card {
  background:      #071a35;
  border:          1px solid rgba(255, 255, 255, 0.08);
  border-radius:   28px;
  min-height:      336px;
  padding:         30px 24px 28px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             18px;
  text-decoration: none;
  color:           #fff;
  text-align:      center;
  transition:      box-shadow var(--transition), transform var(--transition),
                   border-color var(--transition);
  cursor:          pointer;
}
.module-card:hover {
  box-shadow:    var(--shadow-md);
  transform:     translateY(-3px);
  border-color:  rgba(255, 255, 255, 0.28);
}
.module-card.wa-card--without-icon {
  justify-content: center;
  text-align: center;
  align-items: center;
}
.module-card.wa-card--without-icon > * { margin-inline: auto; }
.module-card-tagline-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.module-card-tagline {
  font-size: var(--cards-tagline-font-size, 14px);
  color: var(--module-color, var(--clr-primary));
  font-weight: 600;
}

/* Ikona modulu */
.module-icon {
  width:           88px;
  height:          88px;
  border-radius:   0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  background:      transparent;
  line-height:     0;
}
.module-icon svg {
  display: block;
  width:  70px;
  height: 70px;
  margin: auto;
  color:  #fff;
}
.module-icon img { display: block; width: 70px !important; height: 70px !important; margin: auto; object-fit: contain; filter: brightness(0) invert(1); }

/* Texty na karte */
.module-card h3   { font-size: var(--modules-card-title-font-size, 20px); margin: 0; color: var(--modules-card-title-color, #159eea); line-height: 1.3; }
.module-card p    { font-size: 0.8rem;  margin: 0; color: rgba(255, 255, 255, 0.9); line-height: 1.5; }
.module-card .module-card-description {
  font-size: var(--cards-description-font-size, 15px);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.module-card .module-arrow {
  display:     inline-flex;
  align-items: center;
  justify-content: center;
  margin-top:  -8px;
  font-size:   0.78rem;
  font-weight: 600;
  color:       #fff;
  padding:     9px 18px;
  border:      1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-sm);
  transition: background var(--transition), border-color var(--transition);
}
.module-card:hover .module-arrow,
.module-card:focus-visible .module-arrow {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.85);
}

.module-card.wa-card-style--filled {
  background: var(--module-color, var(--clr-primary));
  border-color: var(--module-color, var(--clr-primary));
}
.module-card.wa-card-style--filled h3,
.module-card.wa-card-style--filled p,
.module-card.wa-card-style--filled .module-arrow,
.module-card.wa-card-style--filled .module-icon svg { color: #fff; }
.module-card.wa-card-style--outline {
  background: #fff;
  border: 2px solid var(--module-color, var(--clr-primary));
  color: var(--clr-text);
}
.module-card.wa-card-style--outline h3,
.module-card.wa-card-style--outline .module-icon svg,
.module-card.wa-card-style--outline .module-arrow { color: var(--module-color, var(--clr-primary)); }
.module-card.wa-card-style--outline p { color: var(--clr-muted); }
.module-card.wa-card-style--outline .module-arrow { border-color: var(--module-color, var(--clr-primary)); }
.module-card.wa-card-style--outline .module-icon img { filter: none; }
.module-card.wa-card-style--outline:hover .module-arrow,
.module-card.wa-card-style--outline:focus-visible .module-arrow {
  background: color-mix(in srgb, var(--module-color, var(--clr-primary)) 10%, transparent);
}
.module-card.wa-card-style--border-fill {
  background: var(--module-fill-color, #eef6fb);
  border: 2px solid var(--module-border-color, var(--module-color, var(--clr-primary)));
  color: var(--clr-text);
}
.module-card.wa-card-style--border-fill h3,
.module-card.wa-card-style--border-fill .module-icon svg,
.module-card.wa-card-style--border-fill .module-arrow { color: var(--module-border-color, var(--module-color, var(--clr-primary))); }
.module-card.wa-card-style--border-fill p { color: var(--clr-muted); }
.module-card.wa-card-style--border-fill .module-arrow { border-color: var(--module-border-color, var(--module-color, var(--clr-primary))); }
.module-card.wa-card-style--border-fill .module-icon img { filter: none; }
.module-card.wa-card-style--border-fill:hover .module-arrow,
.module-card.wa-card-style--border-fill:focus-visible .module-arrow {
  background: color-mix(in srgb, var(--module-border-color, var(--module-color, var(--clr-primary))) 10%, transparent);
}

.services-grid .module-card .module-arrow {
  background:   transparent;
  border-color: var(--modules-more-color, var(--clr-primary));
  color:        var(--modules-more-color, var(--clr-primary));
}
.services-grid .module-card:hover .module-arrow,
.services-grid .module-card:focus-visible .module-arrow {
  background:   color-mix(in srgb, var(--modules-more-color, var(--clr-primary)) 14%, transparent);
  border-color: var(--modules-more-color, var(--clr-primary));
  color:        var(--modules-more-color, var(--clr-primary));
}
.services-grid .module-card h3 {
  color: var(--modules-card-title-color, #159eea);
}

/* ── Základná karta (pricing, testimonials) ───────────────── */
.card {
  background:    var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow:    var(--shadow-sm);
  border:        1px solid var(--clr-border);
  overflow:      hidden;
  transition:    box-shadow var(--transition), transform var(--transition);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }

/* ── Detail stránka modulu ────────────────────────────────── */
.modul-hero {
  padding-block:  var(--space-lg);
  text-align:     center;
  /* farba sa nastaví inline štýlom cez JS */
  background:     linear-gradient(135deg, #0a3b66 0%, var(--clr-primary) 100%);
}
.modul-hero-icon {
  width:           72px;
  height:          72px;
  border-radius:   var(--radius-md);
  background:      rgba(255,255,255,0.15);
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto var(--space-sm);
}
.modul-hero-icon svg { width: 36px; height: 36px; color: #fff; }
.modul-hero h1       { color: #fff; margin-bottom: var(--space-sm); }
.modul-hero p        { color: rgba(255,255,255,0.8); max-width: 540px; margin: 0 auto; font-size: 1.05rem; }

/* Detail obsah */
.modul-content {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-xl);
  align-items:           start;
}

.modul-desc h2  { margin-bottom: var(--space-sm); }
.modul-desc p   { color: var(--clr-muted); line-height: 1.8; margin-bottom: var(--space-md); }

/* Zoznam funkcií */
.modul-features { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: var(--space-md); }
.modul-features li {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-size:   0.95rem;
  color:       var(--clr-text);
}
.modul-features li::before {
  content:         '✓';
  width:           22px;
  height:          22px;
  border-radius:   50%;
  background:      rgba(11,94,215,0.1);
  color:           var(--clr-primary);
  font-weight:     700;
  font-size:       0.75rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

/* Pravý panel — CTA karta */
.modul-cta-card {
  background:    var(--bg-card);
  border:        1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding:       var(--space-lg);
  box-shadow:    var(--shadow-md);
  position:      sticky;
  top:           90px;
  text-align:    center;
}
.modul-cta-card h3 { margin-bottom: 8px; }
.modul-cta-card p  { color: var(--clr-muted); font-size: 0.9rem; margin-bottom: var(--space-md); }
.modul-cta-card .btn { width: 100%; margin-bottom: 10px; }
.modul-back {
  display:    inline-block;
  font-size:  0.85rem;
  color:      var(--clr-muted);
  margin-top: var(--space-sm);
  text-decoration: none;
}
.modul-back:hover { color: var(--clr-primary); }

/* Ostatné moduly — malá mriežka na dne detail stránky */
.modul-other-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}

/* ── Responzívnosť ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .services-grid    { grid-template-columns: repeat(3, 1fr); }
  .modul-other-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .services-grid    { grid-template-columns: repeat(2, 1fr); }
  .modul-content    { grid-template-columns: 1fr; }
  .modul-cta-card   { position: static; }
  .modul-other-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .services-grid    { grid-template-columns: 1fr; }
  .modul-other-grid { grid-template-columns: repeat(2, 1fr); }
}