/*
 * /lp/bakterie/ - style specyficzne dla landinga o bakteriach w wodzie ze studni.
 *
 * Wszystkie reguły są scope'owane klasą .lp-blueprint-bacteria, którą nadaje
 * functions.php. Strona dostaje też klasę .lp-blueprint-well, dzięki czemu
 * dziedziczy well-forms.css - w szczególności przełączanie paneli formularza
 * (.lp-blueprint-well .lp-form-hub [data-lp-path-panel]).
 *
 * Siatki mają JAWNIE podaną liczbę kolumn zamiast auto-fit. Przy auto-fit
 * ostatni wiersz potrafi zostać niepełny i układ wygląda na przypadkowy -
 * to był realny problem na /lp/studnia/. Liczby kolumn dzielą liczbę kart
 * bez reszty: 4 karty to 1 / 2 / 4, dwie karty to 1 / 2.
 */

/* --- Hero --- */

/*
 * base.css ustawia dla .lp-actions--hero flex-wrap: nowrap, przez co dłuższa
 * etykieta rozpycha przycisk poza kolumnę tekstu. Ten sam zabezpieczający
 * override co na hubie studziennym.
 */
.lp-blueprint-bacteria .lp-actions--hero {
    flex-wrap: wrap;
}

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

/* --- Zmysły kontra badanie: dwie karty w kontrze --- */

.lp-blueprint-bacteria .lp-bacteria__senses-inner {
    max-width: 960px;
}

.lp-blueprint-bacteria .lp-bacteria__contrast {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
    margin-top: 28px;
}

@media (min-width: 768px) {
    .lp-blueprint-bacteria .lp-bacteria__contrast {
        grid-template-columns: repeat(2, 1fr);
    }
}

.lp-blueprint-bacteria .lp-bacteria__contrast-card {
    padding: 26px;
    background: #fff;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-shadow);
}

.lp-blueprint-bacteria .lp-bacteria__contrast-card h3 {
    margin: 0 0 10px;
    color: var(--lp-blue);
    font-size: 1.05rem;
}

.lp-blueprint-bacteria .lp-bacteria__contrast-card p {
    margin: 0;
    color: var(--lp-muted);
    line-height: 1.6;
}

/* Karta z tezą strony dostaje akcent, żeby nie zginęła obok karty kontrastowej. */
.lp-blueprint-bacteria .lp-bacteria__contrast-card--accent {
    border-color: var(--lp-blue);
    border-left-width: 4px;
}

/* --- Skąd się biorą: 4 karty --- */

.lp-blueprint-bacteria .lp-source-grid,
.lp-blueprint-bacteria .lp-indicator-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
    margin-top: 28px;
}

@media (min-width: 640px) {
    .lp-blueprint-bacteria .lp-source-grid,
    .lp-blueprint-bacteria .lp-indicator-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.lp-blueprint-bacteria .lp-source-card,
.lp-blueprint-bacteria .lp-indicator-card {
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-shadow);
}

.lp-blueprint-bacteria .lp-source-card h3,
.lp-blueprint-bacteria .lp-indicator-card h3 {
    margin: 0 0 10px;
    color: var(--lp-blue);
    font-size: 1rem;
    line-height: 1.35;
}

.lp-blueprint-bacteria .lp-source-card p,
.lp-blueprint-bacteria .lp-indicator-card p {
    margin: 0;
    color: var(--lp-muted);
    font-size: .92rem;
    line-height: 1.6;
}

/*
 * Wartość graniczna. Renderowana tylko wtedy, gdy technolog uzupełni pole
 * 'limit' w content-bacteria.php - dlatego brak tego elementu jest stanem
 * normalnym, a nie usterką układu.
 */
.lp-blueprint-bacteria .lp-indicator-card__limit {
    margin: 0 0 10px !important;
    color: var(--lp-blue) !important;
    font-size: .95rem !important;
    font-weight: 900;
}

/* --- Bakterie żelaziste: wyróżnione sprostowanie --- */

