/*
==================================================
 FILE: about.css
 PURPOSE: Layout system (containers, spacing, grid)
 AUTHOR: Arkadiusz Wawer
==================================================
*/
/* ========================================
   ABOUT SECTION – LAYOUT (Kadence fix)
======================================== */

.about-section {
  position: relative;
  padding: 40px 20px;
}

/* grid robimy na Kadence wrapperze */
.about-section.kt-row-column-wrap {
  max-width: 1200px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;

  align-items: center;
}

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

/* prawa kolumna */
.about-section .kadence-column940_11a0f2-b1 {
  max-width: 520px;
}

.about-section h2 {
  font-size: 46px;
  margin-bottom: 35px;
}

.about-section p {
  font-size: 17px;
  line-height: 1.75;
  margin-bottom: 22px;
  opacity: 0.65;
}

.about-section .about-lead {
  font-size: 20px;
  line-height: 1.6;
  opacity: 0.9;
}

/* drugi akapit */
.about-section p:nth-of-type(2) {
  font-size: 18px;
  opacity: 0.85;
}

/* ostatni = highlight */
.about-section p:last-of-type {
  margin-top: 30px;
  font-size: 20px;
  font-weight: 500;
  opacity: 0.9;
}

/* ========================================
   IMAGE
======================================== */

.about-image {
  position: relative;
  margin-left: auto;
  margin-right: 40px;
}

.about-image img {
  width: 100%;
  max-width: 420px;

  height: 520px;
  object-fit: cover;

  display: block;
  margin-left: auto;


  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 12px;

  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

/* glow */
.about-image::after {
  content: "";
  position: absolute;
  inset: -40px;

  background: radial-gradient(
    circle,
    rgba(230,201,138,0.15),
    transparent 70%
  );

  z-index: -1;
  filter: blur(40px);
}

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

@media (max-width: 768px) {

  .about-section.kt-row-column-wrap {
    grid-template-columns: 1fr;
    gap: 50px;
    text-align: center;
  }

  .about-image img {
    margin: 0 auto;
    max-width: 90%;
  }

}