/*
 * ACF gallery field on front-end forms (annonce add/edit), small screens.
 * ACF lays the gallery out for desktop: fixed height with an inner scroll,
 * and a 350px details sidebar that squeezes the grid to 0px on a phone.
 * Here the grid flows at natural height and the sidebar is never shown
 * (the script blocks it); ordering is done with the injected arrows.
 * ACF prints its stylesheet late (footer), hence the extra .acf-gallery
 * class on every selector to win on specificity.
 */
@media (max-width: 767px) {
  /* ACF sets the height inline from its resizable handle. */
  .acf-field-gallery .acf-gallery {
    height: auto !important;
  }

  .acf-field-gallery .acf-gallery .acf-gallery-main,
  .acf-field-gallery .acf-gallery .acf-gallery-attachments,
  .acf-field-gallery .acf-gallery .acf-gallery-toolbar {
    position: static;
  }

  .acf-field-gallery .acf-gallery .acf-gallery-attachments {
    overflow: visible;
  }

  .acf-field-gallery .acf-gallery .acf-gallery-attachments::after {
    content: "";
    display: block;
    clear: both;
  }

  .acf-field-gallery .acf-gallery .acf-gallery-side,
  .acf-field-gallery .acf-gallery .ui-resizable-handle {
    display: none;
  }

  .acf-field-gallery .acf-gallery .acf-gallery-toolbar {
    height: auto;
  }

  .acf-field-gallery .acf-gallery .acf-gallery-add {
    display: block;
    width: 100%;
    text-align: center;
  }

  /* Remove button is hover-only in ACF: keep it visible and tappable. */
  .acf-field-gallery .acf-gallery .acf-gallery-attachment .actions {
    display: block;
    top: 4px;
    right: 4px;
  }

  .acf-field-gallery .acf-gallery .acf-gallery-remove {
    transform: scale(1.3);
  }

  .acf-field-gallery .acf-gallery .cql-gallery-move {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    display: flex;
    justify-content: center;
    gap: 12px;
  }

  .acf-field-gallery .acf-gallery .cql-gallery-move button {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 20px;
    line-height: 40px;
  }

  .acf-field-gallery .acf-gallery .acf-gallery-attachment:first-child .cql-gallery-move [data-dir="prev"],
  .acf-field-gallery .acf-gallery .acf-gallery-attachment:last-child .cql-gallery-move [data-dir="next"] {
    visibility: hidden;
  }
}

@media (min-width: 768px) {
  .acf-field-gallery .acf-gallery .cql-gallery-move {
    display: none;
  }
}