/* ================================
   Flash Messages — OK (green)
   ================================ */

.c-Flash--ok {
    background-color: #ecfdf5;
    box-shadow: 0 .5rem 1.6675rem .145rem rgba(34, 197, 94, .15);
    text-align: center;
}

.c-Flash-peek {
    position: relative;
    z-index: 0;
    margin-inline: 3rem;
    margin-bottom: -4rem;
}

.c-Flash-peek .c-Island {
    padding-bottom: 6rem;
}

.c-Flash-zWrapper {
    position: relative;
    z-index: 1;
}

/* ================================
   Flash Messages — Error (red)
   ================================ */

.c-Flash--error {
    background-color: #fef2f2;
    box-shadow: 0 .5rem 1.6675rem .145rem rgba(220, 38, 38, .15);
    text-align: center;
}

/* ================================
   Flash icon circle (shared)
   ================================ */

.c-Flash-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    margin-bottom: 1.5rem;
}

.c-Flash-icon--ok {
    background-color: #16a34a;
}

.c-Flash-icon--error {
    background-color: #dc2626;
}

/* ================================
   Inline form error (inside form)
   ================================ */

.c-FormError {
    background-color: #fef2f2;
    border-radius: var(--bs-border-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.c-FormError-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: #dc2626;
}

/* ================================
   Wedding form: hidden wish fields
   ================================ */

.c-WishHidden {
    display: none;
}

/* ================================
   Layout: Header search + user icon
   ================================ */

.l-Offcanvas-wrapSearch {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ================================
   Admin: Capacity inline form
   ================================ */

.c-CapacityForm {
    display: flex;
    gap: .4rem;
    align-items: center;
}

.c-CapacityForm-input {
    width: 5rem;
}

.c-CapacityForm-submit {
    padding: .2rem .6rem;
}

/* ================================
   Homepage mobile: skrytí organického obrázku
   ================================ */

@media (max-width: 767px) {
    .l-Content-wrapImage {
        display: none;
    }
}

/* ================================
   Homepage mobile: zmenšení article boxů ~20 %
   ================================ */

@media (max-width: 767px) {
    .c-Carousel--articles .c-Card-wrapMedia {
        aspect-ratio: 350 / 333; /* původně 400/380, zachováno měřítko */
    }
}

/* ================================
   Homepage mobile: posun hlavní novinky výše
   ================================ */

@media (max-width: 767px) {
    .l-Content-header--homepage > .row:last-child {
        margin-top: -20vh;
    }
}

/* ================================
   Kategorie: mobilní toggle filtru
   ================================ */

.c-FilterToggle {
    display: none;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.5rem;
    background: none;
    border: none;
    padding: 0;
    color: var(--bs-primary);
    font-size: inherit;
    font-weight: 500;
    cursor: pointer;
}

.c-FilterToggle-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
    font-style: normal;
}

.c-FilterToggle[aria-expanded="true"] .c-FilterToggle-arrow {
    transform: rotate(180deg);
}

@media (max-width: 767px) {
    .c-FilterToggle {
        display: flex;
    }
    .l-Content-wrapForm {
        display: none;
    }
    .l-Content-wrapForm.is-open {
        display: block;
    }
}

/* ================================
   Kategorie: menší horizontální padding karet ve 2 sloupcích
   ================================ */

@media (max-width: 767px) {
    .row-cols-2 .c-Card-body {
        padding-inline: 1rem; /* původně 2rem, sníženo o 50 % */
    }
}

/* ================================
   Kategorie: 2 sloupce na mobilu / 4 na desktopu
   (row-cols-* není v kompilovaném Bootstrap CSS)
   ================================ */

@media (max-width: 991px) {
    .row-cols-2 > * {
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (min-width: 992px) {
    .row-cols-2 > * {
        flex: 0 0 auto;
        width: 25%;
    }
}

/* ================================
   Detail stránky/kategorie: větší řádkování
   ================================ */

.l-Content .c-Wysiwyg {
    line-height: 1.38; /* původně 1.2, +15 % */
}

/* ================================
   Breadcrumb link: zmenšení o 25 % (mobil)
   ================================ */

@media (max-width: 767px) {
    .c-Link--breadcrumb {
        font-size: .75em;
    }

    .c-Link--breadcrumb .c-Icon {
        width: 8px;
        height: 15px;
    }
}

/* ================================
   Admin: Wedding note row
   ================================ */

.c-WeddingNote {
    font-style: italic;
    color: #555;
    padding-top: 0;
}