/* ============================================================
   WIDOCZNOSC.CSS — /widocznosc page-specific styles
   aventium.ai static rebuild

   Sekcje:
     1. VisHero
     2. BigNumbers
     3. WhyNow
     4. Explainer
     5. AuditAreas
     6. Platforms
     7. AuditProcess
     8. VisFaq
     9. VisFinalCTA (overrides only — .cta__* z components.css)

   Depends on: tokens.css, base.css, components.css
   ============================================================ */


/* ============================================================
   1. VIS HERO
   ============================================================ */

.vis-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 128px;               /* pt-32: wyrównanie do stałego headera */
  padding-bottom: var(--section-py-sm);
}

@media (min-width: 768px) {
  .vis-hero { padding-bottom: var(--section-py-md); }
}

@media (min-width: 1024px) {
  .vis-hero { padding-bottom: var(--section-py); }
}


/* ----------------------------------------------------------
   VisHero — tło: hex pattern (subtelny, opacity 0.03)
   UWAGA: celowo inny niż auto-hero (0.35) — decyzja designerska
   ---------------------------------------------------------- */

.vis-hero__hex-bg {
  position: absolute;
  inset: 0;
  background-image: url("/assets/images/backgrounds/hexagon-pattern.webp");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}


/* ----------------------------------------------------------
   VisHero — gradient mesh (jeden div z dwoma radial-gradient)
   UWAGA: jeden div zamiast dwóch osobnych divów jak w auto-hero
   ---------------------------------------------------------- */

.vis-hero__mesh {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(6, 182, 212, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(99, 102, 241, 0.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}


/* ----------------------------------------------------------
   VisHero — wewnętrzny wrapper treści
   ---------------------------------------------------------- */

.vis-hero__inner {
  max-width: var(--content-max);    /* 1024px */
  margin-inline: auto;
  padding-inline: var(--space-6);   /* 24px */
  text-align: center;
  position: relative;
  z-index: 10;
  width: 100%;
}


/* ----------------------------------------------------------
   VisHero — breadcrumb: plain <p> z <a>
   ---------------------------------------------------------- */

.vis-hero__breadcrumb {
  font-size: var(--text-sm);        /* 14px */
  color: var(--muted-foreground);
  margin-bottom: var(--space-12);   /* 48px — zwiększone z 32px dla lepszego oddzielenia od H1 */
  max-width: none;                  /* reset: reset.css ustawia max-width: 75ch na p */
  text-align: center;
}

.vis-hero__breadcrumb-link {
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}

.vis-hero__breadcrumb-link:hover {
  color: var(--primary);
}


/* ----------------------------------------------------------
   VisHero — heading (H1)
   ---------------------------------------------------------- */

.vis-hero__heading {
  font-size: 3rem;                  /* text-5xl = 48px */
  font-weight: var(--font-bold);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-6);    /* 24px */
}

@media (min-width: 768px) {
  .vis-hero__heading { font-size: 3.75rem; }    /* text-6xl = 60px */
}

@media (min-width: 1024px) {
  .vis-hero__heading { font-size: 4.5rem; }     /* text-[72px] */
}

.vis-hero__heading-accent {
  color: var(--primary);
}


/* ----------------------------------------------------------
   VisHero — lead paragraph
   ---------------------------------------------------------- */

.vis-hero__lead {
  max-width: var(--text-max-sm);    /* 700px */
  margin-inline: auto;
  margin-bottom: var(--space-10);   /* 40px — mb-10 */
  font-size: var(--text-lg);        /* 18px */
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}

@media (min-width: 768px) {
  .vis-hero__lead { font-size: var(--text-xl); } /* 22px */
}


/* ----------------------------------------------------------
   VisHero — przyciski CTA
   ---------------------------------------------------------- */

.vis-hero__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);              /* 16px */
  justify-content: center;
  align-items: center;
  margin-bottom: var(--space-6);    /* 24px */
}

@media (min-width: 640px) {
  .vis-hero__buttons {
    flex-direction: row;
  }
}

/* Ikona w przycisku */
.vis-hero__btn-icon {
  margin-right: var(--space-2);     /* 8px */
  flex-shrink: 0;
}


