/* Flyer: Infrastruktur-Pentest. Page-specific styles on top of flyer-common.css.

   Core visual is a zone map: four bands stepping inward from the internet to
   the servers, each carrying its own check points, plus a fifth band for cloud
   and hybrid set off with a dashed edge, because that zone sits beside the
   on-prem stack rather than deeper inside it. A rail on the left marks the
   direction of travel.

   Second accent: teal. It marks the cloud zone, the pentest column of the
   comparison and the egress box, nowhere else. Class prefix if- = infra flyer.

   Type scale (deliberate floor, the sheet is printed and read at arm's
   length): body copy 0.72rem at line-height 1.45, labels and chips never
   below 0.66rem. If something does not fit, a check point comes off the
   sheet - nothing here shrinks. */

.flyer-page {
  --if-a2: #2fc0ae;
  --if-a2-soft: rgba(47, 192, 174, 0.13);
  --if-a2-border: rgba(47, 192, 174, 0.42);
}

@media print {
  .flyer-page {
    --if-a2: #0c7a6d;
    --if-a2-soft: #e2f5f2;
    --if-a2-border: #a9ddd6;
  }
}

.flyer-logo { margin-bottom: 14px; }
.flyer-h1 { font-size: clamp(1.55rem, 2.9vw, 2rem); margin-bottom: .4rem; }
.flyer-subline { font-size: .88rem; line-height: 1.5; margin-bottom: .7rem; max-width: 46em; }

.flyer-trust-markers {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  margin: 0; padding: 0; list-style: none;
}
.flyer-trust-markers li { display: flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; color: var(--fp-muted); }
.flyer-trust-markers svg { flex-shrink: 0; width: 14px; height: 14px; color: var(--fp-accent); }

.flyer-section { margin-bottom: .95rem; }
.flyer-section .flyer-h2 { margin-bottom: .55rem; }

/* ---- Core visual: zone map ---- */
.if-zones-section { padding-top: .85rem; margin-top: .3rem; border-top: 1px solid var(--fp-border); }

.if-zonemap { display: grid; grid-template-columns: 24px 1fr; gap: 12px; }

.if-rail { position: relative; display: flex; align-items: center; justify-content: center; }
.if-rail-line {
  position: absolute; top: 4px; bottom: 4px; left: 50%;
  width: 2px; margin-left: -1px;
  background: linear-gradient(to bottom, var(--fp-accent-border), var(--if-a2-border));
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.if-rail-label {
  position: relative;
  writing-mode: vertical-rl;
  font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fp-muted-2);
  background: var(--fp-bg);
  padding: 8px 0;
}

.if-zones { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }

.if-zone {
  display: grid; grid-template-columns: 12.5em 1fr; gap: 12px; align-items: center;
  border: 1px solid var(--fp-border);
  border-left: 3px solid var(--fp-accent-border);
  border-radius: 7px;
  padding: .7rem .8rem;
  background: var(--fp-surface);
  break-inside: avoid;
}

