/* IG Business Carousel - minimal safe CSS (can be disabled from settings)
   Uses site variables if present, with fallbacks.
*/

.igbc-notice{
  font-family: var(--menu-font, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  border: 1px dashed rgba(15,41,82,0.35);
  padding: 10px 12px;
  border-radius: 12px;
  color: rgba(15,41,82,0.9);
  background: rgba(255,255,255,0.7);
}

.ig-carousel{
  --brand-primary: var(--brand-primary, #0f2952);
  --brand-yellow: var(--brand-yellow, #FFD500);
  --accent-pink: var(--accent-pink, #cc3366);
  --ig-card-border: rgba(15, 41, 82, 0.12);
  --ig-shadow: 0 10px 30px rgba(15, 41, 82, 0.10);
  font-family: var(--menu-font, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  margin: 18px 0 26px;
}

.ig-carousel__header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.ig-carousel__title{
  margin:0;
  font-weight:700;
  letter-spacing:0.2px;
  color: var(--brand-primary);
}

.ig-carousel__link{
  font-weight:600;
  color: var(--accent-pink);
  text-decoration:none;
  border-bottom:2px solid transparent;
  padding-bottom:2px;
}
.ig-carousel__link:hover{ border-bottom-color: var(--accent-pink); }

.ig-carousel__track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(220px, 1fr);
  gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:6px 2px 10px;
  -webkit-overflow-scrolling: touch;
}

.ig-carousel__track::-webkit-scrollbar{ height:10px; }
.ig-carousel__track::-webkit-scrollbar-thumb{
  background: rgba(15, 41, 82, 0.18);
  border-radius: 999px;
}

.ig-item{
  scroll-snap-align:start;
  background:#fff;
  border:1px solid var(--ig-card-border);
  border-radius:16px;
  box-shadow: var(--ig-shadow);
  overflow:hidden;
}

.ig-item a{ display:block; color:inherit; text-decoration:none; }

.ig-item__media{
  position:relative;
  aspect-ratio: 1 / 1;
  background:#f3f5f8;
}
.ig-item__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.ig-item__badge{
  position:absolute;
  top:10px;
  left:10px;
  background: var(--brand-yellow);
  color: var(--brand-primary);
  font-weight:700;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

.ig-item__caption{
  padding:10px 12px 12px;
  font-size:14px;
  line-height:1.35;
  color: rgba(15, 41, 82, 0.92);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height: calc(1.35em * 2 + 2px);
}

@media (max-width: 768px){
  .ig-carousel__track{ grid-auto-columns: minmax(72vw, 1fr); }
}