/* ----------------------------------------------------------
   VisHero — nota kursywą
   ---------------------------------------------------------- */

.vis-hero__note {
  font-size: var(--text-sm);        /* 14px */
  font-style: italic;
  color: var(--muted-foreground);
  margin-top: var(--space-4);       /* 16px — dodatkowe oddzielenie od buttonów (łącznie 40px) */
  max-width: none;                  /* reset: reset.css ustawia max-width: 75ch na p */
  text-align: center;
}


/* ============================================================
   2. BIG NUMBERS (BigNumbersSection)
   ============================================================ */

.vis-numbers {
  background-color: var(--section-alt);   /* #15123A */
}


/* ----------------------------------------------------------
   BigNumbers — nagłówek sekcji
   ---------------------------------------------------------- */

.vis-numbers__heading {
  font-size: var(--text-h2);        /* clamp(2rem, 5vw, 4rem) = 32–64px */
  font-weight: var(--font-bold);
  text-align: center;
  max-width: 900px;
  margin-inline: auto;
  margin-bottom: var(--space-6);    /* 24px */
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
}

.vis-numbers__lead {
  text-align: center;
  max-width: var(--text-max-sm);    /* 700px */
  margin-inline: auto;
  margin-bottom: var(--space-20);   /* 80px — mb-20 */
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}

@media (min-width: 768px) {
  .vis-numbers__lead { font-size: var(--text-xl); }
}


/* ----------------------------------------------------------
   BigNumbers — 2-kolumnowy grid kart
   ---------------------------------------------------------- */

.vis-numbers__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);              /* 32px — gap-8 */
  max-width: 960px;                 /* max-w-5xl */
  margin-inline: auto;
}

@media (min-width: 768px) {
  .vis-numbers__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ----------------------------------------------------------
   BigNumbers — karta ze statystyką
   ---------------------------------------------------------- */

.vis-numbers__card {
  padding: var(--space-12);         /* 48px — p-12 */
  border-radius: var(--radius);     /* 16px — rounded-2xl */
  border: 1px solid var(--border-primary);   /* rgba(6,182,212,0.2) */
  background: transparent;          /* dziedziczy --section-alt z rodzica */
  transition: all var(--duration-base) var(--ease-default);
}

.vis-numbers__card:hover {
  border-color: rgba(6, 182, 212, 0.5);
  box-shadow: var(--shadow-glow-cyan);
}


/* Duża liczba (80px mobile → 120px desktop) */
.vis-numbers__number {
  font-size: 5rem;                  /* text-[80px] */
  font-weight: 900;                 /* font-black */
  line-height: 1;
  margin-bottom: var(--space-4);    /* 16px */
  color: var(--primary);
  animation: vis-numbers-pulse-glow 4s ease-in-out infinite;
}

@media (min-width: 1024px) {
  .vis-numbers__number { font-size: 7.5rem; }   /* text-[120px] */
}

@keyframes vis-numbers-pulse-glow {
  0%, 100% { text-shadow: 0 0 20px rgba(6, 182, 212, 0.3); }
  50%       { text-shadow: 0 0 40px rgba(6, 182, 212, 0.7), 0 0 80px rgba(6, 182, 212, 0.2); }
}


/* Separator: pozioma linia 2px cyan */
.vis-numbers__sep {
  width: 80%;                       /* w-4/5 */
  height: 2px;
  background: rgba(6, 182, 212, 0.4);
  margin-bottom: var(--space-4);    /* 16px */
}


/* Tytuł karty */
.vis-numbers__card-title {
  font-size: var(--text-xl);        /* 22px */
  font-weight: var(--font-semibold);
  color: var(--foreground);
  margin-bottom: var(--space-2);    /* 8px */
  max-width: none;                  /* reset base.css h3 max-width */
}


/* Opis karty */
.vis-numbers__card-desc {
  font-size: var(--text-base);      /* 16px */
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}


/* Źródła (pod gridem) */
.vis-numbers__source {
  text-align: center;
  margin-top: var(--space-12);      /* 48px — mt-12 */
  font-size: var(--text-sm);        /* 14px */
  color: var(--muted-foreground);
  margin-inline: auto;              /* centruje blok (reset.css: max-width 75ch bez margin-inline) */
}


/* ============================================================
   3. WHY NOW (WhyNowSection)
   ============================================================ */

/* Tło: var(--background) domyślne — brak override */


/* ----------------------------------------------------------
   WhyNow — nagłówek sekcji
   ---------------------------------------------------------- */

.vis-whynow__heading {
  font-size: var(--text-h2);        /* clamp(2rem, 5vw, 4rem) = 32–64px */
  font-weight: var(--font-bold);
  text-align: center;
  max-width: 900px;
  margin-inline: auto;
  margin-bottom: var(--space-6);    /* 24px */
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
}

.vis-whynow__lead {
  text-align: center;
  max-width: var(--text-max-sm);    /* 700px */
  margin-inline: auto;
  margin-bottom: var(--space-20);   /* 80px — mb-20 */
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}

@media (min-width: 768px) {
  .vis-whynow__lead { font-size: var(--text-xl); }
}


/* ----------------------------------------------------------
   WhyNow — 3-kolumnowy grid kart
   ---------------------------------------------------------- */

.vis-whynow__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);              /* 32px — gap-8 */
  max-width: 960px;                 /* max-w-5xl */
  margin-inline: auto;
}

