/* Wskazowka: w poradnika warto miec */
/* Wyśrodkowanie, gdy przycisk jest poza (stary układ importu) */
body > .guide-home {
box-sizing: border-box;
max-width: 1050px;
margin: 0 auto 14px;
padding: 24px 24px 0;
}
.guide-home {
margin: 0 0 14px;
}
/* Baner kraju — niski pas panoramiczny (jak Ukraina / oryginalny Plonk It) */
.hero {
margin: 10px 0 14px;
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--border, #334155);
background: rgba(15, 23, 42, 0.55);
width: 100%;
height: 150px;
max-height: 150px;
}
.hero img {
width: 100%;
height: 150px;
max-height: 150px;
object-fit: cover;
object-position: center center;
display: block;
}
.guide-home a {
display: inline-block;
border-radius: 999px;
border: 1px solid var(--border, #334155);
background: rgba(30, 41, 59, 0.45);
color: var(--muted, #94a3b8);
text-decoration: none;
padding: 6px 11px;
font-size: 0.82rem;
font-weight: 500;
line-height: 1.4;
transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}
.guide-home a:hover {
color: var(--text, #f1f5f9);
border-color: var(--a, #6366f1);
background: rgba(99, 102, 241, 0.12);
text-decoration: none;
}
html[data-theme="light"] .guide-home a {
background: rgba(255, 255, 255, 0.85);
border-color: #cbd5e1;
color: #475569;
}
html[data-theme="light"] .guide-home a:hover {
color: #0f172a;
border-color: #6366f1;
background: rgba(99, 102, 241, 0.1);
}
.top-links a,
.hero-link[href="./"],
a.back[href="./"] {
display: inline-block;
border-radius: 999px;
border: 1px solid var(--border, #334155);
background: rgba(30, 41, 59, 0.45);
color: var(--muted, #94a3b8);
text-decoration: none;
padding: 6px 11px;
font-size: 0.82rem;
font-weight: 500;
line-height: 1.4;
transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}
.top-links a:hover,
.hero-link[href="./"]:hover,
a.back[href="./"]:hover {
color: var(--text, #f1f5f9);
border-color: var(--a, #6366f1);
background: rgba(99, 102, 241, 0.12);
text-decoration: none;
}