/* Szablon devpage „Dziennik” – serwis informacyjny w stylu Morning News (Foxiz). Własny kod, czcionki systemowe (bez Google Fonts – RODO).
   Przebudowa pod inną domenę: w polu „własny CSS” domeny nadpisz tokeny, np. <style>:root{--brand:#0b5d3b;--accent:#d97706}</style>.
   Logo stoi na ciemnym tle (nagłówek i stopka) – domena potrzebuje logo w jasnej wersji. */
:root {
  --brand: #000098;       /* niebieski nagłówka jak we wzorze */
  --navy: #031934;        /* stopka, aktywna pozycja menu */
  --title: #09365e;       /* granat tytułów */
  --accent: #e3121a;      /* czerwień wzoru #f51416 przyciemniona: na bieli i z białym tekstem 4,9:1 */
  --yellow: #ffdc39;
  --muted: #5d6673;       /* meta; na bieli 5,9:1 */
  --line: #e6e8ec;
  --bg: #fff;
  --soft: #f3f5f8;
  --wrap: 1272px;         /* 1240 px treści jak we wzorze + marginesy */
  --r: 9px;
  --sec-pad: 36px;
  --gap: 22px;
  --side: 300px;
  --head: "Inter Tight", Inter, "Segoe UI", Roboto, Arial, sans-serif;
  --cond: "Roboto Condensed", "Arial Narrow", "Segoe UI", Roboto, Arial, sans-serif;
  --body: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: #1b2430; font: 400 15px/1.65 var(--body); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
h1, h2, h3 { font-family: var(--head); font-weight: 800; color: var(--title); margin: 0; letter-spacing: -.01em; }
a:hover h2, a:hover h3, h2 a:hover, h3 a:hover { color: var(--accent); }
.mn-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.mn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mn-cat { display: inline-block; font: 700 11px/1.3 var(--cond); text-transform: uppercase; letter-spacing: .02em; color: var(--accent); }
.mn-meta { display: block; font: 400 12px/1.4 var(--cond); color: var(--muted); margin-top: 6px; }
.mn-img { display: block; overflow: hidden; border-radius: var(--r); background: var(--soft); }
.mn-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
a:hover .mn-img img, .mn-img:hover img { transform: scale(1.04); }
.mn-banner { max-width: var(--wrap); margin: 16px auto; padding: 0 16px; text-align: center; }
.mn-banner:empty, .mn-banner:not(:has(*)) { display: none; }
.mn-banner img { margin: 0 auto; }

/* Nagłówek: niebieski pas z logo i menu + czerwony pasek */
.mn-head { background: var(--brand); color: #fff; position: sticky; top: 0; z-index: 50; }
.mn-head .mn-wrap { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.mn-logo img { max-height: 40px; width: auto; }
.mn-nav ul { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mn-nav li a { display: block; padding: 7px 11px; border-radius: 5px; font: 700 14px/20px var(--head); color: #fff; white-space: nowrap; }
.mn-nav li:has(> a[href="/"]) a, .mn-nav li a:hover { background: var(--navy); color: #fff; }  /* jak „Home” we wzorze */
.mn-burger { display: none; }
.mn-burger-btn { display: none; cursor: pointer; font: 700 14px/1 var(--head); color: #fff; padding: 12px 0; min-height: 44px; margin-left: auto; }
.mn-bar { background: var(--accent); color: #fff; }
.mn-bar .mn-wrap { display: flex; align-items: center; min-height: 30px; font: 700 12px/1 var(--cond); }

/* Strona główna: czołówka w trzech kolumnach */
.mn-hero { max-width: var(--wrap); margin: 26px auto 0; padding: 0 16px 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); gap: 28px; border-bottom: 1px solid var(--line); }
.mn-hero__center { grid-column: 2; grid-row: 1; min-width: 0; }
/* Lewa kolumna nie wyznacza wysokości czołówki (contain: size) – wypełnia wysokość środka, a zdjęcia kafli zwężają się, żeby trzy kolumny kończyły się na jednym poziomie */
.mn-hero__left { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 18px; min-width: 0; contain: size; }
.mn-hero__left .mn-sm { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.mn-hero__left .mn-sm .mn-img { flex: 1 1 auto; min-height: 60px; aspect-ratio: auto; }
.mn-hero__right { grid-column: 3; grid-row: 1; min-width: 0; display: flex; flex-direction: column; }
.mn-hero__right .mn-most { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }  /* koniec listy na poziomie kolumn obok */
/* Pod listą „Najczęściej czytane” kolejne wpisy z czołówki, żeby kolumna nie kończyła się pustym miejscem */
.mn-more { margin-top: 18px; }
.mn-more .mn-ttl { margin-bottom: 4px; }
.mn-mi { display: grid; grid-template-columns: minmax(0, 1fr) 66px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mn-mi b { font: 800 13px/1.35 var(--head); color: var(--title); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mn-mi:hover b { color: var(--accent); }
.mn-mi img { width: 66px; height: 50px; object-fit: cover; border-radius: 7px; }
.mn-mi .mn-cat { display: block; margin-bottom: 2px; }
.mn-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.mn-chips li:has(> a[href="/"]) { display: none; }
.mn-chips a { display: block; padding: 7px 12px; border-radius: 6px; background: var(--soft); font: 700 13px/1.2 var(--head); color: var(--title); }
.mn-chips a:hover { background: var(--accent); color: #fff; }
.mn-hero__right .mn-banner { padding: 0; margin: 18px 0 0; }
.mn-big .mn-img { aspect-ratio: 3 / 2; }
.mn-big .mn-cat { margin-top: 14px; }
.mn-big h2 { font-size: 32px; line-height: 1.18; margin-top: 6px; }
.mn-sm .mn-img { aspect-ratio: 16 / 10; }
.mn-sm .mn-cat { margin-top: 10px; }
.mn-sm h3 { font-size: 16px; line-height: 1.3; margin-top: 4px; }
.mn-hrow { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: center; padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--line); }
.mn-hrow .mn-img { aspect-ratio: 4 / 3; }
.mn-hrow h3 { font-size: 16px; line-height: 1.3; margin-top: 4px; }
/* Najczęściej czytane: numerowana lista z miniaturą (pozycje „na czasie”) */
.mn-ttl { display: flex; align-items: center; gap: 6px; font: 800 19px/1.2 var(--head); color: var(--title); margin: 0 0 14px; }
.mn-ttl::after { content: "//"; color: var(--accent); font-style: italic; letter-spacing: -2px; }
.mn-most { counter-reset: mn; }
.mn-tr { counter-increment: mn; display: grid; grid-template-columns: 28px minmax(0, 1fr) 66px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mn-tr:nth-of-type(n+11) { display: none; }  /* lista do 10 pozycji */
.mn-tr::before { content: counter(mn); width: 28px; height: 28px; border-radius: 6px; background: var(--accent); color: #fff; font: 800 15px/28px var(--head); text-align: center; }
.mn-tr b { font: 800 13px/1.35 var(--head); color: var(--title); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mn-tr:hover b { color: var(--accent); }
.mn-tr img { width: 66px; height: 50px; object-fit: cover; border-radius: 7px; }
.mn-most:not(:has(a)) { display: none; }

/* Układ treść + panel boczny */
.mn-main { display: grid; grid-template-columns: minmax(0, 1fr) var(--side); gap: 36px; margin-top: var(--sec-pad); margin-bottom: var(--sec-pad); }
.mn-main > main { min-width: 0; }
.mn-aside { min-width: 0; display: flex; flex-direction: column; gap: 30px; }

/* Sekcje kategorii */
.mn-sec + .mn-sec { margin-top: var(--sec-pad); padding-top: var(--sec-pad); border-top: 1px solid var(--line); }
.mn-sec__title { display: flex; align-items: center; gap: 6px; font: 800 20px/1.2 var(--head); margin: 0 0 16px; }
.mn-sec__title::after { content: "//"; color: var(--accent); font-style: italic; letter-spacing: -2px; }
.mn-sec__grid { display: grid; gap: var(--gap); align-items: start; }
.mn-sec__grid:has(> .mn-card) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mn-sec__grid:has(> .mn-tall) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mn-sec__grid:has(> .mn-row) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
/* Karty w rzędzie dzielą wiersze siatki (subgrid): kategoria, tytuł, zajawka i autor stoją w tej samej linii mimo różnej długości tytułów */
.mn-tall, .mn-card { display: grid; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.mn-tall { grid-row: span 5; }
.mn-card { grid-row: span 4; }
.mn-tall .mn-meta, .mn-card .mn-meta { align-self: end; }
.mn-sec__grid:has(> .mn-ov) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Karta (sekcje „poziome”, kategoria, powiązane) */
.mn-card .mn-img { aspect-ratio: 16 / 10; margin-bottom: 10px; }
.mn-card h3 { font-size: 15px; line-height: 1.35; margin-top: 4px; }
/* Wysoka karta (sekcje „własne” – Wyróżnione) */
.mn-tall .mn-img { aspect-ratio: 4 / 5; margin-bottom: 10px; }
.mn-tall h3 { font-size: 19px; line-height: 1.25; margin-top: 4px; }
.mn-tall p { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Kafle z tytułem na zdjęciu (sekcje „suwak” – Właśnie dodane): pierwszy na całą szerokość */
.mn-ov { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: var(--navy); color: #fff; }
.mn-ov img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.mn-ov:hover img { transform: scale(1.04); }
.mn-ov::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(3,25,52,.92) 0%, rgba(3,25,52,.4) 50%, rgba(3,25,52,0) 80%); }
.mn-ov__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; z-index: 1; }
.mn-ov .mn-cat { color: #fff; background: var(--accent); padding: 2px 7px; border-radius: 3px; }
.mn-ov h3 { color: #fff; font-size: 16px; line-height: 1.3; margin-top: 8px; }
.mn-ov .mn-meta { color: rgba(255,255,255,.85); }
.mn-ov p { display: none; }
.mn-ov:hover, .mn-ov:hover h3 { color: #fff; }
.mn-sec__grid > .mn-ov:first-child { grid-column: 1 / -1; aspect-ratio: 21 / 8; }
.mn-sec__grid > .mn-ov:first-child .mn-ov__body { max-width: 60%; padding: 26px; }
.mn-sec__grid > .mn-ov:first-child h3 { font-size: 28px; }
.mn-sec__grid > .mn-ov:first-child p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 8px 0 0; font-size: 14px; color: rgba(255,255,255,.9); }
/* Wiersz z miniaturą (sekcje „pionowe” – Więcej wiadomości) */
.mn-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.mn-row .mn-img { aspect-ratio: 3 / 2; }
.mn-row h3 { font-size: 15px; line-height: 1.35; margin-top: 4px; }

/* Panel boczny */
.mn-widget__title { display: flex; align-items: center; gap: 6px; font: 800 18px/1.2 var(--head); color: var(--title); margin: 0 0 12px; }
.mn-widget__title::after { content: "//"; color: var(--accent); font-style: italic; letter-spacing: -2px; }
.mn-widget ul { list-style: none; margin: 0; padding: 0; }
.mn-widget li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.mn-witem { display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: 12px; align-items: center; }
.mn-witem img { width: 72px; height: 54px; object-fit: cover; border-radius: 7px; grid-column: 2; grid-row: 1; }
.mn-witem b, .mn-wnum b { font: 800 13px/1.35 var(--head); color: var(--title); }
.mn-witem:hover b, .mn-wnum a:hover b { color: var(--accent); }
.mn-widget ul:has(.mn-wnum) { counter-reset: mnw; }
.mn-wnum { counter-increment: mnw; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; }
.mn-wnum::before { content: counter(mnw); width: 26px; height: 26px; border-radius: 6px; background: var(--accent); color: #fff; font: 800 13px/26px var(--head); text-align: center; }
.mn-widget li:has(.mn-wbig) { border-bottom: 0; }
.mn-wbig { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; color: #fff; }
.mn-wbig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mn-wbig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(3,25,52,.9), rgba(3,25,52,0) 65%); }
.mn-wbig b { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 1; font: 800 14px/1.35 var(--head); }
.mn-wbig:hover { color: #fff; }

/* Artykuł */
.mn-ahead { margin: 0 0 22px; }
.mn-ahead h1 { font-size: 34px; line-height: 1.18; margin: 8px 0 10px; }
.mn-ahead .mn-meta { font-size: 13px; }
.mn-ahead .mn-img { margin-top: 18px; aspect-ratio: 16 / 9; }
.mn-content { font-size: 16px; line-height: 1.8; }
.mn-content > p:first-of-type::first-letter { float: left; font: 800 62px/.85 var(--head); color: var(--title); margin: 6px 12px 0 0; }
.mn-content h2 { font-size: 24px; line-height: 1.25; margin: 30px 0 12px; }
.mn-content h3 { font-size: 19px; line-height: 1.3; margin: 24px 0 10px; }
.mn-content p { margin: 0 0 16px; }
.mn-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.mn-content ul, .mn-content ol { padding-left: 22px; margin: 0 0 16px; }
.mn-content li + li { margin-top: 6px; }
.mn-content blockquote { margin: 28px 0; text-align: center; font: 800 20px/1.45 var(--head); color: var(--title); }
.mn-content blockquote::before { content: "“"; display: block; font: 800 60px/.6 Georgia, serif; color: var(--accent); margin-bottom: 10px; }
.mn-content table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; display: block; overflow-x: auto; }
.mn-content th, .mn-content td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.mn-content th { background: var(--soft); }
/* Zdjęcia w treści: obok tekstu; !important – stare wpisy mają rozmiar w style="" */
.mn-content img { float: left; width: 40% !important; max-width: 340px; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); margin: 6px 24px 14px 0; }  /* z lewej – prośba Kamila */
.mn-content :is(h1, h2, h3, h4) img { float: none; display: block; margin: 0 0 12px; }
.mn-content::after { content: ""; display: block; clear: both; }
/* Oznaczenie wpisu sponsorowanego („Reklama”): obrazek bezpośrednio w treści, na końcu */
.mn-content > img { float: none; clear: both; display: block; width: auto !important; max-width: 120px; max-height: 30px; aspect-ratio: auto; object-fit: contain; border-radius: 0; margin: 24px 0 0; }
.mn-pn { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin: 30px 0; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mn-pn a { display: block; font: 800 15px/1.35 var(--head); color: var(--title); }
.mn-pn a:hover { color: var(--accent); }
.mn-pn span { display: block; font: 700 11px/1.4 var(--cond); text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.mn-pn__next { text-align: right; grid-column: 2; }
.mn-related .mn-sec__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Stopka granatowa */
.mn-foot { background: var(--navy); color: #c8d3e0; margin-top: 20px; }
.mn-foot > .mn-wrap { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; padding-top: 42px; padding-bottom: 32px; }
.mn-flogo img { max-height: 40px; width: auto; margin-bottom: 14px; }
.mn-foot p { margin: 0; font-size: 13px; line-height: 1.6; }
.mn-ftitle { font: 800 15px/1.2 var(--head) !important; color: #fff !important; margin: 0 0 14px !important; }
.mn-foot ul { list-style: none; margin: 0; padding: 0; }
.mn-foot li + li { margin-top: 12px; }
.mn-fitem { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: center; color: #fff; }
.mn-fitem img { width: 56px; height: 44px; object-fit: cover; border-radius: 6px; }
.mn-fitem b { display: block; font: 700 13px/1.35 var(--head); }
.mn-fitem small { display: block; font-size: 12px; color: #9fb0c4; margin-top: 2px; }
.mn-foot a:hover, .mn-fitem:hover { color: var(--yellow); }
.mn-fcats li + li { margin-top: 8px; }
.mn-fcats a { font-size: 13px; }
.mn-copy { background: var(--navy); border-top: 1px solid rgba(255,255,255,.12); padding: 16px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 24px; font-size: 12px; color: #9fb0c4; }
.mn-copy ul { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
.mn-copy a:hover { color: var(--yellow); }

@media (max-width: 1100px) {
  .mn-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
  .mn-hero__right { grid-column: 1 / -1; grid-row: 2; }
  .mn-hero__right .mn-most { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .mn-sec__grid:has(> .mn-card), .mn-sec__grid:has(> .mn-tall) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mn-foot > .mn-wrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 991px) {
  .mn-main { grid-template-columns: 1fr; }
  .mn-burger-btn { display: block; }
  .mn-head .mn-wrap { flex-wrap: wrap; gap: 0 16px; }
  .mn-nav { order: 3; width: 100%; display: none; }
  .mn-head:has(.mn-burger:checked) .mn-nav { display: block; }
  .mn-nav ul { flex-direction: column; padding-bottom: 8px; }
  .mn-nav li a { padding: 12px 6px; border-radius: 0; background: none !important; border-top: 1px solid rgba(255,255,255,.15); }
}
@media (max-width: 767px) {
  :root { --sec-pad: 28px; }
  .mn-hero { grid-template-columns: 1fr; }
  .mn-hero__center, .mn-hero__left, .mn-hero__right { grid-column: 1; grid-row: auto; }
  .mn-hero__left { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; contain: none; }
  .mn-hero__left .mn-sm { display: block; }
  .mn-hero__left .mn-sm .mn-img { aspect-ratio: 16 / 10; }
  .mn-most, .mn-hero__right .mn-most { display: block; }
  .mn-big h2, .mn-ahead h1 { font-size: 26px; }
  .mn-sec__grid:has(> .mn-row), .mn-related .mn-sec__grid { grid-template-columns: 1fr; }
  .mn-sec__grid:has(> .mn-card), .mn-sec__grid:has(> .mn-tall), .mn-sec__grid:has(> .mn-ov) { grid-template-columns: 1fr 1fr; gap: 14px; }
  .mn-sec__grid > .mn-ov:first-child { aspect-ratio: 4 / 3; }
  .mn-sec__grid > .mn-ov:first-child .mn-ov__body { max-width: none; padding: 16px; }
  .mn-sec__grid > .mn-ov:first-child h3 { font-size: 21px; }
  .mn-row { grid-template-columns: 110px minmax(0, 1fr); }
  .mn-content img { float: none; width: 100% !important; max-width: none; margin: 14px 0; }
  .mn-content > img { width: auto !important; max-width: 120px; margin: 24px 0 0; }
  .mn-foot > .mn-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 479px) {
  .mn-hero__left, .mn-sec__grid:has(> .mn-card), .mn-sec__grid:has(> .mn-tall) { grid-template-columns: 1fr; }
  .mn-pn { grid-template-columns: 1fr; }
  .mn-pn__next { grid-column: 1; text-align: left; }
}