@media (min-width: 768px) {
  .vis-whynow__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ----------------------------------------------------------
   WhyNow — karta
   ---------------------------------------------------------- */

.vis-whynow__card {
  padding: var(--space-10);         /* 40px — p-10 */
  border-radius: var(--radius);     /* 16px — rounded-2xl */
  border: 1px solid var(--border);  /* #282550 — border-border */
  background-color: var(--card-bg); /* #1E1B4B */
  transition:
    transform var(--duration-base) var(--ease-default),
    box-shadow var(--duration-base) var(--ease-default);
}

.vis-whynow__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow-cyan);  /* 0 8px 40px rgba(6,182,212,0.15) */
}


/* Ikona karty (48px) */
.vis-whynow__card-icon {
  color: var(--primary);
  margin-bottom: var(--space-6);    /* 24px */
  display: block;
}


/* Tytuł karty (h3) */
.vis-whynow__card-title {
  font-size: var(--text-xl);        /* 22px */
  font-weight: var(--font-semibold);
  color: var(--foreground);
  margin-bottom: var(--space-4);    /* 16px */
  max-width: none;                  /* reset base.css h3 max-width */
}


/* Treść karty */
.vis-whynow__card-body {
  font-size: var(--text-base);      /* 16px */
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}


/* ============================================================
   4. EXPLAINER (ExplainerSection)
   ============================================================ */

.vis-explainer {
  background-color: var(--section-alt);   /* #15123A */
}


/* ----------------------------------------------------------
   Explainer — nagłówek sekcji
   ---------------------------------------------------------- */

.vis-explainer__heading {
  font-size: var(--text-h2);        /* clamp(2rem, 5vw, 4rem) = 32–64px */
  font-weight: var(--font-bold);
  text-align: center;
  max-width: var(--text-max);       /* 800px */
  margin-inline: auto;
  margin-bottom: var(--space-6);
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
}

.vis-explainer__lead {
  text-align: center;
  max-width: var(--text-max-sm);    /* 700px */
  margin-inline: auto;
  margin-bottom: var(--space-20);   /* 80px */
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}

@media (min-width: 768px) {
  .vis-explainer__lead { font-size: var(--text-xl); }
}


/* ----------------------------------------------------------
   Explainer — wrapper kroków (ONE HTML, @media switches layout)
   Mobile: flex-col | Desktop ≥1024px: flex-row
   ---------------------------------------------------------- */

.vis-explainer__steps-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;                      /* gap-6 */
  max-width: 960px;
  margin-inline: auto;
  margin-bottom: 4rem;              /* mb-16 = 64px — przed callout */
}

@media (min-width: 1024px) {
  .vis-explainer__steps-wrapper {
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;                      /* lg:gap-4 */
  }
}


/* ----------------------------------------------------------
   Explainer — step-group: krok + strzałka
   Mobile: flex-col | Desktop: flex-row
   ---------------------------------------------------------- */

