/*
 * Style hubu /lp/studnia/.
 *
 * Ładowane po base.css, variant-*.css i well-forms.css — formularze, sticky CTA,
 * hero, realizacje i FAQ dziedziczą stamtąd. Tutaj są wyłącznie komponenty,
 * których nie ma w żadnym istniejącym arkuszu.
 */

/*
 * Hero: base.css ustawia dla .lp-actions--hero flex-wrap: nowrap i white-space:
 * nowrap, więc długa etykieta rozpycha przycisk poza kolumnę tekstu i wchodzi
 * pod zdjęcie. Krótkie napisy to rozwiązują, ale zabezpieczamy się też stylem —
 * przyciski mogą się zawinąć do drugiego wiersza zamiast wyjść poza kontener.
 */
.lp-blueprint-well-hub .lp-actions--hero {
    flex-wrap: wrap;
}

.lp-blueprint-well-hub .lp-actions--hero .lp-btn {
    max-width: 100%;
}

/* --- Router zastosowania wody: rdzeń strony --- */

/*
 * Siatki trzyelementowe: albo trzy kolumny, albo jedna. Dwie dawałyby 2 + 1,
 * czyli samotną kartę z dziurą obok. Próg 1024px jest wspólny z siatkami
 * sześcioelementowymi niżej, żeby układ zmieniał się w jednym miejscu.
 */
.lp-blueprint-well-hub .lp-use-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
    margin-top: 28px;
}

