/*
==================================================
 FILE: hero.css
 PURPOSE: Hero section styling (final stable layout)
 AUTHOR: Arkadiusz Wawer
==================================================
*/

/* =========================
   HERO SECTION
========================= */

.hero-section {
background:
  url("https://arkadiuszwawer.eu/wp-content/uploads/2026/04/Interakcja-z-inteligentnym-asystentem-AI.png")
  right center / 60% no-repeat,
  radial-gradient(circle at 20% 30%, rgba(59,130,246,0.15), transparent 40%),
  radial-gradient(circle at 80% 70%, rgba(255,215,0,0.08), transparent 40%),
  linear-gradient(135deg, #020617 0%, #0f172a 100%);
  
  position: relative;
  min-height: calc(100vh - 120px);

  display: flex;
  align-items: center;

  padding: 60px 40px 120px 100px;

  overflow: hidden;
  z-index: 10;
  isolation: isolate;
}

/* =========================
   ROW LAYOUT FIX
========================= */

.hero-section .kt-row-layout-inner {
  display: flex;
  align-items: stretch;
  justify-content: flex-start; 
  gap: 40px;                  
  width: 100%;
}

.hero-section .kt-row-layout-inner > .wp-block-kadence-column {
  height: 100%;
}

/* =========================
   COLUMNS
========================= */

.hero-section .wp-block-kadence-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}




/* =========================
   RIGHT COLUMN BACKGROUND
========================= */




/* =========================
   TEXT BLOCK
========================= */

.hero-section .wp-block-kadence-advancedheading {
  max-width: 600px;
}

.hero-section h1,
.hero-section h2 {
  text-align: left;
}

.hero-title,
.hero-subtitle {
  color: #ffffff !important;
}

/* =========================
   OVERLAY
========================= */

.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(2,6,23,0.95) 0%,
    rgba(2,6,23,0.85) 30%,
    rgba(2,6,23,0.6) 55%,
    rgba(2,6,23,0.2) 75%,
    rgba(2,6,23,0) 100%
  );
}

.hero-section > * {
  position: relative;
  z-index: 2;
}

/* =========================
   CTA SPACING
========================= */

.hero-section .wp-block-button {
  margin-top: 25px;
}

/* =========================
   MOBILE
========================= */


/* =========================
   MOBILE ONLY IMAGE
========================= */

/* domyślnie ukryty */
.mobile-only {
  display: none;
}

/* tylko mobile */
@media (max-width: 768px) {
  .mobile-only {
    position: relative;
    display: inline-block;
    text-align: center;
    margin-top: 50px;
  }

  .mobile-only::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;

    background: radial-gradient(
      circle,
      rgba(212,175,55,0.15),
      transparent 70%
    );

    pointer-events: none;
  }

  .mobile-only img {
	position: relative;  
    max-width: 85%;
    height: auto;
    margin-top: 40px;
    display: block;

    border-radius: 18px;

    box-shadow:
      0 15px 40px rgba(0,0,0,0.6),
      0 0 25px rgba(59,130,246,0.15);

    border: 1px solid rgba(255,255,255,0.06);
  }
  
	.mobile-only img::after {
	  content: "";
	  position: absolute;
	  inset: 0;
	  border-radius: 18px;

	  background: radial-gradient(
		circle,
		rgba(212,175,55,0.15),
		transparent 70%
	  );

	  pointer-events: none;
	}
  
}


@media (max-width: 768px) {
  .hero-section {
    background:
      radial-gradient(circle at 20% 30%, rgba(59,130,246,0.15), transparent 40%),
      radial-gradient(circle at 80% 70%, rgba(255,215,0,0.08), transparent 40%),
      linear-gradient(135deg, #020617 0%, #0f172a 100%);

	padding-top: 60px;
	padding-right: 20px;
	padding-bottom: 50px;
	padding-left: 20px;
	align-items: flex-start; 
  }

  .hero-section .wp-block-kadence-advancedheading {
    max-width: 90%;
  }

  .hero-section .wp-block-button {
    margin-top: 25px;
    gap: 12px;
  }

  .hero-section .wp-block-button + .wp-block-button {
    margin-top: 10px;
  }
  
  .hero-section .kt-row-layout-inner {
    flex-direction: column;
    gap: 40px;
  }

  .hero-section h1 {
    font-size: 28px;
    line-height: 1.25;
  }

  .hero-section h2 {
    font-size: 18px;
    line-height: 1.5;
  }
  
  
  
}