/* subpage.css — aloldal-sablon (G): hero két oszloppal + morzsamenü, olvasható
   szövegoszlop, számozott típus-rács. Ezeket az osztályokat a többi aloldal is
   újrahasználja: .page-hero .page-hero__inner .page-hero__media .breadcrumb
   .prose .type-grid. A háttérszínt (.bg-hero, .bg-card …) mindig a markup adja. */

.page-hero {
  position: relative;
  z-index: 0;
  overflow: hidden;
  /* Ugyanaz a trükk, mint a far360 lapfej.css-ében: a hero magára húzza a
     lebegő menüsort, ezért a menü magassága alatt kezdődik a tartalom. */
  margin-top: -80px;
  padding-top: clamp(120px, 12vw, 160px);
  padding-bottom: clamp(56px, 7vw, 96px);
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.page-hero__text {
  flex: 1 1 480px;
  min-width: 0;
  max-width: 720px;
}

.page-hero__text .label {
  margin-bottom: 18px;
}

.page-hero__text h1 {
  margin-bottom: 20px;
  font-size: clamp(2.25rem, 4.6vw, 4.25rem);
  hyphens: auto;
  overflow-wrap: break-word;
}

.page-hero__lead {
  margin-bottom: 28px;
}

.page-hero__text .chips {
  margin-top: 24px;
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Sötét „monitor”-keret a megrendelői illusztrációknak a világos lapon. */
.page-hero__media {
  flex: 1 1 360px;
  max-width: 480px;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-card);
  background: #091a34;
  overflow: hidden;
}

.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Kenyérmorzsa: DM Mono, a lap tetején. */
.breadcrumb {
  margin-bottom: 24px;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--f-ink-soft);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumb li + li::before {
  content: "\203A";
  opacity: 0.6;
}

.breadcrumb a {
  display: inline-block;
  padding-block: 6px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.breadcrumb a:hover {
  color: var(--f-primary-ink-hover);
}

.breadcrumb [aria-current="page"] {
  color: var(--f-ink);
}

/* Olvasható szövegoszlop a prózai szekciókhoz. */
.prose {
  max-width: 68ch;
  display: grid;
  gap: 18px;
  font-size: var(--t-lead);
  line-height: 1.65;
  color: var(--f-ink-soft);
}

.prose strong {
  color: var(--f-ink);
}

/* Számozott típus-/eredményrács (pentesttípusok, kapott dokumentumok stb.). */
.type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: var(--gap);
}

.type-grid__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.type-grid__item .num {
  opacity: 0.75;
}

@media (max-width: 900px) {
  .page-hero {
    margin-top: 0;
    padding-top: clamp(40px, 7vw, 72px);
  }

  .page-hero__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .page-hero__text {
    max-width: none;
    order: 1;
  }

  .page-hero__media {
    max-width: none;
    order: 2;
  }
}

@media (max-width: 560px) {
  .page-hero__media {
    aspect-ratio: 4 / 3;
  }
}