/* Image Gallery widget -------------------------------------------------------- */

.roofkit-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.roofkit-gallery--spacing-tight {
  gap: var(--space-md);
}

.roofkit-gallery--spacing-normal {
  gap: var(--block-gap);
}

.roofkit-gallery--spacing-relaxed {
  gap: var(--space-2xl);
}

.roofkit-gallery-item {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.roofkit-gallery-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.roofkit-gallery-media {
  line-height: 0;
  position: relative;
}

.roofkit-gallery-media img {
  width: 100%;
  height: auto;
  display: block;
}

/* Hover zoom (opt-in via the "Zoom on hover" switch) ------------------------- */
.roofkit-gallery-zoom-yes .roofkit-gallery-media {
  overflow: hidden;
}

.roofkit-gallery-zoom-yes .roofkit-gallery-media img {
  transition: transform 0.4s ease;
}

.roofkit-gallery-zoom-yes .roofkit-gallery-item:hover .roofkit-gallery-media img {
  transform: scale(1.05);
}

/* Caption ------------------------------------------------------------------- */
.roofkit-gallery-caption {
  display: flex;
  flex-direction: column;
}

.roofkit-gallery--plain .roofkit-gallery-caption {
  margin-top: var(--space-md);
}

.roofkit-gallery-title {
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  color: var(--color-heading);
  line-height: var(--lh-snug);
}

.roofkit-gallery-desc {
  margin-top: var(--space-2xs);
  color: var(--color-description);
  line-height: var(--lh-base);
  white-space: pre-line;
}

.roofkit-gallery--text-small .roofkit-gallery-title {
  font-size: var(--small-text-size);
}
.roofkit-gallery--text-small .roofkit-gallery-desc {
  font-size: var(--eyebrow-size);
}

.roofkit-gallery--text-medium .roofkit-gallery-title {
  font-size: var(--body-text-size);
}
.roofkit-gallery--text-medium .roofkit-gallery-desc {
  font-size: var(--small-text-size);
}

.roofkit-gallery--text-large .roofkit-gallery-title {
  font-size: var(--card-title-size);
}
.roofkit-gallery--text-large .roofkit-gallery-desc {
  font-size: var(--body-text-size);
}

/* Card style ------------------------------------------------------------------ */
.roofkit-gallery--card .roofkit-gallery-item {
  overflow: hidden;
  background-color: var(--color-bg);
  transition: box-shadow 0.3s ease;
}

.roofkit-gallery--card-plain .roofkit-gallery-item {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.roofkit-gallery--card-soft .roofkit-gallery-item {
  border: var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: none;
}

.roofkit-gallery--card-soft .roofkit-gallery-item:hover {
  box-shadow: var(--shadow-md);
}

.roofkit-gallery--card-bold .roofkit-gallery-item {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.roofkit-gallery--card .roofkit-gallery-caption {
  padding: var(--card-padding);
}

/* Plain image radius variants -------------------------------------------------- */
.roofkit-gallery--imgradius-sharp .roofkit-gallery-media,
.roofkit-gallery--imgradius-sharp .roofkit-gallery-media img {
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.roofkit-gallery--imgradius-soft .roofkit-gallery-media,
.roofkit-gallery--imgradius-soft .roofkit-gallery-media img {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.roofkit-gallery--imgradius-round .roofkit-gallery-media,
.roofkit-gallery--imgradius-round .roofkit-gallery-media img {
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.roofkit-gallery--imgradius-pill .roofkit-gallery-media,
.roofkit-gallery--imgradius-pill .roofkit-gallery-media img {
  border-radius: var(--radius-pill);
  overflow: hidden;
}

/* Responsive fallback for when column controls are left at their defaults ---- */
@media (max-width: 1024px) {
  .roofkit-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .roofkit-gallery {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .roofkit-gallery--card .roofkit-gallery-item,
  .roofkit-gallery-zoom-yes .roofkit-gallery-media img {
    transition: none;
  }
}