/* Colors/fonts copied verbatim from helferdienste-plugin's
   public/css/frontend.css (.gwh-event-card), already matched to
   fv-bauerbach.de's real palette — no new colors/fonts invented here, per
   the loose-coupling design
   (docs/superpowers/specs/2026-08-22-sponsoren-plugin-design.md,
   "Visuelles Design"). Standalone copy, not an import. */

.fvbs-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
}

/* Card height is a fixed px value, not tied to the card's width (no
   aspect-ratio) — this is what --fvbs-card-height, settable per shortcode
   instance via the size attribute, actually controls. Slider and grid get
   different fallback heights since they're different contexts (slider
   cards previously felt too large, the grid's felt too small — both
   confirmed live against the real site with real sponsor logos,
   2026-08-23). */
.fvbs-slider .fvbs-card {
    height: var(--fvbs-card-height, 150px);
}

.fvbs-grid .fvbs-card {
    height: var(--fvbs-card-height, 170px);
}

.fvbs-card__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.fvbs-card__logo {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.fvbs-card__name {
    font-family: "Poppins", ui-sans-serif, sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: #191919;
    text-align: center;
}

/* Column min-width is tied to the same --fvbs-card-height variable as the
   card's own height (not a separate width variable) — found live
   (2026-08-23) that growing height alone did nothing for wide/flat logos
   (e.g. a 300x52px banner-shaped logo): their rendered size is bound by
   the card's WIDTH, which stayed fixed at the old 160px regardless of the
   size attribute. Reusing the height variable here keeps cards roughly
   square and makes "size" actually grow both dimensions together. */
.fvbs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--fvbs-card-height, 170px), 1fr));
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

.fvbs-slider {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 3rem;
}

.fvbs-slider__heading {
    font-family: "Poppins", ui-sans-serif, sans-serif;
    font-weight: 700;
    color: #191919;
    text-align: center;
    margin: 0 0 1.5rem;
}

.fvbs-slider__stage {
    position: relative;
}

.fvbs-slider__viewport {
    overflow: hidden;
}

.fvbs-slider__track {
    display: flex;
    transition: transform 0.45s ease;
}

.fvbs-slider__slide {
    flex: 0 0 calc(100% / var(--fvbs-visible, 3));
    min-width: 0;
    box-sizing: border-box;
    padding: 0 0.6rem;
}

/* !important throughout: fv-bauerbach.de's active theme (Hello Elementor)
   ships its own reset.css with a bare `button` rule that wins over a
   plain class-scoped rule for these properties — already hit and fixed
   the same way in the sibling helferdienste-plugin and aktuelles-plugin
   (.fvb-slider__arrow), applied here up front rather than rediscovering
   it live again. */
.fvbs-slider__arrow {
    position: absolute;
    top: 50% !important;
    transform: translateY(-50%);
    width: 2.6rem !important;
    height: 2.6rem !important;
    border-radius: 50% !important;
    border: none !important;
    background: #191919 !important;
    color: #fff !important;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

.fvbs-slider__arrow:hover {
    background: #e81717 !important;
}

.fvbs-slider__arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

.fvbs-slider__arrow[hidden] {
    display: none !important;
}

.fvbs-slider__arrow--prev {
    left: -3rem;
}

.fvbs-slider__arrow--next {
    right: -3rem;
}

@media (max-width: 640px) {
    .fvbs-slider {
        padding: 0 2.4rem;
    }

    .fvbs-slider__arrow--prev {
        left: -2.4rem;
    }

    .fvbs-slider__arrow--next {
        right: -2.4rem;
    }
}

.fvbs-slider__thanks {
    font-family: "Lato", ui-sans-serif, sans-serif;
    color: #6e6e6e;
    text-align: center;
    margin: 1.5rem 0 0;
}

.fvbs-slider__cta {
    text-align: center;
    margin-top: 1.5rem;
}

.fvbs-slider__cta-link {
    display: inline-flex;
    align-items: center;
    font-family: "Poppins", ui-sans-serif, sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background: #191919;
    padding: 0.6rem 1.2rem;
    border-radius: 3px;
}

.fvbs-slider__cta-link:hover {
    background: #e81717;
}
