/* MP Places – Übersicht
 * Grid + Karten + Modal Basis. Reine Struktur / Layout.
 * Farben via Elementor Controls (Selektoren) oder globale Variablen.
 */

.myplatz-places {
    display: block;
    position: relative;
}

.myplatz-places__grid {
    display: grid;
    width: 100%;
}

/* Responsive Spalten – Elementor Controls setzen custom properties optional
   Fallback: 1/2/3 mobile/tablet/desktop */
@media (min-width: 0px) {
    .myplatz-places__grid {
        grid-template-columns: repeat(var(--cols-mobile, 1), 1fr);
        gap: 1.5rem;
    }
}

@media (min-width: 640px) {
    .myplatz-places__grid {
        grid-template-columns: repeat(var(--cols-tablet, 2), 1fr);
    }

    /* No special desktop-only footer positioning required */
}

@media (min-width: 992px) {
    .myplatz-places__grid {
        grid-template-columns: repeat(var(--cols-desktop, 3), 1fr);
    }
}

.myplatz-places__card {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    background: #FFFFFF;
    border-radius: .75rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
    transition: box-shadow .18s ease, transform .18s ease;
}

.myplatz-places__card:hover,
.myplatz-places__card:focus-within {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}

.myplatz-places__media {
    position: relative;
    aspect-ratio: 16/9;
    background: #F1F4F5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 auto;
    /* ensure image container not squashed by flex column + reserved footer padding */
}

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

.myplatz-places__no-image {
    font-size: .85rem;
    color: #6E7A84;
    text-transform: lowercase;
    letter-spacing: .5px;
}

/* Layout spacing tokens */
:root {
    --places-pad-x: 1rem;
    --places-pad-y: 1rem;
    --places-gap-block: .75rem;
    --places-footer-pad-y: .75rem;
}

.myplatz-places__main {
    display: flex;
    flex-direction: column;
    gap: var(--places-gap-block);
    padding: var(--places-pad-y) var(--places-pad-x) 0 var(--places-pad-x);
    flex: 1 1 auto;
    min-height: 0;
    /* allow description overflow expansion without pushing footer prematurely */
}

