/*
Theme Name: Magazyn Office
Theme URI: https://magazynoffice.pl/
Description: Motyw potomny Hello Elementor zbudowany pod portal contentowy Magazyn Office. Osiem dzialow, uklad redakcyjny, lekki kod bez buildera na stronach tresciowych.
Author: Redakcja Magazyn Office
Version: 1.0.0
Template: hello-elementor
Text Domain: magazyn-office
*/

/* ==========================================================================
   1. Tokeny
   ========================================================================== */
:root{
  --ink:#111418;
  --ink-2:#39414a;
  --muted:#6c7681;
  --line:#e3e6ea;
  --line-2:#f0f2f4;
  --tint:#f6f7f8;
  --paper:#ffffff;
  --accent:#b3202c;
  --accent-dk:#8c1922;
  --accent-tint:#fdf3f3;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Times New Roman",Times,serif;
  /* Krój tytułów. Szeryf w nagłówkach nad bezszeryfową prozą to układ, który
     czyta się jak gazeta ekonomiczna, ale nie wygląda na archiwalny. Odwrotnie
     niż było wcześniej, bo bezszeryfowy tytuł nad szeryfową prozą to zestaw
     typowy dla starszych serwisów. Wyłącznie kroje systemowe, zero pobierania. */
  --display:"Newsreader",Georgia,"Iowan Old Style","Palatino Linotype",Palatino,serif;

  --max:1220px;
  --measure:720px;
  --gap:32px;
  --radius:3px;
}

/* ==========================================================================
   2. Podstawy
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.18;letter-spacing:-.021em;font-weight:800}
p{margin:0 0 1.1em}
hr{border:0;border-top:1px solid var(--line);margin:40px 0}

.mo-wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.mo-skip{position:absolute;left:-9999px}
.mo-skip:focus{left:8px;top:8px;z-index:999;background:var(--ink);color:#fff;padding:10px 16px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ==========================================================================
   3. Naglowek
   ========================================================================== */
.mo-topbar{background:var(--ink);color:#c6ccd3;font-size:12.5px;letter-spacing:.02em}
.mo-topbar .mo-wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;height:36px}
.mo-topbar .mo-claim{color:#8f98a2}

.mo-masthead{border-bottom:1px solid var(--line);background:var(--paper)}
.mo-masthead .mo-wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:26px;padding-bottom:26px}
.mo-logo{font-size:30px;font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--ink)}
.mo-logo span{font-weight:400;color:var(--muted)}
.mo-logo b{color:var(--accent)}
.mo-logo:hover{color:var(--ink)}
.mo-logo img{max-height:46px;width:auto}

