/* ============================================================
   Page 2.1 Phishing-Simulation - page-specific styles only.
   Shared components (feature-row, stat-tile, cta-band, buttons)
   live in main.css. Tokens only; raw px only where documented.
   ============================================================ */

/* ── Hero (centered copy, no media per spec) - dark band via
      .surface-dark + .eyebrow-dark (recipes in main.css) ─────── */
.phish-hero { padding-block: var(--space-2xl); text-align: center; }
.phish-hero__eyebrow { margin-bottom: var(--space-md); }
.phish-hero__headline { margin-bottom: var(--space-sm); }
.phish-hero__sub { font-size: var(--text-lg); color: var(--ink-inverse-muted); margin-bottom: var(--space-lg); }
.phish-hero__cta-group { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); }

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

/* Hero: centered text with the visual below on small screens, two columns on wide screens (base: components/hero-visual.css) */
.phish-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
.phish-hero__visual { margin-top: var(--space-sm); }
.pmail { display: grid; gap: var(--space-2xs); padding: var(--space-sm); background: var(--surface-50); border: 1px solid var(--line-200); border-radius: var(--radius-md); font-size: var(--text-sm); }
.pmail__from { color: var(--ink-600); overflow-wrap: anywhere; }
.pmail__name { font-weight: 600; }
.pmail__addr { white-space: nowrap; }
.pmail__subject { font-weight: 600; color: var(--ink-900); }
.pmail__mark {
    padding: 1px var(--space-2xs); color: var(--ink-900); border-radius: var(--radius-sm);
    background: linear-gradient(#FFE9A8, #FFE9A8) no-repeat left center / 100% 100%; /* same marker as the home NIS2 band */
    box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.pmail__report {
    justify-self: end;
    display: inline-flex; align-items: center; gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-md);
    background: var(--blue-700); color: #fff; border-radius: var(--radius-full);
    font-size: var(--text-sm); font-weight: 600;
}
.phish-hero__ok { background: var(--accent-500); border-color: var(--accent-300); }
@media (min-width: 1024px) {
    .phish-hero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-2xl); }
    .phish-hero { text-align: left; }
    .phish-hero__cta-group { justify-content: flex-start; }
}

/* ── How it works: shared steps component (main.css) ───────── */
.phish-how { background: var(--surface-0); }

/* ── Stat tiles: "Beispiel-Daten" badge + 4→2→1 per spec ───── */
.phish-stats { background: var(--surface-0); }
.phish-stats .section__heading { margin-bottom: var(--space-sm); }
.phish-stats__note { text-align: center; margin-bottom: var(--space-xl); }
/* sample-data pill: same recipe as 2.3's .report-sample (uniform pills) */
.phish-stats__badge {
    display: inline-block;
    background: var(--surface-50);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-full);
    padding: var(--space-3xs) var(--space-sm);
    font-size: var(--text-xs); font-weight: 600;
    color: var(--ink-600);
}
/* spec responsive: stat tiles 4→2→1 (main.css default is 2→3→4) */
.phish-stats .stat-tiles { grid-template-columns: 1fr; }
@media (min-width: 640px) {
    .phish-stats .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .phish-stats .stat-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Melde-Button: Outlook-Add-in-Panel (Hochformat, schlank) ─ */
.phish-panel {
    display: block;
    width: 100%; max-width: 360px; /* raw px: slim add-in panel width */
    height: auto;
    margin-inline: auto;
    border: 1px solid var(--line-200);
    border-radius: var(--radius-lg);
    background: var(--surface-0);
    box-shadow: 0 12px 32px rgba(15, 30, 60, .12);
}

/* ── Voice-phishing (managed offer, copy-only: no media slot) ─ */
.phish-voice { background: var(--surface-0); }
.phish-voice__eyebrow { color: var(--blue-700); font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-xs); }
.phish-voice__headline { margin-bottom: var(--space-md); }
.phish-voice__body { color: var(--ink-600); margin-bottom: var(--space-sm); }
.phish-voice__list {
    list-style: none; padding: 0;
    margin-block: var(--space-lg);
    display: grid; gap: var(--space-sm);
}
.phish-voice__list li { display: flex; align-items: baseline; gap: var(--space-sm); }
.phish-voice__check { color: var(--accent-500); font-weight: 700; }
.phish-voice__note { color: var(--ink-600); }
.phish-voice__cta {
    margin-top: var(--space-lg);
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--space-sm) var(--space-md);
}
.phish-voice__cta-lead { font-weight: 600; margin: 0; }
.phish-voice__workshop {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--line-200);
    color: var(--ink-600);
}
.phish-voice__workshop a { color: var(--blue-700); font-weight: 600; }

