/* about.css — the "O Firmie" section (#o-nas), redesigned 2026-10-22: brighter, in colour, divided.
   Its own file because main.css is compiled from SCSS. Same font, colours and the animated
   gradient border (--angle, border-wander) as the rest of the site.

     the OSP murals (1924 · 1974 · 2024) as a wide colour banner, with "Made in Poland" and the
     two facts laid over it: 2006 · 140+
     below: the same three paragraphs (word for word — the translations key on them),
     headline + story on the left, who we serve (chips) + the call-out on the right
     on phones: the banner pans slowly across the three doors; the facts overlap its bottom edge  */
.ab { position: relative; max-width: 1240px; margin: clamp(18px, 2.4vw, 26px) auto 0; padding: 0 clamp(16px, 3vw, 28px); }

/* soft colour in the background: a warm and a cool glow */
.ab::before, .ab::after { content: ""; position: absolute; z-index: 0; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.ab::before { width: 46%; height: 60%; left: -6%; top: 26%; background: rgba(242, 201, 76, .22); }
.ab::after  { width: 40%; height: 55%; right: -4%; bottom: -8%; background: rgba(30, 94, 255, .14); }
.ab > * { position: relative; z-index: 1; }

/* the banner: the OSP murals in colour, with the facts laid over it */
.ab-photo { margin: 0; position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 1800 / 589; min-height: 300px;
  box-shadow: 0 22px 60px rgba(11, 13, 16, .16), 0 2px 6px rgba(11, 13, 16, .06); background: #6b6762; }
.ab-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.ab-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(11, 13, 16, .5)); }
.ab-badge { position: absolute; left: clamp(12px, 2vw, 22px); bottom: clamp(12px, 2vw, 20px); z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .94); color: #121416; font: 600 clamp(13px, 1.1vw, 15px)/1 "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18); }
.ab-badge svg { width: 22px; height: 15px; border-radius: 3px; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .25); }
/* the two facts, frosted glass, bottom right of the banner */
.ab-photo .ab-stats { position: absolute; right: clamp(12px, 2vw, 22px); bottom: clamp(12px, 2vw, 20px); z-index: 2;
  display: flex; gap: 12px; }
.ab-photo .ab-stat { min-width: 200px; max-width: 290px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .25); }
.ab-photo .ab-stat--warm { background: linear-gradient(135deg, rgba(255, 246, 219, .92), rgba(255, 251, 234, .88)); }

