/* Messemanager – Messen-Plugin
   ─────────────────────────────────────────────────────
   Theme-bestimmt: das Plugin definiert KEINE Farben, KEINE Schrift.
   Border und Pfeile übernehmen die Schriftfarbe (currentColor).
*/

.mm-fairs {
    --mm-card-w:       320px;
    --mm-image-aspect: 4 / 3;
    box-sizing: border-box;
    position: relative;
}
.mm-fairs *, .mm-fairs *::before, .mm-fairs *::after { box-sizing: border-box; }

.mm-fairs__empty {
    text-align: center;
    padding: 2.5rem 1rem;
    opacity: .65;
    border: 1px dashed currentColor;
}
.mm-fairs-warning {
    padding: .75rem 1rem;
    border: 1px solid currentColor;
}

/* ── Karten ───────────────────────────────────────── */
.mm-fairs__items {
    display: grid;
    gap: 1.5rem;
    background: transparent;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mm-fairs--cols-1 .mm-fairs__items { grid-template-columns: 1fr; }
.mm-fairs--cols-2 .mm-fairs__items { grid-template-columns: repeat(2, 1fr); }
.mm-fairs--cols-3 .mm-fairs__items { grid-template-columns: repeat(3, 1fr); }
.mm-fairs--cols-4 .mm-fairs__items { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) {
    .mm-fairs--grid .mm-fairs__items { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
    .mm-fairs--grid .mm-fairs__items { grid-template-columns: 1fr !important; }
}

.mm-fairs__card {
    display: flex;
    flex-direction: column;
    background: transparent;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    margin: 0;
    padding: 0 0 1rem;
    border: 0;
    border-bottom: 5px solid currentColor;
    transition: transform .18s ease;
}
/* Aggressiver Reset gegen Theme-Margins (Headings, Listen, Paragraphen),
   damit das Bild bündig oben sitzt und keine Lücken im Body entstehen. */
.mm-fairs__card,
.mm-fairs__card * {
    margin-top: 0 !important;
}
.mm-fairs__card * {
    margin-bottom: 0 !important;
}
a.mm-fairs__card:hover { transform: translateY(-3px); }

.mm-fairs__visual {
    position: relative;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    aspect-ratio: var(--mm-image-aspect);
    background: transparent;
    overflow: hidden;
    border: 0;
}
.mm-fairs__banner {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
}
.mm-fairs__banner--placeholder { background: transparent; }
.mm-fairs__logo {
    position: absolute;
    bottom: 8px;
    left: 8px;
    max-height: 56px;
    max-width: 120px;
    background: transparent;
    padding: 0;
    object-fit: contain;
    display: block;
}

.mm-fairs__body {
    padding: 1rem 0 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    flex: 1;
    background: transparent;
}
.mm-fairs__name { color: inherit; }
.mm-fairs__sub  { color: inherit; }
.mm-fairs__meta {
    margin: .5rem 0 0 !important;
    padding: 0;
    list-style: none !important;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.mm-fairs__meta-item {
    list-style: none !important;
    margin: 0 !important;
    padding: 0;
}
.mm-fairs__meta-item::before,
.mm-fairs__meta-item::marker { content: none !important; }

.mm-fairs__badge {
    display: inline-block;
    margin-top: .5rem !important;
    padding: .15rem .55rem;
    border: 1px solid currentColor;
    color: inherit;
    align-self: flex-start;
}

/* ── Slider-Modus (horizontal, snap pro Karte) ────── */
.mm-fairs--slider {
    padding: 0; /* Pfeil-Buttons sitzen AUSSERHALB des Containers (links/rechts negativ) */
}
.mm-fairs--slider .mm-fairs__items {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: .5rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.mm-fairs--slider .mm-fairs__card {
    flex: 0 0 var(--mm-card-w);
    width: var(--mm-card-w);
    scroll-snap-align: start;
}
.mm-fairs--slider .mm-fairs__items::-webkit-scrollbar { height: 6px; }
.mm-fairs--slider .mm-fairs__items::-webkit-scrollbar-thumb {
    background: rgba(127, 127, 127, .4);
    border-radius: 3px;
}

/* ── Pfeil-Buttons (Border + Farbe = currentColor) ── */
.mm-fairs__nav {
    position: absolute;
    top: 35%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: currentColor;
    border: 2px solid currentColor;
    border-radius: 50%;
    cursor: pointer;
    transition: opacity .15s ease;
    z-index: 2;
}
/* Pfeil-Buttons sitzen AUSSERHALB der Container-Breite – im umgebenden Theme-Padding.
   Voraussetzung: der WP-Block, der den Shortcode umschließt, hat genug horizontales
   Padding/Margin (üblich) und kein overflow:hidden. */
.mm-fairs__nav--prev { left:  calc(-1 * (40px + 12px)); }
.mm-fairs__nav--next { right: calc(-1 * (40px + 12px)); }
.mm-fairs__nav:hover    { opacity: .75; }
.mm-fairs__nav:disabled { opacity: .25; cursor: not-allowed; }
@media (max-width: 480px) {
    .mm-fairs--slider { padding: 0; }
    .mm-fairs__nav { display: none; }
    /* Auf Mobile: Karte fast volle Breite, 5 px der nächsten Karte als
       Slide-Hinweis am rechten Rand sichtbar (Gap = 5 px). */
    .mm-fairs--slider .mm-fairs__items { gap: 5px; }
    .mm-fairs--slider .mm-fairs__card {
        flex: 0 0 calc(100% - 10px);
        width: calc(100% - 10px);
    }
}