/*
 * Tzlev Institutions — Frontend Location Page
 * Responsive fixes for /location/ page
 *
 * IMPORTANT: JetEngine uses display:flex with flex:0 0 calc(100%/var(--columns))
 * and padding on items + negative margin on container for spacing.
 * Do NOT add gap or override width/max-width on desktop/tablet —
 * let Elementor's --columns CSS variable system handle it.
 */

/* ── Base improvements (all screens) ── */

/* Vertical spacing between card rows only */
.jet-listing-grid__item {
    margin-bottom: 16px !important;
}

/* Smoother flip transition */
.flip-inner {
    transition: transform .5s cubic-bezier(.4,0,.2,1) !important;
}

/* City filter – horizontal pill flow (desktop + tablet)
   Each city is inside its OWN .jet-radio-list__row div,
   so the parent <fieldset> must be the flex container. */
.city-filter .jet-radio-list-wrapper fieldset {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
    border: none !important;
    padding: 8px 0 !important;
    margin: 0 !important;
}

.city-filter .jet-radio-list__row {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
}

.city-filter .jet-radio-list__row:not(:last-child) {
    margin-bottom: 0 !important;
}

.city-filter .jet-radio-list__label {
    border-radius: 20px !important;
    padding: 6px 16px !important;
    transition: all .2s ease !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

/* ── Desktop + Tablet: force 3 columns from 768px up ── */
/* Override Elementor's @media(max-width:1024px) { --columns:2 } */
/* Target each template's specific listing grid element */
@media (min-width: 768px) {
    .jet-listing-grid__items.grid-col-desk-3,
    .elementor-5425 .elementor-element.elementor-element-7f95ca67 > .jet-listing-grid > .jet-listing-grid__items,
    .elementor-5301 .elementor-element.elementor-element-25ffa13c > .jet-listing-grid > .jet-listing-grid__items,
    .elementor-5304 .elementor-element.elementor-element-6097be12 > .jet-listing-grid > .jet-listing-grid__items,
    .elementor-5421 .elementor-element.elementor-element-643f77e > .jet-listing-grid > .jet-listing-grid__items {
        --columns: 3 !important;
    }
}

/* ── Mobile (up to 767px) ── */

@media (max-width: 767px) {

    /* ── Listing Grid: 1 column via grid ── */
    .jet-listing-grid__items {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .jet-listing-grid__items > .jet-listing-grid__item {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
    }

    /* ── Flip Card: disable 3D flip, show stacked ── */
    .flip-card {
        height: auto !important;
        min-height: unset !important;
        perspective: none !important;
    }

    .flip-card .flip-inner {
        transform-style: flat !important;
        height: auto !important;
    }

    /* Disable hover flip on mobile */
    .flip-card:hover .flip-inner,
    .flip-card:focus-within .flip-inner {
        transform: none !important;
    }

    /* Show front: always visible, position relative */
    .flip-card .flip-front {
        position: relative !important;
        backface-visibility: visible !important;
        transform: none !important;
        border-radius: 16px 16px 0 0 !important;
        box-shadow: none !important;
        padding: 16px 16px 12px !important;
    }

    /* Show back: always visible below front */
    .flip-card .flip-back {
        position: relative !important;
        backface-visibility: visible !important;
        transform: none !important;
        border-radius: 0 0 16px 16px !important;
        box-shadow: none !important;
        padding: 12px 16px 16px !important;
        border-top: 1px solid #e5e7eb;
        background: #f9fafb !important;
    }

    /* Card container border */
    .flip-card .flip-inner {
        border-radius: 16px !important;
        box-shadow: 0 4px 16px rgba(0,0,0,.08) !important;
        overflow: hidden;
        border: 1px solid #e5e7eb !important;
    }

    /* Hide the flip toggle button on mobile */
    .flip-toggle {
        display: none !important;
    }

    /* ── Hero Sections: stack vertically (all section templates) ── */
    /* 5425 (school), 5301 (home), 5304 (meoonot), 5310 (tabam), 5421 (taasuka) */
    .elementor-element-6948a95b,
    .elementor-element-f0bbc6c,
    .elementor-element-3a15c54b,
    .elementor-element-489b63fe,
    .elementor-element-13295e32 {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }

    /* All text columns (60%) → full width */
    .elementor-element-60f1074a,
    .elementor-element-50a957d2,
    .elementor-element-5f5139d,
    .elementor-element-599e7bd9,
    .elementor-element-10c6f678 {
        width: 100% !important;
        flex-basis: auto !important;
    }

    /* All image columns (40%) → hidden on mobile */
    .elementor-element-7179597e,
    .elementor-element-55d7ea02,
    .elementor-element-72dcff6e,
    .elementor-element-5928d79d,
    .elementor-element-19079b2c {
        display: none !important;
    }

    /* Icon boxes grids – 2 cols on mobile */
    .elementor-element-602d281f,
    .elementor-element-4ad2238a,
    .elementor-element-16011735 {
        grid-template-columns: 1fr 1fr !important;
    }

    /* ── Section headings ── */
    .elementor-heading-title {
        word-break: keep-all;
    }

    /* ── City Filter: native dropdown on mobile ── */
    .tzlev-city-select {
        display: block;
        width: 100%;
        padding: 10px 14px;
        font-size: 15px;
        font-family: "Heebo", -apple-system, sans-serif;
        border: 1px solid #d1d5db;
        border-radius: 10px;
        background: #fff;
        color: #1f2937;
        direction: rtl;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: left 12px center;
        cursor: pointer;
    }

    .tzlev-city-select:focus {
        outline: none;
        border-color: #4f46e5;
        box-shadow: 0 0 0 3px rgba(79,70,229,.15);
    }

    /* ── General spacing ── */
    .elementor-section > .elementor-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Listing grid item text sizes */
    .flip-front h3,
    .flip-front .elementor-heading-title {
        font-size: 1.1rem !important;
    }

    /* Back side - manager listing tighter */
    .flip-back .jet-listing-grid__items {
        gap: 4px !important;
    }

    /* Nested manager listing inside flip-back - keep 1 col */
    .flip-back .jet-listing-grid__items {
        grid-template-columns: 1fr !important;
    }
}

/* ── Small mobile (up to 480px) ── */

@media (max-width: 480px) {

    /* Even tighter spacing */
    .jet-listing-grid__items {
        gap: 10px !important;
    }

    .flip-card .flip-front {
        padding: 12px !important;
    }

    .flip-card .flip-back {
        padding: 10px 12px !important;
    }

    /* Icon boxes - 1 col on very small screens */
    .elementor-element-602d281f,
    .elementor-element-4ad2238a,
    .elementor-element-16011735 {
        grid-template-columns: 1fr !important;
    }

    /* City dropdown smaller on tiny screens */
    .tzlev-city-select {
        font-size: 14px;
        padding: 8px 12px;
    }
}