/* Rokuyō na dziś — wąski pasek, ten sam język co reszta serwisu.
   Ma być mikro: jedna linijka na desktopie, dwie na telefonie. */
.trk { --trk-zloto: #f9d57a; --trk-etyk: #cda474; --trk-wlos: rgba( 230, 196, 138, .14 ); --trk-obrys: rgba( 230, 196, 138, .3 );
	box-sizing: border-box; max-width: 1520px; margin: 0 auto; padding: 14px 40px 0; font: 300 15px Jost, system-ui, sans-serif; }
.trk *, .trk *::before, .trk *::after { box-sizing: border-box; }
.trk__link { position: relative; display: grid; grid-template-columns: 56px minmax( 0, 1fr ) auto auto 18px; gap: 18px; align-items: center;
	padding: 14px 22px; border: 1px solid var( --trk-wlos ); border-radius: 18px; color: inherit; text-decoration: none;
	background: linear-gradient( 90deg, rgba( 196, 86, 106, .07 ), rgba( 10, 10, 34, .72 ) 42% );
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .05 ), 0 20px 44px -34px rgba( 0, 0, 0, .95 );
	transition: border-color .2s, transform .2s, box-shadow .2s; }
.trk__link:hover { border-color: var( --trk-obrys ); transform: translateY( -2px ); box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .07 ), 0 24px 50px -30px rgba( 0, 0, 0, .95 ), 0 0 40px -18px rgba( 249, 213, 122, .4 ); }
.trk__kanji { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var( --trk-wlos ); border-radius: 14px;
	font: 400 26px 'Noto Serif JP', 'Noto Serif SC', Georgia, serif; color: var( --trk-zloto );
	background: radial-gradient( circle, rgba( 249, 213, 122, .1 ), transparent 70% ); text-shadow: 0 0 18px rgba( 249, 213, 122, .35 ); }
.trk__tresc { display: grid; gap: 1px; min-width: 0; }
.trk__nad { font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: var( --trk-etyk ); }
.trk__nazwa { font: 500 21px/1.1 'Cormorant Garamond', Georgia, serif; color: var( --trk-zloto ); }
.trk__nazwa i { margin-left: 10px; font: 300 12px Jost, system-ui, sans-serif; font-style: normal; letter-spacing: .12em; color: #9393a7; }
.trk__krotko { font-size: 12.5px; line-height: 1.4; color: #b3b1c2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trk__ocena { display: flex; align-items: center; gap: 5px; }
.trk__ocena i { width: 7px; height: 7px; border: 1px solid var( --trk-etyk ); border-radius: 50%; }
.trk__ocena i.jest-pelna { background: var( --trk-zloto ); border-color: var( --trk-zloto ); box-shadow: 0 0 8px rgba( 249, 213, 122, .6 ); }
.trk__ocena small { margin-left: 6px; font-size: 10px; letter-spacing: .14em; color: #9393a7; }
.trk__jutro { display: grid; gap: 1px; padding-left: 18px; border-left: 1px solid var( --trk-wlos ); text-align: right; }
.trk__jutro small { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: #9393a7; }
.trk__jutro b { font: 400 14px 'Cormorant Garamond', Georgia, serif; color: #e6e2ea; }
.trk__strzalka { color: var( --trk-etyk ); font-size: 15px; transition: transform .2s, color .2s; }
.trk__link:hover .trk__strzalka { color: var( --trk-zloto ); transform: translateX( 3px ); }

@media ( max-width: 1020px ) {
	.trk { padding: 12px 24px 0; }
	.trk__link { grid-template-columns: 48px minmax( 0, 1fr ) auto; gap: 14px; padding: 12px 16px; }
	.trk__kanji { width: 48px; height: 48px; font-size: 22px; }
	.trk__jutro, .trk__strzalka { display: none; }
	.trk__krotko { white-space: normal; }
}
@media ( max-width: 680px ) {
	.trk { padding: 10px 16px 0; }
	.trk__link { grid-template-columns: 44px minmax( 0, 1fr ); }
	.trk__ocena { display: none; }
}
@media ( prefers-reduced-motion: reduce ) { .trk__link, .trk__strzalka { transition: none; } }