/* SVETLÁ TÉMA */
:root {
    --bg-light: #f4f4f7;        
    --bg-card: #ffffff;        
    --accent-sport: #b5a600;   
    --text-main: #1f2937;      
    --text-muted: #6b7280;     
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Roboto, sans-serif; }
body { background-color: var(--bg-light); color: var(--text-main); line-height: 1.6; display: flex; flex-direction: column; min-height: 100vh; }

/* HLAVIČKA A VYHĽADÁVANIE */
header { background-color: var(--bg-card); border-bottom: 1px solid #e5e7eb; padding: 20px 0; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }

.header-container {
    max-width: 1200px; /* <--- Toto je opravené z 1240px */
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    display: flex;
    justify-content: center; 
    align-items: center;
}

/* Spacer slúži ako protiváha pre search-form, aby h1 bolo presne v strede */
.header-spacer { width: 250px; }

header h1 { flex: 1; text-align: center; font-size: 2.2rem; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; color: var(--text-main); font-weight: 800; margin: 0; }
header h1 span { color: var(--accent-sport); }

.search-form {
    display: flex;
    align-items: center;
    background: var(--bg-light);
    border-radius: 20px;
    padding: 5px 15px;
    border: 1px solid #e5e7eb;
    width: 250px;
}

.search-form input { border: none; background: transparent; outline: none; padding: 5px; font-size: 0.95rem; color: var(--text-main); width: 100%; }
.search-form button { background: none; border: none; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; transition: 0.2s; padding-left: 5px; }
.search-form button:hover { color: var(--accent-sport); }

main { max-width: 1200px; margin: 30px auto; padding: 0 20px; flex: 1; width: 100%; }

/* Tlačidlo Späť */
#back-btn { display: none; background: var(--bg-card); border: 1px solid var(--text-muted); color: var(--text-main); padding: 10px 20px; cursor: pointer; margin-bottom: 25px; border-radius: 6px; text-transform: uppercase; font-weight: bold; font-size: 0.85rem; transition: 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
#back-btn:hover { border-color: var(--accent-sport); color: var(--accent-sport); }

/* BLOG LAYOUT */
#blog-layout { display: flex; flex-direction: column; gap: 30px; }

/* Najnovší príspevok (Veľký box) */
.featured-post { position: relative; width: 100%; height: 450px; border-radius: 14px; overflow: hidden; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.featured-post img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.featured-post:hover img { transform: scale(1.01); }
.card-overlay { position: absolute; bottom: 0; left: 0; right: 0; top: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 30px; }
.post-date { color: var(--accent-sport); font-weight: bold; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.5px; }
.featured-post .post-title { font-size: 1.8rem; margin-top: 5px; font-weight: 700; color: #ffffff; line-height: 1.2; }

/* Staršie príspevky (Mriežka) */
.older-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.older-card { position: relative; height: 300px; border-radius: 12px; overflow: hidden; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.04); }
.older-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.older-card:hover img { transform: scale(1.03); }
.older-card .card-overlay { padding: 20px; }
.older-card .post-title { font-size: 1.05rem; margin-top: 3px; font-weight: 600; color: #ffffff; line-height: 1.3; }

/* STRÁNKOVANIE */
.pagination { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 20px; }
.page-btn { background: var(--bg-card); border: 1px solid #e5e7eb; color: var(--text-main); width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
.page-btn:hover:not(:disabled) { border-color: var(--accent-sport); color: var(--accent-sport); }
.page-btn:disabled { opacity: 0.3; cursor: not-allowed; }
#page-number { font-weight: bold; font-size: 0.95rem; color: var(--text-muted); }
.arrow { display: inline-block; width: 10px; height: 10px; border-top: 2px solid currentColor; border-left: 2px solid currentColor; }
.arrow.left { transform: rotate(-45deg); margin-left: 3px; }
.arrow.right { transform: rotate(135deg); margin-right: 3px; }

/* DETAIL ČLÁNKU */
#single-post { display: none; background-color: var(--bg-card); padding: 40px; border-radius: 14px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); border: 1px solid #e5e7eb; }
#post-full-title { font-size: 2.6rem; color: var(--text-main); font-weight: 800; line-height: 1.2; margin-bottom: 8px; }
#post-full-meta { color: var(--text-muted); margin-bottom: 30px; font-size: 0.95rem; border-bottom: 1px solid #e5e7eb; padding-bottom: 15px; }
#post-full-body { font-size: 1.15rem; color: #374151; }
#post-full-body p { margin-bottom: 20px; }

/* FORMÁTOVANIE OBRÁZKOV V ČLÁNKU */
.single-img-container { display: flex; flex-direction: column; align-items: center; margin: 40px 0; }
.single-img-container img { width: 75%; max-width: 800px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.img-caption { font-size: 0.9rem; color: var(--text-muted); font-style: italic; margin-top: 10px; text-align: center; }

.double-img-container { display: flex; gap: 20px; margin: 40px 0; justify-content: center; }
.img-column { flex: 1; display: flex; flex-direction: column; align-items: center; }
.img-column img { width: 100%; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }

/* SEKCIA ZDIEĽANIA */
.share-section { margin-top: 40px; padding-top: 20px; border-top: 1px solid #e5e7eb; }
.share-title { font-size: 1rem; font-weight: bold; color: var(--text-muted); text-transform: uppercase; margin-bottom: 15px; letter-spacing: 0.5px; }
.share-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.share-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 6px; border: 1px solid #e5e7eb; background: var(--bg-light); color: var(--text-main); font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: 0.2s; }
.share-btn:hover { background: #e5e7eb; transform: translateY(-1px); }
.share-fb { background: #1877f2; color: white; border: none; }
.share-fb:hover { background: #166fe5; }
.share-x { background: #000000; color: white; border: none; }
.share-x:hover { background: #262626; }
.share-ig { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); color: white; border: none; }
.share-ig:hover { 
    /* Vynútime ponechanie gradientu, aby nezosivelo */
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
    /* Jemne ho stmavíme, rovnako ako FB a X */
    filter: brightness(0.9); 
}

/* Pätička */
footer { background-color: var(--bg-card); text-align: center; padding: 25px; color: var(--text-muted); font-size: 0.9rem; border-top: 1px solid #e5e7eb; margin-top: auto; }

/* RESPONZIVITA */
@media (max-width: 900px) {
    .older-grid { grid-template-columns: repeat(2, 1fr); }
    .featured-post { height: 350px; }
    #post-full-title { font-size: 2rem; }
}
@media (max-width: 768px) {
    .header-container { flex-direction: column; gap: 15px; }
    .header-spacer { display: none; }
    .search-form { width: 100%; max-width: 400px; }
}
@media (max-width: 600px) {
    .older-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .older-card { height: 220px; }
    .featured-post { height: 280px; }
    .card-overlay { padding: 15px; }
    .featured-post .post-title { font-size: 1.3rem; }
    .older-card .post-title { font-size: 0.9rem; }
    #single-post { padding: 20px; }
    .single-img-container img { width: 100%; }
    .double-img-container { flex-direction: column; }
}