/* Stepped inset: each band sits a little further inside than the one above. */
.if-zone--2 { margin-left: 16px; }
.if-zone--3 { margin-left: 32px; }
.if-zone--4 { margin-left: 48px; border-left-color: var(--fp-accent); }
.if-zone--cloud {
  margin-left: 16px; margin-top: 6px;
  border-top: 1px dashed var(--if-a2-border);
  border-right: 1px dashed var(--if-a2-border);
  border-bottom: 1px dashed var(--if-a2-border);
  border-left: 3px solid var(--if-a2);
  background: var(--if-a2-soft);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.if-zone-head { display: flex; gap: 8px; align-items: baseline; }
.if-zone-num { font-size: .68rem; font-weight: 800; color: var(--fp-accent); flex-shrink: 0; }
.if-zone--cloud .if-zone-num { color: var(--if-a2); }
.if-zone h3 { font-size: .82rem; font-weight: 700; color: var(--fp-text); margin: 0; line-height: 1.25; }
.if-zone-role { display: block; font-size: .7rem; color: var(--fp-muted-2); line-height: 1.4; }

.if-points { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.if-points li {
  font-size: .7rem; font-weight: 600; color: var(--fp-text);
  border: 1px solid var(--fp-accent-border); border-radius: 20px;
  padding: 2px 10px; line-height: 1.45;
}
.if-zone--cloud .if-points li { border-color: var(--if-a2-border); }

.if-zones-note { font-size: .74rem; color: var(--fp-muted); line-height: 1.5; margin: 10px 0 0; }

/* ---- Comparison + report ---- */
.if-two-col { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; align-items: start; }
.if-two-col .flyer-section { margin-bottom: 0; }

.if-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--fp-border); border-radius: 8px; overflow: hidden; }
.if-cmp-head {
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 10px;
}
.if-cmp-head--a { color: var(--fp-muted-2); background: var(--fp-surface); }
.if-cmp-head--b { color: var(--if-a2); background: var(--if-a2-soft); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.if-cmp-a, .if-cmp-b { font-size: .72rem; line-height: 1.45; padding: 7px 10px; border-top: 1px solid var(--fp-border); }
.if-cmp-a { color: var(--fp-muted); }
.if-cmp-b { color: var(--fp-text); font-weight: 600; background: var(--if-a2-soft); -webkit-print-color-adjust: exact; print-color-adjust: exact; }

.if-report { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; }
.if-report li { display: flex; gap: 9px; align-items: flex-start; }
.if-report svg { flex-shrink: 0; width: 15px; height: 15px; margin-top: 2px; color: var(--fp-accent); }
.if-report p { font-size: .74rem; color: var(--fp-text); line-height: 1.45; margin: 0; }

.if-ops-note {
  font-size: .72rem; color: var(--fp-muted); line-height: 1.45;
  margin: 10px 0 0; padding: .7rem .8rem;
  background: var(--fp-surface); border: 1px solid var(--fp-border); border-radius: 7px;
}
.if-scope-note { font-size: .72rem; color: var(--fp-muted-2); line-height: 1.45; margin: 9px 0 0; }

/* ---- Extended-only blocks ---- */
.if-extra-grid { grid-template-columns: 1fr 1fr; gap: 1rem 1.4rem; margin-bottom: .95rem; align-items: start; }
.flyer-page[data-version="extended"] .if-extra-grid { display: grid; }
.if-extra-grid .flyer-section { margin-bottom: 0; }

.if-boxed { background: var(--fp-surface); border: 1px solid var(--fp-border); border-radius: 8px; padding: .8rem .9rem; }
.if-boxed--accent2 { background: var(--if-a2-soft); border-color: var(--if-a2-border); }
.if-boxed--accent2 .flyer-h2 { color: var(--if-a2); }
.if-prose { font-size: .76rem; color: var(--fp-muted); line-height: 1.55; margin: 0; }

.if-threats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 20px; }
.if-threat { break-inside: avoid; border-top: 2px solid var(--fp-accent-border); padding-top: 7px; }
.if-threat h3 { font-size: .82rem; font-weight: 700; color: var(--fp-text); margin: 0 0 3px; line-height: 1.25; }
.if-threat p { font-size: .74rem; color: var(--fp-muted); line-height: 1.45; margin: 0; }

.if-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.if-faq-item { break-inside: avoid; }
.if-faq-item h3 { font-size: .82rem; font-weight: 700; color: var(--fp-text); margin: 0 0 4px; line-height: 1.3; }
.if-faq-item p { font-size: .76rem; color: var(--fp-muted); line-height: 1.5; margin: 0; }

/* ---- CTA ---- */
.if-cta { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.3rem; align-items: center; padding: .8rem 1.1rem; margin-top: .3rem; }
.if-cta h2 { font-size: .95rem; margin-bottom: .3rem; }
.if-cta p { font-size: .76rem; line-height: 1.45; margin-bottom: .6rem; }
.if-cta-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.if-cta .flyer-cta-link { margin-bottom: 0; }
.flyer-cta-button {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--fp-accent); color: var(--fp-on-accent) !important;
  border-radius: 6px; padding: 9px 18px; font-size: .82rem; font-weight: 700;
  text-decoration: none !important;
}
.if-cta .flyer-cta-contact { border-top: none; border-left: 1px solid var(--fp-accent-border); padding: 2px 0 2px 1.2rem; gap: 6px; font-size: .74rem; }
.if-url-label { color: var(--fp-muted); }

.flyer-footer-legal { margin-top: .8rem; padding-top: .5rem; }

@media screen and (max-width: 860px) {
  .if-zone { grid-template-columns: 1fr; gap: 6px; }
  .if-two-col { grid-template-columns: 1fr; }
}

@media screen and (max-width: 700px) {
  .if-zone--2, .if-zone--3, .if-zone--4, .if-zone--cloud { margin-left: 0; }
  .if-zonemap { grid-template-columns: 1fr; }
  .if-rail { display: none; }
  .if-cmp, .if-faq, .if-cta, .if-threats { grid-template-columns: 1fr; }
  .if-cmp-head--a { display: none; }
  .flyer-page[data-version="extended"] .if-extra-grid { grid-template-columns: 1fr; }
  .if-cta .flyer-cta-contact { border-left: none; border-top: 1px solid var(--fp-accent-border); padding: .7rem 0 0; }
}