/* CliikStudio-Kit - Case Studies Masonry */

/* Wrapper vars */
.cliik-case-studies{
  width: 100%;
  --cliik-cols: 3;
  --cliik-gap: 24px;
  --cliik-content-x: 0px;
  --cliik-content-y: 0px;
}

.cliik-case-studies__grid{
  position: relative;
}

/* Masonry sizing helpers */
.cliik-case-studies__sizer,
.cliik-case-studies__item{
  width: calc((100% - (var(--cliik-gap) * (var(--cliik-cols) - 1))) / var(--cliik-cols));
}

.cliik-case-studies__gutter{
  width: var(--cliik-gap);
}

/* Item spacing (vertical gap) */
.cliik-case-studies__item{
  box-sizing: border-box;
  margin-bottom: var(--cliik-gap);
}

/* Image wrap */
.cliik-case-studies__image-wrap{
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
}

.cliik-case-studies__image{
  width: 100%;
  height: auto;
  display: block;
  transform: translateZ(0);
}

/* Link wrapper */
.cliik-case-studies__link,
.cliik-case-studies__no-link{
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Overlay */
.cliik-case-studies__overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 220ms ease-in-out;
}

/* Content block (heading + text) */
.cliik-case-studies__content{
  padding: 18px;
  text-align: center;
  transform: translate(var(--cliik-content-x, 0), var(--cliik-content-y, 0));
}

.cliik-case-studies__heading{
  color: #fff;
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 8px;
}

.cliik-case-studies__text{
  color: #fff;
  line-height: 1.5;
  margin: 0;
}

/* Hover/focus behavior */
.cliik-case-studies__image-wrap:hover .cliik-case-studies__overlay,
.cliik-case-studies__link:focus-visible .cliik-case-studies__overlay{
  opacity: 1;
}

/* Reveal animation for appended items */
.cliik-case-studies__item{
  opacity: 1;
  transform: none;
  transition: opacity 360ms ease, transform 360ms ease;
  will-change: opacity, transform;
}

.cliik-case-studies__item.is-prep{
  opacity: 0;
  transform: translateY(16px);
}

/* Sentinel (observer target) */
.cliik-case-studies__sentinel{
  height: 1px;
}

/* ============================================================
   CliikStudio-Kit – Responsive Gallery (CSS-only grid)
   ============================================================ */

.cliik-responsive-gallery{
  --cliik-gallery-cols: 3;
  --cliik-gallery-gap: 16px;
  --cliik-gallery-hover-opacity: 0.8;
  --cliik-gallery-hover-scale: 1;
  width: 100%;
}

.cliik-responsive-gallery__grid{
  display: grid;
  gap: var(--cliik-gallery-gap);
  grid-template-columns: repeat(var(--cliik-gallery-cols), minmax(0, 1fr));
}

.cliik-responsive-gallery__item{
  margin: 0;
  padding: 0;
}

.cliik-responsive-gallery__media{
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  width: 100%;
}

.cliik-responsive-gallery__media .cliik-responsive-gallery__img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease, opacity 300ms ease;
}

.cliik-responsive-gallery__link{
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Hover opacity + scale – CSS only, no transition/animation */
.cliik-responsive-gallery__item:hover .cliik-responsive-gallery__img{
  opacity: var(--cliik-gallery-hover-opacity, 0.8);
  transform: scale(var(--cliik-gallery-hover-scale, 1));
}