.mo-search-form{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.mo-search-form input[type=search]{border:0;padding:9px 12px;font:inherit;font-size:14px;width:180px;background:var(--paper);color:var(--ink)}
.mo-search-form input[type=search]:focus{outline:none}
.mo-search-form button{border:0;background:var(--tint);color:var(--ink-2);padding:9px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.mo-search-form button:hover{background:var(--accent);color:#fff}

.mo-nav{border-bottom:2px solid var(--ink);background:var(--paper);position:sticky;top:0;z-index:50}
.mo-nav .mo-wrap{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none}
.mo-nav .mo-wrap::-webkit-scrollbar{display:none}
.mo-nav a{
  display:block;white-space:nowrap;padding:13px 14px;
  font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink-2);
  border-bottom:3px solid transparent;margin-bottom:-2px;
}
.mo-nav a:hover{color:var(--accent)}
.mo-nav a.is-active{color:var(--ink);border-bottom-color:var(--accent)}
.mo-nav a:first-child{padding-left:0}

/* ==========================================================================
   4. Kafelki
   ========================================================================== */
.mo-kicker{
  display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent);margin-bottom:9px;
}
.mo-kicker:hover{color:var(--accent-dk)}
.mo-meta{font-size:13px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.mo-meta .sep{color:var(--line)}

.mo-thumb{position:relative;display:block;overflow:hidden;background:var(--tint);aspect-ratio:16/9;margin-bottom:14px}
.mo-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.mo-card:hover .mo-thumb img{transform:scale(1.035)}
.mo-thumb--ph{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#eef0f2,#dfe3e7)}
.mo-thumb--ph span{font-size:34px;font-weight:800;color:#b6bec6;letter-spacing:-.04em}

.mo-card h3{font-size:19px;margin:0 0 8px}
.mo-card p{font-size:14.5px;color:var(--ink-2);margin:0 0 10px;line-height:1.55}

.mo-grid{display:grid;gap:var(--gap)}
.mo-grid--4{grid-template-columns:repeat(4,1fr)}
.mo-grid--3{grid-template-columns:repeat(3,1fr)}
.mo-grid--2{grid-template-columns:repeat(2,1fr)}

.mo-list{list-style:none;margin:0;padding:0}
.mo-list li{padding:14px 0;border-top:1px solid var(--line-2)}
.mo-list li:first-child{border-top:0;padding-top:0}
.mo-list h3{font-size:16.5px;margin:0 0 5px;line-height:1.3}

/* ==========================================================================
   5. Strona glowna
   ========================================================================== */
.mo-hero{padding:38px 0 34px;border-bottom:1px solid var(--line)}
.mo-hero-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:44px}
.mo-lead h2{font-size:40px;line-height:1.1;margin:0 0 14px}
.mo-lead .mo-thumb{aspect-ratio:3/2;margin-bottom:18px}
.mo-lead .mo-excerpt{font-family:var(--serif);font-size:18px;line-height:1.65;color:var(--ink-2);margin:0 0 12px}
/* Kolumna obok tematu wiodacego: jeden kafelek ze zdjeciem, reszta tekstowa.
   Dzieki temu wysokosc kolumny nadaza za tematem wiodacym, zamiast go przerastac. */
.mo-side{display:flex;flex-direction:column;gap:20px}
.mo-side .mo-card{padding-bottom:20px;border-bottom:1px solid var(--line-2)}
.mo-side .mo-card:last-child{border-bottom:0;padding-bottom:0}
.mo-side .mo-card h3{font-size:18px}
.mo-side .mo-thumb{aspect-ratio:16/9;margin-bottom:12px}
.mo-card--txt h3{font-size:17px;line-height:1.32}

.mo-band{padding:42px 0;border-bottom:1px solid var(--line)}
.mo-band--tint{background:var(--tint)}
.mo-band-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:26px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.mo-band-head h2{font-size:22px;margin:0;letter-spacing:-.02em}
.mo-band-head h2 a:hover{color:var(--accent)}
.mo-band-head .mo-more{font-size:13.5px;font-weight:600;color:var(--muted)}
.mo-band-head .mo-more:hover{color:var(--accent)}
.mo-band-desc{margin:-14px 0 24px;color:var(--muted);font-size:15px;max-width:70ch}

.mo-split{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--gap)}

.mo-opinions{background:var(--ink);color:#e7eaed;padding:46px 0}
.mo-opinions .mo-band-head{border-bottom-color:#333c46}
.mo-opinions .mo-band-head h2{color:#fff}
.mo-opinions .mo-band-head .mo-more{color:#98a2ac}
.mo-opinions .mo-kicker{color:#f0a0a6}
.mo-opinions h3{color:#fff}
.mo-opinions a:hover{color:#f0a0a6}
.mo-opinions .mo-meta{color:#8d97a1}
.mo-opinions .mo-list li{border-top-color:#2a323b}

.mo-cta{background:var(--accent-tint);border-top:3px solid var(--accent);padding:38px 0}
.mo-cta-in{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.mo-cta h2{font-size:23px;margin:0 0 6px}
.mo-cta p{margin:0;color:var(--ink-2);font-size:15px}

/* ==========================================================================
   6. Artykul
   ========================================================================== */
.mo-crumbs{font-size:13px;color:var(--muted);padding:18px 0 0}
.mo-crumbs a:hover{color:var(--accent)}
.mo-crumbs span{margin:0 7px;color:var(--line)}

.mo-article{padding:8px 0 56px}
.mo-article-head{max-width:var(--measure);margin:0 auto 26px;padding-top:18px}
.mo-article-head h1{font-size:42px;line-height:1.09;margin:0 0 16px}
.mo-lede{font-family:var(--serif);font-size:21px;line-height:1.6;color:var(--ink-2);margin:0 0 22px}
.mo-byline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.mo-byline strong{color:var(--ink);font-weight:700}

.mo-figure{margin:0 0 30px}
.mo-figure img{width:100%}
.mo-figure figcaption{font-size:12.5px;color:var(--muted);padding:9px 2px 0;border-bottom:1px solid var(--line-2)}

.mo-content{max-width:var(--measure);margin:0 auto;font-family:var(--serif);font-size:19px;line-height:1.75;color:#1b2026}
.mo-content h2{font-family:var(--sans);font-size:27px;margin:1.7em 0 .5em;letter-spacing:-.022em}
.mo-content h3{font-family:var(--sans);font-size:21px;margin:1.5em 0 .45em}
.mo-content a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.mo-content a:hover{color:var(--accent-dk)}
.mo-content ul,.mo-content ol{margin:0 0 1.2em;padding-left:1.3em}
.mo-content li{margin-bottom:.5em}
.mo-content blockquote{
  margin:1.6em 0;padding:4px 0 4px 22px;border-left:3px solid var(--accent);
  font-size:21px;line-height:1.5;color:var(--ink);font-style:normal;
}
.mo-content blockquote p:last-child{margin-bottom:0}
.mo-content figure{margin:1.8em 0}
.mo-content figcaption{font-family:var(--sans);font-size:12.5px;color:var(--muted);padding-top:8px}
.mo-content table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:15px;margin:1.6em 0}
.mo-content th,.mo-content td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.mo-content th{background:var(--tint);font-weight:700}
.mo-content tbody tr:nth-child(even){background:#fafbfb}
.mo-content code{font-size:.88em;background:var(--tint);padding:2px 5px;border-radius:var(--radius)}

.mo-authorbox{max-width:var(--measure);margin:44px auto 0;padding:22px;background:var(--tint);border-left:3px solid var(--ink)}
.mo-authorbox h2{font-size:15px;margin:0 0 6px;letter-spacing:.02em}
.mo-authorbox p{font-size:14.5px;color:var(--ink-2);margin:0}

.mo-related{padding:48px 0;background:var(--tint);border-top:1px solid var(--line)}

/* ==========================================================================
   7. Archiwa, wyszukiwarka, 404
   ========================================================================== */
.mo-page-head{padding:40px 0 26px;border-bottom:2px solid var(--ink);margin-bottom:34px}
.mo-page-head h1{font-size:36px;margin:0 0 10px}
.mo-page-head p{color:var(--muted);font-size:16px;margin:0;max-width:72ch}
.mo-archive{padding-bottom:60px}

.mo-pagination{margin-top:44px;display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.mo-pagination .page-numbers{
  display:block;padding:9px 14px;border:1px solid var(--line);font-size:14px;font-weight:600;color:var(--ink-2);
}
.mo-pagination .page-numbers:hover{border-color:var(--ink);color:var(--ink)}
.mo-pagination .current{background:var(--ink);border-color:var(--ink);color:#fff}

.mo-empty{padding:60px 0 80px;text-align:center;max-width:560px;margin:0 auto}
.mo-empty h1{font-size:64px;margin:0 0 10px;color:var(--accent);letter-spacing:-.04em}
.mo-empty p{color:var(--muted)}
.mo-empty .mo-search-form{justify-content:center;margin:24px auto 30px;max-width:380px}
.mo-empty .mo-search-form input[type=search]{width:100%}

.mo-page{padding:12px 0 64px}
.mo-page .mo-content{margin-top:6px}

/* ==========================================================================
   8. Stopka
   ========================================================================== */
.mo-footer{background:var(--ink);color:#aab3bc;padding:50px 0 26px;font-size:14.5px}
.mo-footer a{color:#dfe4e9}
.mo-footer a:hover{color:#fff}
.mo-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:34px;border-bottom:1px solid #2a323b}
.mo-footer h2{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:#7d8791;margin:0 0 14px;font-weight:700}
.mo-footer ul{list-style:none;margin:0;padding:0}
.mo-footer li{margin-bottom:9px}
.mo-footer .mo-logo{color:#fff;font-size:26px;display:inline-block;margin-bottom:12px}
.mo-footer .mo-about{max-width:42ch;line-height:1.6}
.mo-colophon{padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#79838d}

/* ==========================================================================
   9. Responsywnosc
   ========================================================================== */
@media(max-width:1000px){
  .mo-hero-grid{grid-template-columns:1fr;gap:34px}
  .mo-lead h2{font-size:32px}
  .mo-grid--4{grid-template-columns:repeat(2,1fr)}
  .mo-split{grid-template-columns:1fr}
  .mo-footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  body{font-size:16px}
  .mo-wrap{padding:0 18px}
  .mo-masthead .mo-wrap{padding-top:18px;padding-bottom:18px}
  .mo-masthead .mo-search-form{display:none}
  .mo-logo{font-size:24px}
  .mo-topbar .mo-claim{display:none}
  .mo-grid--4,.mo-grid--3,.mo-grid--2{grid-template-columns:1fr}
  .mo-lead h2{font-size:28px}
  .mo-article-head h1{font-size:30px}
  .mo-lede{font-size:18.5px}
  .mo-content{font-size:18px}
  .mo-content h2{font-size:23px}
  .mo-page-head h1{font-size:27px}
  .mo-footer-grid{grid-template-columns:1fr;gap:28px}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ==========================================================================
   10. Elementy dokladane przez Elementora
   ========================================================================== */
.mo-nota-ai{
  font-family:var(--sans);font-size:13px;line-height:1.55;color:var(--muted);
  border-top:1px solid var(--line);margin-top:34px;padding-top:14px;
}
.mo-topbar-el{background:var(--ink);color:#c6ccd3;font-size:12.5px}
.mo-topbar-el time{color:#c6ccd3}

/* Pasek daty renderuje Elementor, wiec kolory tekstu ustawiamy tu - widzet
   skrotu nie ma wlasnego ustawienia koloru, a domyslny kolor tekstu z zestawu
   jest ciemny i na atramentowym tle znikal. */
#mo-pasek-daty,
#mo-pasek-daty p,
#mo-pasek-daty time,
#mo-pasek-daty a{color:#c6ccd3;font-size:12.5px;letter-spacing:.02em}
#mo-pasek-daty p{margin:0}
#mo-pasek-daty .elementor-widget{margin-bottom:0}
#mo-pasek-daty .elementor-widget{margin-bottom:0}

#mo-winieta .elementor-widget{margin-bottom:0}
#mo-nawigacja .elementor-widget{margin-bottom:0}
#mo-nawigacja .elementor-nav-menu .elementor-item{
  font-weight:600;letter-spacing:-.01em;padding-left:14px;padding-right:14px;
}
#mo-nawigacja .elementor-nav-menu--main .elementor-item:first-child{padding-left:0}

/* Stopka z Elementora - odnosniki i naglowki na ciemnym tle */
.elementor-location-footer{background:var(--ink)}
.elementor-location-footer,
.elementor-location-footer p,
.elementor-location-footer a{color:#aab3bc}
.elementor-location-footer a:hover{color:#fff}
.elementor-location-footer h2{color:#7d8791}
.elementor-location-footer p{line-height:1.9}

/* ==========================================================================
   11. Artykul renderowany przez Elementora
   ========================================================================== */

/* Pasek postepu czytania: cienka kreska pod nawigacja, nie blok. */
#mo-postep .elementor-widget{margin:0}
#mo-postep .elementor-progress-tracker{height:3px!important;border-radius:0!important}
#mo-postep .current-progress{background:var(--accent)!important;border-radius:0!important}
#mo-postep{padding:0!important;line-height:0}

/* Kolumna czytania. Elementor trzyma 1220 px, ale proza czyta sie do 720 px. */
/* Elementor 4 nie renderuje juz wrappera .elementor-widget-container,
   wiec kolumne czytania ustawiamy na samych widzetach. */
#mo-okruszki .elementor-widget,
#mo-art-naglowek .elementor-widget,
#mo-art-tresc .elementor-widget{max-width:var(--measure);margin-left:auto;margin-right:auto}
#mo-art-media .elementor-widget{max-width:960px;margin-left:auto;margin-right:auto}

#mo-okruszki{font-size:13px;color:var(--muted)}
#mo-okruszki a:hover{color:var(--accent)}

#mo-art-naglowek .elementor-widget:not(:last-child){margin-bottom:14px}
#mo-art-naglowek .mo-kicker{margin-bottom:0}
#mo-art-naglowek .elementor-widget-post-info{
  border-top:1px solid var(--line);padding-top:13px;
}
#mo-art-naglowek .elementor-post-info__item{font-size:13.5px;color:var(--muted)}
#mo-art-naglowek .elementor-post-info__item--type-author{color:var(--ink);font-weight:700}
#mo-art-naglowek .elementor-widget-shortcode:last-child{
  font-size:13.5px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:13px;margin-top:-6px;
}

/* Zdjecie glowne: proporcja redakcyjna zamiast pelnej wysokosci pliku. */
#mo-art-media img{width:100%;aspect-ratio:16/9;object-fit:cover}
#mo-art-media figcaption,
#mo-art-media .widget-image-caption{
  font-size:12.5px;color:var(--muted);padding:9px 2px 0;text-align:left;
  border-bottom:1px solid var(--line-2);
}

/* Proza artykulu */
#mo-art-tresc .elementor-widget-theme-post-content{
  font-family:var(--serif);font-size:19px;line-height:1.75;color:#1b2026;
}
#mo-art-tresc h2{font-family:var(--sans);font-size:27px;margin:1.6em 0 .5em;letter-spacing:-.022em}
#mo-art-tresc h3{font-family:var(--sans);font-size:21px;margin:1.4em 0 .45em}
#mo-art-tresc a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
#mo-art-tresc blockquote{
  margin:1.6em 0;padding:4px 0 4px 22px;border-left:3px solid var(--accent);
  font-size:21px;line-height:1.5;color:var(--ink);
}
#mo-art-tresc table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:15px;margin:1.6em 0}
#mo-art-tresc th,#mo-art-tresc td{border:1px solid var(--line);padding:10px 12px;text-align:left}
#mo-art-tresc th{background:var(--tint);font-weight:700}
#mo-art-tresc .elementor-share-buttons{margin-top:22px}

/* ==========================================================================
   Blok dzialu na stronie glownej ([mo_wpisy])

   Naglowek dzialu jest tu elementem nawigacyjnym, a nie ozdoba: gruba kreska
   nad nazwa oddziela bloki mocniej niz sam odstep, wiec strona glowna czyta sie
   jako kilka osobnych dzialow, a nie jako jedna dluga lista.
   ========================================================================== */
.mo-blok{margin:0 0 44px}
.mo-blok__belka{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  border-top:2px solid var(--ink);padding-top:10px;margin-bottom:18px;
}
.mo-blok__tytul{
  margin:0;font-family:var(--sans);font-size:20px;font-weight:800;
  letter-spacing:-.02em;color:var(--ink);
}
.mo-blok__wiecej{
  font-family:var(--sans);font-size:13px;font-weight:600;color:var(--muted);
  text-decoration:none;white-space:nowrap;
}
.mo-blok__wiecej:hover,.mo-blok__wiecej:focus{color:var(--accent);text-decoration:underline}

.mo-blok__lista{display:grid;gap:26px}
.mo-blok--siatka .mo-blok__lista{grid-template-columns:repeat(4,1fr)}
.mo-blok--lista .mo-blok__lista{grid-template-columns:1fr;gap:18px}

/* Uklad listy: miniatura z boku. Przy jednej kolumnie kafelek pionowy zjadalby
   ekran, a czytelnik i tak skanuje tu tytuly, nie zdjecia. */
/* Kafelek ma czworo dzieci (miniatura, nadtytul, tytul, metryka), wiec sama
   siatka dwukolumnowa rozrzuca je na przemian miedzy kolumny - tytul ladowal
   pod miniatura na 132 px szerokosci. Miniatura obejmuje wiec trzy wiersze
   pierwszej kolumny, a cala reszta idzie do drugiej. */
.mo-blok--lista .mo-card{
  display:grid;grid-template-columns:132px 1fr;column-gap:16px;row-gap:2px;
  align-items:start;padding-bottom:18px;border-bottom:1px solid var(--line);
}
.mo-blok--lista .mo-card > .mo-thumb{grid-column:1;grid-row:1 / span 3}
.mo-blok--lista .mo-card > :not(.mo-thumb){grid-column:2}
.mo-blok--lista .mo-card:last-child{border-bottom:0;padding-bottom:0}
.mo-blok--lista .mo-card img{aspect-ratio:16/10;object-fit:cover;width:100%;height:auto}
.mo-blok--lista .mo-card h3{margin:.2em 0 .25em;font-size:18px;line-height:1.25}

.mo-blok .mo-card h3{
  font-family:var(--sans);font-weight:700;letter-spacing:-.015em;margin:.45em 0 .3em;
}
.mo-blok .mo-card h3 a{color:var(--ink);text-decoration:none}
.mo-blok .mo-card h3 a:hover,.mo-blok .mo-card h3 a:focus{color:var(--accent)}
.mo-blok .mo-card img{transition:opacity .2s}
.mo-blok .mo-card a:hover img{opacity:.88}

/* Sekcja bez ani jednego kafelka znika razem z wlasnym odstepem.

   Skrot `[mo_wpisy]` nie renderuje nic, gdy dzial jest pusty, ale sekcja
   Elementora ma wlasne wypelnienie i zostawala jako pusty pas na 90-150 px.
   Przy portalu, ktory dopiero sie zapelnia, takich pasow bylo kilka pod rzad
   i strona wygladala na zepsuta, a nie na mloda. */
#mo-najnowsze:not(:has(.mo-card)),
#mo-para-gospodarka:not(:has(.mo-card)),
#mo-para-praca-kadry:not(:has(.mo-card)),
#mo-para-technologie:not(:has(.mo-card)),
#mo-biuro:not(:has(.mo-card)),
#mo-opinie:not(:has(.mo-card)){display:none!important}

/* W sekcji dwukolumnowej pusta kolumna znika, a ta z trescia zajmuje calosc -
   inaczej blok wisialby na polowie ekranu z dziura obok. */
[id^="mo-para-"] > .elementor-container > .elementor-column:not(:has(.mo-card)){display:none}
/* `!important` jest tu konieczne: Elementor wypisuje szerokosc kolumny do
   wlasnego arkusza selektorem o wyzszej sile, wiec bez tego kolumna zostawala
   na polowie ekranu, a obok byla pusta przestrzen. */
[id^="mo-para-"] > .elementor-container:has(> .elementor-column:not(:has(.mo-card))) > .elementor-column:has(.mo-card){width:100%!important}

/* Dzial Opinie stoi na ciemnym tle, wiec kolory tekstu trzeba odwrocic -
   inaczej tytuly znikaja. */
#mo-opinie .mo-blok__belka{border-top-color:#fff}
#mo-opinie .mo-blok__tytul{color:#fff}
#mo-opinie .mo-blok__wiecej{color:rgba(255,255,255,.72)}
#mo-opinie .mo-blok .mo-card h3 a{color:#fff}
#mo-opinie .mo-blok .mo-card h3 a:hover{color:#fff;text-decoration:underline}
#mo-opinie .mo-blok .mo-card p{color:rgba(255,255,255,.78)}
#mo-opinie .mo-blok .mo-card time,
#mo-opinie .mo-blok .mo-card .mo-meta{color:rgba(255,255,255,.6)}

@media(max-width:1000px){
  .mo-blok--siatka .mo-blok__lista{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .mo-blok--siatka .mo-blok__lista{grid-template-columns:1fr}
  .mo-blok--lista .mo-card{grid-template-columns:104px 1fr;gap:12px}
  .mo-blok--lista .mo-card h3{font-size:16px}
}

/* Aparat redakcyjny: spis tresci, data aktualizacji, nota o autorze.
   Spis celowo nie jest ozdobny - ma byc skanowany w sekunde i zniknac z pola
   widzenia, a nie konkurowac z leadem o uwage. */
.mo-spis{
  margin:1.8em 0;padding:16px 20px;background:var(--tint);
  border-left:3px solid var(--ink);font-family:var(--sans);
}
.mo-spis__tytul{
  margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
}
.mo-spis__lista{margin:0;padding-left:1.2em}
.mo-spis__lista li{margin:4px 0;font-size:15px;line-height:1.45}
.mo-spis__lista a{color:var(--ink-2);text-decoration:none}
.mo-spis__lista a:hover,.mo-spis__lista a:focus{color:var(--accent);text-decoration:underline}

/* Kotwice: naglowek nie moze chowac sie pod przyklejonym paskiem dzialow. */
#mo-art-tresc h2[id]{scroll-margin-top:96px}

.mo-zaktualizowano{color:var(--muted);font-size:13px;font-family:var(--sans)}

.mo-autor{
  margin:2.4em 0 0;padding:20px 0 0;border-top:2px solid var(--ink);
  font-family:var(--sans);
}
.mo-autor__nazwa{margin:0 0 6px;font-size:17px;font-weight:700;letter-spacing:-.01em}
.mo-autor__nazwa a{color:var(--ink);text-decoration:none}
.mo-autor__nazwa a:hover{color:var(--accent)}
.mo-autor__opis{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)}
.mo-autor__wiecej{margin:8px 0 0;font-size:14px}
.mo-autor__wiecej a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* Teksty powiazane */
#mo-art-powiazane .elementor-post__thumbnail{aspect-ratio:16/9}
#mo-art-powiazane .elementor-post__title{font-size:19px;line-height:1.25;letter-spacing:-.015em}
#mo-art-powiazane .elementor-post__meta-data{font-size:13px;color:var(--muted)}
#mo-art-powiazane .elementor-heading-title{
  padding-bottom:12px;border-bottom:2px solid var(--ink);margin-bottom:24px;
}

/* ==========================================================================
   12. Widzet wpisow Elementora w oprawie redakcyjnej
   ========================================================================== */

/* Domyslnie tytuly wychodza jako podkreslone odnosniki w kolorze linku.
   Sprowadzamy je do naszej typografii, zachowujac strukture widzetu. */
.elementor-posts .elementor-post{margin-bottom:0}
.elementor-posts .elementor-post__title{
  font-family:var(--sans);font-size:19px;line-height:1.26;letter-spacing:-.015em;
  font-weight:800;margin:0 0 8px;
}
.elementor-posts .elementor-post__title a{color:var(--ink);text-decoration:none}
.elementor-posts .elementor-post__title a:hover{color:var(--accent)}
.elementor-posts .elementor-post__meta-data{
  font-size:13px;font-weight:400;color:var(--muted);margin:0;letter-spacing:0;
}
.elementor-posts .elementor-post__excerpt p{
  font-size:14.5px;line-height:1.55;color:var(--ink-2);margin:0 0 8px;
}
.elementor-posts .elementor-post__thumbnail{
  aspect-ratio:16/9;overflow:hidden;background:var(--tint);
}
.elementor-posts .elementor-post__thumbnail img{
  width:100%;height:100%;object-fit:cover;transition:transform .5s ease;
}
.elementor-posts .elementor-post:hover .elementor-post__thumbnail img{transform:scale(1.035)}
.elementor-posts .elementor-post__thumbnail__link{margin-bottom:13px}
.elementor-posts .elementor-post__card{border:0;box-shadow:none;background:transparent}

/* Belka dzialu: nazwa dzialu z kreska, jak w ukladzie drukowanym */
#mo-najnowsze > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-heading,
#mo-biuro > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-heading,
#mo-opinie > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-heading,
[id^="mo-para-"] .elementor-widget-heading{
  border-bottom:2px solid var(--ink);padding-bottom:11px;margin-bottom:22px;
}
.elementor-widget-heading .elementor-heading-title a{color:inherit;text-decoration:none}
.elementor-widget-heading .elementor-heading-title a:hover{color:var(--accent)}

/* Temat wiodacy */
/* Reguly tematu wiodacego celuja w JEGO widzet, nie w cala sekcje - inaczej
   wygrywaly specyficznoscia z kafelkami w kolumnie obok. */
#mo-hero-glowny .elementor-post__title{font-size:38px;line-height:1.1;letter-spacing:-.025em}
#mo-hero-glowny .elementor-post__excerpt p{
  font-family:var(--serif);font-size:18px;line-height:1.65;
}
/* Kolumna obok tematu wiodacego. Celujemy w identyfikatory widzetow, bo
   selektor po pozycji kolumny nie trafial i kafelki dziedziczyly rozmiar
   tytulu tematu wiodacego. */
#mo-hero-obok-a .elementor-post__title,
#mo-hero-obok-b .elementor-post__title{font-size:18px;line-height:1.3}
#mo-hero-obok-b{border-top:1px solid var(--line-2);padding-top:18px;margin-top:18px}
#mo-hero-obok-a .elementor-post,
#mo-hero-obok-b .elementor-post{
  padding-bottom:16px;border-bottom:1px solid var(--line-2);margin-bottom:16px;
}
#mo-hero-obok-b .elementor-post:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}

/* Dzialy parami: miniatura z boku, tytul obok.
   Sam uklad "thumbnail-left" w Elementorze nie zwezal miniatury - zostawala
   na pelna szerokosc kolumny, wiec wiersz skladamy flexem. */
[id^="mo-para-"] .elementor-post{
  display:flex;align-items:flex-start;gap:16px;
}
[id^="mo-para-"] .elementor-post__thumbnail__link{
  flex:0 0 160px;width:160px;margin:0;
}
[id^="mo-para-"] .elementor-post__text{flex:1 1 auto;min-width:0}
[id^="mo-para-"] .elementor-post{
  padding-bottom:16px;border-bottom:1px solid var(--line-2);margin-bottom:16px;
}
[id^="mo-para-"] .elementor-post:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
[id^="mo-para-"] .elementor-post__title{font-size:17px;line-height:1.3}

/* Opinie na ciemnym tle */
#mo-opinie .elementor-heading-title{color:#fff}
#mo-opinie .elementor-widget-heading{border-bottom-color:#333c46}
#mo-opinie .elementor-post__title a{color:#fff}
#mo-opinie .elementor-post__title a:hover{color:#f0a0a6}
#mo-opinie .elementor-post__meta-data{color:#8d97a1}
#mo-opinie .elementor-post{
  border-left:2px solid #2a323b;padding-left:16px;
}

/* Zaproszenie do newslettera */
#mo-newsletter .elementor-heading-title{margin-bottom:6px}
#mo-newsletter p{margin:0;color:var(--ink-2);font-size:15px}
#mo-newsletter .elementor-button{
  font-weight:700;letter-spacing:.01em;border-radius:var(--radius);
}

/* Archiwum dzialu */
#mo-arch-naglowek .elementor-widget-archive-description{color:var(--muted)}
#mo-arch-lista .elementor-post__title{font-size:19px}
#mo-arch-lista .elementor-pagination{
  margin-top:40px;display:flex;gap:6px;justify-content:center;flex-wrap:wrap;
}
#mo-arch-lista .page-numbers{
  padding:9px 14px;border:1px solid var(--line);font-size:14px;font-weight:600;color:var(--ink-2);
}
#mo-arch-lista .page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff}

@media(max-width:700px){
  #mo-hero .elementor-posts .elementor-post__title{font-size:27px}
  [id^="mo-para-"] .elementor-post__thumbnail__link{width:110px;margin-right:12px}

  /* Tabela o czterech kolumnach nie miesci sie na telefonie i wypycha cala
     strone w bok (zmierzone na artykule o placy minimalnej: 419 px tabeli
     w kolumnie o szerokosci 355 px, 94 px przewijania poziomego calej strony).
     Tabela przewija sie wiec wewnatrz siebie, a strona zostaje nieruchoma. */
  #mo-art-tresc table,
  .mo-content table{
    display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
    max-width:100%;font-size:14px;
  }
  #mo-art-tresc table thead,#mo-art-tresc table tbody,
  .mo-content table thead,.mo-content table tbody{
    display:table;width:100%;min-width:max-content;
  }
  #mo-art-tresc th,#mo-art-tresc td,
  .mo-content th,.mo-content td{padding:8px 10px}
}

/* Na waskim ekranie miniatura z boku nie miesci sie obok tytulu - wiersz
   przechodzi na uklad pionowy, zamiast wypychac tresc poza ekran. */
@media(max-width:560px){
  [id^="mo-para-"] .elementor-post{display:block}
  [id^="mo-para-"] .elementor-post__thumbnail__link{
    width:100%;flex:none;margin-bottom:12px;
  }
}

/* ==========================================================================
   Krój tytułów: Newsreader (SIL OFL, pliki w katalogu `fonts/` motywu)

   Dwa podzbiory w jednej grubości, razem 39 KB. `font-display:swap` znaczy,
   że tekst jest widoczny od pierwszej klatki krojem systemowym i podmienia się
   po doczytaniu - nigdy nie ma pustego miejsca w tytule. `unicode-range`
   sprawia, że plik z polskimi znakami pobiera się tylko wtedy, gdy na stronie
   faktycznie występują. Szczegóły i licencja: fonts/LICENCJA-I-ZRODLO.txt
   ========================================================================== */
@font-face{
  font-family:"Newsreader";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("fonts/newsreader-700-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Newsreader";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("fonts/newsreader-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ==========================================================================
   Warstwa identyfikacji wizualnej

   Zalozenie: szeryf w tytulach, bezszeryfowa proza, bezszeryfowe elementy
   interfejsu (nadtytuly, metryka, nawigacja). To jest srodek miedzy dziennikiem
   ekonomicznym a serwisem technologicznym: powaga bierze sie z kroju tytulow
   i z grubych kresek, lekkosc z przestrzeni i z bezszeryfowej tresci.

   Sekcja stoi na koncu arkusza swiadomie - nadpisuje wczesniejsze deklaracje
   i typografie zestawu Elementora, wiec zmiana jezyka wizualnego to jedno
   miejsce, a nie polowanie po calym pliku.
   ========================================================================== */

/* --- tytuly ---------------------------------------------------------------- */
#mo-art-naglowek h1,
#mo-arch-naglowek h1,
.mo-content h1,
.mo-blok .mo-card h3,
.mo-blok__tytul,
#mo-hero .elementor-post__title,
#mo-najnowsze .elementor-post__title,
#mo-art-powiazane .elementor-post__title,
.mo-card h3{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:-.012em;
}

/* Tytul glowny artykulu: szeryf znosi wiekszy stopien bez krzyku, wiec mozna
   dac mu wiecej miejsca niz przy kroju bezszeryfowym. */
#mo-art-naglowek h1{font-size:46px;line-height:1.12;letter-spacing:-.018em}
#mo-hero .elementor-post__title{font-size:40px;line-height:1.14;letter-spacing:-.018em}
#mo-hero #mo-hero-obok-a .elementor-post__title,
#mo-hero #mo-hero-obok-b .elementor-post__title{font-size:20px;line-height:1.26;letter-spacing:-.008em}
.mo-blok__tytul{font-size:21px;letter-spacing:-.01em}
.mo-blok .mo-card h3{font-size:19px;line-height:1.3}
.mo-blok--lista .mo-card h3{font-size:18px}

@media(max-width:900px){
  #mo-art-naglowek h1{font-size:34px}
  #mo-hero .elementor-post__title{font-size:29px}
}

/* --- proza ----------------------------------------------------------------- */
/* Tresc idzie krojem bezszeryfowym: przy tabelach, kwotach i sygnaturach
   przepisow czyta sie to na ekranie lepiej niz Georgia, a kontrast wobec
   szeryfowego tytulu buduje hierarchie bez dodatkowych ozdob. */
#mo-art-tresc p,
#mo-art-tresc li,
#mo-art-tresc td,
#mo-art-tresc th,
.mo-content p,
.mo-content li{
  font-family:var(--sans);
  font-size:18px;
  line-height:1.72;
  color:var(--ink-2);
}
/* Waga 700 jest pinowana wszedzie, gdzie uzywamy kroju tytulow: w motywie siedzi
   tylko ten jeden plik. Przy zadaniu wagi 800 przegladarka nie zglasza bledu,
   tylko dopogrubia kroj sama, a takie litery sa rozmyte na brzegach. */
#mo-art-tresc h2{font-family:var(--display);font-weight:700;font-size:28px;letter-spacing:-.012em}
#mo-art-tresc h3{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.008em}
.mo-content h2,.mo-content h3{font-family:var(--display);font-weight:700;letter-spacing:-.012em}
#mo-arch-naglowek h1,.mo-content h1{font-weight:700}

/* Lead: wiekszy, ciemniejszy, bez szeryfa - ma byc mostem miedzy tytulem
   a trescia, a nie drugim tytulem. */
.mo-lede{
  font-family:var(--sans);font-size:21px;line-height:1.5;
  color:var(--ink);font-weight:400;letter-spacing:-.005em;
}

/* --- elementy interfejsu --------------------------------------------------- */
.mo-kicker,
.mo-blok__wiecej,
.mo-meta,
#mo-art-naglowek .elementor-post-info,
#mo-nawigacja .elementor-item{font-family:var(--sans)}

.mo-kicker{
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);text-decoration:none;
}
.mo-kicker:hover{text-decoration:underline}

/* --- reakcja na wskazanie -------------------------------------------------- */
/* Kafelek ma odpowiadac na kursor, ale bez podskakiwania - to magazyn,
   nie sklep. Zmienia sie kolor tytulu i lekko przyciemnia zdjecie. */
.mo-card a,.mo-blok .mo-card a{transition:color .15s ease}
.mo-card .mo-thumb{display:block;overflow:hidden}
.mo-card .mo-thumb img{transition:transform .35s ease,opacity .2s ease}
.mo-card:hover .mo-thumb img{transform:scale(1.03)}

/* --- pasek postepu czytania ------------------------------------------------ */
/* Widzet rysowal szary tor na 20 px wysokosci, ktory na gorze artykulu wygladal
   jak pusty element do uzupelnienia. Tor jest teraz niewidoczny, zostaje sama
   czerwona kreska pokazujaca, ile tekstu zostalo. */
#mo-postep{padding:0!important}
#mo-postep .elementor-scrolling-tracker{
  background:transparent!important;height:3px!important;
}
#mo-postep .current-progress{background:var(--accent)!important;height:3px!important}
#mo-postep .current-progress-percentage{display:none}

/* Widoczny znacznik ogniskowania - bez niego nawigacja klawiatura jest zgadywaniem. */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}

/* Uwaga: style naglowka na telefonie siedza w zestawie Elementora
   (Ustawienia witryny > Wlasny CSS), a nie tutaj - patrz CLAUDE.md portalu. */