/* main.css - reszta stylów, ładowany asynchronicznie. Bloki @font-face
   siedzą w critical.css, żeby podmiana kroju nie czekała na ten plik. */

/* --- Wspólne ---------------------------------------------------------------- */


.trn-arrow{display:inline-block;vertical-align:-.15em;margin-left:.35em}

/* Przycisk pigułka. Tło #d21f3c daje z bielą 5,25:1 - poprzedni motyw
   używał #ff4f69 (3,19:1), czyli poniżej progu AA dla zwykłego tekstu. */
.trn-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.85rem 1.9rem;background:var(--button);color:#fff;border-radius:999px;font-family:var(--font-heading);font-weight:500;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase}
.trn-btn:hover,.trn-btn:focus{background:var(--accent-dark);color:#fff;text-decoration:none}
.trn-btn-wrap{margin-top:2.4rem;text-align:center}

/* --- Kafelki ---------------------------------------------------------------- */

/* Wariant siatki: białe wcięcie w prawym dolnym rogu zdjęcia. Realizowane
   clip-path na opakowaniu, więc nie wymaga dodatkowego elementu w DOM. */

/* Wariant duży w sekcji poradników. */
.trn-card--feature .trn-card__media{aspect-ratio:4/3}
.trn-card--feature .trn-card__body{padding:1.1rem 0 0}
.trn-card--feature .trn-card__title{font-size:clamp(1.5rem,2.7vw,2.05rem);line-height:1.2;text-wrap:balance}
.trn-card--feature .trn-card__body::after{content:"";display:block;width:38px;height:2px;background:var(--accent);margin-top:.9rem}

/* Wariant poziomy: miniatura po lewej, tekst po prawej. */
.trn-card--side .trn-card__link{display:grid;grid-template-columns:186px 1fr;gap:1.4rem;align-items:start}
.trn-card--side .trn-card__media{aspect-ratio:3/2}
.trn-card--side .trn-card__title{font-size:1.13rem;line-height:1.3}
.trn-card--side .trn-card__body::after{content:"";display:block;width:32px;height:2px;background:var(--accent);margin-top:.7rem}

/* Wariant z tekstem na zdjęciu. Gradient od dołu gwarantuje kontrast
   niezależnie od jasności fotografii. */
.trn-card--overlay .trn-card__link{position:relative;display:block;min-height:300px}
.trn-card--overlay .trn-card__media{position:absolute;inset:0;aspect-ratio:auto;clip-path:none}
.trn-card--overlay .trn-card__body{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;min-height:300px;padding:1.6rem;background:linear-gradient(to top,rgba(12,14,16,.88) 0%,rgba(12,14,16,.55) 45%,rgba(12,14,16,0) 100%)}
.trn-card--overlay .trn-card__title{color:#fff;font-size:1.4rem;line-height:1.25;order:2;margin:.55rem 0 0;text-wrap:balance}
.trn-card--overlay .trn-meta{color:#e4e8ee;order:1}
.trn-card--overlay .trn-meta__sep{color:#9aa4b0}
.trn-card--overlay .trn-card__link:hover .trn-card__title{color:#fff;text-decoration:underline}

/* Wariant listy w archiwum. */
.trn-card--list{padding-bottom:2rem;margin-bottom:2rem;border-bottom:1px solid var(--border)}
.trn-card--list .trn-card__link{display:grid;grid-template-columns:280px 1fr;gap:1.6rem;align-items:start}
.trn-card--list .trn-card__media{aspect-ratio:3/2}
.trn-card--list .trn-card__title{font-size:1.3rem}
.trn-card--list .trn-card__excerpt{margin:.8rem 0 .6rem;color:var(--muted);font-size:.95rem}
.trn-card--list .trn-card__more{font-family:var(--font-heading);font-weight:500;font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}

/* --- Strona główna: siatka -------------------------------------------------- */

/* --- Strona główna: poradniki ----------------------------------------------- */
.trn-guides{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:3.2rem;align-items:start}
.trn-guides__side{display:grid;gap:2.1rem}

/* --- Strona główna: pas zakupowy -------------------------------------------- */
.trn-shop{background:linear-gradient(135deg,var(--accent-dark) 0%,var(--accent) 58%,var(--button) 100%)}
.trn-shop{margin-top:1.5rem}
.trn-shop__inner{max-width:1200px;margin:0 auto;padding:3.6rem 1rem;display:grid;grid-template-columns:minmax(0,32%) minmax(0,68%);gap:2.8rem;align-items:center}
.trn-shop__title{margin:0 0 1rem;color:#fff;font-size:clamp(1.7rem,3.2vw,2.3rem)}
.trn-shop__text{margin:0;color:#fff;font-size:.92rem;line-height:1.7;max-width:34ch}
.trn-shop__cards{display:grid;grid-template-columns:1fr 1fr;gap:1.8rem;align-items:start;margin:-2.6rem 0 -4.8rem}
/* Kafel pasa zakupowego: zdjęcie, a pod nim biała płytka z tytułem. Płytka
   wychodzi poniżej pasa - to ona wiąże czerwony blok z sekcją pod spodem. */
.trn-card--panel .trn-card__media{aspect-ratio:4/3}
.trn-card--panel .trn-card__body{background:var(--bg);padding:1.25rem 1.35rem 1.4rem;margin:0 1.5rem 0 0}
.trn-card--panel .trn-card__title{font-size:1.12rem;line-height:1.3;margin:0 0 .6rem}

/* --- Strona główna: promocje i boks popularnych ----------------------------- */
.trn-promo{display:grid;grid-template-columns:minmax(0,1fr) var(--w-sidebar);gap:3rem;align-items:start;padding-top:2.2rem}
.trn-promo__cards{display:grid;grid-template-columns:1fr 1fr;gap:1.8rem}

.trn-popular{background:var(--bg-box);padding:1.9rem}
.trn-popular__title{margin:0 0 1.2rem;padding-bottom:.9rem;border-bottom:1px solid var(--border);font-family:var(--font-heading);font-weight:500;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text)}
.trn-popular__list{list-style:none;margin:0;padding:0;display:grid;gap:1.35rem}
.trn-popular__item{display:grid;grid-template-columns:92px 1fr;gap:1.05rem;align-items:start}
.trn-popular__figure{position:relative}
.trn-popular__figure img{width:92px;height:66px;object-fit:cover}
.trn-popular__rank{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;width:22px;height:22px;background:var(--bg);color:var(--text);font-size:.68rem;font-weight:600}
.trn-popular__link{display:block;color:var(--navy);font-family:var(--font-heading);font-weight:600;font-size:.95rem;line-height:1.35}
.trn-popular__link:hover{color:var(--accent);text-decoration:none}
.trn-popular__date{display:block;margin-top:.3rem;font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}

/* --- Sidebar ---------------------------------------------------------------- */
.trn-sidebar{display:grid;gap:1.8rem;align-content:start;position:sticky;top:1.5rem}
.trn-side-block{background:var(--bg-box);padding:1.5rem}
.trn-side-block__title{margin:0 0 1rem;font-size:1.15rem;color:var(--navy)}
.trn-side-list{list-style:none;margin:0;padding:0}
.trn-side-list li{padding:.65rem 0;border-bottom:1px solid var(--border)}
.trn-side-list li:last-child{border-bottom:0}
.trn-side-list a{color:var(--accent);font-size:.92rem;line-height:1.45}
.trn-side-cats a{display:flex;justify-content:space-between;align-items:center;gap:.6rem;color:var(--text)}
.trn-side-cats .trn-count{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 .35em;background:var(--button);color:#fff;border-radius:999px;font-size:.68rem;font-weight:600}

/* --- Wpis ------------------------------------------------------------------- */
.trn-article__head{margin-bottom:1.6rem}
.trn-article__title{margin:.6rem 0 .8rem;color:var(--navy)}
.trn-article__hero{margin:0 0 1.8rem;aspect-ratio:16/9;overflow:hidden;background:var(--bg-box)}
.trn-article__hero img{width:100%;height:100%;object-fit:cover}
.trn-article__layout{display:grid;grid-template-columns:minmax(0,1fr) var(--w-sidebar);gap:3rem;align-items:start}
.trn-article__content{font-size:1.02rem;line-height:1.75;max-width:var(--w-content)}
.trn-article__content h2{margin-top:2.2em;font-size:1.5rem}
.trn-article__content h3{margin-top:1.7em;font-size:1.2rem}
.trn-article__content img{margin:1.6em auto}
.trn-article__content figure{margin:2em 0}
.trn-article__content figcaption{margin-top:.6em;font-size:.82rem;color:var(--muted);text-align:center}
.trn-article__content ul,.trn-article__content ol{padding-left:1.3em}
.trn-article__content li{margin-bottom:.4em}
.trn-article__content blockquote{margin:2em 0;padding:.2em 0 .2em 1.4em;border-left:3px solid var(--accent);color:var(--muted)}

/* --- Licznik wyświetleń ------------------------------------------------------
   Cicha stopka artykułu: informacja poboczna, nie treść. Dlatego mała,
   przygaszona i oddzielona włoskową linią, a nie w nawiasie w środku tekstu. */
.trn-views{display:flex;align-items:center;gap:.5rem;margin:2.6rem 0 0;padding-top:1.1rem;border-top:1px solid var(--border);font-size:.8rem;color:var(--muted)}
.trn-views__icon{flex:0 0 auto;opacity:.75}
.trn-views__sep{margin:0 .15rem}

/* --- Spis treści ------------------------------------------------------------
   Styl przejęty z bloku TOC RankMatha, którego te artykuły używały wcześniej:
   nagłówek jak zwykły H2, płaska lista z punktorami, czerwone odnośniki, bez
   ramki i bez tła. Numeracja odpada - przy mieszanych poziomach H2/H3 dawała
   rwaną sekwencję (1, 2, 5, 6...). */
.trn-toc{margin:0 0 2.4rem}
.trn-toc__summary{display:block;margin-bottom:.9rem;font-family:var(--font-heading);font-weight:600;font-size:1.5rem;line-height:1.22;color:var(--navy);cursor:pointer;list-style:none}
.trn-toc__summary::-webkit-details-marker{display:none}
.trn-toc__list{margin:0;padding-left:1.45em;list-style:disc}
.trn-toc__list li{margin-bottom:.5em;line-height:1.5}
.trn-toc__list .lvl-3{margin-left:1.35em;list-style:circle}
.trn-toc a{color:var(--accent)}
.trn-toc a:hover{color:var(--accent-dark)}

/* Na wąskich ekranach spis da się zwinąć - wtedy nagłówek dostaje strzałkę
   sygnalizującą, że jest przełącznikiem. */
@media(max-width:860px){
	.trn-toc__summary::after{content:"";display:inline-block;width:.42em;height:.42em;margin-left:.55em;vertical-align:.12em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
	.trn-toc[open] .trn-toc__summary::after{transform:rotate(-135deg)}
}
@media(min-width:861px){
	.trn-toc__summary{pointer-events:none}
}

/* --- Archiwum, lista, paginacja --------------------------------------------- */
.trn-page-head{margin-bottom:2rem}
.trn-page-head__title{margin:.5rem 0 .4rem}
.trn-page-head__desc{margin:0;color:var(--muted);max-width:62ch}
.trn-list-layout{display:grid;grid-template-columns:minmax(0,1fr) var(--w-sidebar);gap:3rem;align-items:start}
.trn-lead-card{margin-bottom:2.4rem}
.trn-lead-card .trn-card--overlay .trn-card__link,
.trn-lead-card .trn-card--overlay .trn-card__body{min-height:420px}

.trn-empty{padding:3rem 1rem;text-align:center;color:var(--muted);background:var(--bg-box)}

.pagination{margin-top:2.5rem}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 .8em;background:var(--bg-box);color:var(--text);font-size:.95rem}
.pagination .page-numbers:hover{background:var(--button);color:#fff;text-decoration:none}
.pagination .current{background:var(--button);color:#fff}

/* --- Wyszukiwarka ----------------------------------------------------------- */
.trn-search{display:flex;align-items:center;gap:.5rem}
.trn-search__label{position:absolute;left:-9999px}
.trn-search input{flex:1;min-height:44px;padding:.6em .9em;border:1px solid var(--border);background:var(--bg);font-family:inherit;font-size:.95rem;color:var(--text)}
.trn-search__submit{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;background:var(--button);color:#fff;border:0;cursor:pointer}
.trn-search__submit:hover{background:var(--accent-dark)}
.trn-search__submit .trn-arrow{margin:0}

/* --- Okruszki --------------------------------------------------------------- */
.trn-breadcrumbs{margin-bottom:.8rem;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.trn-breadcrumbs a{color:var(--muted)}
.trn-breadcrumbs a:hover{color:var(--accent)}

/* --- Stopka ----------------------------------------------------------------- */
.trn-footer{margin-top:3.5rem;padding:1.6rem 1rem;background:var(--border)}
.trn-footer__copy{margin:0;text-align:center;font-size:.85rem;color:var(--text)}

/* --- Responsywność ---------------------------------------------------------- */
@media(max-width:1000px){
	.trn-article__layout,.trn-list-layout,.trn-promo{grid-template-columns:1fr;gap:2.4rem}
	.trn-sidebar{position:static}
	.trn-grid{grid-template-columns:1fr 1fr}
	.trn-shop__inner{grid-template-columns:1fr}
	.trn-shop__cards{margin-bottom:0}
}
@media(max-width:860px){
	.trn-section{padding:2.4rem 1rem}
	.trn-grid{grid-template-columns:1fr}
	.trn-guides{grid-template-columns:1fr}
	.trn-promo__cards{grid-template-columns:1fr}
	.trn-shop__cards{grid-template-columns:1fr}
	.trn-card--list .trn-card__link{grid-template-columns:1fr}
	.trn-card--side .trn-card__link{grid-template-columns:120px 1fr}
	.trn-lead-card .trn-card--overlay .trn-card__link,
	.trn-lead-card .trn-card--overlay .trn-card__body{min-height:300px}
}

@media print{
	.trn-header,.trn-footer,.trn-sidebar,.trn-breadcrumbs,.trn-toc,.trn-nav{display:none}
	.trn-article__layout{grid-template-columns:1fr}
	.trn-article__content{font-size:11pt}
}