/* Meta wrapper outside nested selector */
.myplatz-places__meta {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.myplatz-places__title {
    margin: 0;
    font-weight: 600;
    line-height: 1.2;
}

/* Properties */
.myplatz-places__properties {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .5rem;
}

.myplatz-places__prop {
    background: rgba(0, 0, 0, .04);
    padding: .25rem .55rem;
    border-radius: .5rem;
    font-size: .7rem;
    font-weight: 500;
    line-height: 1.2;
}

/* Extras */
.myplatz-places__extras {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .55rem;
}

.myplatz-places__extra {
    background: rgba(0, 0, 0, .04);
    padding: .45rem .55rem;
    border-radius: .6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.myplatz-places__extra.is-hidden {
    display: none;
}

.myplatz-places__extra-more-btn {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    padding: 0;
    color: inherit;
}

.myplatz-places__extra-icon img,
.myplatz-places__extra-icon--emoji {
    width: 1.4rem;
    height: 1.4rem;
    font-size: 1.4rem;
    display: block;
}

.myplatz-places__extra-name {
    display: none;
}

/* Description */
.myplatz-places__description {
    font-family: 'Inter', var(--e-global-typography-secondary-font-family, Arial), sans-serif;
    padding-left: 4%;
    max-width: 90%;
    color: var(--color-body, #6E7A84);
    font-size: .9rem;
    line-height: 1.35;
    max-height: 6.5em;
    overflow: hidden;
    position: relative;
}

.myplatz-places__description.is-expanded {
    max-height: none;
}

/* Collapsible toggle */
.myplatz-places__desc-toggle {
    background: none;
    border: none;
    padding: 0;
    margin-top: .25rem;
    font-size: .7rem;
    font-weight: 600;
    color: var(--desc-toggle-color, #10B1B6);
    cursor: pointer;
    position: relative;
}

.myplatz-places__desc-toggle:focus-visible {
    outline: 2px solid var(--focus-color, #10B1B6);
    outline-offset: 2px;
}

/* Prices */
.myplatz-places__prices {
    margin-top: .25rem;
}

.myplatz-places__price-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .5rem;
    justify-content: flex-end;
}

.myplatz-places__price-item {
    display: flex;
    gap: .4rem;
    align-items: center;
}

/* Price badges – visual style aligned with single rental-place (color/effect only) */
.myplatz-places__price-badge {
    font-size: 1rem;
    font-weight: 600;
    padding: .35rem .65rem;
    border-radius: .5rem;
    background: linear-gradient(135deg, var(--color-primary, var(--myplatz-primary, #10B1B6)) 0%, color-mix(in srgb, var(--color-primary, var(--myplatz-primary, #10B1B6)) 38%, #55f1f7) 100%);
    color: #fff;
    box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .25), 0 1px 3px rgba(0, 0, 0, .18);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    white-space: nowrap;
    font-family: 'Montserrat', var(--e-global-typography-secondary-font-family, Arial), sans-serif;
    /* restored scaling */
    transition: background .45s ease, box-shadow .45s ease;
}

/* Active state inherits base gradient; no override needed */
/* (No separate .is-active rule to avoid empty ruleset; base styles are the active appearance) */

.myplatz-places__price-badge.is-muted {
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary, #10B1B6) 4%, #ffffff) 0%, color-mix(in srgb, var(--color-primary, #10B1B6) 2%, #f7fafb) 100%);
    color: #9ca8ad;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);
    text-shadow: none;
    /* shrink via real sizing instead of transform (keeps layout consistent) */
    font-size: .875rem;
    padding: .25rem .5rem;
}

/* Card Footer (flow, no absolute) */
.myplatz-places__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: var(--places-footer-pad-y) var(--places-pad-x) var(--places-footer-pad-y) var(--places-pad-x);
    margin-top: var(--places-footer-pad-y);
    border-top: 1px solid rgba(0, 0, 0, .06);
    background: #FFFFFF;
}

/* Reset internal footer blocks */
.myplatz-places__footer .myplatz-places__prices,
.myplatz-places__footer .myplatz-places__actions {
    margin-top: 0;
}

/* Actions */
.myplatz-places__actions {
    margin-top: auto;
}

.myplatz-places__view-btn,
.myplatz-places__more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.2;
    padding: .55rem .95rem;
    border-radius: .6rem;
    background: var(--btn-bg, #10B1B6);
    color: var(--btn-color, #FFFFFF);
    border: none;
    cursor: pointer;
    transition: background .18s ease, box-shadow .18s ease;
    text-decoration: none;
}

.myplatz-places__view-btn:hover,
.myplatz-places__view-btn:focus-visible,
.myplatz-places__more-btn:hover,
.myplatz-places__more-btn:focus-visible {
    background: var(--btn-bg-hover, #0C8F94);
}

.myplatz-places__more {
    text-align: center;
    margin-top: 1.75rem;
}

/* Empty */
.myplatz-places__empty {
    padding: 1.5rem;
    text-align: center;
    font-size: .85rem;
    color: #6E7A84;
    background: #F3F6F7;
    border-radius: .75rem;
}

/* Modal */
.myplatz-places__modal[hidden] {
    display: none !important;
}

.myplatz-places__modal {
    position: fixed;
    inset: 0;
    z-index: 999 !important;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 100vh;
}

.myplatz-places__modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
}

.myplatz-places__modal-dialog {
    position: relative;
    background: #FFFFFF;
    max-width: min(70vw, 820px);
    width: 100%;
    /* default: natural content height */
    max-height: none;
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .25);
}

/* Needs scroll variant (only when content taller than viewport threshold) */
.myplatz-places__modal-dialog.needs-scroll {
    max-height: 90vh;
    height: 90vh;
    overflow: hidden;
}

.myplatz-places__modal-content {
    padding: 1.25rem 1.25rem 1.75rem;
    overflow: visible;
    flex: 1 1 auto;
    scroll-behavior: auto !important;
}

.myplatz-places__modal-dialog.needs-scroll .myplatz-places__modal-content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}

/* Scroll lock for background when any MyPlatz modal open */
html.myplatz-modal-open,
body.myplatz-modal-open {
    overflow: hidden !important;
    overscroll-behavior: contain;
    touch-action: none;
}

.myplatz-places__modal-close {
    position: absolute;
    top: .65rem;
    right: .65rem;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, .06);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.myplatz-places__modal-close:hover,
.myplatz-places__modal-close:focus-visible {
    background: rgba(0, 0, 0, .12);
}

/* Focus */
.myplatz-places__view-btn:focus-visible,
.myplatz-places__more-btn:focus-visible,
.myplatz-places__extra-more-btn:focus-visible,
.myplatz-places__modal-close:focus-visible {
    outline: 2px solid var(--focus-color, #10B1B6);
    outline-offset: 2px;
}

/* Transitions for modal (fade/scale) */
.myplatz-places__modal-dialog {
    opacity: 0;
    transform: translateY(10px) scale(.98);
    transition: opacity .2s ease, transform .22s ease;
}

.myplatz-places__modal.is-open .myplatz-places__modal-dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Aspect-ratio fallback (older browsers) */
@supports not (aspect-ratio: 1 / 1) {
    .myplatz-places__media {
        height: 0;
        padding-top: 75%;
    }

    .myplatz-places__media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* Spinner */
.myplatz-places__modal-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
    padding: 3rem 1rem;
    font-size: .85rem;
    color: #58656b;
}

.myplatz-spinner {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 4px solid rgba(0, 0, 0, .12);
    border-top-color: var(--color-primary, #10B1B6);
    animation: myplatz-spin .9s linear infinite;
    box-sizing: border-box;
}

.myplatz-rental-place__main {
    box-shadow: none !important;
}

@keyframes myplatz-spin {
    to {
        transform: rotate(360deg);
    }
}