/* ==========================================================
   ADRA GALLERY SLIDER — concern page
   ========================================================== */

.adraf-gallery-section{padding-bottom:0}

.adraf-gallery{
  position:relative;
  user-select:none}

.adraf-gallery-stage{
  position:relative;
  overflow:hidden;
  border-radius:1rem}

.adraf-gallery-track{
  display:flex;
  gap:1rem;
  transition:transform .45s cubic-bezier(.25,.46,.45,.94);
  will-change:transform}

.adraf-gallery-slide{
  flex:0 0 calc(33.333% - .68rem);
  border-radius:.75rem;
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--card,#f2f4f3);
  position:relative}

.adraf-gallery-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease}

.adraf-gallery-slide:hover img{
  transform:scale(1.05)}

.adraf-gallery-slide figcaption{
  position:absolute;
  inset:auto 0 0;
  padding:.6rem 1rem;
  background:linear-gradient(transparent,rgba(18,36,51,.72));
  color:#fff;
  font-size:.82rem;
  line-height:1.4;
  opacity:0;
  transition:opacity .3s ease}

.adraf-gallery-slide:hover figcaption,
.adraf-gallery-slide:focus-within figcaption{
  opacity:1}

/* Navigation arrows */
.adraf-gallery-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:50%;
  background:#fff;
  border:none;
  cursor:pointer;
  box-shadow:0 2px 14px rgba(0,0,0,.18);
  display:grid;
  place-items:center;
  z-index:10;
  transition:background .22s ease,transform .22s ease,box-shadow .22s ease;
  color:var(--ink,#122433)}

.adraf-gallery-btn:hover:not([disabled]){
  background:var(--accent,#ef6b4d);
  color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  transform:translateY(-50%) scale(1.1)}

.adraf-gallery-btn--prev{left:.75rem}
.adraf-gallery-btn--next{right:.75rem}

.adraf-gallery-btn[disabled]{
  opacity:.3;
  pointer-events:none}

/* Navigation dots */
.adraf-gallery-dots{
  display:flex;
  justify-content:center;
  gap:.55rem;
  margin-top:1.25rem}

.adraf-gallery-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--line,#dfe9e8);
  border:none;
  cursor:pointer;
  padding:0;
  transition:background .22s ease,transform .22s ease,width .22s ease}

.adraf-gallery-dot.active{
  background:var(--accent,#ef6b4d);
  transform:scale(1.35);
  width:24px;
  border-radius:5px}

/* Responsive breakpoints */
@media(max-width:1023px){
  .adraf-gallery-slide{
    flex:0 0 calc(50% - .5rem)}}

@media(max-width:639px){
  .adraf-gallery-slide{
    flex:0 0 100%}
  .adraf-gallery-btn{
    width:36px;
    height:36px}}