/* =========================================================================
   components.css — icon system, annotation banner, scroll-spy.
   Wydzielone z styles.css (v3.7k refaktor). Źródło: 1271-1359 + 1914-1928.
   ========================================================================= */
/* =========================================================================
   ICON SYSTEM (custom SVG sprite — line-gold style)
   ========================================================================= */
.icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    flex-shrink: 0;
    overflow: visible;
}
.icon--16 { width: 16px; height: 16px; }
.icon--20 { width: 20px; height: 20px; }
.icon--24 { width: 24px; height: 24px; }
.icon--28 { width: 28px; height: 28px; }
.icon--32 { width: 32px; height: 32px; }
.icon--40 { width: 40px; height: 40px; }
.icon--48 { width: 48px; height: 48px; }

/* Warm accent — np. dla CTA złóż intencję */
.icon--warm { color: var(--accent-warm-600); }
/* Gold accent — sakralne akcenty */
.icon--gold { color: var(--accent-gold-500); }
/* White — do ciemnych tł */
.icon--white { color: #fff; }

/* Hover lift w kontekście kart */
.mission-card:hover .icon,
.deed-card:hover .icon,
.download-tile:hover .icon,
.biblio-tile:hover .icon,
.congregation-tile:hover .icon,
.community-card:hover .icon {
    transform: scale(1.08);
    transition: transform .2s ease;
}

/* Kółka i tła dla ikon w kartach */
.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-btn);
    flex-shrink: 0;
}
.icon-circle--sm { width: 32px; height: 32px; }
.icon-circle--md { width: 40px; height: 40px; }
.icon-circle--lg { width: 48px; height: 48px; }
.icon-circle--xl { width: 56px; height: 56px; }
.icon-circle--round { border-radius: 50%; }

.icon-circle--green-soft {
    background: var(--green-50);
    color: var(--green-800);
}
.icon-circle--green {
    background: var(--gradient-hero);
    color: #fff;
    box-shadow: var(--shadow-hero);
}
.icon-circle--gold {
    background: var(--gradient-gold);
    color: var(--green-900);
}
.icon-circle--white {
    background: rgba(255,255,255,.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,.2);
}
.icon-circle--warm {
    background: var(--gradient-warm);
    color: #fff;
}

/* =========================================================================
   ANNOTATION BANNER (tylko w prototypie — info dla klienta)
   Po 10.05.2026 (mail Krzysztofa): kompaktowy stamp z wersją + datą buildu.
   Pełny opis zmian zostaje w mailach do siostry.
   ========================================================================= */
.proto-banner {
    background: var(--accent-gold-500);
    color: var(--green-900);
    text-align: center;
    padding: 6px var(--s-3);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .35em;
}
.proto-banner__version { font-weight: 700; }
.proto-banner__sep { opacity: .6; }
.proto-banner__date { font-weight: 500; opacity: .9; }
.proto-banner a { color: var(--green-900); text-decoration: underline; }


/* =========================================================================
   SCROLL-SPY pasek zakładek (mobile usability — 17 sekcji)
   ========================================================================= */
.scroll-spy {
    position: sticky;
    top: var(--nav-h);
    z-index: 90;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
    display: none; /* włączamy na mobile jeśli chcemy */
}
.scroll-spy::-webkit-scrollbar { display: none; }