/* --------------------
   BASE
-------------------- */

body {
    margin: 0;
    background: #0e0e0e;
    color: #eaeaea;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

a {
    text-decoration: none;
    color: inherit;
}

/* --------------------
   HEADER
-------------------- */

.site-header {
    text-align: center;
    padding: 32px 16px 24px;
    border-bottom: 1px solid #222;
}

.site-header .logo {
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.site-header .logo span {
    color: #ffd200;
}

.site-header .tagline {
    margin-top: 6px;
    font-size: 1rem;
    opacity: 0.8;
}

.site-header .site-description {
    max-width: 760px;
    margin: 16px auto 0;
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0.75;
}

/* --------------------
   MASONRY FEED
-------------------- */

.feed {
    padding: 24px 16px;
    max-width: 1800px;
    margin: 0 auto;
}

.masonry {
    column-count: 6;              /* 🔥 8 oszlop */
    column-gap: 10px;
}

.masonry-item {
    break-inside: avoid;
    margin-bottom: 10px;
    border-radius: 6px;
    overflow: hidden;
    background: #111;
}

.masonry-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .25s ease;
}

.masonry-item:hover img {
    transform: scale(1.05);
}

/* --------------------
   RESPONSIVE
-------------------- */

@media (max-width: 1600px) {
    .masonry { column-count: 6; }
}

@media (max-width: 1200px) {
    .masonry { column-count: 4; }
}

@media (max-width: 700px) {
    .masonry { column-count: 2; }
}

/* --------------------
   RELATED SITES (MASONRY)
-------------------- */

.related-sites {
    border-top: 1px solid #222;
    margin-top: 32px;
    padding: 32px 16px;
}

.related-sites h3 {
    text-align: center;
    margin-bottom: 24px;
    font-size: 1.2rem;
    opacity: 0.9;
}

/* Masonry layout */
.related-masonry {
    max-width: 1800px;
    margin: 0 auto;
    column-count: 6;
    column-gap: 16px;
}

.related-item {
    break-inside: avoid;
    margin-bottom: 16px;
    text-align: center;
}

.related-item img {
    width: 100%;
    display: block;
    border-radius: 6px;
    margin-bottom: 6px;
}

.related-title {
    font-size: 0.9rem;
    opacity: 0.8;
}

.related-title:hover {
    opacity: 1;
}

/* Responsive */
@media (max-width: 1400px) {
    .related-masonry { column-count: 4; }
}

@media (max-width: 900px) {
    .related-masonry { column-count: 3; }
}

@media (max-width: 600px) {
    .related-masonry { column-count: 2; }
}


/* --------------------
   FOOTER
-------------------- */

.site-footer {
    border-top: 1px solid #222;
    padding: 24px 16px;
    text-align: center;
    font-size: 0.85rem;
    opacity: 0.75;
}

.site-footer .footer-links {
    margin: 12px 0;
}

.site-footer .footer-links a {
    margin: 0 8px;
}
/* --------------------
   PARTNER / BACKLINK BLOCK
-------------------- */

.partner-links {
    border-top: 1px solid #222;
    padding: 28px 16px 12px;
    background: #0b0b0b;
}

.partner-links h3 {
    text-align: center;
    margin-bottom: 18px;
    font-size: 1.1rem;
    opacity: 0.9;
}

.partner-links-inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.partner-links-inner a {
    display: inline-block;
    margin: 6px 0px;
    font-size: 0.9rem;
    opacity: 0.75;
    transition: opacity 0.2s ease;
}

.partner-links-inner a:hover {
    opacity: 1;
}
.partner-links-inner .partner-link:not(:last-child)::after {
    content: "|";
    opacity: 0.35;
    margin: 0 10px;
}