/* ===== OUTER “SCATTERED COLLAGE” ===== */
.aro-acf-grid{
  --size: 132px;
  --gap : 16px;
  position: relative;
  width: calc(var(--size) * 3 + var(--gap) * 2 + 6px);
  height: calc(var(--size) * 2 + var(--gap) * 2);
  margin: 12px 0;
}
@media (max-width: 640px){
  .aro-acf-grid{
    --size: 28vw;
    --gap : 12px;
    width: calc(var(--size) * 3 + var(--gap) * 2 + 6px);
    height: calc(var(--size) * 2 + var(--gap) * 2);
  }
}
.aro-acf-grid .aro-item{
  position:absolute; width:var(--size); height:var(--size);
  border-radius:14px; overflow:hidden;
  border:2px solid #DBDEE3;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}
.aro-acf-grid .aro-item .aro-open{ display:block; width:100%; height:100%; padding:0; border:0; background:transparent; cursor:pointer; }
.aro-acf-grid .aro-item img{ width:100%; height:100%; object-fit:cover; display:block; }

/* განლაგება (7 სურათისთვის) */
.aro-acf-grid .aro-item:nth-child(1){ left:0;                                       top:0;                                   transform:rotate(-3deg); }
.aro-acf-grid .aro-item:nth-child(2){ left:calc(var(--size) + var(--gap)*1.2);      top:calc(var(--gap)*0.2);                transform:rotate(2deg); }
.aro-acf-grid .aro-item:nth-child(3){ left:calc(var(--size)*2 + var(--gap)*2.9);    top:calc(var(--gap)*0.25);               transform:rotate(-2deg); }
.aro-acf-grid .aro-item:nth-child(4){ left:calc(var(--size)*0.35 + var(--gap)*0.3); top:calc(var(--size) + var(--gap));       transform:rotate(2.5deg); }
.aro-acf-grid .aro-item:nth-child(5){ left:calc(var(--size)*1.55 + var(--gap)*1.2); top:calc(var(--size) + var(--gap)*1.05);  transform:rotate(-2deg); }
.aro-acf-grid .aro-item:nth-child(6){ left:calc(var(--size)*2.30 + var(--gap)*2.35);top:calc(var(--size)*0.40);               transform:rotate(3.5deg); }
.aro-acf-grid .aro-item:nth-child(7){ left:calc(var(--size)*2.85 + var(--gap)*2.1); top:calc(var(--size) + var(--gap)*1.20);  transform:rotate(-4deg); }

.aro-acf-grid .aro-item.is-hidden{ display:none !important; }
.aro-acf-grid .aro-item.is-last::after{
  content: attr(data-more);
  position:absolute; inset:0; background:rgba(0,0,0,.45);
  color:#fff; font:700 28px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  display:grid; place-items:center; text-shadow:0 2px 6px rgba(0,0,0,.35);
}

/* ===== MODAL ===== */
.aro-modal{ position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:2147483647; display:none; }
.aro-modal[hidden]{ display:none; }
.aro-modal.is-open{ display:block; }

/* TOPBAR (JS აკონტროლებს ზუსტ top-ს; ეს არის ფოლბექი + safe-area) */
.aro-modal__topbar{
  position:fixed; z-index:4;
  top:calc(14px + env(safe-area-inset-top, 0px)); left:50%;
  transform:translate(-50%,0);
  padding:6px; border-radius:9999px;
  display:flex; align-items:center; gap:8px;
  background:rgba(20,20,20,.55); backdrop-filter: blur(8px);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.aro-modal__topbar button{
  border:none; height:40px; min-width:40px; border-radius:9999px;
  background:rgba(255,255,255,.12); color:#fff; font-size:18px; cursor:pointer;
}
.aro-modal__topbar button:hover{ background:rgba(255,255,255,.20); }

/* focus-visible UX */
.aro-modal__topbar button:focus-visible,
.aro-modal__prev:focus-visible,
.aro-modal__next:focus-visible,
.aro-modal__tprev:focus-visible,
.aro-modal__tnext:focus-visible,
.aro-thumb:focus-visible{
  outline: 2px solid #fff; outline-offset: 2px;
}

@media (max-width:640px){
  .aro-modal__topbar{ top:calc(14px + env(safe-area-inset-top, 0px)); }
  .aro-modal__topbar button{ height:48px; min-width:48px; font-size:20px; }
}

/* Share tooltip */
.aro-modal__topbar .aro-modal__share{ position: relative; }
.aro-modal__topbar .aro-modal__share::after{
  content: attr(data-tip);
  position:absolute; left:50%; bottom:calc(100% + 8px);
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgba(0,0,0,.85);
  color:#fff; font:600 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  padding:6px 8px; border-radius:8px;
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
}
@media (hover:hover){
  .aro-modal__topbar .aro-modal__share:hover::after{ opacity:1; transform: translateX(-50%) translateY(-2px); }
}
.aro-modal__topbar .aro-modal__share.is-copied{ background: rgba(40,200,120,.85); }
.aro-modal__topbar .aro-modal__share.is-copied::after{
  content: "ბმული დაკოპირებულია";
  background: rgba(40,200,120,.95);
  opacity:1; transform: translateX(-50%) translateY(-2px);
}

/* Layout */
.aro-modal__layout{
  position:absolute; inset:72px 16px 16px;
  display:grid; grid-template-columns: 112px 1fr; gap:12px;
}
@media (max-width:640px){
  .aro-modal__layout{ inset: 64px 8px 8px; display:flex; flex-direction:column; gap:8px; }
}

/* THUMBS */
.aro-modal__thumbs{
  height:calc(100vh - 72px - 16px);
  overflow-y:auto; padding-right:6px; margin:0;
  display:flex; flex-direction:column; gap:8px;
}
@media (max-width:640px){
  .aro-modal__thumbs{
    order:2; height:auto; max-height:22vh;
    overflow-y:hidden; overflow-x:auto; padding:0 4px;
    display:flex; flex-direction:row; gap:8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; scrollbar-color: #999 transparent;
    scroll-snap-type: x proximity;
  }
  .aro-modal__thumbs::-webkit-scrollbar{ height:6px; }
  .aro-modal__thumbs::-webkit-scrollbar-thumb{ background:#999; border-radius:9999px; }
}

/* Mobile thumbs arrows */
.aro-modal__tprev, .aro-modal__tnext{ display:none; }
@media (max-width:640px){
  .aro-modal__tprev, .aro-modal__tnext{
    border:none; background:#000; color:#fff; border-radius:9999px;
    width:38px; height:38px; flex:0 0 auto; align-self:center; opacity:.9;
    order:1;
  }
  .aro-modal__thumbs{ order:2; }
  .aro-modal__tnext{ order:3; }
}

/* Thumb item */
.aro-thumb{
  flex:0 0 76px !important; width:76px !important; height:76px !important;
  border-radius:10px !important; overflow:hidden !important;
  border:2px solid #DBDEE3 !important; background:#111 !important; padding:0 !important;
  cursor:pointer !important; display:block !important;
}
@media (max-width:640px){
  .aro-thumb{ width:72px !important; height:72px !important; flex:0 0 72px !important; scroll-snap-align: start; }
}
.aro-thumb img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }
.aro-thumb.is-active{ border-color:#fff !important; }

/* Stage */
.aro-modal__stage{
  position:relative; display:grid; place-items:center; overflow:hidden; min-height: 60vh;
}
@media (max-width:640px){ .aro-modal__stage{ order:1; min-height: 68vh; } }

.aro-modal__img{
  max-width: 92vw; max-height: 86vh; width:auto; height:auto; display:block;
  border-radius:10px; box-shadow:0 8px 30px rgba(0,0,0,.45);
  opacity:0; transition:opacity .25s ease;
  touch-action: none;
  will-change: transform;
}
@media (max-width:640px){
  .aro-modal__img{ max-width: 100vw; max-height: 88vh; }
}

/* Arrows */
.aro-modal__prev, .aro-modal__next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; display:grid; place-items:center;
  color:#fff; background:rgba(255,255,255,.12); border:none; border-radius:12px;
  font-size:22px; cursor:pointer; z-index:3;
}
.aro-modal__prev{ left:16px; } .aro-modal__next{ right:16px; }
.aro-modal__prev:hover, .aro-modal__next:hover{ background:rgba(255,255,255,.22); }
@media (max-width:640px){
  .aro-modal__prev, .aro-modal__next{ background:#000; border-radius:9999px; width:42px; height:42px; }
}

/* Counter */
.aro-modal__meta{
  position:absolute; bottom:8px; left:0; right:0; text-align:center; color:#fff;
  font: 12px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial; opacity:.9; z-index:3;
}

/* Scroll lock */
html.aro-lock, body.aro-lock{ overflow:hidden !important; }

/* Utility */
.screen-reader-text{ position:absolute; left:-9999px; top:-9999px; }