/* ============================================================
   STRONA "O NAS" — style unikalne dla pageAbout.php.
   Bazowe klasy (przyciski .btn-class-1, .wide-width, tokeny kolorów)
   żyją w design-system.css, wczytywanym zawsze. .cta-band i .steps/
   .step-icon (WARIANT CIEMNY, inny niż jasna wersja na stronie głównej —
   patrz komentarz w functions.php) mają tu WŁASNĄ kopię zamiast
   współdzielenia z innymi plikami — ten sam wzorzec duplikacji co
   services.css/blog.css/kontakt.css, każdy plik strony jest samodzielny.
   ============================================================ */

/* ---- HERO ---- */
.about-hero {
  padding: var(--section-spacing) 0 0;
}

.about-hero-img {
  position: relative;
  min-height: clamp(480px, 44vw, 640px);
  display: flex;
  align-items: flex-start;
  padding: 3rem 2rem 2rem max(1.5rem, calc((100vw - var(--wide-size)) / 2 + 1.5rem));
}

.about-hero-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center;
  opacity: 0.8;
}

.about-hero-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(21, 42, 96, 0.6) 0%, rgba(21, 42, 96, 0) 38%);
  pointer-events: none;
}

.about-hero-head {
  margin: 0 0 1.25rem;
}

.about-kicker {
  display: inline-block;
  font-size: var(--fs-kicker);
  font-weight: 900;
  letter-spacing: var(--ls-caps);
  color: var(--neon-green);
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.about-hero-head h1 {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: 900;
  line-height: 1.15;
  color: var(--white);
  letter-spacing: -0.01em;
}

.about-hero-box {
  position: relative;
  z-index: 1;
  max-width: 340px;
  background: rgba(21, 42, 96, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-soft);
  padding: 1.75rem 1.75rem;
}

.about-hero-lead {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--white);
  opacity: 0.9;
}

.about-hero-img-badge {
  position: absolute;
  z-index: 1;
  right: max(1.25rem, calc((100vw - var(--wide-size)) / 2 + 1.25rem));
  bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(21, 42, 96, 0.85);
  backdrop-filter: blur(6px);
  color: var(--white);
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-pill);
}

.about-hero-img-badge svg {
  width: 18px;
  height: 18px;
  stroke: var(--neon-green);
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .about-hero-img {
    padding: 1.25rem;
    /* domyślnie justify-content:flex-start (wartość initial dla flex) —
       box z kickerem/H1/lead/CTA przyklejał się do lewej krawędzi zdjęcia
       zamiast siedzieć na środku. Tylko telefon — tablet dostanie osobne
       wytyczne później. */
    justify-content: center;
  }
  .about-hero-box { padding: 1.5rem; max-width: 280px; }
  .about-hero-img-badge { display: none; }
}

/* ---- NASZA HISTORIA — oś czasu, wariant CIEMNY (białe teksty na granacie) ---- */
.about-history {
  padding: var(--section-spacing) 0;
  background: var(--navy);
}

.about-history-head {
  max-width: 640px;
  margin: 0 auto 3.5rem;
  text-align: center;
}

.about-history-head h2 {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 900;
  line-height: 1.25;
  color: var(--white);
  letter-spacing: -0.01em;
}

.about-history-head p {
  margin: 1rem 0 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--white);
  opacity: 0.75;
}

.about-history .steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
}

.about-history .steps::before {
  content: "";
  position: absolute;
  top: 44px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: repeating-linear-gradient(to right, var(--white) 0 10px, transparent 10px 18px);
  z-index: 0;
}

.about-history .step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
}

.about-history .step-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid rgba(21, 42, 96, 0.1);
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* wyśrodkowana na swojej kolumnie, żeby pokrywała się z linią łączącą
     (biegnie między środkami kolumn 12.5%-87.5%) — patrz analogiczny,
     wcześniej naprawiony bug na stronie głównej/case-study */
  align-self: center;
}

.about-history .step-icon svg {
  width: 34px;
  height: 34px;
  stroke: var(--sea-blue);
  fill: none;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-history .step-number {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--neon-green);
  text-transform: uppercase;
}

.about-history .step h3 {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 900;
  color: var(--white);
}

.about-history .step p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--white);
  opacity: 0.8;
}

