/* ====================================================================
   landing.css - wspolny uklad podstron SEO (projektowanie stron,
   strony internetowe Krakow, cennik). Dziedziczy zmienne i typografie
   ze styles.css, wiec zawsze musi byc ladowany PO nim.
   Osobny plik zamiast trzech blokow <style>, zeby zmiana wygladu
   podstron byla w jednym miejscu.
   ==================================================================== */

.lp-wrap { max-width: 880px; margin: 0 auto; padding: 1.5rem 1.15rem 4rem; }

/* Pasek gorny: logo + powrot na strone glowna */
.lp-bar { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 2.2rem; }
.lp-bar .lp-brand-link { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.lp-bar img { width: 40px; height: 40px; }
.lp-bar .lp-brand { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--white); }
.lp-bar .lp-brand span { color: var(--flame); }
.lp-bar .lp-home { margin-left: auto; color: var(--gold-light); text-decoration: none; font-size: 0.9rem; font-weight: 600; }
.lp-bar .lp-home:hover { color: var(--white); }

/* Okruszki - te same dane co BreadcrumbList w schema.org */
.lp-crumbs { font-size: 0.82rem; color: var(--gray); margin-bottom: 1.1rem; }
.lp-crumbs a { color: var(--gray-light); text-decoration: none; }
.lp-crumbs a:hover { color: var(--gold-light); }
.lp-crumbs span { color: var(--gray-dark); margin: 0 0.4rem; }

.lp-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 5vw, 2.9rem);
    line-height: 1.15;
    color: var(--white);
    margin-bottom: 1rem;
}
.lp-hero h1 em { font-style: normal; color: var(--gold-light); }
.lp-lead { color: var(--gray-light); font-size: 1.08rem; line-height: 1.85; margin-bottom: 1.6rem; }

.lp-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 2.6rem; }

/* Sekcje tresci */
.lp-section { margin: 2.8rem 0; }
.lp-section h2 {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 3.4vw, 1.75rem);
    color: var(--gold-light);
    margin-bottom: 0.9rem;
}
.lp-section h3 { color: var(--white); font-size: 1.05rem; margin: 1.6rem 0 0.5rem; }
.lp-section p { color: var(--gray-light); line-height: 1.85; margin-bottom: 1rem; }
.lp-section ul { margin: 0.6rem 0 1.2rem 1.4rem; color: var(--gray-light); line-height: 1.85; }
.lp-section li { margin-bottom: 0.45rem; }
.lp-section strong { color: var(--white); }
.lp-section a { color: var(--gold-light); }

/* Karty (kroki procesu, pakiety, powiazane strony) */
.lp-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 1.4rem 0 0.6rem; }
.lp-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1.15rem 1.2rem;
}
.lp-card h3 { margin-top: 0; color: var(--gold-light); font-size: 1rem; }
.lp-card p { margin-bottom: 0; font-size: 0.94rem; }
.lp-card .lp-step { display: block; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-dark); margin-bottom: 0.35rem; }

/* Tabela cen */
.lp-table-wrap { overflow-x: auto; margin: 1.2rem 0 1.4rem; }
.lp-table { width: 100%; border-collapse: collapse; min-width: 460px; font-size: 0.95rem; }
.lp-table th, .lp-table td { text-align: left; padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--border); color: var(--gray-light); }
.lp-table th { color: var(--white); font-weight: 600; }
.lp-table td strong { color: var(--gold-light); }

/* FAQ */
.lp-faq details {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.7rem;
    background: var(--surface);
}
.lp-faq summary { cursor: pointer; color: var(--white); font-weight: 600; }
.lp-faq summary::marker { color: var(--gold); }
.lp-faq p { margin: 0.8rem 0 0; color: var(--gray-light); line-height: 1.8; }

/* Blok koncowy z wezwaniem do dzialania */
.lp-cta {
    margin-top: 3rem;
    padding: 1.8rem 1.5rem;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
}
.lp-cta h2 { color: var(--white); font-family: var(--font-display); font-size: 1.45rem; margin-bottom: 0.7rem; }
.lp-cta p { color: var(--gray-light); margin-bottom: 1.3rem; line-height: 1.8; }
.lp-cta .lp-actions { justify-content: center; margin-bottom: 0; }

/* Linkowanie wewnetrzne miedzy podstronami */
.lp-related { margin-top: 3rem; border-top: 1px solid var(--border); padding-top: 1.6rem; }
.lp-related h2 { font-size: 1.05rem; color: var(--gray-light); margin-bottom: 0.9rem; font-family: var(--font-display); }
.lp-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.lp-related a { color: var(--gold-light); text-decoration: none; }
.lp-related a:hover { color: var(--white); text-decoration: underline; }

.lp-foot { margin-top: 2.5rem; font-size: 0.82rem; color: var(--gray-dark); text-align: center; }
.lp-foot a { color: var(--gray); text-decoration: none; }
.lp-foot a:hover { color: var(--gold-light); }