/**
 * File role: what the VOGO eBS infrastructure product pages (/ro/e-apm/, /ro/e-backup/, /ro/e-siem/, /ro/e-api/,
 * /ro/e-desk/) add to the shared e-Registratura frame (/ro/e-reg/e-reg.css, body.ereg-pk): a hero without a picture
 * and the open-source components grid. Colours are the frame's tokens.
 *
 * @file_version 1.0.3
 */

/* The hero: the frame's deep blue, no scene picture (the products have no screens yet). */
body.ebsp-pk .pk-hero {
  background:
    radial-gradient(ellipse at 80% 30%, rgba(4,32,60,.9) 0%, rgba(0,17,32,0) 60%),
    linear-gradient(90deg, rgba(0,17,32,.98) 0%, rgba(4,32,60,.92) 100%),
    var(--pk-abyss);
}
@media (max-width: 760px) {
  body.ebsp-pk .pk-hero {
    background: linear-gradient(180deg, rgba(0,17,32,.96) 0%, rgba(4,32,60,.94) 100%), var(--pk-abyss);
  }
}

/* A hero with a picture (hero_image, 11.10.2026): the picture of /ro/ under the same left-to-right veil as there,
   so the words stay on the dark side. */
body.ebsp-pk .pk-hero.ebsp-hero--image {
  background:
    linear-gradient(90deg, rgba(0,17,32,.92) 0%, rgba(0,17,32,.72) 42%, rgba(0,17,32,.20) 70%, rgba(0,17,32,.10) 100%),
    var(--ebsp-hero-img) center / cover no-repeat,
    var(--pk-abyss);
}
@media (max-width: 760px) {
  body.ebsp-pk .pk-hero.ebsp-hero--image {
    background:
      linear-gradient(180deg, rgba(0,17,32,.90) 0%, rgba(0,17,32,.94) 100%),
      var(--ebsp-hero-img) center / cover no-repeat,
      var(--pk-abyss);
  }
}

/* The components: short boxes, as many per row as fit (same look as /ro/e-gis/). */
body.ebsp-pk .ebsp-stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 18px 0 26px;
}
body.ebsp-pk .ebsp-stack__item {
  background: #fff;
  border: 1px solid rgba(17,48,85,.12);
  border-top: 3px solid var(--pk-ember);
  border-radius: 10px;
  padding: 14px 16px;
}
body.ebsp-pk .ebsp-stack__item h4 { margin: 0 0 6px; font-size: 16px; }
body.ebsp-pk .ebsp-stack__item p { margin: 0; font-size: 14px; line-height: 1.5; }
/* A component card that leads to the product page: the whole card is the link. */
body.ebsp-pk a.ebsp-stack__item--link { display: block; color: inherit; text-decoration: none; transition: box-shadow .15s, transform .15s; }
body.ebsp-pk a.ebsp-stack__item--link:hover,
body.ebsp-pk a.ebsp-stack__item--link:focus-visible { box-shadow: 0 6px 18px rgba(17,48,85,.14); transform: translateY(-2px); }
body.ebsp-pk a.ebsp-stack__item--link h4 .bi { font-size: 14px; color: var(--pk-ember); }

/* The single mention of the open-source libraries the product uses, under the product modules. */
body.ebsp-pk .ebsp-libs { margin: -10px 0 22px; font-size: 14px; color: #5a6b80; }