/* =========================================================
   File: gallery.css
   Description: Shared gallery/carousel styles for Local Leader
                (matches render_carousel() markup:
                 .carousel-wrapper, .carousel, .carousel-item,
                 .scroll-button, .carousel-image)
   ========================================================= */

/* ---------- Outer wrapper ---------- */

.carousel-wrapper{
  position:relative;
  max-width:100%;
  margin:18px 0;
  padding:0 10px;
  box-sizing:border-box;

  display:flex;
  align-items:center;

  background:#f9f9f9;
  border-radius:10px;
}

/* ---------- Track ---------- */

.carousel{
  display:flex;
  gap:10px;
  width:100%;

  overflow-x:auto;
  scroll-behavior:smooth;

  padding:10px 0;

  scrollbar-width:none; /* Firefox */
}

.carousel::-webkit-scrollbar{
  display:none; /* Chrome/Safari */
}

/* ---------- Items ---------- */

.carousel-item{
  flex:0 0 auto;
  max-width:250px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding:10px;
  gap:8px;

  text-align:center;

  background:#fff;
  border-radius:8px;
  box-shadow:0 2px 5px rgba(0,0,0,0.10);

  transition:transform .2s ease-in-out, box-shadow .2s ease-in-out;
}

.carousel-item:hover{
  transform:scale(1.03);
  box-shadow:0 4px 10px rgba(0,0,0,0.18);
}

/* ---------- Images ---------- */

.carousel-image{
  width:100%;
  height:200px;
  display:block;
  object-fit:cover;
  border-radius:8px;
}

/* Safety net if some images don't get the class */
.carousel-item img{
  width:100%;
  height:200px;
  display:block;
  object-fit:cover;
  border-radius:8px;
}

/* ---------- Arrows (Option 1: drawn chevrons) ---------- */

.scroll-button{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;

  width:40px;
  height:40px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:0;
  border-radius:50%;

  background:rgba(0,0,0,0.60);
  color:#fff;

  cursor:pointer;
  opacity:.85;

  transition:opacity .15s ease, background .15s ease, transform .15s ease;
}

/* IMPORTANT:
   Hide any text glyph (‹ ›) inside the button.
   We draw the arrow using ::before so it’s always centered. */
.scroll-button{
  font-size:0;
  line-height:0;
}

/* Draw chevron */
.scroll-button::before{
  content:'';
  width:14px;
  height:14px;
  display:block;

  border-top:4px solid #fff;
  border-right:4px solid #fff;
}

/* Rotate for left/right */
.scroll-button.left::before{
  transform:rotate(-135deg);
}

.scroll-button.right::before{
  transform:rotate(45deg);
}

/* Position */
.scroll-button.left{ left:5px; }
.scroll-button.right{ right:5px; }

.scroll-button:hover{
  opacity:1;
  background:rgba(0,0,0,0.90);
  transform:translateY(-50%) scale(1.03);
}

.scroll-button:active{
  transform:translateY(-50%) scale(0.98);
}

.scroll-button:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
}

/* Hidden state (preferred over inline style display toggling) */
.scroll-button.is-hidden{
  opacity:0;
  pointer-events:none;
}

/* Disabled state (if you use disabled attr) */
.scroll-button[disabled]{
  opacity:.35;
  pointer-events:none;
}

/* ---------- Responsive ---------- */

@media (max-width: 768px){
  .carousel-wrapper{
    padding:0 6px;
  }

  .carousel-item{
    max-width:220px;
    padding:8px;
  }

  .carousel-image,
  .carousel-item img{
    height:170px;
  }
}