/* ═══════════════════════════════════════════════════════════════
   verzie.css — Sekcia verzií systému (4 plány)
   ───────────────────────────────────────────────────────────────
   TODO: Farby stĺpcov zmeň cez style="" na .verzia-badge v HTML
   TODO: Zvýraznenú kartu zmeň presunutím class="verzia-popular"
   TODO: Funkcie a ceny zmeň priamo v index.html
═══════════════════════════════════════════════════════════════ */

/* ── Pozadie sekcie ───────────────────────────────────────── */
body.home #verzie.verzie-section { background: #fff; }

/* ── Mriežka kariet ───────────────────────────────────────── */
.verzie-grid {
  display:               grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:                   var(--space-md);
  align-items:           stretch;
  margin-top:            var(--space-lg);
}

/* ── Karta verzie ─────────────────────────────────────────── */
.verzia-card {
  position:      relative;
  background:    #fff;
  border:        1px solid var(--clr-border);
  border-radius: var(--radius-md);
  min-height:    336px;
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
  height:        100%;
  transition:    box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.verzia-card:hover {
  box-shadow: var(--shadow-md);
  transform:  translateY(-4px);
  border-color: var(--clr-primary);
}

/* ── Zvýraznená karta ─────────────────────────────────────── */
/* TODO: Presuň class="verzia-popular" na inú kartu ak chceš zmeniť */
.verzia-popular {
  border-color: var(--clr-primary);
  box-shadow:   0 0 0 2px var(--clr-primary), var(--shadow-md);
  position:     relative;
}
.verzia-popular:hover { transform: translateY(-4px); }

/* ── Hlavička karty ───────────────────────────────────────── */
.verzia-header {
  padding: var(--space-md);
  border-bottom: 1px solid var(--clr-border);
}

/* Odznak (Štart / Business / ...) */
.verzia-badge {
  display:        block;
  width:          max-content;
  max-width:      100%;
  font-size:      0.72rem;
  font-weight:    700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding:        3px 10px;
  border-radius:  999px;
  margin:         0 auto 10px;
}
.verzia-badge--popular {
  background: var(--clr-accent);
  color:      #fff;
}

/* Názov verzie */
.verzia-name {
  font-size:     1.2rem;
  font-weight:   700;
  color:         var(--version-color, var(--clr-dark));
  margin-bottom: 6px;
}
.verzia-popular .verzia-name { color: var(--clr-accent); }

/* Krátky popis */
.verzia-tagline {
  font-size:     0.83rem;
  color:         var(--clr-muted);
  line-height:   1.5;
  margin-bottom: var(--space-sm);
}

/* Cena */
.verzia-price { margin-top: var(--space-sm); }
.verzia-card--no-price .verzia-tagline { margin-bottom: 0; }
.verzia-card--no-price .verzia-header { padding-bottom: var(--space-sm); }
.verzia-amount {
  font-size:   1.35rem;
  font-weight: 700;
  color:       var(--clr-dark);
  display:     block;
}

/* ── Zoznam funkcií ───────────────────────────────────────── */
.verzia-features {
  list-style: none;
  display:    flex;
  flex-direction: column;
  gap:        10px;
  padding:    var(--space-md);
  flex:       1;               /* tlačidlo vždy dole */
}

.verzia-features li {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  font-size:   0.875rem;
  color:       var(--clr-text);
  line-height: 1.4;
}

/* Zaškrtnutie pred položkou */
.verzia-features li::before {
  content:         '✓';
  flex-shrink:     0;
  width:           20px;
  height:          20px;
  border-radius:   50%;
  background:      color-mix(in srgb, var(--version-color, var(--clr-primary)) 22%, transparent);
  color:           var(--version-color, var(--clr-primary));
  font-weight:     700;
  font-size:       0.72rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-top:      1px;
}

/* Nedostupná funkcia */
.verzia-features li.disabled {
  color: var(--clr-muted);
  opacity: 0.45;
}
.verzia-features li.disabled::before {
  content:    '✕';
  background: rgba(100, 116, 139, 0.08);
  color:      var(--clr-muted);
}

/* ── Tlačidlo na spodku karty ─────────────────────────────── */
.verzia-card .btn {
  width: auto;
  margin: var(--space-md);
  display: block;
  text-align: center;
}
.verzia-card--no-features .verzia-header { flex: 1; }
.verzia-card .verzia-poster-trigger {
  background:   color-mix(in srgb, var(--version-action-color, var(--clr-primary)) 16%, #fff);
  border-color: color-mix(in srgb, var(--version-action-color, var(--clr-primary)) 35%, #fff);
  color:        var(--version-action-color, var(--clr-primary));
}
.verzia-card .verzia-poster-trigger:hover,
.verzia-card .verzia-poster-trigger:focus-visible {
  background:   color-mix(in srgb, var(--version-action-color, var(--clr-primary)) 24%, #fff);
  border-color: color-mix(in srgb, var(--version-action-color, var(--clr-primary)) 48%, #fff);
  color:        var(--version-action-color, var(--clr-primary));
}

/* ── Popup plagátu ────────────────────────────────────────── */
body.verzia-modal-open { overflow: hidden; }
.verzia-poster-modal {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(4, 14, 28, 0.82);
}
.verzia-poster-modal[hidden] { display: none; }
.verzia-poster-dialog {
  position: relative;
  width: min(100%, 1040px);
  max-height: calc(100vh - 48px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.verzia-poster-image {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 48px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  background: #fff;
}
.verzia-poster-close {
  position: absolute;
  z-index: 1;
  top: 10px;
  right: 10px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(4, 14, 28, 0.82);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
.verzia-poster-close:hover,
.verzia-poster-close:focus-visible { background: #071a35; }

/* ── Poznámka pod tabuľkou ────────────────────────────────── */
.verzie-note {
  text-align:  center;
  font-size:   var(--versions-note-font-size, 17px);
  color:       var(--clr-muted);
  margin-top:  var(--space-lg);
}
.verzie-note a {
  color:           var(--clr-primary);
  font-weight:     600;
  text-decoration: none;
}
.verzie-note a:hover { text-decoration: underline; }

/* ── Detail accordion ───────────────────────────────────────── */
.verzie-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.verzia-detail {
  background: var(--bg-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height 0.35s ease, opacity 0.3s ease, transform 0.3s ease;
}

.verzia-detail.is-open {
  opacity: 1;
  transform: translateY(0);
}

.verzia-detail-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  padding: var(--space-md);
}

.verzia-detail h3 {
  margin: 0 0 6px;
  font-size: 1.1rem;
}

.verzia-detail h4 {
  margin: 0 0 8px;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clr-muted);
}

.verzia-detail p {
  margin: 0;
  color: var(--clr-text);
  line-height: 1.6;
}

.verzia-detail ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--clr-text);
  font-size: 0.92rem;
}

.verzia-toggle {
  border: none;
}

/* ── Responzívnosť detailov ─────────────────────────────────── */
@media (max-width: 900px) {
  .verzia-detail-inner { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .verzie-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .verzia-popular { transform: none; }
  .verzia-popular:hover { transform: translateY(-4px); }
}
@media (max-width: 600px) {
  .verzie-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .verzia-header,
  .verzia-features { padding: 14px; }
  .verzia-features li { overflow-wrap: anywhere; }
  .verzia-card .btn {
    width: auto;
    margin: 12px;
    padding: 10px 8px;
  }
  .verzia-poster-modal { padding: 12px; }
  .verzia-poster-dialog,
  .verzia-poster-image { max-height: calc(100vh - 24px); }
}