.vis-explainer__step-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;                      /* gap-6 */
}

@media (min-width: 1024px) {
  .vis-explainer__step-group {
    flex-direction: row;
    gap: 1rem;                      /* lg:gap-4 */
  }
}


/* ----------------------------------------------------------
   Explainer — pojedynczy krok
   ---------------------------------------------------------- */

.vis-explainer__step {
  text-align: center;
  max-width: 280px;
}

/* Ikona kroku (64px) z drop-shadow */
.vis-explainer__step-icon {
  color: var(--primary);
  margin-inline: auto;
  margin-bottom: var(--space-4);    /* 16px */
  display: block;
  filter: drop-shadow(0 0 12px rgba(6, 182, 212, 0.4));
}

/* Tytuł kroku: uppercase, bold, tracking-wide */
.vis-explainer__step-title {
  font-size: var(--text-xl);        /* 22px */
  font-weight: var(--font-bold);
  color: var(--foreground);
  margin-bottom: var(--space-3);    /* 12px — mb-3 */
  text-transform: uppercase;
  letter-spacing: 0.025em;          /* tracking-wide */
  max-width: none;
}

/* Treść kroku */
.vis-explainer__step-body {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}

/* Modifier: kursywa dla kroku 1 */
.vis-explainer__step-body--italic {
  font-style: italic;
}


/* ----------------------------------------------------------
   Explainer — strzałki kierunkowe (ONE HTML, CSS toggle)
   ---------------------------------------------------------- */

.vis-explainer__arrow {
  color: var(--primary);
  flex-shrink: 0;
}

/* ArrowRight: ukryty na mobile, widoczny na desktop */
.vis-explainer__arrow--right {
  display: none;
  animation: vis-explainer-shift 2s ease-in-out infinite;
}

@media (min-width: 1024px) {
  .vis-explainer__arrow--right { display: block; }
}

/* ArrowDown: widoczny na mobile, ukryty na desktop */
.vis-explainer__arrow--down {
  display: block;
}

@media (min-width: 1024px) {
  .vis-explainer__arrow--down { display: none; }
}

@keyframes vis-explainer-shift {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(6px); }
}


/* ----------------------------------------------------------
   Vis Callout — współdzielony przez S4 i S5
   ---------------------------------------------------------- */

.vis-callout {
  max-width: var(--text-max);       /* 800px */
  margin-inline: auto;
  padding: var(--space-8);          /* 32px — p-8 */
  border-radius: var(--radius-sm);  /* ~12px — rounded-xl */
  text-align: center;
  background: rgba(6, 182, 212, 0.08);
  border: 2px solid var(--primary);
}

/* Ikona callout */
.vis-callout__icon {
  color: var(--primary);
  margin-inline: auto;
  margin-bottom: var(--space-4);    /* 16px */
  display: block;
}

/* Tytuł callout (opcjonalny — tylko S4) */
.vis-callout__title {
  font-size: var(--text-xl);        /* text-xl = ~20–22px */
  font-weight: var(--font-bold);
  color: var(--foreground);
  margin-bottom: var(--space-2);    /* 8px */
  max-width: none;
}

/* Treść callout */
.vis-callout__body {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}

.vis-callout__body strong {
  color: var(--foreground);
}


/* ============================================================
   5. AUDIT AREAS (AuditAreasSection)
   ============================================================ */

/* Tło: var(--background) domyślne — brak override */


/* ----------------------------------------------------------
   AuditAreas — nagłówek sekcji
   ---------------------------------------------------------- */

.vis-areas__heading {
  font-size: var(--text-h2);
  font-weight: var(--font-bold);
  text-align: center;
  max-width: var(--text-max);       /* 800px */
  margin-inline: auto;
  margin-bottom: var(--space-6);
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
}

.vis-areas__lead {
  text-align: center;
  max-width: var(--text-max-sm);    /* 700px */
  margin-inline: auto;
  margin-bottom: var(--space-20);   /* 80px */
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}

@media (min-width: 768px) {
  .vis-areas__lead { font-size: var(--text-xl); }
}


