/* Wersja robocza (new2.proop.pl): podstrony pięciu obszarów z centrali (sandbox_obszary.py). Kolory wyłącznie var(--…) z :root site.css. */

/* hero E100: grafika obszaru z labu (E016–E020) obok tekstu; klasa .e0NN daje jej kolory i ruch, styl pasa wyłączony */
.e100 .e100__media.obs-art { max-width: 600px; padding: 0; background: none; overflow: visible; }
.e100 .obs-t1 { display: block; }
/* nagłówki podstron obszarów są zdaniami (U15), dłuższymi niż „Transformacja IT.”: szersza kolumna tekstu, mniejszy stopień */
@media (min-width: 1000px) {
  .e100.obs-hero .e100__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
  .e100.obs-hero .e100__title { font-size: clamp(34px, 3.3vw, 50px); }
}

/* linki z pozycji zakresu i pod kaflami: do Transformacji IT, innych obszarów, cennika i realizacji */
.obs-link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin-top: 6px; color: var(--blue);
  font: 600 14.5px/1.3 var(--text); text-decoration: underline 1px var(--mx-blue-40-t); text-underline-offset: 4px; overflow-wrap: anywhere; }
.obs-link:hover { text-decoration-color: var(--orange); }
.obs-link svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* cennik i dowód: kafle z cennik.json albo z realizacji Akwadrat (źródło pod każdą liczbą) */
.obs-tiles { background: var(--white); border-top: 1px solid var(--line-light); }
.obs-notes { display: grid; gap: 6px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.obs-notes li { position: relative; padding-left: 16px; }
.obs-notes li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.obs-go { margin: 22px 0 0; }
.obs-go .obs-link { font-size: 16px; }

/* sześć obszarów na dole podstrony (linki krzyżowe); bieżący obszar bez linku; pełne rzędy: 1, 2 albo 3 kolumny */
.obs-areas { background: var(--white); border-top: 1px solid var(--line-light); }
.obs-areas__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.obs-area { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 14px; height: 100%; min-height: 76px;
  padding: 14px 16px; border: 1px solid var(--line-light); border-radius: 16px; background: var(--white); color: var(--navy); text-decoration: none; }
a.obs-area:hover { border-color: var(--blue); }
a.obs-area:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.obs-area > svg { width: 18px; height: 18px; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.obs-area__ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--blue-soft); }
.obs-area__ico svg { width: 20px; height: 20px; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.obs-area--main { border-color: var(--orange); }
.obs-area--main .obs-area__ico { background: var(--grad-accent); }
.obs-area--main .obs-area__ico svg { stroke: var(--navy-900); }
.obs-area__txt { display: grid; gap: 3px; min-width: 0; }
.obs-area__name { font: 700 16.5px/1.3 var(--display); overflow-wrap: break-word; }
.obs-area__cap { font: 500 12.5px/1.45 var(--mono); color: var(--blue); overflow-wrap: break-word; }
.obs-area--here { background: var(--paper); }
.obs-area__here { padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-light); background: var(--white); font: 600 11.5px/1.3 var(--text); color: var(--muted); white-space: nowrap; }
@media (min-width: 640px) { .obs-areas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .obs-areas__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 380px) {
  .obs-area { grid-template-columns: 38px minmax(0, 1fr); }
  .obs-area > svg, .obs-area__here { display: none; }
}