/* text + tiles */
.ab-grid { margin-top: clamp(28px, 4vw, 48px); }
.ab-copy { display: grid; grid-template-columns: 1.2fr .8fr; column-gap: clamp(26px, 4vw, 56px); align-items: start; }
.ab-lead, .ab-text { grid-column: 1; }
.ab-chips { grid-column: 2; grid-row: 1; align-self: end; }
.ab-call { grid-column: 2; grid-row: 2; align-self: start; }
.ab-lead { margin: 0 0 18px; font: 800 clamp(26px, 3vw, 42px)/1.08 "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: -.03em; color: #0b0d10; text-wrap: balance; }
.ab-lead::after { content: ""; display: block; width: 64px; height: 4px; margin-top: 16px; border-radius: 4px;
  background: linear-gradient(90deg, #d9652b, #f2c94c); }
.ab-text { margin: 0 0 20px; font: 400 clamp(17px, 1.35vw, 20px)/1.55 "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #2a2f38; }
.ab-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.ab-chips li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: #fff;
  border: 1px solid rgba(18, 20, 22, .1); box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
  font: 600 14.5px/1 "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #121416; }
.ab-chips li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, #1e5eff); }
.ab-chips li:nth-child(1) { --dot: #d9652b; } .ab-chips li:nth-child(2) { --dot: #4d7c3a; }
.ab-chips li:nth-child(3) { --dot: #1e5eff; } .ab-chips li:nth-child(4) { --dot: #f2c94c; }
.ab-call { display: flex; align-items: center; gap: 14px; margin: 0; padding: 16px 20px; border-radius: 16px;
  background: linear-gradient(100deg, #fff2e8, #fff8e2); border: 1px solid rgba(217, 101, 43, .25);
  font: 700 clamp(17px, 1.4vw, 21px)/1.3 "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #7a2f0c; }
.ab-call svg { flex: 0 0 auto; width: 30px; height: 30px; }

.ab-stat { position: relative; display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 18px; background: #fff;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .08); }
.ab-stat b { flex: 0 0 auto; font: 800 clamp(30px, 3vw, 44px)/1 "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ab-stat span { font: 500 15px/1.35 "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #4a505b; }
.ab-stat--warm { background: linear-gradient(135deg, #fff6db, #fffbea); } .ab-stat--warm b { color: #b0790a; }
.ab-stat--cool { background: linear-gradient(135deg, #eaf0ff, #f4f7ff); } .ab-stat--cool b { color: #1e5eff; }
.ab-stat--glow b { color: #0b0d10; }
.ab-stat--glow svg { flex: 0 0 auto; width: 34px; height: 34px; }
/* the animated gradient border of the site, on the 140+ tile */
.ab-stat--glow::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2.5px; pointer-events: none;
  background: linear-gradient(var(--angle), #FBDF75 0%, #75A6FB 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
  animation: border-wander 25s linear infinite; }

/* coming into view: a gentle rise, one after another */
.ab-in { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.ab-in.is-in { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .ab-copy { grid-template-columns: 1fr; }
  .ab-chips, .ab-call { grid-column: 1; grid-row: auto; }
  .ab-photo .ab-stat { min-width: 0; }
}
@media (max-width: 640px) {
  /* phones: a taller banner that slowly pans across the three doors; the facts overlap its bottom edge */
  .ab-photo { aspect-ratio: 4 / 3; min-height: 0; border-radius: 16px; overflow: visible; margin-bottom: 64px; }
  .ab-photo picture { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
  .ab-photo::after { border-radius: inherit; }
  .ab-photo img { object-position: 0% 50%; animation: abPan 24s ease-in-out infinite alternate; }
  .ab-badge { top: 12px; bottom: auto; }
  .ab-photo .ab-stats { left: 12px; right: 12px; bottom: -56px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .ab-photo .ab-stat { flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; background: #fff; }
  .ab-photo .ab-stat--warm { background: linear-gradient(135deg, #fff6db, #fffbea); }
  .ab-stat span { font-size: 13px; }
  .ab-stat--glow svg { display: none; }
}
@keyframes abPan { from { object-position: 0% 50%; } to { object-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) {
  .ab-photo img { animation: none; object-position: 50% 50%; }
  .ab-in { opacity: 1; transform: none; transition: none; }
  .ab-stat--glow::before { animation: none; }
}
/* a light white veil over the banner photo (20%), under the badge and the facts */
.ab-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: rgba(255, 255, 255, .2); pointer-events: none; }

/* 641–980 px (small laptops, tablets): the banner was forced ~916 px wide by its minimum height
   (300 px × the wide shape) and ran off the screen, taking the two facts with it.
   Here: a less wide banner that always fits the screen, the facts overlapping its bottom edge
   side by side (like on phones, but number and text next to each other), the badge top left. */
@media (min-width: 641px) and (max-width: 980px) {
  .ab-photo { aspect-ratio: 2 / 1; min-height: 0; overflow: visible; margin-bottom: 64px; }
  .ab-photo picture { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
  .ab-photo::after { border-radius: inherit; }
  .ab-badge { top: 14px; bottom: auto; }
  .ab-photo .ab-stats { left: 14px; right: 14px; bottom: -52px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .ab-photo .ab-stat { min-width: 0; max-width: none; padding: 16px 18px; background: #fff; }
  .ab-photo .ab-stat--warm { background: linear-gradient(135deg, #fff6db, #fffbea); }
}