/* ----------------------------------------------------------
   AuditAreas — 3-kolumnowy grid (1→2→3 kol.)
   ---------------------------------------------------------- */

.vis-areas__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);              /* 32px */
  max-width: 960px;
  margin-inline: auto;
  margin-bottom: 4rem;              /* mb-16 = 64px — przed callout */
}

@media (min-width: 768px) {
  .vis-areas__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .vis-areas__grid { grid-template-columns: repeat(3, 1fr); }
}


/* ----------------------------------------------------------
   AuditAreas — karta obszaru
   ---------------------------------------------------------- */

.vis-areas__card {
  padding: var(--space-10);         /* 40px — p-10 */
  border-radius: var(--radius);     /* 16px — rounded-2xl */
  border: 1px solid var(--border);
  background-color: var(--card-bg); /* #1E1B4B */
  transition:
    transform var(--duration-base) var(--ease-default),
    box-shadow var(--duration-base) var(--ease-default);
}

.vis-areas__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow-cyan);
}

/* Ikona obszaru (48px) */
.vis-areas__card-icon {
  color: var(--primary);
  margin-bottom: var(--space-6);    /* 24px */
  display: block;
}

/* Tytuł obszaru */
.vis-areas__card-title {
  font-size: var(--text-xl);        /* ~22px — backup: text-xl */
  font-weight: var(--font-semibold);
  color: var(--foreground);
  margin-bottom: var(--space-4);    /* 16px */
  max-width: none;
}

/* Treść obszaru */
.vis-areas__card-body {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}


/* ============================================================
   6. PLATFORMS (PlatformsSection)
   ============================================================ */

.vis-platforms {
  background-color: var(--section-alt);   /* #15123A */
}


/* ----------------------------------------------------------
   Platforms — nagłówek sekcji
   ---------------------------------------------------------- */

.vis-platforms__heading {
  font-size: var(--text-h2);
  font-weight: var(--font-bold);
  text-align: center;
  max-width: var(--text-max);       /* 800px */
  margin-inline: auto;
  margin-bottom: var(--space-6);
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
}

.vis-platforms__lead {
  text-align: center;
  max-width: var(--text-max-sm);    /* 700px */
  margin-inline: auto;
  margin-bottom: var(--space-20);   /* 80px */
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}

@media (min-width: 768px) {
  .vis-platforms__lead { font-size: var(--text-xl); }
}


/* ----------------------------------------------------------
   Platforms — grid 7 kart (1→2→4 kol.)
   Ostatni wiersz na lg ma 3 karty (lewostronne wyrównanie)
   ---------------------------------------------------------- */

.vis-platforms__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);              /* 32px — gap-8 */
  max-width: 960px;
  margin-inline: auto;
}

@media (min-width: 640px) {
  .vis-platforms__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .vis-platforms__grid { grid-template-columns: repeat(4, 1fr); }
}


/* ----------------------------------------------------------
   Platforms — karta platformy (text only)
   ---------------------------------------------------------- */

.vis-platforms__card {
  padding: var(--space-8);          /* 32px — p-8 */
  border-radius: var(--radius-sm);  /* ~12px — rounded-xl */
  border: 1px solid var(--border-subtle);  /* rgba(255,255,255,0.06) */
  background-color: var(--card-bg); /* #1E1B4B */
  transition:
    transform var(--duration-base) var(--ease-default),
    border-color var(--duration-base) var(--ease-default),
    box-shadow var(--duration-base) var(--ease-default);
}

.vis-platforms__card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: var(--shadow-glow-cyan);
}

/* Nazwa platformy */
.vis-platforms__card-name {
  font-size: var(--text-xl);        /* text-[22px] */
  font-weight: var(--font-bold);
  color: var(--foreground);
  margin-bottom: var(--space-2);    /* 8px */
  max-width: none;
}

/* Opis platformy */
.vis-platforms__card-desc {
  font-size: var(--text-sm);        /* text-sm = 14px */
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}


/* ============================================================
   7. AUDIT PROCESS (AuditProcessSection)
   Wzorzec identyczny z .auto-process__* — prefix .vis-process__*
   ONE HTML + @media (mobile: pionowa | desktop: pozioma oś)
   ============================================================ */