@media (max-width: 900px) {
  .about-history .steps {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .about-history .steps::before { display: none; }
  .about-history .step-icon { width: 72px; height: 72px; }
  .about-history .step-icon svg { width: 30px; height: 30px; }
}

/* Telefon i tablet (cały ≤900px zakres, ten sam breakpoint gdzie .steps
   zwija się do 1 kolumny powyżej): kicker (rok), H3 i opis w każdym kroku
   osi czasu są domyślnie wyrównane do lewej (align-items:flex-start, pasuje
   do 4 wąskich kolumn obok siebie na desktopie) — w jednej, pełnej
   szerokości kolumnie wygląda to na przyczepione do lewej krawędzi pod
   wyśrodkowaną ikoną. Ten sam wzorzec co analogiczna sekcja "Jak działa
   wynajem" na stronie głównej. Wcześniej tylko telefon (≤640px), tablet
   czekał na osobne wytyczne — teraz domknięte, ten sam zakres co zwijanie
   siatki. */
@media (max-width: 900px) {
  .about-history .step {
    align-items: center;
    text-align: center;
  }
}

/* ---- CO NAS NAPĘDZA — karty wartości ---- */
.about-values {
  padding: var(--section-spacing) 0;
}

.about-values-head {
  max-width: 680px;
  margin: 0 auto 3rem;
  text-align: center;
}

.about-values-head h2 {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 900;
  line-height: 1.25;
  color: var(--navy);
  letter-spacing: -0.01em;
}

.about-values-head p {
  margin: 1rem 0 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink-muted);
}

.about-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.about-value-card {
  background: var(--gray);
  border-radius: var(--radius-soft);
  padding: 1.75rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.about-value-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.about-value-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--sea-blue);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-value-card h3 {
  margin: 0;
  font-size: var(--fs-card);
  font-weight: 900;
  color: var(--navy);
  line-height: 1.3;
}

.about-value-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-muted);
}

@media (max-width: 980px) {
  .about-values-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .about-values-grid { grid-template-columns: 1fr; }
}

/* ---- TOOLSMART NA EKRANIE — film YouTube ładowany po kliknięciu ----
   Białe tło jak "Co nas napędza" tuż nad nią — padding-top 0, odstęp
   daje dolny padding sekcji wartości. */
.about-video {
  padding: 0 0 var(--section-spacing);
}

.about-video h2 {
  margin: 0 auto 2.5rem;
  font-size: var(--fs-h2);
  font-weight: 900;
  line-height: 1.25;
  color: var(--navy);
  letter-spacing: -0.01em;
  text-align: center;
}

.video-facade {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-soft);
  overflow: hidden;
  background: var(--navy);
  box-shadow: var(--shadow-soft);
}

.video-facade img,
.video-facade iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-facade img {
  object-fit: cover;
}

/* cały obszar miniatury jest klikalny — przycisk rozciągnięty na całość,
   widoczne kółko ▶ to tylko jego ::before + svg na środku */
.video-facade-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: linear-gradient(180deg, rgba(21, 42, 96, 0) 40%, rgba(21, 42, 96, 0.35) 100%);
  cursor: pointer;
}

.video-facade-play svg {
  width: 88px;
  height: 88px;
  padding: 26px 22px 26px 30px;
  border-radius: 50%;
  background: var(--neon-green);
  fill: var(--navy);
  box-shadow: 0 10px 30px rgba(21, 42, 96, 0.35);
  transition: transform 0.2s ease;
}

.video-facade-play:hover svg,
.video-facade-play:focus-visible svg {
  transform: scale(1.08);
}

@media (max-width: 640px) {
  .video-facade { border-radius: var(--radius-sm); }
  .video-facade-play svg { width: 64px; height: 64px; padding: 18px 15px 18px 21px; }
}

/* ---- CTA BAND (własna kopia, ten sam wzorzec co na innych stronach) ---- */
.cta-band {
  padding: var(--section-spacing) 0;
  background: var(--navy);
  text-align: center;
}

.cta-band h2 {
  margin: 0 0 2rem;
  font-size: var(--fs-h2);
  font-weight: 900;
  line-height: 1.3;
  color: var(--white);
  letter-spacing: -0.01em;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.cta-band-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}