/* ════════════════════════════════════════════════════════════════════
   Portal — zajednicki stil za /portal, /clanak/<slug> i buduce stranice.
   Prati landing.php: tamna traka + svijetli sadrzaj + tamni footer.

   Dizajnirano da izgleda dobro i s MALO sadrzaja (par tekstova mjesecno):
   prvi tekst je velik, ostali u mrezi. Tri teksta popune stranicu.
   ════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --pt-blue:    #1d4ed8;
    --pt-blue-dk: #1e3a8a;
    --pt-gold:    #f59e0b;
    --pt-text:    #0f172a;
    --pt-text-2:  #64748b;
    --pt-border:  #e2e8f0;
    --pt-surface: #ffffff;
    --pt-bg:      #f1f5f9;
    --pt-font:    'Inter', system-ui, sans-serif;
}

body {
    font-family: var(--pt-font);
    color: var(--pt-text);
    background: var(--pt-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}
body > main { flex: 1; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* ─── Top traka ─────────────────────────────────────────────── */
.pt-topbar { background: linear-gradient(135deg, #0a1628 0%, #0f2d5c 100%); padding: 0 24px; }
.pt-topbar-inner {
    max-width: 1080px; margin: auto; min-height: 58px;
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.pt-brand { display: flex; align-items: center; gap: 9px; color: #fff; font-weight: 700; font-size: .98rem; }
.pt-brand img { height: 26px; width: 26px; border-radius: 5px; }
.pt-nav { display: flex; gap: 18px; margin-left: auto; font-size: .86rem; font-weight: 500; }
.pt-nav a { color: #cbd5e1; transition: color .15s; padding: 4px 0; }
.pt-nav a:hover { color: #fff; }
.pt-nav a.pt-nav--active { color: #fff; border-bottom: 2px solid var(--pt-gold); }

/* ─── Hero (naslovnica portala) ─────────────────────────────── */
.pt-hero { background: #060d1f; color: #fff; padding: 0 24px; position: relative; overflow: hidden; }
.pt-hero::before, .pt-hero::after {
    content: ''; position: absolute; border-radius: 50%; pointer-events: none; filter: blur(80px);
}
.pt-hero::before {
    width: 560px; height: 560px; top: -240px; left: -120px;
    background: radial-gradient(circle, rgba(29,78,216,.5) 0%, rgba(99,102,241,.28) 50%, transparent 70%);
}
.pt-hero::after {
    width: 460px; height: 460px; bottom: -200px; right: -70px;
    background: radial-gradient(circle, rgba(245,158,11,.32) 0%, rgba(239,68,68,.18) 50%, transparent 70%);
}
.pt-hero-inner {
    max-width: 1080px; margin: auto; padding: 54px 0 48px;
    position: relative; z-index: 1; text-align: center;
}
.pt-hero h1 {
    font-size: clamp(1.8rem, 4.5vw, 2.7rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
    background: linear-gradient(135deg, #fff 0%, #60a5fa 35%, #f59e0b 70%, #f472b6 100%);
    background-size: 200% auto;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    animation: pt-shimmer 5s linear infinite;
}
@keyframes pt-shimmer { from { background-position: 0% center; } to { background-position: 200% center; } }
.pt-hero p { color: rgba(255,255,255,.62); font-size: 1rem; max-width: 560px; margin: 12px auto 0; line-height: 1.6; }
.pt-wave { display: block; width: 100%; height: 54px; margin-bottom: -2px; fill: var(--pt-bg); }

/* ─── Sadrzaj ───────────────────────────────────────────────── */
.pt-content { max-width: 1080px; margin: 0 auto; padding: 32px 24px 64px; width: 100%; }
.pt-section-label {
    font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--pt-text-2); margin-bottom: 14px;
}

/* Filter po kategoriji */
.pt-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.pt-filter {
    padding: 7px 15px; border-radius: 22px; font-size: .84rem; font-weight: 600;
    background: var(--pt-surface); border: 1.5px solid var(--pt-border); color: var(--pt-text);
    transition: border-color .15s, transform .12s;
}
.pt-filter:hover { transform: translateY(-1px); border-color: var(--pt-blue); }
.pt-filter--active { background: var(--pt-blue); border-color: var(--pt-blue); color: #fff; }

/* Znacka kategorije */
.pt-badge {
    display: inline-block; padding: 4px 11px; border-radius: 20px;
    font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.pt-badge--team       { background: #dbeafe; color: #1e40af; }
.pt-badge--tournament { background: #dcfce7; color: #166534; }
.pt-badge--advice     { background: #fef3c7; color: #92400e; }
.pt-badge--news       { background: #f1f5f9; color: #475569; }

/* ─── Istaknuti (prvi) tekst ────────────────────────────────── */
.pt-featured {
    display: grid; grid-template-columns: 1.15fr 1fr; gap: 0;
    background: var(--pt-surface); border-radius: 20px; overflow: hidden;
    box-shadow: 0 6px 24px rgba(15,23,42,.1); margin-bottom: 28px;
    transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s;
}
.pt-featured:hover { transform: translateY(-4px); box-shadow: 0 22px 46px rgba(15,23,42,.16); }
.pt-featured-img { position: relative; min-height: 260px; background: #e2e8f0; }
.pt-featured-img img { width: 100%; height: 100%; object-fit: cover; }
.pt-featured-img--empty {
    display: flex; align-items: center; justify-content: center; font-size: 3rem;
    background: linear-gradient(135deg, #1d4ed8, #7c3aed);
}
.pt-featured-body { padding: 30px 32px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.pt-featured-body h2 { font-size: 1.5rem; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; }
.pt-featured-body p { color: var(--pt-text-2); font-size: .92rem; line-height: 1.6; }
@media (max-width: 760px) {
    .pt-featured { grid-template-columns: 1fr; }
    .pt-featured-img { min-height: 190px; }
    .pt-featured-body { padding: 22px 20px; }
    .pt-featured-body h2 { font-size: 1.22rem; }
}

/* ─── Mreza tekstova ────────────────────────────────────────── */
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; }
.pt-card {
    background: var(--pt-surface); border-radius: 16px; overflow: hidden;
    box-shadow: 0 4px 18px rgba(15,23,42,.08);
    display: flex; flex-direction: column;
    transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s;
}
.pt-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(15,23,42,.15); }
.pt-card-img { height: 156px; background: #e2e8f0; overflow: hidden; }
.pt-card-img img { width: 100%; height: 100%; object-fit: cover; }
.pt-card-img--empty {
    display: flex; align-items: center; justify-content: center; font-size: 2rem;
    background: linear-gradient(135deg, #1d4ed8, #7c3aed);
}
.pt-card-body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; gap: 7px; }
.pt-card-body h3 { font-size: 1rem; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
.pt-card-body p { font-size: .84rem; color: var(--pt-text-2); line-height: 1.55; }
.pt-card-foot {
    margin-top: auto; padding-top: 10px; font-size: .74rem; color: var(--pt-text-2);
    display: flex; align-items: center; gap: 6px;
}

/* ─── Pojedinacni tekst ─────────────────────────────────────── */
.pt-article { width: 100%; }
.pt-cover { width: 100%; max-height: 420px; overflow: hidden; background: #0f172a; }
.pt-cover img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; }
.pt-article-inner { max-width: 760px; margin: 0 auto; padding: 32px 24px 64px; }
.pt-article-head { margin-bottom: 22px; }
.pt-article-title {
    font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 800;
    line-height: 1.2; letter-spacing: -.025em; margin: 12px 0 10px;
}
.pt-meta { font-size: .84rem; color: var(--pt-text-2); display: flex; gap: 7px; flex-wrap: wrap; }
.pt-linked {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
    padding: 7px 15px; border-radius: 22px;
    background: var(--pt-surface); border: 1.5px solid var(--pt-border);
    font-size: .84rem; font-weight: 600; transition: border-color .15s, transform .12s;
}
.pt-linked:hover { border-color: var(--pt-blue); color: var(--pt-blue); transform: translateY(-1px); }

.pt-lead {
    font-size: 1.06rem; line-height: 1.65; color: #334155; font-weight: 500;
    padding: 16px 20px; background: var(--pt-surface); border-radius: 12px;
    border-left: 4px solid var(--pt-blue); margin-bottom: 24px;
}

/* Tijelo teksta — izlaz TextFormatter-a */
.pt-body { font-size: 1.02rem; line-height: 1.75; color: #1e293b; }
.pt-body > *:first-child { margin-top: 0; }
.pt-body p { margin: 0 0 17px; }
.pt-body h3, .pt-body h4, .pt-body h5 { margin: 30px 0 12px; line-height: 1.3; letter-spacing: -.015em; }
.pt-body h3 { font-size: 1.35rem; font-weight: 800; }
.pt-body h4 { font-size: 1.14rem; font-weight: 700; }
.pt-body h5 { font-size: 1rem; font-weight: 700; }
.pt-body ul, .pt-body ol { margin: 0 0 17px; padding-left: 24px; }
.pt-body li { margin-bottom: 7px; }
.pt-body a { color: var(--pt-blue); text-decoration: underline; text-underline-offset: 2px; }
.pt-body a:hover { color: var(--pt-blue-dk); }
.pt-body strong { font-weight: 700; color: var(--pt-text); }

/* Procitajte jos */
.pt-related { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--pt-border); }
.pt-related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .pt-related-grid { grid-template-columns: 1fr; } }
.pt-related-card {
    background: var(--pt-surface); border-radius: 12px; overflow: hidden;
    box-shadow: 0 3px 14px rgba(15,23,42,.07);
    transition: transform .18s, box-shadow .18s;
}
.pt-related-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(15,23,42,.13); }
.pt-related-card img { width: 100%; height: 104px; object-fit: cover; }
.pt-related-card span { display: block; padding: 12px 14px; font-size: .89rem; font-weight: 600; line-height: 1.4; }

/* ─── Prazno stanje ─────────────────────────────────────────── */
.pt-empty {
    text-align: center; padding: 64px 24px; color: var(--pt-text-2);
    background: var(--pt-surface); border-radius: 16px; box-shadow: 0 4px 18px rgba(15,23,42,.06);
}
.pt-empty-icon { font-size: 2.6rem; margin-bottom: 12px; }
.pt-empty a { color: var(--pt-blue); font-weight: 600; }

/* ─── Paginacija ────────────────────────────────────────────── */
.pt-pager { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.pt-pager a, .pt-pager span {
    padding: 8px 16px; border-radius: 8px; font-size: .86rem; font-weight: 600;
    background: var(--pt-surface); border: 1.5px solid var(--pt-border);
}
.pt-pager a:hover { border-color: var(--pt-blue); color: var(--pt-blue); }
.pt-pager span { opacity: .45; }

/* ─── Footer ────────────────────────────────────────────────── */
.pt-footer {
    background: #0a1628; color: rgba(255,255,255,.55);
    text-align: center; padding: 26px 24px; font-size: .8125rem; line-height: 1.8;
}
.pt-footer a { color: rgba(255,255,255,.75); }
.pt-footer a:hover { color: #fff; }
.pt-footer-links { margin-top: 6px; }