.lp-blueprint-bacteria .lp-bacteria__iron-note {
    margin-top: 28px;
    padding: 24px 26px;
    background: var(--lp-tint, #f4f7fb);
    border-left: 4px solid var(--lp-blue);
    border-radius: var(--lp-radius);
}

.lp-blueprint-bacteria .lp-bacteria__iron-note h3 {
    margin: 0 0 8px;
    font-size: 1.02rem;
}

.lp-blueprint-bacteria .lp-bacteria__iron-note p {
    margin: 0;
    color: var(--lp-muted);
    line-height: 1.6;
}

/* --- Podział ról między laboratoriami: 2 karty --- */

.lp-blueprint-bacteria .lp-bacteria__labs-inner {
    max-width: 960px;
}

.lp-blueprint-bacteria .lp-bacteria__lab-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
    margin-top: 28px;
}

@media (min-width: 768px) {
    .lp-blueprint-bacteria .lp-bacteria__lab-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.lp-blueprint-bacteria .lp-bacteria__lab-card {
    padding: 26px;
    background: #fff;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-shadow);
}

.lp-blueprint-bacteria .lp-bacteria__lab-card h3 {
    margin: 0 0 10px;
    color: var(--lp-blue);
    font-size: 1.05rem;
}

.lp-blueprint-bacteria .lp-bacteria__lab-card p {
    margin: 0;
    color: var(--lp-muted);
    line-height: 1.6;
}

/* --- Ścieżka postępowania: 4 kroki --- */

.lp-blueprint-bacteria .lp-step-list {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

@media (min-width: 768px) {
    .lp-blueprint-bacteria .lp-step-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.lp-blueprint-bacteria .lp-step-card {
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--lp-line);
    border-top: 3px solid var(--lp-blue);
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-shadow);
}

.lp-blueprint-bacteria .lp-step-card__label {
    margin: 0 0 6px !important;
    color: var(--lp-blue) !important;
    font-size: .78rem !important;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.lp-blueprint-bacteria .lp-step-card h3 {
    margin: 0 0 10px;
    font-size: 1rem;
    line-height: 1.35;
}

.lp-blueprint-bacteria .lp-step-card p {
    margin: 0;
    color: var(--lp-muted);
    font-size: .92rem;
    line-height: 1.6;
}

/* --- Ograniczenia lampy UV --- */

.lp-blueprint-bacteria .lp-bacteria__uv-inner {
    max-width: 820px;
}

.lp-blueprint-bacteria .lp-check-list--warning {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.lp-blueprint-bacteria .lp-check-list--warning li {
    position: relative;
    padding: 0 0 0 30px;
    margin-bottom: 14px;
    color: var(--lp-muted);
    line-height: 1.6;
}

/*
 * Znacznik listy to element dekoracyjny - stąd aria-hidden nie jest potrzebne,
 * bo treść nie jest w DOM-ie, tylko w pseudo-elemencie.
 */
.lp-blueprint-bacteria .lp-check-list--warning li::before {
    content: "!";
    position: absolute;
    left: 0;
    top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--lp-blue);
    border-radius: 50%;
    color: #fff;
    font-size: .74rem;
    font-weight: 900;
}

/* --- Powiązane tematy: 4 karty --- */

.lp-blueprint-bacteria .lp-related-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr;
    margin-top: 28px;
}

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

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

.lp-blueprint-bacteria .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-bacteria .lp-related-grid a:hover,
.lp-blueprint-bacteria .lp-related-grid a:focus-visible {
    border-color: var(--lp-blue);
    transform: translateY(-2px);
}

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

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

/* --- Drobne elementy formularza (ciemne tło karty formularza) --- */

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

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

.lp-blueprint-bacteria .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-bacteria .lp-choice-single input {
    margin-top: 3px;
    flex: 0 0 auto;
}

/* --- Mobile --- */

@media (max-width: 767px) {
    .lp-blueprint-bacteria .lp-source-card,
    .lp-blueprint-bacteria .lp-indicator-card,
    .lp-blueprint-bacteria .lp-step-card,
    .lp-blueprint-bacteria .lp-bacteria__contrast-card,
    .lp-blueprint-bacteria .lp-bacteria__lab-card {
        padding: 20px;
    }

    .lp-blueprint-bacteria .lp-bacteria__iron-note {
        padding: 20px;
    }
}