* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: hidden; width: 100%; max-width: 100%; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f4f6f8; color: #202124; line-height: 1.5; }
img { max-width: 100%; height: auto; display: block; }

.nav-categories { background: #ffffff; border-bottom: 1px solid #ebebeb; overflow-x: auto; white-space: nowrap; width: 100%; -webkit-overflow-scrolling: touch; }
.nav-categories-inner { max-width: 1240px; margin: 0 auto; padding: 0 20px; display: flex; gap: 8px; }
.nav-link { display: inline-block; padding: 12px 14px; color: #5f6368; text-decoration: none; font-weight: 700; font-size: 14px; border-bottom: 3px solid transparent; transition: all 0.2s; }
.nav-link:hover, .nav-link.active { color: #1a73e8; border-bottom-color: #1a73e8; }

.portal-layout { max-width: 1240px; margin: 25px auto; padding: 0 20px; display: grid; grid-template-columns: 1fr 340px; gap: 30px; align-items: start; width: 100%; }
.main-news-feed { min-width: 0; width: 100%; }

.source-badge { font-weight: 800; padding: 2px 8px; border-radius: 12px; color: #fff; font-size: 10px; text-transform: uppercase; display: inline-block; }
.time-badge { font-size: 11.5px; color: #70757a; margin-left: 6px; font-weight: 500; }

/* HERO MAGAZINE GRID */
.hero-magazine-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; margin-bottom: 30px; width: 100%; min-width: 0; }

.hero-lead-card { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid #e2e8f0; box-shadow: 0 4px 14px rgba(0,0,0,0.04); height: 310px; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; background: #202124; }
.hero-lead-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform 0.3s ease; }
.hero-lead-card:hover .hero-lead-bg { transform: scale(1.02); }
.hero-lead-overlay { position: relative; z-index: 2; width: 100%; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 30%, rgba(0,0,0,0.95) 100%); padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; }
.hero-lead-title { font-size: 20px; font-weight: 800; color: #ffffff; text-decoration: none; line-height: 1.28; margin: 6px 0; text-shadow: 0 2px 4px rgba(0,0,0,0.6); }
.hero-lead-title:hover { color: #8ab4f8; }
.hero-lead-desc { font-size: 13px; color: #e8eaed; line-height: 1.45; text-shadow: 0 1px 3px rgba(0,0,0,0.7); }

.hero-side-stack { display: flex; flex-direction: column; gap: 16px; width: 100%; min-width: 0; }
.hero-side-card { background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid #e2e8f0; display: flex; gap: 12px; padding: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.02); height: 147px; width: 100%; min-width: 0; }
.hero-side-img { width: 110px; height: 100%; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.hero-side-title { font-size: 14.5px; font-weight: 700; color: #202124; text-decoration: none; line-height: 1.35; margin-top: 4px; display: block; }
.hero-side-title:hover { color: #1a73e8; }

.section-header-styled { font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid #1a73e8; display: flex; justify-content: space-between; align-items: center; }

.theme-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 30px; width: 100%; }
.theme-card { background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid #e2e8f0; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.theme-img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; }
.theme-title { font-size: 14px; font-weight: 700; color: #202124; text-decoration: none; line-height: 1.35; }
.theme-title:hover { color: #1a73e8; }

.news-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; }
.news-row-card { display: flex; gap: 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px; align-items: flex-start; min-width: 0; }
.news-row-img { width: 95px; height: 75px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.news-row-title { font-size: 14.5px; font-weight: 700; color: #202124; text-decoration: none; line-height: 1.35; margin-top: 4px; display: block; }
.news-row-title:hover { color: #1a73e8; }

.sidebar-wrapper { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 80px; width: 100%; min-width: 0; }
.side-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 18px; box-shadow: 0 4px 12px rgba(0,0,0,0.03); width: 100%; min-width: 0; }
.side-card-title { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #f1f3f4; display: flex; justify-content: space-between; align-items: center; }

.news-switch-tabs { display: inline-flex; background: #f1f3f4; border-radius: 8px; padding: 3px; gap: 3px; }
.news-switch-btn { border: none; background: none; padding: 4px 10px; font-size: 12px; font-weight: 700; color: #5f6368; border-radius: 6px; cursor: pointer; transition: all 0.15s ease; }
.news-switch-btn.active { background: #ffffff; color: #1a73e8; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.sb-news-pane { display: none; flex-direction: column; gap: 10px; }
.sb-news-pane.active { display: flex; }

.pagination-box { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 30px 0; flex-wrap: wrap; }
.pagination-box a { padding: 7px 12px; background: #fff; border: 1px solid #dadce0; border-radius: 8px; color: #1a73e8; text-decoration: none; font-weight: 700; font-size: 13px; }
.pagination-box a.active { background: #1a73e8; color: #fff; border-color: #1a73e8; }

.single-article { background: #fff; padding: 30px; border-radius: 16px; border: 1px solid #e2e8f0; box-shadow: 0 4px 14px rgba(0,0,0,0.03); width: 100%; min-width: 0; }
.single-title { font-size: 26px; font-weight: 800; margin: 15px 0; line-height: 1.3; word-break: break-word; }
.single-img { width: 100%; max-height: 440px; object-fit: cover; border-radius: 10px; display: block; }
.single-desc { font-size: 16.5px; color: #3c4043; line-height: 1.65; margin: 20px 0; word-break: break-word; }
.btn-original { display: inline-block; background: #1a73e8; color: #fff; font-weight: 700; font-size: 15px; padding: 12px 24px; border-radius: 8px; text-decoration: none; }
.btn-original:hover { background: #1557b0; }
.single-related-box { margin-top: 25px; margin-bottom: 25px; padding: 20px; border: 1px solid #e0e0e0; border-radius: 12px; background: #fafafa; }
.related-item-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid #e0e0e0; border-radius: 8px; background: #fff; margin-bottom: 8px; text-decoration: none; gap: 15px; }
.related-item-title { font-size: 14px; font-weight: 600; color: #1a73e8; line-height: 1.3; }

/* SOCIAL SHARE BUTTONS */
.social-share-strip { display: flex; align-items: center; gap: 8px; margin-top: 15px; margin-bottom: 20px; flex-wrap: wrap; }
.share-label { font-size: 12.5px; font-weight: 700; color: #5f6368; margin-right: 4px; }
.share-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; text-decoration: none; font-size: 14px; font-weight: bold; transition: opacity 0.2s, transform 0.2s; }
.share-btn:hover { opacity: 0.85; transform: scale(1.08); }
.share-fb { background: #1877f2; }
.share-tw { background: #000000; }
.share-wa { background: #25d366; }
.share-vb { background: #7360f2; }
.share-tg { background: #24a1de; }

/* DISCOVERY WIDGET ISPOD ČLANKA */
.bottom-discovery-box { margin-top: 30px; padding: 20px; background: #fdfdfd; border: 1px solid #e2e8f0; border-radius: 14px; width: 100%; }
.discovery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 14px; width: 100%; }
.discovery-card { background: #ffffff; border: 1px solid #edf0f2; border-radius: 10px; padding: 12px; text-decoration: none; color: inherit; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; transition: transform 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.02); min-width: 0; }
.discovery-card:hover { transform: translateY(-2px); border-color: #cbd5e1; }

/* MOBILNA PRILAGODBA */
@media (max-width: 1024px) {
    .portal-layout { grid-template-columns: 1fr; }
    .sidebar-wrapper { position: static; }
}

@media (max-width: 768px) {
    .portal-layout { padding: 0 10px; margin: 15px auto; gap: 20px; width: 100%; }
    
    .hero-magazine-grid { grid-template-columns: 1fr !important; gap: 12px !important; margin-bottom: 20px; }
    .hero-lead-card { height: auto !important; min-height: 220px !important; aspect-ratio: 16 / 10; border-radius: 12px !important; }
    .hero-lead-title { font-size: 16px !important; line-height: 1.3 !important; }
    .hero-lead-desc { display: none !important; }
    
    .hero-side-stack { gap: 10px !important; }
    .hero-side-card { height: auto !important; padding: 10px !important; gap: 10px !important; border-radius: 12px !important; }
    .hero-side-img { width: 85px !important; height: 65px !important; min-width: 85px !important; }
    .hero-side-title { font-size: 13.5px !important; line-height: 1.3 !important; }
    
    .theme-grid-3 { display: grid; grid-template-columns: 1fr; }
    .theme-grid-3.sport-carousel { display: flex !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none !important; padding-bottom: 6px !important; gap: 10px !important; }
    .theme-grid-3.sport-carousel::-webkit-scrollbar { display: none !important; }
    .theme-grid-3.sport-carousel .theme-card { flex: 0 0 210px !important; width: 210px !important; min-width: 210px !important; }
    
    .news-grid-2 { grid-template-columns: 1fr !important; gap: 10px !important; }
    .news-row-card { padding: 10px !important; gap: 10px !important; }
    .news-row-img { width: 80px !important; height: 60px !important; min-width: 80px !important; }
    .news-row-title { font-size: 13.5px !important; line-height: 1.3 !important; }

    .bottom-discovery-box { padding: 14px !important; }
    .discovery-grid { display: flex !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none !important; padding-bottom: 6px !important; gap: 10px !important; }
    .discovery-grid::-webkit-scrollbar { display: none !important; }
    .discovery-card { flex: 0 0 190px !important; width: 190px !important; min-width: 190px !important; }

    .single-article { padding: 16px !important; border-radius: 12px !important; }
    .single-title { font-size: 20px !important; line-height: 1.3 !important; }
    .single-desc { font-size: 15px !important; }
    .side-card { padding: 14px !important; border-radius: 12px !important; }
}