/* ============================================================
   Protectly — page styles: 3.1 NIS2 / Compliance (auto-linked)
   Page-specific only; shared components live in main.css.
   Values come from tokens.css; no raw hex/px.
   ============================================================ */

/* ── Hero (nis2-hero): dark band (surface-dark + eyebrow-dark in
   main.css), text-first, breadcrumb above the H1 ─────────────── */
.nis2-hero { padding-block: var(--space-2xl); }
.nis2-hero__eyebrow { margin-bottom: var(--space-md); } /* pill look: .eyebrow-dark */
.nis2-hero__headline { margin-bottom: var(--space-sm); }
.nis2-hero__sub { font-size: var(--text-lg); color: var(--ink-inverse-muted); margin-bottom: var(--space-lg); }
.nis2-hero__cta-group { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* Hero: text left, self-ticking checklist right on wide screens (base: components/hero-visual.css) */
.nis2-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
.nis2-hero__visual .hva__card { gap: var(--space-md); }
.hva-tick {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: var(--space-lg); height: var(--space-lg);
    background: var(--blue-700); color: #fff; border-radius: var(--radius-full);
}
@media (min-width: 1024px) {
    .nis2-hero__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-2xl); }
}

/* Breadcrumb on the dark hero: quiet inverse ink (main.css colors
   target light surfaces and would fail AA here) */
.nis2-hero .breadcrumb { color: var(--ink-inverse-muted); }
.nis2-hero .breadcrumb__trail a { color: var(--ink-inverse-muted); }
.nis2-hero .breadcrumb__trail a:hover { color: var(--surface-0); }
.nis2-hero .breadcrumb__trail [aria-current="page"] { color: var(--ink-inverse); }
.nis2-hero .breadcrumb__sep { color: var(--ink-inverse-muted); opacity: .6; }

@media (min-width: 1024px) {
    .nis2-hero { padding-block: var(--space-3xl); }
}

/* ── Compliance matrix section: white so the zebra rows read ── */
.nis2-matrix-section { background: var(--surface-0); }

/* ── Data sovereignty band (nis2-data) ──────────────────────── */
.nis2-data { background: var(--blue-100); text-align: center; }
.nis2-data h2 { margin-bottom: var(--space-md); }
.nis2-data p { color: var(--ink-600); } /* AA on blue-100, same pair as home-nis2 */
.nis2-data__text { max-width: 40rem; margin-inline: auto; }
.nis2-data .nis2-figure { margin: var(--space-xl) 0 0; }
/* Text left, EU map right on wide screens (only when the illustration exists). */
@media (min-width: 1024px) {
    .nis2-data__grid:has(.nis2-figure) { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-2xl); align-items: center; text-align: left; }
    .nis2-data__grid:has(.nis2-figure) .nis2-data__text { margin-inline: 0; }
    .nis2-data .nis2-figure { margin: 0; }
}

/* ── Betriebsrat / anonymization (deep-linked from 2.3) ─────── */
.nis2-br { background: var(--surface-0); }
#anonymisierung-betriebsrat { scroll-margin-top: var(--space-2xl); }

/* ── Evidence pack lead (pulls up under the centered heading) ─ */
.nis2-downloads__lead {
    text-align: center; color: var(--ink-600);
    max-width: var(--container-narrow);
    margin: calc(-1 * var(--space-md)) auto var(--space-xl);
}

/* Download cards: equal heights with the CTA pinned to the bottom,
   so the three buttons align across the row */
#nis2-downloads .download-card__body { display: flex; flex-direction: column; flex: 1; align-self: stretch; }
#nis2-downloads .download-card__cta { margin-top: auto; align-self: flex-start; }
#nis2-downloads .download-card__desc { margin-bottom: var(--space-md); }

/* ── CTA band (blue variant = dark, see main.css): tertiary link ── */
.nis2-cta__tertiary { margin-top: var(--space-md); }
.nis2-cta__tertiary a { color: var(--ink-inverse); text-decoration: underline; text-underline-offset: .15em; }
.nis2-cta__tertiary a:hover { color: var(--surface-0); }

/* ── Hero source line ───────────────────────────────────────── */
.nis2-hero__source { font-size: var(--text-sm); color: var(--ink-inverse-muted); margin-bottom: var(--space-lg); }
.nis2-hero__source a { color: var(--ink-inverse-muted); text-decoration: underline; text-underline-offset: .15em; }
.nis2-hero__source a:hover { color: var(--surface-0); }

/* ── Shared lead under a centered section heading ───────────── */
.nis2-section__lead {
    text-align: center; color: var(--ink-600);
    max-width: var(--container-narrow);
    margin: calc(-1 * var(--space-md)) auto var(--space-xl);
}

