… ) */
.posts {
display: grid;
gap: 1.25rem;
align-content: start;
}
/* Karta artykułu */
.post {
position: relative;
background: rgba(255,255,255,0.95);
border: 1px solid rgba(0,0,0,0.08);
border-radius: 16px;
padding: 2.2rem 1.2rem 1.1rem 1.2rem; /* + miejsce na badge daty */
box-shadow: 0 10px 22px rgba(0,0,0,0.06);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
overflow: hidden;
}
/* Subtelny akcent po lewej */
.post::before {
content: "";
position: absolute;
left: 0;
top: 14px;
bottom: 14px;
width: 4px;
border-radius: 4px;
background: linear-gradient(180deg, #0e4cf5 0%, #6ea2ff 100%);
opacity: .9;
}
.post:hover {
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(0,0,0,0.08);
border-color: rgba(0,0,0,0.12);
}
/* Tytuł i treść */
.post h3 {
margin: 0 0 .45rem 0;
line-height: 1.22;
font-weight: 800;
letter-spacing: .2px;
}
.post p { margin: 0 0 .75rem 0; }
.post em { color: rgba(0,0,0,0.75); }
/* === Badge daty (mini nagłówek) =========================================
HTML:
lub
*/
.post .meta, .post .post-meta {
margin: 0 0 .5rem 0;
height: 0;
overflow: visible;
}
.post .meta time,
.post .post-meta time {
position: absolute;
top: 0.55rem; /* stabilne pozycjonowanie – nic się nie utnie */
right: 0.85rem;
display: inline-block;
padding: .4rem .65rem;
font-size: .82rem;
font-weight: 700;
letter-spacing: .15px;
background: rgba(0,0,0,0.72);
color: #fff;
border: 1px solid rgba(255,255,255,0.25);
border-radius: 999px;
backdrop-filter: blur(2px);
box-shadow: 0 6px 14px rgba(0,0,0,0.18);
white-space: nowrap;
}
/* Długa data -> 2 linie */
.post .meta time.long,
.post .post-meta time.long {
white-space: normal;
line-height: 1.15;
text-align: right;
}
/* Focus ring dostępności */
.post .meta time:focus-visible,
.post .post-meta time:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
/* Odstępy nawet bez wrappera .posts */
.paper .container > .post + .post { margin-top: 1.25rem; }
/* --- Collapse / expand (Czytaj więcej) ---------------------------------- */
.post .post-content { transition: max-height .25s ease; }
/* stan zwinięty */
.post.is-collapsed .post-content {
max-height: 12rem; /* ~12 * 16px = 192px – dopasuj pod siebie */
overflow: hidden;
position: relative;
}
/* gradient sugerujący więcej treści */
.post.is-collapsed::after {
content: "";
position: absolute;
left: 0; right: 0;
bottom: 2.65rem; /* miejsce na przycisk */
height: 3.5rem;
pointer-events: none;
background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.96));
}
/* przycisk */
.post-toggle {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .55rem .9rem;
margin-top: .5rem;
border-radius: 999px;
border: 1px solid rgba(0,0,0,.12);
background: #fff;
box-shadow: 0 4px 10px rgba(0,0,0,.06);
cursor: pointer;
font-weight: 700;
font-size: .92rem;
}
.post-toggle:focus-visible {
outline: 2px solid #0e4cf5;
outline-offset: 2px;
}
/* wariant „Zwiń” */
.post.is-expanded .post-toggle {
background: #111;
color: #fff;
border-color: rgba(255,255,255,.25);
}
/* Responsive */
@media (max-width: 720px) {
.post { border-radius: 14px; padding: 2rem .95rem .95rem; }
.post::before { top: 12px; bottom: 12px; }
.post .meta time,
.post .post-meta time { top: .5rem; right: .7rem; font-size: .8rem; }
}
/* prefers-color-scheme */
@media (prefers-color-scheme: dark) {
.post { background: rgba(250,250,252,0.96); }
}