/* ============================================================
   O NAS — założyciele, zespół, memy
   Zastępuje poprzedni about.css w całości.
   ============================================================ */

.about-page { background: var(--navy); color: var(--paper); }

/* --- Wspólny szkielet sekcji --- */

.about-section { position: relative; overflow: hidden; }
.about-section--navy { background: var(--navy); color: var(--paper); }
.about-section--paper { background: var(--paper); color: var(--ink); }

.about-founders { padding: 168px 0 126px; }
.about-crew { padding: 126px 0 132px; }
.about-memes { padding: 126px 0 140px; }

.about-head {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(340px, .8fr);
  gap: 90px;
  align-items: end;
  margin-bottom: 58px;
}
.about-head h1,
.about-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(44px, 4.3vw, 66px);
  line-height: .98;
  letter-spacing: -.045em;
  font-weight: 750;
}
.about-head__lead { margin: 0 0 7px; font-size: 17px; line-height: 1.7; }
.about-section--navy .about-head__lead { color: rgba(251,248,241,.68); }
.about-section--paper .about-head__lead { color: #587083; }

/* --- Założyciele --- */

.about-founders__list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.about-founder {
  display: grid;
  grid-template-columns: minmax(210px, .78fr) minmax(0, 1fr);
  gap: 42px;
  align-items: center;
  min-height: 580px;
  padding: 52px 56px;
  color: white;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.about-founder--tomek { background: var(--red); border-radius: 34% 5% 5% 5% / 18% 5% 5% 5%; }
.about-founder--robert { background: var(--blue); border-radius: 5% 34% 5% 5% / 5% 18% 5% 5%; }

.about-founder__photo {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: rgba(6,24,37,.24);
  border-radius: 36px 4px 4px 4px;
}
.about-founder--robert .about-founder__photo { border-radius: 4px 36px 4px 4px; }
.about-founder__photo img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center top;
}
.about-founder__photo span {
  font-family: var(--font-display);
  font-size: 84px;
  font-weight: 800;
  line-height: 1;
  color: rgba(255,255,255,.3);
}

.about-founder__copy h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(48px, 4vw, 70px);
  line-height: .92;
  letter-spacing: -.05em;
  font-weight: 750;
}
.about-founder__role { margin: 14px 0 0; font-size: 16px; font-weight: 700; opacity: .78; }
.about-founder__copy p:not(.about-founder__role) {
  max-width: 460px;
  margin: 22px 0 0;
  font-size: 16px;
  line-height: 1.72;
  opacity: .82;
}

/* --- Zespół --- */

.about-crew__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 18px; }

.about-member {
  display: flex;
  flex-direction: column;
  background: white;
  color: var(--ink);
  border-radius: 30px 4px 4px 4px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(16,47,73,.09);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.about-member:nth-child(even) { border-radius: 4px 30px 4px 4px; }

.about-member__photo {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgba(16,47,73,.08);
}
.about-member__photo img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center top;
}
.about-member__photo span {
  font-family: var(--font-display);
  font-size: 58px;
  font-weight: 800;
  line-height: 1;
  color: rgba(16,47,73,.18);
}

.about-member__copy { display: flex; flex-direction: column; flex: 1; padding: 28px 30px 32px; }
.about-member__copy h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.035em;
  font-weight: 750;
}
.about-member__subject { margin: 10px 0 0; color: #587083; font-size: 14px; font-weight: 700; }
.about-member__copy p:not(.about-member__subject) {
  margin: 16px 0 0;
  color: #587083;
  font-size: 15px;
  line-height: 1.65;
}

/* --- Memy --- */

.about-memes__wall { columns: 3; column-gap: 18px; }
.about-memes__wall > * {
  display: inline-block;
  width: 100%;
  margin: 0 0 18px;
  break-inside: avoid;
}

.about-meme {
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  border-radius: 26px 4px 4px 4px;
  box-shadow: 0 18px 40px rgba(3,18,28,.3);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.about-meme:nth-child(even) { border-radius: 4px 26px 4px 4px; }
.about-meme img { width: 100%; height: auto; max-width: none; }
.about-meme figcaption { padding: 16px 20px 20px; color: #587083; font-size: 14px; line-height: 1.55; }

.about-meme__slot {
  display: grid;
  place-items: center;
  border: 1.5px dashed rgba(251,248,241,.3);
  background: rgba(251,248,241,.04);
  border-radius: 26px 4px 4px 4px;
  color: rgba(251,248,241,.45);
  font-size: 12px;
}

/* --- Ruch --- */

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .about-founder:hover { transform: translateY(-6px); box-shadow: 0 32px 64px rgba(3,18,28,.32); }
  .about-member:hover { transform: translateY(-6px); box-shadow: 0 26px 52px rgba(16,47,73,.16); }
  .about-meme:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(3,18,28,.38); }
}

/* --- Responsywność --- */

@media (max-width: 1100px) {
  .about-head { grid-template-columns: minmax(360px, 1fr) minmax(300px, .8fr); gap: 54px; }
  .about-founders__list { grid-template-columns: 1fr; }
  .about-founder { min-height: 440px; grid-template-columns: minmax(240px, .5fr) minmax(0, 1fr); }
  .about-memes__wall { columns: 2; }
}

@media (max-width: 820px) {
  .about-founders { padding: 124px 0 94px; }
  .about-crew { padding: 94px 0 100px; }
  .about-memes { padding: 94px 0 105px; }
  .about-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 42px; }
  .about-founder { padding: 38px 34px; min-height: 0; }
}

@media (max-width: 520px) {
  .about-founders { padding: 112px 0 84px; }
  .about-founder {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px 24px 30px;
    border-radius: 24% 5% 5% 5% / 12% 5% 5% 5%;
  }
  .about-founder--robert { border-radius: 5% 24% 5% 5% / 5% 12% 5% 5%; }
  .about-founder__photo { aspect-ratio: 4 / 3; }
  .about-founder__copy h2 { font-size: 46px; }
  .about-crew__grid { grid-template-columns: 1fr; }
  .about-memes__wall { columns: 1; }
}