.recenzje-page{display:block}

.rec-hero{position:relative}
.rec-hero-image{width:100%;height:70vh;object-fit:cover}
.rec-hero-content{position:absolute;bottom:0;left:0;width:100%;padding:var(--space-4);background:linear-gradient(to top, rgba(0,0,0,0.6), transparent)}
.rec-hero-text{max-width:480px;color:#fff;display:flex;flex-direction:column;gap:var(--space-2)}
.rec-hero-text h1{color:#fff}
.rec-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
.rec-card{display:flex;flex-direction:column;background:var(--color-bg-secondary);border-radius:var(--radius-md);overflow:hidden}
.rec-card img{width:100%;aspect-ratio:1/1;object-fit:cover}
.rec-card-body{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-2)}
.tag{color:var(--color-accent-secondary)}

.rec-system{display:flex;justify-content:center;padding:var(--space-5)}
.rec-system-inner{max-width:700px;text-align:center}

.rec-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);align-items:center}
.rec-feature-image img{width:100%;border-radius:var(--radius-md)}
.rec-feature-text{max-width:65ch}

.rec-cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}
.rec-cat{background:var(--color-bg-secondary);padding:var(--space-3);text-align:center;border-radius:var(--radius-md)}

.timeline{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.timeline-item{border-left:2px solid var(--color-border-subtle);padding-left:var(--space-2)}

.rec-top-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}

.rec-auth-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}

.rec-bookmark{display:flex;justify-content:center;padding:var(--space-4)}
.rec-bookmark-inner{max-width:600px;text-align:center;display:flex;flex-direction:column;gap:var(--space-2)}

.rec-cta{text-align:center;display:flex;flex-direction:column;gap:var(--space-2);align-items:center}

@media (max-width:900px){
.rec-grid{grid-template-columns:1fr 1fr}
.rec-feature-grid{grid-template-columns:1fr}
.rec-cat-grid{grid-template-columns:1fr 1fr}
.timeline{grid-template-columns:1fr}
.rec-top-grid{grid-template-columns:1fr}
.rec-auth-grid{grid-template-columns:1fr}
}

@media (max-width:600px){
.rec-grid{grid-template-columns:1fr}
.rec-hero-image{height:40vh}
.rec-hero-content{position:static;background:none}
.rec-hero-text{color:var(--color-text-primary)}
.rec-hero-text h1{color:var(--color-text-primary)}
}