/* ============================================================
   HOME.CSS — Homepage-specific styles
   aventium.ai static rebuild

   Sekcje:
     1. Hero
     2. Pillars
     3. WhyAventium
     4. Industries
     5. FinalCTA

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


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

.hero {
  position: relative;
  min-height: 100svh;   /* 100svh uwzględnia mobilne UI chrome */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: 120px;   /* Header 72px + 48px wolnego miejsca */
  padding-bottom: 120px;
}


/* ----------------------------------------------------------
   Hero — tło: kafle SVG hexagonów (zastępuje 2.62 MB PNG)
   ---------------------------------------------------------- */

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


/* ----------------------------------------------------------
   Hero — gradient mesh (dekoracyjne plamy kolorów)
   ---------------------------------------------------------- */

.hero__mesh {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}

.hero__mesh--cyan {
  top: -200px;
  right: -200px;
  width: 1600px;
  height: 1600px;
  background: var(--gradient-mesh-cyan);
  z-index: 1;
}

.hero__mesh--indigo {
  bottom: -200px;
  left: -200px;
  width: 1200px;
  height: 1200px;
  background: var(--gradient-mesh-indigo);
  z-index: 1;
}


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

.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;
}


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

.hero__heading {
  font-size: var(--text-hero);        /* clamp(3rem, 8vw, 6rem) = 48–96px */
  font-weight: var(--font-bold);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-6);
}

.hero__heading-accent {
  color: var(--primary);
  text-shadow: 0 0 40px rgba(6, 182, 212, 0.4);
}


/* ----------------------------------------------------------
   Hero — lead paragraph
   ---------------------------------------------------------- */

.hero__lead {
  font-size: var(--text-xl);          /* 22px */
  line-height: var(--leading-normal);
  max-width: var(--text-max-sm);      /* 700px */
  margin-inline: auto;
  margin-bottom: var(--space-20);     /* 80px */
  color: var(--muted-foreground);
}


/* ----------------------------------------------------------
   Hero — karty CTA
   ---------------------------------------------------------- */

.hero__cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);                /* 24px */
  justify-content: center;
  align-items: center;
  margin-bottom: var(--space-12);     /* 48px */
}

@media (min-width: 640px) {
  .hero__cards {
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-8);              /* 32px */
  }
}

/* Karta — link wrapper */
.hero__card {
  display: flex;
  flex-direction: column;
  text-align: left;
  width: 100%;
  max-width: 420px;
  padding: var(--space-10);           /* 40px */
  background: var(--gradient-hero-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);    /* 20px */
  text-decoration: none;
  color: inherit;
  transition:
    transform var(--duration-base) var(--ease-default),
    border-color var(--duration-base) var(--ease-default),
    box-shadow var(--duration-base) var(--ease-default);
}

.hero__card:hover {
  transform: translateY(-4px);
  border-color: var(--border-primary-strong);   /* rgba(6,182,212,0.4) */
  box-shadow: var(--shadow-glow-cyan);
}

/* Ikona w karcie */
.hero__card-icon {
  width: 64px;
  height: 64px;
  color: var(--primary);
  margin-bottom: var(--space-4);      /* 16px */
  flex-shrink: 0;
  transition:
    transform var(--duration-base) var(--ease-default),
    filter var(--duration-base) var(--ease-default);
}

.hero__card:hover .hero__card-icon {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.4));
}

/* Tytuł karty — nadpisuje domyślny h2 z base.css */
.hero__card-title {
  font-size: 1.75rem;                 /* 28px */
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
  color: var(--foreground);
  max-width: none;                    /* reset: base.css ustawia max-width na h2 */
}

/* Opis karty */
.hero__card-desc {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
  margin-bottom: var(--space-6);
  flex-grow: 1;                       /* pcha CTA do dołu */
}

/* Link "Dowiedz się więcej →" */
.hero__card-cta {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.hero__card-cta svg {
  transition: transform var(--duration-fast) var(--ease-default);
}

.hero__card:hover .hero__card-cta svg {
  transform: translateX(4px);
}


/* ----------------------------------------------------------
   Hero — tagline na dole (kursywa)
   ---------------------------------------------------------- */

.hero__tagline {
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--muted-foreground);
  max-width: none;                  /* reset: reset.css ustawia max-width: 75ch na p */
  text-align: center;
}


/* ----------------------------------------------------------
   Hero — wskaźnik przewijania (bounce arrow)
   ---------------------------------------------------------- */

