/* =====================================================================
   ŠTÝLY: bloky "Návrhy" a "Mega projekty"  (Ladislav Šepeľa / technokrati)
   Pridaj do hlavného .scss/.css témy, alebo enqueue ako samostatný súbor.
   Všetko je scope-nuté pod .blok-navrhy / .blok-mega, takže to neovplyvní
   zvyšok webu. Farby = navy #0e1d61, oranžová #fc5000 (Bootstrap primary/secondary).
====================================================================== */

/* ---------- spoločné premenné ---------- */
.blok-navrhy,
.blok-mega {
  --na-navy: #0e1d61;
  --na-orange: #fc5000;
  --na-orange-dark: #d94400;
  --na-ink: #1c2233;
  --na-muted: #5b6478;
  --na-line: #e6e8f0;
  --na-green: #1f9d57;
  --na-green-bg: #eaf7f0;
  --na-green-ink: #14663a;
  --na-red: #c0392b;
  --na-red-bg: #fdeeec;
  --na-red-ink: #8e2c20;
  --na-radius: 18px;
  --na-shadow: 0 1px 2px rgba(14,29,97,.04), 0 8px 30px rgba(14,29,97,.07);
  --na-shadow-h: 0 4px 10px rgba(14,29,97,.08), 0 18px 50px rgba(14,29,97,.12);
}

/* =====================================================================
   1) BLOK NÁVRHY  (3 v rade -> 2 -> 1)
====================================================================== */
.blok-navrhy .navrh-karta {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--na-line);
  border-radius: var(--na-radius);
  box-shadow: var(--na-shadow);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.blok-navrhy .navrh-karta:hover {
  transform: translateY(-4px);
  box-shadow: var(--na-shadow-h);
}

/* fotka */
.blok-navrhy .navrh-foto {
  background: #f6f7fb;
  border-bottom: 1px solid var(--na-line);
}
.blok-navrhy .navrh-foto-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blok-navrhy .navrh-foto-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--na-navy);
  font-size: .85rem;
  font-weight: 600;
  opacity: .55;
  background-image: repeating-linear-gradient(45deg,#eef0f8 0 14px,#f6f7fb 14px 28px);
}

/* telo karty */
.blok-navrhy .navrh-telo {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px 22px 24px;
}
.blok-navrhy .navrh-stitok {
  align-self: flex-start;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--na-orange);
  margin-bottom: 10px;
}
.blok-navrhy .navrh-nadpis {
  font-size: 1.18rem;
  line-height: 1.25;
  font-weight: 800;
  color: var(--na-navy);
  margin: 0 0 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}
.blok-navrhy .navrh-popis {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--na-muted);
  margin: 0 0 18px;
  text-align: justify !important;
  text-justify: inter-word !important;
}

/* plusy / čo treba */
.blok-navrhy .navrh-pc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: auto; /* pritlačí k spodku, karty sú zarovnané */
}
.blok-navrhy .navrh-pc h4 {
  font-size: .7rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 800;
  margin: 0 0 8px;
}
.blok-navrhy .navrh-plusy h4 { color: var(--na-green); }
.blok-navrhy .navrh-treba h4 { color: var(--na-red); }
.blok-navrhy .navrh-pc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.blok-navrhy .navrh-pc li {
  font-size: .84rem;
  line-height: 1.4;
  padding: 7px 10px;
  border-radius: 9px;
  font-weight: 500;
}
.blok-navrhy .navrh-plusy li { background: var(--na-green-bg); color: var(--na-green-ink); }
.blok-navrhy .navrh-treba li { background: var(--na-red-bg);   color: var(--na-red-ink); }

@media (max-width: 420px) {
  .blok-navrhy .navrh-pc { grid-template-columns: 1fr; }
}

/* =====================================================================
   2) BLOK MEGA PROJEKTY  (2 v rade -> 1)
====================================================================== */
.blok-mega {
  background: radial-gradient(120% 140% at 0% 0%, #14206b 0%, #0e1d61 55%, #0a1545 100%);
  color: #fff;
}

/* predel / nadpis sekcie */
.blok-mega .mega-predel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 26px;
  margin-bottom: 30px;
  border-bottom: 2px solid rgba(255,255,255,.16);
}
.blok-mega .mega-predel-hviezda {
  display: inline-grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--na-orange);
  color: #fff;
  font-size: 1.2rem;
}
.blok-mega .mega-predel-nadpis {
  margin: 6px 0 0;
  font-size: clamp(1.4rem,3vw,2rem);
  font-weight: 800;
  color: #fff;
}
.blok-mega .mega-predel-popis {
  margin: 0;
  max-width: 720px;
  color: rgba(255,255,255,.72);
}

/* karta */
.blok-mega .mega-karta {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--na-radius);
  overflow: hidden;
  transition: border-color .22s ease, background .22s ease;
}
.blok-mega .mega-karta:hover {
  border-color: var(--na-orange);
  background: rgba(255,255,255,.07);
}
.blok-mega .mega-foto { background: rgba(255,255,255,.06); }
.blok-mega .mega-foto-img { width: 100%; height: 100%; object-fit: cover; }

.blok-mega .mega-telo { padding: 30px 28px; display: flex; flex-direction: column; flex: 1 1 auto; }

.blok-mega .mega-stitok {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #ffd2bd;
  background: rgba(252,80,0,.18);
  border: 1px solid rgba(252,80,0,.4);
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.blok-mega .mega-nadpis {
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 800;
  color: #fff;
  margin: 0 0 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}
.blok-mega .mega-popis {
  font-size: .96rem;
  line-height: 1.65;
  color: rgba(255,255,255,.8);
  margin: 0 0 18px;
}
.blok-mega .mega-preco {
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 16px;
}
.blok-mega .mega-preco-label {
  display: block;
  font-size: .7rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--na-orange);
  margin-bottom: 8px;
}
.blok-mega .mega-preco p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.6;
  color: rgba(255,255,255,.74);
}