/**
 * PK Catalog — wizytowki user-generated.
 *
 * Wiekszosc stylow jest inline (w PHP), tutaj sa tylko reguly responsywne
 * (media queries nie moga byc inline) oraz drobne usprawnienia hover.
 */

.pk-cards-form-wrap *,
.pk-cards-list-wrap * {
    box-sizing: border-box;
}

/* Hover na karcie wizytowki */
.pk-card {
    transition: box-shadow .15s ease;
}
.pk-card:hover {
    box-shadow: 0 2px 12px rgba(40, 59, 117, .10);
}

/* Hover na boxie loga w formularzu */
.pk-cards-form [data-pkc-logo-box]:hover {
    border-color: #283b75;
    background: #f1f3f9;
}

/* Hover na przycisku "Pokaz kolejne" */
.pk-cards-list-wrap [data-pkc-loadmore]:hover {
    background: #283b75;
    color: #fff;
}

/* Focus na polach formularza */
.pk-cards-form input:focus,
.pk-cards-form textarea:focus {
    outline: none;
    border-color: #283b75;
    box-shadow: 0 0 0 2px rgba(40, 59, 117, .12);
}

/* ---- RESPONSYWNOSC ---- */
@media (max-width: 640px) {
    /* Formularz: dwie kolumny -> jedna */
    .pk-cards-form .pk-cards-grid {
        grid-template-columns: 1fr !important;
    }
    .pk-cards-form [data-pkc-logo-box] {
        width: 100% !important;
        max-width: 280px;
    }

    /* Karta wizytowki: logo + tresc -> jedna kolumna */
    .pk-card {
        grid-template-columns: 1fr !important;
    }
    .pk-card .pk-card-left img,
    .pk-card .pk-card-left > div:first-child {
        width: 100% !important;
        max-width: 220px;
        height: auto !important;
        aspect-ratio: 1 / 1;
    }
}

/* Uslugi w karcie na bardzo waskich ekranach -> jedna kolumna */
@media (max-width: 420px) {
    .pk-card .pk-card-right > div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}