/* Doplnky k web-styles.css pre web vykreslený na serveri: stránkovanie odkazmi, hlásenia a chyby formulára, obrázok článku. */
a.pagination-btn,
.pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 8px 12px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    color: var(--gray-700);
    text-decoration: none;
}

.pagination a.active {
    border-color: var(--blue-600);
    background: var(--blue-600);
    color: #fff;
}

.pagination a:hover:not(.active) {
    border-color: var(--blue-600);
    color: var(--blue-600);
}

.form-message {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
}

.form-message-success {
    background: var(--green-100);
    color: var(--green-600);
}

.form-message-error {
    background: #fee2e2;
    color: #b91c1c;
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
    border-color: var(--red-500);
}

.field-error {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: #b91c1c;
}

img.post-cover {
    display: block;
    border-radius: 12px;
}

/* titulný obrázok článku v hlavičke článku a v kartách blogu (bez vložených štýlov: bezpečnostná politika CSP ich nepúšťa) */
.article-cover img.post-cover {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.post-cover-photo {
    position: relative;
    overflow: hidden;
}

.post-cover-photo::before {
    display: none;
}

.post-cover-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* pole pasce proti robotom (kontaktný formulár): mimo obrazovky, pre ľudí aj čítačky neviditeľné */
.contact-trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.blog-filters .btn {
    flex: none;
}