@media (min-width: 1024px) {
    .lp-blueprint-well-hub .lp-use-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.lp-blueprint-well-hub .lp-use-card {
    display: flex;
    flex-direction: column;
    padding: 26px;
    background: #fff;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-shadow);
}

.lp-blueprint-well-hub .lp-use-card h3 {
    margin: 0 0 8px;
    color: var(--lp-navy);
    font-size: 1.25rem;
    line-height: 1.25;
}

.lp-blueprint-well-hub .lp-use-card__summary {
    margin: 0 0 18px;
    color: var(--lp-muted);
    font-size: .92rem;
}

.lp-blueprint-well-hub .lp-use-card__scope {
    margin: 0 0 16px;
    padding: 16px;
    background: var(--lp-soft, #f4f6fb);
    border-radius: 8px;
}

.lp-blueprint-well-hub .lp-use-card__scope > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.lp-blueprint-well-hub .lp-use-card__scope > div + div {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--lp-line);
}

.lp-blueprint-well-hub .lp-use-card__scope dt {
    color: var(--lp-muted);
    font-size: .82rem;
}

.lp-blueprint-well-hub .lp-use-card__scope dd {
    margin: 0;
    color: var(--lp-navy);
    font-size: .88rem;
    font-weight: 900;
    text-align: right;
}

.lp-blueprint-well-hub .lp-use-card__why {
    margin: auto 0 0;
    color: var(--lp-muted);
    font-size: .86rem;
    line-height: 1.55;
}

/* --- Objawy: lista, nie siatka, bo czyta się ją po kolei --- */

.lp-blueprint-well-hub .lp-symptom-list {
    display: grid;
    gap: 14px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.lp-blueprint-well-hub .lp-symptom-list li {
    display: grid;
    gap: 4px 20px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--lp-line);
    border-left: 3px solid var(--lp-yellow);
    border-radius: 8px;
    grid-template-columns: minmax(220px, 1fr) 2fr;
}

.lp-blueprint-well-hub .lp-symptom-list strong {
    color: var(--lp-navy);
    font-size: .95rem;
}

.lp-blueprint-well-hub .lp-symptom-list span {
    color: var(--lp-muted);
    font-size: .9rem;
    line-height: 1.5;
}

/* --- Dwie kolumny: warunki instalacji i parametry --- */

.lp-blueprint-well-hub .lp-well-hub__columns {
    display: grid;
    gap: 40px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.lp-blueprint-well-hub .lp-check-list {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.lp-blueprint-well-hub .lp-check-list li {
    position: relative;
    padding: 7px 0 7px 26px;
    color: var(--lp-navy);
    font-size: .93rem;
}

.lp-blueprint-well-hub .lp-check-list li + li {
    border-top: 1px solid var(--lp-line);
}

.lp-blueprint-well-hub .lp-check-list li::before {
    position: absolute;
    top: 7px;
    left: 0;
    color: var(--lp-blue);
    content: "•";
    font-weight: 900;
}

/* --- Przykładowe układy i czynniki kosztowe --- */

/*
 * Obie siatki mają po sześć elementów. Przy auto-fit i minmax(260px) na szerokim
 * ekranie wychodzą cztery kolumny, czyli ostatni wiersz to 4 + 2 i dwie dziury.
 * Dlatego liczba kolumn jest tu ustalona wprost: 6 dzieli się równo na 3 i na 2.
 */
.lp-blueprint-well-hub .lp-system-grid,
.lp-blueprint-well-hub .lp-cost-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr;
    margin-top: 28px;
}

@media (min-width: 640px) {
    .lp-blueprint-well-hub .lp-system-grid,
    .lp-blueprint-well-hub .lp-cost-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .lp-blueprint-well-hub .lp-system-grid,
    .lp-blueprint-well-hub .lp-cost-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.lp-blueprint-well-hub .lp-system-grid article,
.lp-blueprint-well-hub .lp-cost-grid > div {
    padding: 22px;
    background: #fff;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
}

.lp-blueprint-well-hub .lp-system-grid h3,
.lp-blueprint-well-hub .lp-cost-grid strong {
    display: block;
    margin: 0 0 8px;
    color: var(--lp-navy);
    font-size: 1.05rem;
    line-height: 1.3;
}

.lp-blueprint-well-hub .lp-system-grid p,
.lp-blueprint-well-hub .lp-cost-grid p {
    margin: 0;
    color: var(--lp-muted);
    font-size: .9rem;
    line-height: 1.55;
}

/* --- Linki do landingów szczegółowych --- */

/* Trzy elementy — ta sama zasada co przy routerze zastosowania. */
.lp-blueprint-well-hub .lp-related-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr;
    margin-top: 28px;
}

/*
 * Cztery kafelki, więc kolumny muszą dzielić cztery bez reszty - inaczej ostatni
 * wiersz zostaje niepełny. Stąd 1 / 2 / 4, a nie 3.
 */
@media (min-width: 640px) {
    .lp-blueprint-well-hub .lp-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .lp-blueprint-well-hub .lp-related-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.lp-blueprint-well-hub .lp-related-grid a {
    display: block;
    padding: 22px;
    background: #fff;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}

.lp-blueprint-well-hub .lp-related-grid a:hover,
.lp-blueprint-well-hub .lp-related-grid a:focus-visible {
    border-color: var(--lp-blue);
    transform: translateY(-2px);
}

.lp-blueprint-well-hub .lp-related-grid strong {
    display: block;
    margin-bottom: 6px;
    color: var(--lp-blue);
    font-size: 1.02rem;
}

.lp-blueprint-well-hub .lp-related-grid span {
    color: var(--lp-muted);
    font-size: .88rem;
    line-height: 1.5;
}

/* --- Drobne elementy formularza --- */

.lp-blueprint-well-hub .lp-form-label {
    margin: 20px 0 10px;
    color: #fff;
    font-size: .9rem;
    font-weight: 900;
}

.lp-blueprint-well-hub .lp-form-label small {
    color: rgba(255, 255, 255, .7);
    font-weight: 500;
}

.lp-blueprint-well-hub .lp-choice-single {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    color: #fff;
    font-size: .88rem;
    line-height: 1.45;
}

.lp-blueprint-well-hub .lp-choice-single input {
    margin-top: 3px;
    flex: 0 0 auto;
}

/* --- Mobile --- */

@media (max-width: 767px) {
    .lp-blueprint-well-hub .lp-symptom-list li {
        grid-template-columns: 1fr;
    }

    .lp-blueprint-well-hub .lp-use-card {
        padding: 20px;
    }

    .lp-blueprint-well-hub .lp-well-hub__columns {
        gap: 32px;
    }
}