/* ==========================================================================
   Legal Pages (Terms & Privacy) — editorial layout sa sticky TOC sidebar-om
   Sav visual chrome za callouts/alerts/CTA dolazi iz canonical komponenti:
   - .alert + variants (intro callout, savet box, GDPR badge)
   - .sidebar-card / .sidebar-card--ink (Poslednje ažuriranje card)
   - .btn .btn-primary (kontakt CTA)
   Ovde su samo page-specific: 2-col layout, TOC nav editorial chrome,
   numbered section heading pattern, definition list, forbidden-list grid,
   contact-info-box inline icon rows.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layout: 2-col sticky sidebar TOC + main content
   -------------------------------------------------------------------------- */
.legal-content {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: clamp(32px, 5vw, 56px);
    padding: clamp(32px, 4vw, 48px) 0 clamp(48px, 6vw, 80px);
    max-width: 1200px;
    margin: 0 auto;
}

.legal-sidebar {
    position: sticky;
    top: 100px;
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* --------------------------------------------------------------------------
   Sadržaj (TOC) — editorial sticky nav
   -------------------------------------------------------------------------- */
.legal-nav {
    background: var(--warm-white);
    border: 1px solid var(--hairline);
    border-radius: 0;
    padding: clamp(20px, 2.5vw, 28px);
    box-shadow: none;
}

.legal-nav h4 {
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--hairline-strong);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.05rem;
    line-height: 1.2;
    color: var(--ink);
}

.legal-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.legal-nav li {
    margin: 0;
}

.legal-nav a {
    display: block;
    padding: 9px 12px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--taupe);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}

.legal-nav a:hover,
.legal-nav a.is-active {
    color: var(--ink);
    background: var(--cream);
    border-left-color: var(--terracotta);
}

/* --------------------------------------------------------------------------
   Poslednje ažuriranje card — canonical .sidebar-card.sidebar-card--ink
   sa page-specific date overrideom
   -------------------------------------------------------------------------- */
.legal-info-box {
    text-align: center;
}

.legal-info-box .sidebar-card__eyebrow {
    margin: 0 0 10px;
    text-align: center;
}

.legal-info-box__date {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.25rem;
    color: var(--cream);
}

/* --------------------------------------------------------------------------
   Main content
   -------------------------------------------------------------------------- */
.legal-main {
    min-width: 0;
    max-width: 75ch;
}

/* Intro alert (.alert.alert-info) — canonical, page samo dodaje margin-bottom */
.legal-intro {
    margin-bottom: clamp(32px, 4vw, 48px);
}

/* --------------------------------------------------------------------------
   Legal section — numbered headings, ink body prose
   -------------------------------------------------------------------------- */
.legal-section {
    margin-bottom: clamp(36px, 5vw, 56px);
    padding-bottom: clamp(36px, 5vw, 56px);
    border-bottom: 1px solid var(--hairline);
}

.legal-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.legal-section h2 {
    margin: 0 0 20px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.6vw, 1.95rem);
    line-height: 1.15;
    color: var(--ink);
    display: flex;
    align-items: baseline;
    gap: 14px;
}

.section-number {
    font-family: var(--font-display);
    font-feature-settings: "tnum" 1;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--terracotta);
    font-style: italic;
}

.legal-section h3 {
    margin: 28px 0 14px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.1rem, 1.8vw, 1.25rem);
    line-height: 1.2;
    color: var(--ink);
}

.legal-section p {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ink);
    margin: 0 0 14px;
    max-width: 70ch;
}

.legal-section ul {
    margin: 14px 0;
    padding-left: 24px;
}

.legal-section ul li {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ink);
    margin-bottom: 8px;
}

/* --------------------------------------------------------------------------
   Definition list — terms section sa "Korisnik" / "Oglas" itd.
   -------------------------------------------------------------------------- */
.definition-list {
    list-style: none;
    padding-left: 0;
    margin: 18px 0;
}

.definition-list li {
    padding: 14px 18px;
    background: var(--warm-white);
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--terracotta);
    border-radius: 0;
    margin-bottom: 10px;
    font-family: var(--font-body);
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--ink);
}

.definition-list li strong {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--ink);
    margin-right: 4px;
}

/* --------------------------------------------------------------------------
   Forbidden list — 6 zabrana grid (terms section 6)
   -------------------------------------------------------------------------- */
.forbidden-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.forbidden-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--warm-white);
    border: 1px solid var(--hairline);
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--ink);
    line-height: 1.4;
}