.phish-voice__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
.phish-voice__visual { display: flex; justify-content: center; }
@media (min-width: 1024px) {
    .phish-voice__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-2xl); }
}

/* Decorative incoming-call mock (aria-hidden in markup). Dark screen on
   blue-900, same on-dark tokens as the other mock UIs. */
.voice-phone { position: relative; width: 100%; max-width: 280px; }
.voice-phone__screen {
    display: flex; flex-direction: column; align-items: center;
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    background: var(--blue-900); color: var(--ink-inverse);
    border: 6px solid var(--navy-950); border-radius: 36px; /* raw px: device bezel */
    box-shadow: var(--shadow-lg);
    text-align: center;
}
.voice-phone__label { margin: 0 0 var(--space-md); font-size: var(--text-xs); color: var(--ink-inverse-muted); }
.voice-phone__avatar {
    display: grid; place-items: center;
    width: 72px; height: 72px; /* raw px: avatar disc */
    border-radius: var(--radius-full);
    background: var(--blue-700); color: var(--ink-inverse);
}
.voice-phone__caller { margin: var(--space-md) 0 var(--space-3xs); font-size: var(--text-xl); font-weight: 600; color: var(--ink-inverse); }
.voice-phone__ext { margin: 0 0 var(--space-lg); font-size: var(--text-sm); color: var(--ink-inverse-muted); }
.voice-phone__wave { display: block; fill: var(--cyan-300); margin-bottom: var(--space-xl); max-width: 100%; height: auto; }
.voice-phone__wave rect { transform-box: fill-box; transform-origin: center; animation: voice-wave 1.2s ease-in-out infinite; }
.voice-phone__wave rect:nth-child(3n) { animation-delay: -.4s; }
.voice-phone__wave rect:nth-child(3n+1) { animation-delay: -.8s; }
.voice-phone__wave rect:nth-child(2n) { animation-duration: 1.5s; }
@keyframes voice-wave {
    0%, 100% { transform: scaleY(.35); }
    50% { transform: scaleY(1); }
}
.voice-phone__actions { display: flex; justify-content: center; gap: var(--space-xl); }
.voice-phone__btn {
    display: grid; place-items: center;
    width: 52px; height: 52px; /* raw px: round call buttons */
    border-radius: var(--radius-full); color: #fff;
}
.voice-phone__btn--decline { background: var(--error); }
.voice-phone__btn--accept { background: var(--accent-500); }
.voice-phone__chip {
    position: absolute; top: calc(-1 * var(--space-sm)); right: calc(-1 * var(--space-md));
    padding: var(--space-2xs) var(--space-sm);
    background: #FBE9EA; color: var(--error); /* 4.8:1 on this tint */
    border: 1px solid var(--error); border-radius: var(--radius-full);
    font-size: var(--text-xs); font-weight: 600; white-space: nowrap;
    box-shadow: var(--shadow-md);
}
@media (max-width: 400px) {
    .voice-phone__chip { right: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .voice-phone__wave rect { animation: none; }
}
/* ── Reassurance teaser (blue band, resolves on 2.3) ───────── */
.phish-reassure { background: var(--blue-100); padding-block: var(--space-2xl); text-align: center; }
.phish-reassure__text { font-size: var(--text-lg); color: var(--ink-600); }
.phish-reassure__text a { color: var(--blue-700); font-weight: 600; } /* blue-500 is only 4.15:1 on blue-100 */
.phish-reassure__next { margin-top: var(--space-lg); }