/* ═══════════════════════════════════════════════════════════════
   features.css — OBLASTI SYSTÉMU
   ───────────────────────────────────────────────────────────────
   TODO: Nadpis, podnadpis, texty a ikony zmeň v index.html
   TODO: href odkazov na kartách zmeň na konkrétne sekcie/stránky
═══════════════════════════════════════════════════════════════ */

/* ── Hlavička sekcie ──────────────────────────────────────── */
.features-header {
  text-align:    center;
  margin-bottom: var(--space-md);
}

/* Hlavný nadpis */
.features-title {
  font-size:   clamp(1.75rem, 3.2vw, 2.4rem);
  font-weight: 700;
  color:       var(--clr-dark);
  margin-bottom: 10px;
}

/* Menší podnadpis pod nadpisom */
.features-subtitle {
  font-size:   1.05rem;
  font-weight: 500;
  color:       var(--clr-muted);
  margin:      0;
}

/* ── Dvojstĺpcový text ────────────────────────────────────── */
/* TODO: Text zmeň v index.html — dve <p> vedľa seba */
.features-text-cols {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-lg);
  margin-block:          var(--space-lg);
  padding-block:         var(--space-lg);
  border-top:            1px solid var(--clr-border);
  border-bottom:         1px solid var(--clr-border);
}

/* Na bg-alt sekcii zachovaj rovnaký border */
.bg-alt .features-text-cols {
  border-color: var(--clr-border);
}

/* Medzera medzi textom a mriežkou modulov */
.bg-alt .features-text-cols + .grid {
  margin-top: var(--space-lg);
}

.features-text-cols p {
  font-size:   1rem;
  line-height: 1.8;
  color:       var(--clr-muted);
  margin:      0;
}
.features-text-cols > .wa-editor-content {
  color: var(--clr-muted);
  font-size: 1rem;
  line-height: 1.8;
}
.features-text-cols > .wa-editor-content p { margin: 0; }
.features-text-cols > .wa-editor-content p + p,
.features-text-cols > .wa-editor-content ul,
.features-text-cols > .wa-editor-content ol { margin-top: 0.75em; }
.features-text-cols > .wa-editor-content ul,
.features-text-cols > .wa-editor-content ol { padding-left: 1.3em; }
.features-text-cols > .wa-editor-content a { color: var(--clr-primary); text-decoration: underline; }
.features-text-cols--single { grid-template-columns: 1fr; }
#features .features-subtitle,
#services .features-subtitle {
  font-size: 1.3rem;
  color: var(--clr-primary);
}

.features-text-cols > p:first-child { font-weight: 700; }
#features .features-text-2:first-child { font-weight: 400; }

/* ── 3 ikona-karty s odkazmi ──────────────────────────────── */
.features-cards {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-md);
  margin-top:            var(--space-lg);
}

.feature-area-card {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             18px;
  min-height:      336px;
  padding:         30px 24px 28px;
  background:      #071a35;
  border:          1px solid rgba(255, 255, 255, 0.08);
  border-radius:   28px;
  text-decoration: none;
  color:           #fff;
  text-align:      center;
  transition:      box-shadow var(--transition), transform var(--transition),
                   border-color var(--transition);
}
.feature-area-card:hover {
  box-shadow:   var(--shadow-md);
  transform:    translateY(-4px);
  border-color: rgba(255, 255, 255, 0.28);
}
.feature-area-card.wa-card--without-icon {
  justify-content: center;
  text-align: center;
  align-items: center;
}
.feature-area-card.wa-card--without-icon > * { margin-inline: auto; }
.feature-area-card.wa-card--without-icon .feature-area-link {
  margin-top: 0;
}
.features-bottom-text {
  margin-top: var(--space-lg);
}
.features-bottom-text > :first-child { margin-top: 0; }
.features-bottom-text > :last-child { margin-bottom: 0; }

#services.section { padding-top: 8px; }
.feature-card-tagline-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.feature-card-tagline {
  font-size: var(--cards-tagline-font-size, 14px);
  color: var(--area-color, var(--clr-primary));
  font-weight: 600;
}

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

/* Nadpis karty */
.feature-area-card h3 {
  font-size:   var(--areas-card-title-font-size, 19px);
  font-weight: 700;
  color:       var(--areas-card-title-color, #159eea);
  margin:      0;
}

/* Popis karty */
.feature-area-card p {
  font-size:   0.88rem;
  color:       rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  margin:      0;
  flex:        1;
}
.feature-area-card .feature-area-description {
  font-size: var(--cards-description-font-size, 15px);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

/* Odkaz na spodku karty */
.feature-area-link {
  display:     inline-flex;
  align-items: center;
  justify-content: center;
  font-size:   0.82rem;
  font-weight: 600;
  color:       #fff;
  margin-top:  auto;
  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);
}
.feature-area-card:hover .feature-area-link,
.feature-area-card:focus-visible .feature-area-link {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.85);
}

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

/* ── Samostatné oblasti (stacked) ─────────────────────────── */
.features-areas {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

/* ── Responzívnosť ────────────────────────────────────────── */
@media (max-width: 768px) {
  #services.section { padding-top: 8px; }
  .features-text-cols { grid-template-columns: 1fr; gap: var(--space-md); }
  .features-cards     { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .features-cards { grid-template-columns: 1fr; }
}