.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  animation: hero-bounce 2s ease-in-out infinite;
}

@keyframes hero-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0);  }
  50%       { transform: translateX(-50%) translateY(8px); }
}


/* ============================================================
   2. PILLARS (Dwa filary)
   ============================================================ */

.pillars {
  background-color: var(--surface-alt);
}


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

.pillars__heading {
  text-align: center;
  margin-inline: auto;
  margin-bottom: var(--space-20);   /* 80px — oryginał: mb-20 */
  /* font-size (--text-h2), font-weight, max-width: 800px z base.css h2 */
}

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


/* ----------------------------------------------------------
   Pillars — 2-kolumnowy grid (1 kol. mobile → 2 kol. ≥768px)
   ---------------------------------------------------------- */

.pillars__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;   /* 48px — oryginał: gap-12 */
}

@media (min-width: 768px) {
  .pillars__grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;   /* 64px — oryginał: md:gap-16 */
  }
}


/* ----------------------------------------------------------
   Pillars — pojedynczy filar
   ---------------------------------------------------------- */

/* Tytuł filara: ikona + tekst w jednym wierszu */
.pillars__item-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);              /* 12px */
  font-size: var(--text-2xl);       /* 24px */
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);    /* 16px */
  color: var(--foreground);
  max-width: none;                  /* reset: base.css narzuca max-width na h3 globalnie */
}

/* Ikona przy tytule (32px) */
.pillars__item-icon {
  width: 32px;
  height: 32px;
  color: var(--primary);
  flex-shrink: 0;
  transition: filter var(--duration-base) var(--ease-default);
}

.pillars__item:hover .pillars__item-icon {
  filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.4));
}

/* Lead paragraph */
.pillars__item-lead {
  color: var(--muted-foreground);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);    /* 24px */
}

/* Lista bullet-ów */
.pillars__item-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-8);       /* 32px pod listą */
  display: flex;
  flex-direction: column;
  gap: var(--space-4);              /* 16px między pozycjami */
}

/* Pojedynczy bullet */
.pillars__bullet {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);              /* 12px */
}

/* Ikona ✓ (check) przy bullet */
.pillars__bullet-icon {
  width: 18px;
  height: 18px;
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 0.15rem;              /* wizualne wyrównanie z pierwszą linią tekstu */
}

/* Tekst bullet */
.pillars__bullet-text {
  color: var(--muted-foreground);
  line-height: var(--leading-relaxed);
}

/* Przycisk CTA — rozszerza .btn .btn--primary */
.pillars__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);              /* 8px między tekstem a strzałką */
}

.pillars__cta svg {
  transition: transform var(--duration-fast) var(--ease-default);
}

.pillars__cta:hover svg {
  transform: translateX(4px);
}


/* ============================================================
   3. WHY AVENTIUM
   ============================================================ */

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

/* ----------------------------------------------------------
   WhyAventium — nagłówek + lead
   ---------------------------------------------------------- */

.why__heading {
  text-align: center;
  margin-inline: auto;
  margin-bottom: var(--space-6);    /* 24px — oryginał: mb-6 */
  /* font-size (--text-h2), font-weight, max-width: 800px z base.css h2 */
}

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


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

.why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);              /* 32px — oryginał: gap-8 */
}

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


/* ----------------------------------------------------------
   WhyAventium — karta USP
   ---------------------------------------------------------- */

.why__card {
  background-color: var(--card);    /* #1C1A45 */
  border: 1px solid var(--border);  /* #282550 */
  border-radius: var(--radius);     /* 16px */
  padding: var(--space-8);          /* 32px — oryginał: p-8 */
  transition:
    transform var(--duration-base) var(--ease-default),
    border-color var(--duration-base) var(--ease-default),
    box-shadow var(--duration-base) var(--ease-default);
}

@media (min-width: 768px) {
  .why__card {
    padding: var(--space-10);       /* 40px — oryginał: md:p-10 */
  }
}

.why__card:hover {
  transform: translateY(-4px);
  border-color: var(--border-primary-strong);  /* rgba(6,182,212,0.4) */
  box-shadow: var(--shadow-glow-cyan);          /* 0 8px 40px rgba(6,182,212,0.15) */
}

/* Ikona karty (48px) */
.why__card-icon {
  width: 48px;
  height: 48px;
  color: var(--primary);
  margin-bottom: var(--space-5);    /* 20px — oryginał: mb-5 */
  display: block;
  transition:
    transform var(--duration-base) var(--ease-default),
    filter var(--duration-base) var(--ease-default);
}

