/* =========================================================
  🧩 WHAT I DO - SERVICES
========================================================= */
.sec-am-solutions { padding:var(--section-padding) 0; position:relative; background: var(--section-bg); }
.sec-am-solutions .wrapped { flex-direction:column; gap:var(--section-gap); padding:0 var(--wrapper-padding); width:100%; max-width:var(--width-wrap-1400); } 
.sec-am-solutions .wrapped .section-content { display:flex; flex-direction:row; align-items:stretch; width:100%; }

/* =========================================================
  🧩 SECTION HEADER
========================================================= */
.sec-am-solutions .section-header { width:100%; margin:auto; max-width:720px; }
.sec-am-solutions .section-header .header-container { margin:auto; }
.sec-am-solutions .section-header h2,
.sec-am-solutions .section-header .lead { text-align:center; margin:auto; width:100%; max-width:700px; }
.sec-am-solutions .section-header .small-title { text-align:center; margin:auto; }

/* =========================================================
  🧩 BOX LIST
========================================================= */
.sec-am-solutions .box-list { width:100%; }
.sec-am-solutions .box-list .box-list-wrapper { display:grid; grid-template-columns:repeat(3, 1fr); margin:auto; justify-items: center; }

/* =========================================================
  🧩 BOX LAYOUT
========================================================= */
.sec-am-solutions .box { max-width:360px; width:100%; }
.sec-am-solutions.section .box h3 { font-size:calc(1.20 * var(--fs-h5)); color:var(--section-text-heading); } 
.sec-am-solutions .box .box-inner { display:flex; gap:var(--elements-gap); flex-direction:column; border-width:0; }
.sec-am-solutions .box .article-content { display:flex; gap:var(--elements-gap); flex-direction:column; color:var(--section-text-secondary) }
.sec-am-solutions .box .article-content .article-text { display:flex; gap:var(--elements-gap-s); flex-direction:column; color:var(--section-text-secondary); }
.sec-am-solutions .box .icon-container { display:flex; height:64px; width:64px; border:0 solid var(--color-black-100); border-radius:var(--space-16); background:color-mix(in srgb, var(--base-color-black) 5%, transparent); justify-content:center; align-items:center; }
.sec-am-solutions .box .icon-container svg { height:32px; width:32px; }
.sec-am-solutions .box .article-footer { display:none; }

/* =========================================================
  🧩 ICO - BACK COLORS
========================================================= */
.sec-am-solutions .icon-container.black { background:color-mix(in srgb, var(--base-color-black) 5%, transparent); }
.sec-am-solutions .icon-container.orange { background:color-mix(in srgb, var(--base-color-orange) 8%, transparent); }
.sec-am-solutions .icon-container.red { background:color-mix(in srgb, var(--base-color-red) 6%, transparent); }
.sec-am-solutions .icon-container.blue { background:color-mix(in srgb, var(--base-color-blue) 8%, transparent); }
.sec-am-solutions .icon-container.green { background:color-mix(in srgb, var(--base-color-green) 9%, transparent); }
.sec-am-solutions .icon-container.magenta { background:color-mix(in srgb, var(--base-color-magenta) 8%, transparent); }

/* =========================================================
  🧩 ICO - FOREGROUND COLORS
========================================================= */
.sec-am-solutions .box .icon-container.black svg { color:var(--base-color-black); }
.sec-am-solutions .box .icon-container.orange svg { color:var(--base-color-orange); }
.sec-am-solutions .box .icon-container.red svg { color:var(--base-color-red); }
.sec-am-solutions .box .icon-container.blue svg { color:var(--base-color-blue); }
.sec-am-solutions .box .icon-container.green svg { color:var(--base-color-green); }
.sec-am-solutions .box .icon-container.magenta svg { color:var(--base-color-magenta); }


/* =========================================================
  🧩 RWD — 1px → 640px (MOBILE) — 1 kolumna
========================================================= */
@media (max-width:640px) {

  .sec-am-solutions .box-list .box-list-wrapper { 
    grid-template-columns:1fr; 
    max-width: 400px;
    gap: var(--small-box-gap);
  }

  .sec-am-solutions .box { 
    width:100%; 
    max-width:100%; 
  }
}

/* =========================================================
  🧩 RWD — 641px → 1023px (TABLET) — 2 kolumny
========================================================= */
@media (min-width:641px) and (max-width:1023px) {

  .sec-am-solutions .box-list .box-list-wrapper {  
    grid-template-columns:repeat(2, minmax(0, 1fr));
    max-width: 700px;
    gap: var(--small-box-gap);
  }

  .sec-am-solutions .box { 
    width:100%; 
    max-width:100%; 
  }
}

/* =========================================================
  🧩 RWD — 1024px → 1199px (SMALL DESKTOP)
========================================================= */
@media (min-width:1024px) and (max-width:1199px) {

  /* 3 kolumny, ale BEZ max-width na boxach */
  .sec-am-solutions .box-list .box-list-wrapper { 
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:calc(var(--section-gap)) calc(var(--section-gap));
    max-width:1100px;     /* NOWOŚĆ → zapobiega przycinaniu przy 1152px */
    margin:0 auto;        /* centrowanie */
  }

  .sec-am-solutions .box { 
    width:100%; 
    max-width:100%;       /* box nie blokuje zwężenia kolumny */
  }
}

/* =========================================================
  🧩 RWD — 1200px+ (DESKTOP)
========================================================= */
@media (min-width:1200px) {

  .sec-am-solutions .box-list .box-list-wrapper { 
    grid-template-columns:repeat(3, 1fr); 
    gap:calc(var(--section-gap)) calc(var(--section-gap));
    max-width:1300px; 
    margin:0 auto;
  }

  .sec-am-solutions .box { 
    width:100%;
    max-width:360px;  /* tu dopiero może być twardy limit */
  }
}