/* Tło: var(--background) domyślne — brak override */


/* ----------------------------------------------------------
   AuditProcess — nagłówek sekcji
   ---------------------------------------------------------- */

.vis-process__heading {
  font-size: var(--text-h2);
  font-weight: var(--font-bold);
  text-align: center;
  max-width: var(--text-max);       /* 800px */
  margin-inline: auto;
  margin-bottom: var(--space-6);
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
}

.vis-process__lead {
  text-align: center;
  max-width: var(--text-max-sm);    /* 700px */
  margin-inline: auto;
  margin-bottom: var(--space-20);   /* 80px */
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}

@media (min-width: 768px) {
  .vis-process__lead { font-size: var(--text-xl); }
}


/* ----------------------------------------------------------
   AuditProcess — timeline wrapper
   ---------------------------------------------------------- */

.vis-process__timeline {
  max-width: 1024px;
  margin-inline: auto;
  margin-bottom: var(--space-16);   /* 64px — przed notą końcową */
  position: relative;
}


/* ----------------------------------------------------------
   AuditProcess — MOBILE: pionowa oś czasu
   ---------------------------------------------------------- */

/* Kontener kroków */
.vis-process__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;

  /* Mobile: flex column */
  display: flex;
  flex-direction: column;
  gap: 2.5rem;                      /* 40px — backup: space-y-10 */
}

/* Oś: MOBILE — pionowa linia */
.vis-process__track {
  position: absolute;
  background-color: rgba(6, 182, 212, 0.4);
  pointer-events: none;

  top: 0.5rem;
  bottom: 0.5rem;
  left: 0.5rem;                     /* wyrównana do środka kropki (16px / 2 = 8px = 0.5rem) */
  width: 2px;
  height: auto;
  right: auto;
}

/* Krok: MOBILE — flex row (kropka | treść) */
.vis-process__step {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;                      /* 24px — backup: gap-6 */
  position: relative;
}

/* Kropka */
.vis-process__dot {
  width: 1rem;                      /* 16px */
  height: 1rem;
  border-radius: var(--radius-full);
  background-color: var(--primary);
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.5);
  flex-shrink: 0;
  margin-top: 0.25rem;
  position: relative;
  z-index: 1;
}

/* Treść kroku */
.vis-process__step-body {
  flex: 1;
}

/* Numer kroku: 36px mobile */
.vis-process__num {
  font-size: 2.25rem;               /* text-4xl = 36px mobile */
  font-weight: var(--font-bold);
  color: var(--primary);
  line-height: 1;
  margin-bottom: 0.25rem;
}

/* Czas */
.vis-process__time {
  font-size: var(--text-xs);        /* 12px — backup: text-xs */
  font-weight: var(--font-medium);
  color: var(--primary);
  margin-bottom: var(--space-2);    /* 8px */
}

/* Tytuł kroku */
.vis-process__step-title {
  font-size: var(--text-lg);        /* 18px — backup: text-lg */
  font-weight: var(--font-semibold);
  color: var(--foreground);
  margin-bottom: var(--space-2);
  max-width: none;
}

/* Opis kroku */
.vis-process__step-desc {
  font-size: var(--text-sm);        /* 14px — backup: text-sm */
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}


/* ----------------------------------------------------------
   AuditProcess — DESKTOP (≥ 1024px): pozioma oś czasu
   ---------------------------------------------------------- */

@media (min-width: 1024px) {

  /* Oś: DESKTOP — pozioma linia */
  .vis-process__track {
    top: 2rem;                      /* 32px — backup: top-[32px] */
    left: 10%;
    right: 10%;
    bottom: auto;
    width: auto;
    height: 2px;
  }

  /* Grid 5 kolumn */
  .vis-process__steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    flex-direction: unset;
  }

  /* Krok: blokowy, wyśrodkowany */
  .vis-process__step {
    display: block;
    text-align: center;
  }

  /* Kropka: wyśrodkowana nad numerem */
  .vis-process__dot {
    display: block;
    margin: 0 auto var(--space-4);
    margin-top: 0;
    flex-shrink: unset;
    z-index: 2;
  }

  .vis-process__step-body { flex: unset; }

  /* Numer: 64px desktop */
  .vis-process__num {
    font-size: 4rem;                /* 64px — backup: text-[64px] */
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
  }

  .vis-process__time {
    margin-bottom: var(--space-3);
  }

  /* Opis: max-width dla czytelności */
  .vis-process__step-desc {
    max-width: 180px;               /* backup: max-w-[180px] */
    margin-inline: auto;
  }

}