.why__card:hover .why__card-icon {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.4));
}

/* Tytuł karty (h3) */
.why__card-title {
  font-size: var(--text-2xl);       /* 24px */
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-1);    /* 4px — oryginał: mb-1 */
  color: var(--foreground);
  max-width: none;                  /* reset globalnego h3 max-width jeśli istnieje */
}

/* Podtytuł karty (cyan, mały) */
.why__card-subtitle {
  font-size: var(--text-sm);        /* 14px */
  font-weight: var(--font-medium);
  color: var(--primary);
  margin-bottom: var(--space-4);    /* 16px — oryginał: mb-4 */
}

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


/* ============================================================
   4. INDUSTRIES
   .industries__* moved to components.css (grid/tile/heading/lead/footer/contact)
   Tu zostaje tylko .industries { background-color } — homepage-specific:
   var(--surface-alt) #181540 ≠ var(--section-alt) #15123A używane na /automatyzacja
   ============================================================ */

.industries {
  background-color: var(--surface-alt);
}


/* ============================================================
   5. FAQ
   ============================================================ */

.faq {
  background-color: var(--section-alt);
}

.faq__heading {
  font-size: var(--text-h2);
  font-weight: var(--font-bold);
  color: var(--foreground);
  text-align: center;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
}

.faq__subtitle {
  text-align: center;
  color: var(--muted-foreground);
  max-width: 60ch;
  margin: 0 auto var(--space-12);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

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

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

.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-base);
}

.faq-item[open] {
  border-color: var(--primary);
}

.faq-item summary {
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--foreground);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  user-select: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  font-size: 1.5em;
  font-weight: var(--font-normal);
  color: var(--primary);
  flex-shrink: 0;
  line-height: 1;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-answer {
  padding: 0 var(--space-6) var(--space-5) var(--space-6);
  color: var(--muted-foreground);
  line-height: var(--leading-relaxed);
}

.faq-answer p {
  margin: 0;
}


/* ============================================================
   6. FINAL CTA
   Przeniesione do components.css — style .cta* dostępne globalnie
   ============================================================ */

/* ================================================================
   ETAP 1.12a HOTFIX — FAQ heading layout repair
   Data: 2026-05-25
   Powód: po deployu 1.12a H2 "Najczęstsze pytania" i .faq__subtitle
   rozjechały się w 2 kolumny (H2 lewa, subtitle prawa). Nasze zmiany
   1.12a nie dotykały .faq — problem pre-existing CSS rule (grid/flex/
   float) gdzieś w hierarchii. Robimy override przez !important, bez
   ruszania istniejących reguł. Docelowo do refaktoru w osobnej sesji
   CSS polish (etap 1.13+).
   ================================================================ */

.faq .container {
  display: block !important;
}

.faq__heading,
.faq__subtitle {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  float: none !important;
  position: static !important;
  grid-column: 1 / -1 !important;
}

.faq__subtitle {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ================================================================
   ETAP 1.12b HOTFIX — auto-custom section centering
   Data: 2026-05-25
   Powód: po wydzieleniu CTA-bloku "Twoja firma potrzebuje innej
   aplikacji?" do osobnej sekcji <section class="auto-custom"> (etap
   1.12b), H2 stracił dziedziczone centrowanie. Paragrafy i button są
   wycentrowane (mają własne reguły lub margin auto), ale H2 wyrównał
   się do lewej. Dodajemy text-align: center na poziomie sekcji.
   Docelowo do refaktoru w osobnej sesji CSS polish (etap 1.13+).
   ================================================================ */

.auto-custom {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
  text-align: center;
}

.auto-custom .auto-showcase__cta-heading {
  text-align: center;
}

/* ================================================================
   ETAP 1.12b HOTFIX2 — force-center H2 in .auto-custom (!important)
   Data: 2026-05-25
   Powód: poprzedni hotfix 1.12b nie zadziałał — H2 nadal po lewej.
   Istnieje reguła o większej specyfikity, której nie zlokalizowaliśmy.
   Stosujemy podejście siłowe z !important. Refaktor na czysto w
   osobnym etapie CSS polish (etap 1.13+).
   ================================================================ */

.auto-custom .auto-showcase__cta-heading,
.auto-custom h2 {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}

.auto-custom .auto-showcase__cta {
  text-align: center !important;
}