/* ── What the law requires ──────────────────────────────────── */
.nis2-law { background: var(--surface-50); }
.nis2-law__cards { display: grid; gap: var(--space-md); margin-bottom: var(--space-lg); }
.nis2-law__card {
    background: var(--surface-0);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);
}
/* Country flags (decorative SVG next to the heading): uniform height, 1px border so white stripes show */
.nis2-law__title { display: flex; align-items: center; gap: var(--space-sm); }
.nis2-flag {
    flex: none; height: 20px; width: auto;
    border-radius: 3px; border: 1px solid var(--line-200);
    box-sizing: content-box; object-fit: contain;
}
.nis2-law__card h3 { margin-bottom: var(--space-xs); }
.nis2-law__card p { color: var(--ink-600); }
.nis2-law__card { display: flex; flex-direction: column; }
.nis2-law__act { font-size: var(--text-sm); margin-bottom: var(--space-md); }
.nis2-law__duties { margin: 0 0 var(--space-md); }
.nis2-law__duties dt { font-weight: 600; color: var(--ink-900); }
.nis2-law__duties dd { margin: 0 0 var(--space-sm); color: var(--ink-600); }
.nis2-law__card .nis2-law__link { margin-top: auto; }
.nis2-law__link { font-size: var(--text-sm); }
.nis2-law__link a { color: var(--blue-700); font-weight: 600; }
.nis2-law__ch {
    border-left: 4px solid var(--blue-700);
    background: var(--surface-0);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}
.nis2-law__ch h3 { margin-bottom: var(--space-xs); }
.nis2-law__ch p { color: var(--ink-600); margin-bottom: var(--space-sm); }
.nis2-law__ch p:last-child { margin-bottom: 0; }
/* EU directive, national laws: neutral intro box before the country cards */
.nis2-law__eu {
    background: var(--surface-0);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}
.nis2-law__eu h3 { margin-bottom: var(--space-xs); }
.nis2-law__eu p { color: var(--ink-600); margin-bottom: var(--space-sm); }
.nis2-law__eu p:last-child { margin-bottom: 0; }
/* The locale's own market (sv, es, hu): full width above Austria and Germany */
.nis2-law__card--local { border-top: 4px solid var(--blue-700); margin-bottom: var(--space-md); }
.nis2-law__card--local .nis2-law__link { margin-top: 0; margin-bottom: var(--space-xs); }
.nis2-law__card--local .nis2-law__link:last-child { margin-bottom: 0; }
.nis2-law__note { font-size: var(--text-sm); color: var(--ink-600); }
.nis2-law__note a { color: var(--blue-700); font-weight: 600; }
@media (min-width: 768px) {
    .nis2-law__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Duty / implementation / proof ──────────────────────────── */
.nis2-map-section { background: var(--surface-0); }
.nis2-map__courses { margin-top: var(--space-lg); color: var(--ink-600); }
.nis2-map__courses a { color: var(--blue-700); font-weight: 600; }

/* ── Check lists (measures, documents) ──────────────────────── */
.nis2-checklist { list-style: none; padding: 0; display: grid; gap: var(--space-sm); }
.nis2-checklist li { display: flex; align-items: baseline; gap: var(--space-xs); }
.nis2-tom { background: var(--surface-0); }

/* ── Icon tiles (measures, works council): reuse pillar-grid and pillar-card ── */
.nis2-tile { box-shadow: none; }
.nis2-tile:hover { box-shadow: var(--shadow-sm); transform: none; }
.nis2-tile .pillar-card__teaser { margin-bottom: 0; }
.nis2-tile__icon { width: var(--icon-circle); height: var(--icon-circle); border-radius: var(--radius-full); }
.nis2-tile__icon .icon { width: var(--icon-glyph); height: var(--icon-glyph); }
@media (min-width: 768px) { .nis2-br .nis2-tiles { grid-template-columns: repeat(3, 1fr); } }

/* Optional illustration, rendered only when the file exists */
.nis2-figure { margin: 0 0 var(--space-xl); }
.nis2-figure__img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }

/* ── Documents on request ───────────────────────────────────── */
.nis2-docs { background: var(--surface-50); }
.nis2-docs .nis2-section__lead { margin-bottom: var(--space-lg); text-align: left; margin-inline: 0; }
.nis2-docs__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.nis2-docs__alt { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--ink-600); }

/* ── Who is behind Protectly ────────────────────────────────── */
.nis2-who { background: var(--surface-0); }
.nis2-who__grid { display: grid; gap: var(--space-xl); }
.nis2-who__about h2 { margin-bottom: var(--space-sm); }
.nis2-who__about p { color: var(--ink-600); }
.nis2-who__links { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-md); }
.nis2-who__links a, .nis2-who__case a { color: var(--blue-700); font-weight: 600; }
.nis2-who__label { font-size: var(--text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-600); }
.nis2-who__case-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--space-xs); }
.nis2-who__label--logos { margin-top: var(--space-xl); }
.nis2-who__logos {
    list-style: none; padding: 0; margin-top: var(--space-sm);
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg);
}
.nis2-who__logos img { height: 32px; width: auto; max-width: 140px; object-fit: contain; }
@media (min-width: 768px) {
    .nis2-who__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); }
}

/* Section illustrations (TOM, works council): framed, not full container width. */
.nis2-figure--tom,
.nis2-figure--br { max-width: 760px; margin-inline: auto; }