.forbidden-item i {
    flex-shrink: 0;
    color: var(--terracotta);
    font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   Contact info box — section 10 kontakt details
   -------------------------------------------------------------------------- */
.contact-info-box {
    background: var(--warm-white);
    border: 1px solid var(--hairline);
    border-radius: 0;
    padding: clamp(20px, 2.5vw, 28px);
    margin: 20px 0 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 0;
    font-family: var(--font-body);
    font-size: 0.98rem;
    color: var(--ink);
}

.contact-row i {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--hairline-strong);
    color: var(--terracotta);
    font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   Privacy-page specific blocks (zadržano za /politika-privatnosti)
   -------------------------------------------------------------------------- */

/* GDPR badge — editorial varijanta */
.gdpr-badge {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--warm-white);
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--terracotta);
    border-radius: 0;
    padding: 18px 22px;
    margin-top: 20px;
}

.gdpr-badge i {
    font-size: 1.75rem;
    color: var(--terracotta);
    flex-shrink: 0;
}

.gdpr-badge strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 4px;
}

.gdpr-badge span {
    font-family: var(--font-body);
    color: var(--taupe);
    font-size: 0.92rem;
}

/* Data cards 3-col grid (privacy section) */
.data-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 20px 0;
}

.data-card {
    background: var(--warm-white);
    border: 1px solid var(--hairline);
    border-radius: 0;
    padding: 22px 20px;
    text-align: center;
    transition: border-color 0.2s;
    box-shadow: none;
}

.data-card:hover {
    border-color: var(--hairline-strong);
    box-shadow: none;
}

.data-card i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--hairline-strong);
    border-radius: 50%;
    color: var(--terracotta);
    font-size: 1rem;
    margin-bottom: 14px;
}

.data-card h4 {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1rem;
    color: var(--ink);
}

.data-card p {
    font-family: var(--font-body);
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--taupe);
    margin: 0;
}

/* Purpose list (privacy section 3) — 4 razloga za korišćenje podataka */
.purpose-list {
    margin: 18px 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.purpose-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    background: var(--warm-white);
    border: 1px solid var(--hairline);
    border-radius: 0;
}

.purpose-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--hairline-strong);
    color: var(--terracotta);
    font-size: 1rem;
}

.purpose-content {
    min-width: 0;
}

.purpose-content h4 {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.02rem;
    color: var(--ink);
}

.purpose-content p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--taupe);
}

/* Cookies table (privacy section 4) — div-based table → editorial-table look */
.cookie-table {
    margin: 18px 0;
    border: 1px solid var(--hairline);
    background: var(--warm-white);
}

.cookie-row {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 14px;
    padding: 14px 18px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--ink);
    border-bottom: 1px solid var(--hairline);
}

.cookie-row:last-child {
    border-bottom: none;
}

.cookie-header {
    background: var(--cream);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--taupe);
    border-bottom: 1px solid var(--hairline-strong);
}

.cookie-row strong {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--ink);
}

/* Retention grid (privacy section 6) — period čuvanja podataka */
.retention-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin: 18px 0;
}

.retention-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--warm-white);
    border: 1px solid var(--hairline);
    border-radius: 0;
}

.retention-item > i {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--hairline-strong);
    color: var(--terracotta);
    font-size: 1rem;
}

.retention-item > div {
    min-width: 0;
}

.retention-item strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1rem;
    color: var(--ink);
    margin-bottom: 4px;
}

.retention-item span {
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--taupe);
}

/* Security features (privacy section 7) — 6 security mera grid */
.security-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.security-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--warm-white);
    border: 1px solid var(--hairline);
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--ink);
    line-height: 1.4;
}

.security-item i {
    flex-shrink: 0;
    color: var(--terracotta);
    font-size: 0.95rem;
}

/* Rights grid (privacy section 8) — 6 GDPR prava */
.rights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin: 20px 0;
}

.right-card {
    padding: 22px 20px;
    background: var(--warm-white);
    border: 1px solid var(--hairline);
    border-radius: 0;
    text-align: center;
    transition: border-color 0.2s;
}

.right-card:hover {
    border-color: var(--hairline-strong);
}

.right-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--hairline-strong);
    color: var(--terracotta);
    font-size: 1.05rem;
    margin: 0 auto 14px;
}

.right-card h4 {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--ink);
}

.right-card p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--taupe);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    .legal-content {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .legal-sidebar {
        position: static;
    }

    .forbidden-list {
        grid-template-columns: 1fr;
    }
}