/* ----------------------------------------------------------
   AuditProcess — nota końcowa
   ---------------------------------------------------------- */

.vis-process__note {
  text-align: center;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  max-width: var(--text-max-sm);    /* 700px */
  margin-inline: auto;
  color: var(--muted-foreground);
}


/* ============================================================
   8. VIS FAQ (WidocznoscFaq)
   Natywny <details>/<summary> — zero JS
   Wzorzec identyczny z .auto-faq__*
   ============================================================ */

.vis-faq {
  background-color: var(--section-alt);   /* #15123A */
}


/* ----------------------------------------------------------
   VisFaq — nagłówek sekcji
   ---------------------------------------------------------- */

.vis-faq__heading {
  font-size: var(--text-h2);
  font-weight: var(--font-bold);
  text-align: center;
  max-width: var(--text-max);       /* 800px */
  margin-inline: auto;
  margin-bottom: var(--space-6);
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
}

.vis-faq__lead {
  text-align: center;
  max-width: var(--text-max-sm);    /* 700px */
  margin-inline: auto;
  margin-bottom: var(--space-20);   /* 80px */
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}

@media (min-width: 768px) {
  .vis-faq__lead { font-size: var(--text-xl); }
}


/* ----------------------------------------------------------
   VisFaq — lista <details>/<summary>
   ---------------------------------------------------------- */

.vis-faq__list {
  max-width: 800px;
  margin-inline: auto;
}

/* Pojedynczy item */
.vis-faq__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background-color var(--duration-base) var(--ease-default);
}

.vis-faq__item:hover {
  background-color: rgba(255, 255, 255, 0.02);
}

/* Pytanie <summary> */
.vis-faq__item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6);          /* py-6 px-6 */
  font-size: var(--text-lg);        /* 18px */
  font-weight: var(--font-semibold);
  color: var(--foreground);
  text-align: left;
  user-select: none;
}

@media (min-width: 768px) {
  .vis-faq__item summary { font-size: var(--text-xl); }  /* 22px */
}

/* Ukrywa domyślną strzałkę przeglądarki */
.vis-faq__item summary::-webkit-details-marker { display: none; }
.vis-faq__item summary::marker { display: none; }

/* Chevron SVG w <summary> */
.vis-faq__chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--primary);
  transition: transform var(--duration-base) var(--ease-default);
}

/* Obrót chevron przy otwartym <details> */
.vis-faq__item[open] .vis-faq__chevron {
  transform: rotate(180deg);
}

/* Odpowiedź */
.vis-faq__answer {
  padding: 0 var(--space-6) var(--space-6);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}


/* ============================================================
   9. VIS FINAL CTA (WidocznoscFinalCTA)
   Reużywa .cta__* z components.css
   Override: lead mb-10 zamiast mb-20 (backup: mb-10)
   ============================================================ */

.vis-cta-final .cta__lead {
  margin-bottom: var(--space-10);   /* 40px — backup: mb-10 */
}

/* ================================================================
   ETAP 1.12c HOTFIX — styling for links in FAQ answers
   Data: 2026-05-26
   Powód: w etapie 1.12c dodano cross-link FAQ z linkiem do
   /automatyzacja w treści odpowiedzi. Per-page CSS architecture
   (Lekcja 9 w masterze) — klasy .vis-faq__answer są lokalne dla
   widocznosc.css, brak im stylów dla anchor tags. Wizualnie link
   nie wygląda jak link. Dodajemy reguły analogiczne do
   .faq__subtitle a z home.css.
   ================================================================ */

.vis-faq__answer a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vis-faq__answer a:hover {
  color: var(--primary-hover);
}