/* =========================
   MM Accordion — Full CSS
   - Titles always visible
   - No border radius (all)
   - Soft open with 10ms delay
   - Desktop/Tablet: horizontal
   - Mobile: vertical, opens downward
   ========================= */

/* Root */
.mmacc-wrapper{
  /* Desktop defaults */
  --h: 534px;                 /* overall rail height on desktop/tablet */
  --closed-fr: 0.14335;       /* 244/1702 */
  --open-fr:   0.42660;       /* 726/1702 */

  --gap: 16px;                /* space between items */
  --gcount: 4;                /* will be overwritten by JS based on item count */
  --space: calc(var(--gap) * var(--gcount));

  width: 100%;
  max-width: 100%;
  overflow: hidden;
  direction: rtl;
}

/* Rail */
.mmacc-rail{
  height: var(--h);
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--gap);
}

/* Items (desktop/tablet horizontal) */
.mmacc-item{
  position: relative;
  flex: 0 0 calc((100% - var(--space)) * var(--closed-fr));
  height: var(--h);
  overflow: hidden;
  cursor: pointer;
  min-width: 0;

  /* Softer open with 10ms delay */
  transition:
    flex-basis .55s cubic-bezier(.2,.7,.2,1) .01s,
    width .55s cubic-bezier(.2,.7,.2,1) .01s,
    height .55s cubic-bezier(.2,.7,.2,1) .01s,
    transform .55s cubic-bezier(.2,.7,.2,1) .01s;
  will-change: flex-basis, height, transform;
}
.mmacc-item.is-open{
  flex-basis: calc((100% - var(--space)) * var(--open-fr));
}

/* Media */
.mmacc-media,
.mmacc-media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.mmacc-media img{
  object-fit: cover;
  object-position: center center;

  /* Soft settle */
  transform: scale(1.035);
  filter: brightness(.9);
  transition:
    transform .55s cubic-bezier(.2,.7,.2,1) .01s,
    filter .55s cubic-bezier(.2,.7,.2,1) .01s,
    opacity .55s cubic-bezier(.2,.7,.2,1) .01s;
  will-change: transform, filter, opacity;
}
.mmacc-item.is-open .mmacc-media img{
  transform: scale(1);
  filter: brightness(1);
}

/* Gradient overlay */
.mmacc-item::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(360deg, #000000 0%, rgba(0, 0, 0, 0) 99%);
  opacity: 1;
  transition:
    background .45s cubic-bezier(.2,.7,.2,1) .01s,
    opacity .45s ease .01s;
}
.mmacc-item.is-open::after{
  background: linear-gradient(360deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 61.05%);
}

/* Title (always visible) */
.mmacc-title{
  position: absolute;
  right: 16px;
  left: 16px;
  bottom: 16px;
  z-index: 3;
  color: #fff;
  font-size: 16px;
  line-height: 1.4;
  text-align: right;

  /* Always visible; keep transition hooks if you later tweak */
  transform: none;
  opacity: 1;
  transition:
    transform .45s cubic-bezier(.2,.7,.2,1) .01s,
    opacity .45s ease .01s;
}
.mmacc-title-text{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;    /* collapsed: 2 lines */
  overflow: hidden;
}
.mmacc-item.is-open .mmacc-title-text{
  display: block;            /* open: full */
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Elementor editor */
.elementor-editor-active .mmacc-item{ outline: 0; }

/* =========================
   Tablet (horizontal, shorter height)
   ========================= */
@media (min-width: 768px) and (max-width: 1024px){
  .mmacc-wrapper{ --h: 420px; } /* reduce height on tablet */
  .mmacc-title{ font-size: 15px; bottom: 14px; left: 14px; right: 14px; }
}

/* =========================
   Mobile (vertical stack, opens downward)
   ========================= */
@media (max-width: 767px){
  .mmacc-wrapper{
    --gap: 12px;
    --gcount: 0;          /* not used in vertical stack */
    --h: auto;            /* rail height auto */
    --item-h: 180px;      /* collapsed height */
    --item-h-open: 340px; /* open height */
  }

  .mmacc-rail{
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap);
  }

  .mmacc-item{
    flex: none !important;
    flex-basis: auto !important;
    width: 100% !important;
    height: var(--item-h);

    /* Smooth vertical expansion with 10ms delay */
    transition:
      height .55s cubic-bezier(.2,.7,.2,1) .01s,
      transform .55s cubic-bezier(.2,.7,.2,1) .01s !important;
  }
  .mmacc-item.is-open{
    height: var(--item-h-open);
  }

  .mmacc-title{
    font-size: 15px;
    bottom: 12px;
    left: 12px; right: 12px;
  }
}

/* =========================
   Global hard overrides
   - Ensure ZERO radius everywhere
   ========================= */
.mmacc-wrapper,
.mmacc-rail,
.mmacc-item,
.mmacc-item::before,
.mmacc-item::after,
.mmacc-media,
.mmacc-media img {
  border-radius: 0 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}