/* ======================================================
   page-about.css — STRONY TREŚCIOWE / BLOG / USŁUGI
====================================================== */

/* ==============================
   ZMIENNE LOKALNE
============================== */

.page-about {
  --bg-content: rgb(253 253 253);
  --text-primary: #0f172a;   /* slate-900 */
  --text-secondary: #334155; /* slate-700 */
  --text-muted: #64748b;     /* slate-500 */
}

/* ==============================
   HERO (JASNY)
============================== */

.page-about .section-hero--light {
  padding-bottom: 96px;

  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.25) 0%,
      rgba(255, 255, 255, 0.12) 55%,
      rgba(255, 255, 255, 0.08) 100%
    ),
    url("/img/backgrounds/tlo_elektronika_jasne2.webp")
    center center / cover no-repeat;
}

/* ==============================
   HERO STRIP
============================== */

.page-about .hero-strip {
  background: rgba(11, 19, 32, 0.65);
  backdrop-filter: blur(2px);

  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.page-about .hero-strip__inner {
  padding: 12px 24px;
}

/* ==============================
   TYPOGRAFIA HERO
============================== */

.page-about .hero-lead {
  font-size: 2rem;
  line-height: 1.2;
  color: #f8fafc;
}

.page-about .hero-meta {
  font-size: 1.05rem;
  margin-top: 6px;
  color: rgba(248, 250, 252, 0.85);
}

/* ==============================
   TŁO STRONY
============================== */

.page-about {
  background: var(--bg-content);
}

/* ==============================
   TREŚĆ
============================== */

.page-about .section-content {
  padding: 64px 16px;
}

.page-about .section-content .container {
  max-width: 720px;
}

.page-about h1,
.page-about h2,
.page-about h3 {
  color: var(--text-primary);
}

.page-about h2 {
  font-size: 1.6rem;
  margin: 42px 0 16px;
  letter-spacing: -0.02em;
}

/* wyjątek: O NAS – linia do lewej */
.page-about h2::after {
  margin-left: 0;
  margin-right: 0;
}

.page-about p {
  font-size: 1.05rem;
  line-height: 1.65;
  margin-bottom: 16px;
  color: var(--text-secondary);
}

/* ==============================
   LISTY — TYLKO TREŚĆ ARTYKUŁU
   (ZERO WPŁYWU NA MENU)
============================== */

.page-about .section-content ul {
  list-style: none;
  margin: 14px 0 28px;
  padding-left: 0;
}

.page-about .section-content ul li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;

  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ✔ FAJECZKA */
.page-about .section-content ul li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0.15em;

  font-size: 0.85rem;
  font-weight: 700;
  color: #2563eb; /* blue-600 */
}

/* ==============================
   TABLET ≥768px
============================== */

@media (min-width: 768px) {

  .page-about .section-hero--light {
    padding-bottom: 120px;
  }

  .page-about .hero {
    padding-left: 32px;
    padding-right: 32px;
  }

  .page-about .hero-lead {
    font-size: 2.4rem;
  }

  .page-about .hero-meta {
    font-size: 1.15rem;
  }

  .page-about .section-content {
    padding: 88px 124px;
  }

  .page-about h2 {
    font-size: 1.85rem;
  }

  .page-about p,
  .page-about .section-content ul li {
    font-size: 1.1rem;
  }

  .page-about .section-content ul li::before {
    top: 0.2em;
    font-size: 0.9rem;
  }
}

/* ==============================
   DESKTOP ≥1024px
============================== */

@media (min-width: 1024px) {

  .page-about h2 {
    font-size: 2rem;
  }

  .page-about p,
  .page-about .section-content ul li {
    font-size: 1.15rem;
  }
}