/* ===========================
   BiLLU Theme – Pages CSS
   Dla /funkcje oraz /ekrany (szablony page-funkcje.php, page-ekrany.php).
   Wszystkie mockupy są czystym HTML/CSS i wspierają dark-mode.
   =========================== */

/* ── Feature icons (wspólne kolory używane także w section-features-detailed) ── */
.feature-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    flex-shrink: 0;
}
.feature-icon-teal   { background: rgba(0,143,143,.12);  color: var(--brand-teal); }
.feature-icon-bordo  { background: rgba(136,45,97,.12);  color: var(--brand-bordo); }
.feature-icon-navy   { background: rgba(11,36,48,.10);   color: var(--brand-navy); }
.feature-icon-orange { background: rgba(234,88,12,.12);  color: #ea580c; }
.feature-icon-green  { background: rgba(22,163,74,.12);  color: #16a34a; }
[data-theme="dark"] .feature-icon-navy { background: rgba(255,255,255,.08); color: #cbd5e1; }

/* ── Strony: wspólny layout ───────────────────────────────────────────────── */
.page-features-detailed,
.page-screens {
    padding-top: 40px;
}
.page-features-detailed .section-features-detailed,
.page-screens .section-screens-hero {
    padding-top: 64px;
}

/* ============================
   /funkcje – szczegółowa siatka
   ============================ */
.features-detailed-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 56px;
}
.feature-card-detailed {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    display: flex;
    flex-direction: column;
}
.feature-card-detailed:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(0,143,143,.35);
}
.feature-card-detailed h3 {
    font-size: 1.15rem;
    margin-bottom: 10px;
}
.feature-card-detailed p {
    color: var(--text-muted);
    font-size: .95rem;
    margin-bottom: 16px;
    line-height: 1.6;
}
.feature-detail-list {
    margin-top: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.feature-detail-list li {
    position: relative;
    padding-left: 22px;
    font-size: .88rem;
    color: var(--text-main);
    line-height: 1.5;
}
.feature-detail-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(0,143,143,.15);
    border: 2px solid var(--brand-teal);
}
.feature-detail-list li::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 11px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--brand-teal);
}
.features-detailed-footer {
    margin-top: 32px;
}
.features-detailed-footer p {
    color: var(--text-muted);
    margin-bottom: 16px;
}

/* ============================
   „Co nowego” — sekcja datowana (Nowosci.astro)
   ============================ */
.section-nowosci {
    padding: 96px 0;
}
.nowosci-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.nowosc {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}
.nowosc h3 {
    font-size: 1.05rem;
    margin: 12px 0 8px;
}
.nowosc p {
    color: var(--text-muted);
    font-size: .92rem;
    line-height: 1.6;
    margin: 0;
}
.nowosc-kropka {
    display: block;
    width: 28px;
    height: 6px;
    border-radius: 3px;
}
/* Klasy feature-icon-* dają jasne tło i kolor; pasek bierze sam kolor. */
.nowosc .nowosc-kropka { background: currentColor; }
@media (max-width: 960px) {
    .nowosci-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .nowosci-grid { grid-template-columns: 1fr; }
    .section-nowosci { padding: 64px 0; }
}