/* DESKTOP-O-MNIE.CSS v251 — czysty desktop strony /o-mnie/. */

@media screen and (min-width:1200px) {
  :root {
    --d-about-container:var(--d-container,1200px);
    --d-about-title-height:92px;
    --d-about-hero-height:306px;
    --d-about-small-title-height:78px;
    --d-about-column-width:570px;
    --d-about-column-gap:60px;
    --d-about-feature-tall-height:657px;
    --d-about-feature-short-height:500px;
    --d-about-image-height:247px;
    --d-about-text-top:267px;
    --d-about-short-text-top:254px;
    --d-about-description-min-height:352px;
    --d-about-title-bg:var(--d-page-title-bg);
    --d-about-panel-bg:var(--d-page-panel-bg);
    --d-about-card-bg:rgba(4,9,16,.94);
    --d-about-border:var(--d-page-border);
    --d-about-text:var(--d-page-text);
    --d-about-muted:var(--d-page-muted);
    --d-about-radius:var(--d-page-radius);
    --d-about-shadow:var(--d-page-shadow);
    --d-about-shadow-strong:var(--d-page-shadow);
    --d-about-font:var(--d-page-font);
  }

  body.about-body main.about-page {
    display:block;
    margin:0;
    padding-top:var(--d-header-to-content-gap,24px);
    padding-bottom:0;
    background:transparent;
    color:var(--d-about-text);
    font-family:var(--d-about-font);
  }

  body.about-body main.about-page *,
  body.about-body main.about-page *::before,
  body.about-body main.about-page *::after {
    box-sizing:border-box;
  }

  body.about-body .about-canvas {
    width:var(--d-about-container);
    margin:0 auto;
    padding:0;
  }

  body.about-body .about-title-box,
  body.about-body .about-section-title {
    position:relative;
    width:var(--d-about-container);
    height:var(--d-about-title-height);
    min-height:var(--d-about-title-height);
    margin:0;
    padding:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:var(--d-about-title-bg);
    border:1px solid var(--d-about-border);
    border-radius:var(--d-about-radius);
    box-shadow:var(--d-about-shadow);
    color:var(--d-about-text);
  }

  body.about-body .about-title-box::before,
  body.about-body .about-section-title::before,
  body.about-body .about-small-title::before {
    content:"";
    position:absolute;
    inset:-1px;
    background:radial-gradient(circle at 50% 0, rgba(47,140,255,.13), transparent 46%);
    pointer-events:none;
  }

  body.about-body .about-title-box::after,
  body.about-body .about-section-title::after,
  body.about-body .about-small-title::after {
    content:none;
  }

  body.about-body .about-title-box h1,
  body.about-body .about-section-title h2,
  body.about-body .about-small-title h2 {
    position:relative;
    z-index:1;
    margin:0;
    color:var(--d-about-text);
    font-family:var(--d-about-font);
    font-weight:800;
    text-align:center;
  }

  body.about-body .about-title-box h1,
  body.about-body .about-section-title h2 {
    font-size:42px;
    line-height:50px;
    letter-spacing:-.4px;
  }

  body.about-body .about-small-title h2 {
    font-size:26px;
    line-height:31px;
    letter-spacing:-.2px;
  }

  body.about-body .about-hero-banner {
    width:var(--d-about-container);
    height:var(--d-about-hero-height);
    margin-top:var(--d-gap-kafelek-opis,12px);
    overflow:hidden;
    background-color:var(--d-about-card-bg);
    background-image:url("/assets/img/about/electronics-workbench-hero.webp");
    background-size:100% 100%;
    background-position:50% 50%;
    background-repeat:no-repeat;
    border:1px solid var(--d-about-border);
    border-radius:var(--d-about-radius);
    box-shadow:var(--d-about-shadow-strong);
  }

  body.about-body .about-small-title {
    position:relative;
    width:var(--d-about-column-width);
    height:var(--d-about-small-title-height);
    min-height:var(--d-about-small-title-height);
    margin-top:var(--d-gap-kafelek-kafelek,24px);
    padding:20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    vertical-align:top;
    overflow:hidden;
    background:var(--d-about-title-bg);
    border:1px solid var(--d-about-border);
    border-radius:var(--d-about-radius);
    box-shadow:var(--d-about-shadow);
    color:var(--d-about-text);
  }

  body.about-body .about-title-stm,
  body.about-body .about-title-win,
  body.about-body .about-feature-stm,
  body.about-body .about-feature-win {
    margin-left:0;
  }

  body.about-body .about-title-esp,
  body.about-body .about-title-pcb,
  body.about-body .about-feature-esp,
  body.about-body .about-feature-pcb {
    margin-left:var(--d-about-column-gap);
  }

  body.about-body .about-feature {
    position:relative;
    width:var(--d-about-column-width);
    margin-top:var(--d-gap-kafelek-opis,12px);
    padding:20px;
    display:inline-block;
    vertical-align:top;
    overflow:hidden;
    background:var(--d-about-panel-bg);
    border:1px solid var(--d-about-border);
    border-radius:var(--d-about-radius);
    box-shadow:var(--d-about-shadow);
    color:var(--d-about-muted);
  }

  body.about-body .about-feature-stm,
  body.about-body .about-feature-esp {
    height:var(--d-about-feature-tall-height);
  }

  body.about-body .about-feature-win,
  body.about-body .about-feature-pcb {
    height:var(--d-about-feature-short-height);
  }

  body.about-body .about-feature-image {
    height:var(--d-about-image-height);
    display:flex;
    align-items:flex-start;
    justify-content:center;
    overflow:hidden;
  }

  body.about-body .about-feature-image img {
    display:block;
    width:auto;
    height:auto;
    max-width:450px;
    object-fit:contain;
  }

  body.about-body .about-feature-stm .about-feature-image img,
  body.about-body .about-feature-win .about-feature-image img {
    width:450px;
  }

  body.about-body .about-feature-stm .about-feature-image img,
  body.about-body .about-feature-esp .about-feature-image img {
    max-height:234px;
  }

  body.about-body .about-feature-win .about-feature-image img,
  body.about-body .about-feature-pcb .about-feature-image img {
    max-height:221px;
  }

  body.about-body .about-feature-esp .about-feature-image img {
    height:234px;
  }

  body.about-body .about-feature-pcb .about-feature-image img {
    height:221px;
  }

  body.about-body .about-feature-text {
    position:absolute;
    left:20px;
    right:20px;
    top:var(--d-about-text-top);
    bottom:auto;
    height:390px;
    padding:0;
    overflow:visible;
  }

  body.about-body .about-feature-win .about-feature-text,
  body.about-body .about-feature-pcb .about-feature-text {
    top:var(--d-about-short-text-top);
    height:232px;
  }

  body.about-body .about-feature-text,
  body.about-body .about-feature-text p,
  body.about-body .about-feature-text li,
  body.about-body .about-description-box,
  body.about-body .about-description-box p,
  body.about-body .about-description-box li {
    color:var(--d-about-muted);
    font-family:var(--d-about-font);
    font-size:17px;
    line-height:24px;
    font-weight:400;
    text-align:left;
  }

  body.about-body .about-feature-text p,
  body.about-body .about-description-box p,
  body.about-body .about-description-box h2 {
    margin:0;
    padding:0;
  }

  body.about-body .about-feature-text ul,
  body.about-body .about-description-box ul {
    margin:0;
    padding-left:30px;
    list-style-position:outside;
    list-style-type:disc;
  }

  body.about-body .about-feature-text li,
  body.about-body .about-description-box li {
    margin:0;
    padding:0;
  }

  body.about-body .about-feature-text .about-subline {
    margin:0 0 0 30px;
    padding:0;
    color:var(--d-about-muted);
    font-family:var(--d-about-font);
    font-size:17px;
    line-height:24px;
    font-weight:400;
  }

  body.about-body .about-section-title {
    margin-top:var(--d-gap-kafelek-kafelek,24px);
  }

  body.about-body .about-description-box {
    width:var(--d-about-container);
    min-height:var(--d-about-description-min-height);
    margin-top:var(--d-gap-kafelek-opis,12px);
    margin-left:0;
    padding:20px;
    background:var(--d-about-panel-bg);
    border:1px solid var(--d-about-border);
    border-radius:var(--d-about-radius);
    box-shadow:var(--d-about-shadow);
    overflow:hidden;
  }

  body.about-body .about-description-box h2 {
    color:var(--d-about-text);
    font-family:var(--d-about-font);
    font-size:17px;
    line-height:24px;
    font-weight:400;
  }

  body.about-body .about-description-box strong {
    font-weight:700;
  }

  body.about-body .about-logo-stm,
  body.about-body .about-esp-icon,
  body.about-body .about-win-icon,
  body.about-body .about-kicad-logo {
    position:absolute;
    z-index:2;
    object-fit:contain;
    pointer-events:none;
  }

  body.about-body .about-logo-stm {
    left:456px;
    top:0;
    width:99px;
    height:78px;
  }

  body.about-body .about-esp-icon {
    right:var(--d-page-radius);
    top:11px;
    width:55px;
    height:55px;
  }

  body.about-body .about-win-icon {
    right:var(--d-page-radius);
    top:11px;
    width:56px;
    height:55px;
  }

  body.about-body .about-kicad-logo {
    right:var(--d-page-radius);
    top:13px;
    width:127px;
    height:55px;
  }

  body.about-body .reveal,
  body.about-body .reveal.reveal-top,
  body.about-body .reveal.reveal-bottom {
    opacity:0;
    visibility:visible;
    transform:none;
    transition:opacity 2s ease;
    will-change:opacity;
  }

  body.about-body .reveal.visible {
    opacity:1;
    visibility:visible;
    transform:none;
  }
}

/* v338: białe nagłówki funkcji oraz ciaśniejszy odstęp do treści. */
@media screen and (min-width:1200px) {
  body.about-body .about-feature-text > p:first-child > strong {
    color:#fff;
  }

  body.about-body .about-feature-text > .about-list-spacer {
    line-height:20px;
  }
}