/* ============================================================================
   MTOPrograms — mobile-o-mnie.css v314
   Mobilna strona O mnie: kolejność kafelków, baner graficzny i układ oparty o mobile-layout.css.
   ============================================================================ */

@media screen and (max-width:1199px){
  .about-page{padding:0!important;background:transparent!important;}

  .about-canvas{
    width:var(--m-page-w)!important;
    max-width:var(--m-page-w)!important;
    margin:var(--m-header-content-gap) auto 0!important;
    padding:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
    position:static!important;
    background:transparent!important;
  }

  .about-title-box,
  .about-hero-banner,
  .about-small-title,
  .about-section-title,
  .about-feature,
  .about-description-box{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    margin:0!important;
    box-sizing:border-box!important;
    background:var(--m-panel)!important;
    border:1px solid var(--m-border)!important;
    border-radius:var(--m-radius)!important;
    box-shadow:var(--m-shadow)!important;
    color:var(--m-text)!important;
    overflow:hidden!important;
  }

  .about-title-box,
  .about-small-title,
  .about-section-title{
    min-height:64px!important;
    padding:12px 16px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
  }

  .about-title-box h1,
  .about-small-title h2,
  .about-section-title h2{
    margin:0!important;
    padding:0!important;
    color:var(--m-text)!important;
    font-family:var(--m-font)!important;
    font-size:clamp(24px,6.5vw,34px)!important;
    font-weight:900!important;
    line-height:1.12!important;
    letter-spacing:.1px!important;
  }

  .about-small-title{
    min-height:58px!important;
    padding:12px 68px!important;
  }

  .about-small-title img{
    position:absolute!important;
    left:auto!important;
    right:16px!important;
    top:50%!important;
    width:auto!important;
    max-width:46px!important;
    max-height:34px!important;
    margin:0!important;
    object-fit:contain!important;
    transform:translateY(-50%)!important;
  }

  .about-hero-banner{
    min-height:0!important;
    aspect-ratio:1920/500!important;
    background-color:#000!important;
    background-image:url("/assets/img/about/electronics-workbench-hero.webp")!important;
    background-size:cover!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
  }

  .about-feature,
  .about-description-box{
    padding:14px!important;
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
    text-align:left!important;
  }

  .about-feature::before,
  .about-description-box::before,
  .about-title-box::before,
  .about-small-title::before,
  .about-section-title::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:46px;
    background:var(--m-card-top-glow);
    pointer-events:none;
  }

  .about-feature-image{
    position:relative!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
    background:#000!important;
    border:1px solid var(--m-media-border)!important;
    border-radius:var(--m-radius-small)!important;
  }

  .about-feature-image img{
    width:100%!important;
    height:auto!important;
    max-height:210px!important;
    margin:0 auto!important;
    object-fit:contain!important;
    object-position:center!important;
  }

  .about-feature-text,
  .about-description-box{
    font-family:"Funnel Display",Tahoma,Geneva,sans-serif!important;
    font-size:15px!important;
    line-height:1.45!important;
    font-weight:500!important;
    color:var(--m-muted)!important;
  }

  .about-feature-text{
    position:static!important;
    width:100%!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  .about-feature-text p,
  .about-description-box p{margin:0 0 8px!important;color:var(--m-muted)!important;}
  .about-feature-text p.about-list-spacer{height:5px!important;min-height:0!important;margin:0!important;padding:0!important;font-size:0!important;line-height:5px!important;color:transparent!important;}
  .about-feature-text ul,
  .about-description-box ul{margin:6px 0 0!important;padding-left:20px!important;color:var(--m-muted)!important;}
  .about-feature-text li,
  .about-description-box li{margin:0 0 4px!important;color:var(--m-muted)!important;}
  .about-description-box h2{margin:0 0 8px!important;color:var(--m-text)!important;font-family:var(--m-font)!important;font-size:18px!important;line-height:1.25!important;text-align:center!important;}
  .about-feature-stm .about-feature-text p.about-subline{
    display:block!important;
    margin:-2px 0 6px 22px!important;
    padding:0!important;
    width:calc(100% - 22px)!important;
    color:var(--m-muted)!important;
    font-size:13px!important;
    line-height:1.35!important;
  }

  /* Odstępy mobilne:
     - mały odstęp tylko w parach: tytuł/baner -> jego opis lub grafika,
     - normalny odstęp między osobnymi sekcjami. */
  .about-canvas{
    --m-about-section-gap:var(--m-gap)!important;
    --m-about-pair-gap:var(--m-inner-gap)!important;
  }

  .about-title-box,
  .about-hero-banner,
  .about-small-title,
  .about-section-title,
  .about-feature{margin-bottom:var(--m-about-section-gap)!important;}

  .about-title-box,
  .about-title-stm,
  .about-title-esp,
  .about-title-win,
  .about-title-pcb,
  .about-section-title{margin-bottom:var(--m-about-pair-gap)!important;}

  .about-description-box{margin-bottom:0!important;}

  /* Kolejność mobilna: O mnie, baner graficzny, potem ustalone kafelki. */
  .about-title-box{order:1;}
  .about-hero-banner{order:2;display:block!important;}
  .about-title-stm{order:3;}
  .about-feature-stm{order:4;}
  .about-title-esp{order:5;}
  .about-feature-esp{order:6;}
  .about-title-win{order:7;}
  .about-feature-win{order:8;}
  .about-title-pcb{order:9;}
  .about-feature-pcb{order:10;}
  .about-section-title{order:11;}
  .about-description-box{order:12;}
}

/* v314 — uporządkowanie sekcji opisowej "Czym się zajmuję" w mobile */
@media screen and (max-width:1199px){
  .about-description-box{
    gap:0!important;
    padding:18px 18px 20px!important;
  }

  .about-description-box h2{
    margin:0 0 16px!important;
    font-size:18px!important;
    line-height:1.22!important;
    text-align:center!important;
  }

  .about-description-box p.about-text-spacer{
    display:none!important;
  }

  .about-description-box p.about-text-paragraph{
    margin:0 0 12px!important;
    font-size:15px!important;
    line-height:1.42!important;
    font-weight:600!important;
    color:var(--m-muted)!important;
  }

  .about-description-box p.about-text-paragraph:last-of-type{
    margin-bottom:14px!important;
  }

  .about-description-box ul{
    margin:4px 0 0!important;
    padding-left:22px!important;
  }

  .about-description-box li{
    margin:0 0 6px!important;
    font-size:15px!important;
    line-height:1.35!important;
    font-weight:600!important;
  }
}