/* ==========================================================================
   GALLERIES RESPONSIVE SYSTEM
   Intelligent column stacking based on user's chosen column count
   - Desktop: User choice (2-6 cols)
   - Tablet: Reduce by ~50% (4cols→2, 3cols→2, 2cols→1)
   - Mobile: Always 1 column for readability
   ========================================================================== */

/* =========================================================
   PORTFOLIO GRID — Responsive by column count
   ========================================================= */

/* 6 columns: 6 → 3 (tablet) → 1 (mobile) */
.nvf-core-portfolio-grid__inner.cols-6 {
  gap: var(--nvf-space-m, 22px);
}
@media (max-width: 1024px) {
  .nvf-core-portfolio-grid__inner.cols-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .nvf-core-portfolio-grid__inner.cols-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nvf-space-s, 14px);
  }
}
@media (max-width: 540px) {
  .nvf-core-portfolio-grid__inner.cols-6 {
    grid-template-columns: 1fr;
    gap: var(--nvf-space-xs, 8px);
  }
}

/* 5 columns: 5 → 3 (tablet) → 1 (mobile) */
.nvf-core-portfolio-grid__inner.cols-5 {
  gap: var(--nvf-space-m, 22px);
}
@media (max-width: 1024px) {
  .nvf-core-portfolio-grid__inner.cols-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .nvf-core-portfolio-grid__inner.cols-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nvf-space-s, 14px);
  }
}
@media (max-width: 540px) {
  .nvf-core-portfolio-grid__inner.cols-5 {
    grid-template-columns: 1fr;
    gap: var(--nvf-space-xs, 8px);
  }
}

/* 4 columns: 4 → 2 (tablet) → 1 (mobile) */
.nvf-core-portfolio-grid__inner.cols-4 {
  gap: var(--nvf-space-m, 22px);
}
@media (max-width: 1024px) {
  .nvf-core-portfolio-grid__inner.cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .nvf-core-portfolio-grid__inner.cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nvf-space-s, 14px);
  }
}
@media (max-width: 540px) {
  .nvf-core-portfolio-grid__inner.cols-4 {
    grid-template-columns: 1fr;
    gap: var(--nvf-space-xs, 8px);
  }
}

/* 3 columns: 3 → 2 (tablet) → 1 (mobile) */
.nvf-core-portfolio-grid__inner.cols-3 {
  gap: var(--nvf-space-m, 22px);
}
@media (max-width: 1024px) {
  .nvf-core-portfolio-grid__inner.cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .nvf-core-portfolio-grid__inner.cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nvf-space-s, 14px);
  }
}
@media (max-width: 540px) {
  .nvf-core-portfolio-grid__inner.cols-3 {
    grid-template-columns: 1fr;
    gap: var(--nvf-space-xs, 8px);
  }
}

/* 2 columns: 2 → 2 (tablet) → 1 (mobile) */
.nvf-core-portfolio-grid__inner.cols-2 {
  gap: var(--nvf-space-m, 22px);
}
@media (max-width: 768px) {
  .nvf-core-portfolio-grid__inner.cols-2 {
    gap: var(--nvf-space-s, 14px);
  }
}
@media (max-width: 540px) {
  .nvf-core-portfolio-grid__inner.cols-2 {
    grid-template-columns: 1fr;
    gap: var(--nvf-space-xs, 8px);
  }
}

/* 1 column: always 1 column */
.nvf-core-portfolio-grid__inner.cols-1 {
  gap: var(--nvf-space-m, 22px);
}
@media (max-width: 768px) {
  .nvf-core-portfolio-grid__inner.cols-1 {
    gap: var(--nvf-space-s, 14px);
  }
}

/* -----------------------------------------
   Portfolio card padding responsive
   ----------------------------------------- */
@media (max-width: 768px) {
  .nvf-core-card--portfolio {
    --nvf-pg-content-pad: 14px 14px 12px;
  }
}

@media (max-width: 540px) {
  .nvf-core-card--portfolio {
    --nvf-pg-content-pad: 10px 10px 8px;
  }
}

/* =========================================================
   GALLERY G2 — Responsive by column count
   ========================================================= */

/* 6 columns: 6 → 4 (tablet) → 2 (mobile) */
@media (max-width: 1024px) {
  .nvf-gallery.nvf-gallery-g2.nvf-gallery--cols-6 .nvf-gallery-inner {
    --nvf-gallery-cols: 4;
  }
}
@media (max-width: 768px) {
  .nvf-gallery.nvf-gallery-g2.nvf-gallery--cols-6 .nvf-gallery-inner {
    --nvf-gallery-cols: 2;
    gap: var(--nvf-space-s, 14px);
  }
}
@media (max-width: 540px) {
  .nvf-gallery.nvf-gallery-g2.nvf-gallery--cols-6 .nvf-gallery-inner {
    --nvf-gallery-cols: 1;
    gap: var(--nvf-space-xs, 8px);
  }
}

/* 5 columns: 5 → 3 (tablet) → 2 (mobile) */
@media (max-width: 1024px) {
  .nvf-gallery.nvf-gallery-g2.nvf-gallery--cols-5 .nvf-gallery-inner {
    --nvf-gallery-cols: 3;
  }
}
@media (max-width: 768px) {
  .nvf-gallery.nvf-gallery-g2.nvf-gallery--cols-5 .nvf-gallery-inner {
    --nvf-gallery-cols: 2;
    gap: var(--nvf-space-s, 14px);
  }
}
@media (max-width: 540px) {
  .nvf-gallery.nvf-gallery-g2.nvf-gallery--cols-5 .nvf-gallery-inner {
    --nvf-gallery-cols: 1;
    gap: var(--nvf-space-xs, 8px);
  }
}

/* 4 columns: 4 → 3 (tablet) → 2 (mobile) */
@media (max-width: 1024px) {
  .nvf-gallery.nvf-gallery-g2.nvf-gallery--cols-4 .nvf-gallery-inner {
    --nvf-gallery-cols: 3;
  }
}
@media (max-width: 768px) {
  .nvf-gallery.nvf-gallery-g2.nvf-gallery--cols-4 .nvf-gallery-inner {
    --nvf-gallery-cols: 2;
    gap: var(--nvf-space-s, 14px);
  }
}
@media (max-width: 540px) {
  .nvf-gallery.nvf-gallery-g2.nvf-gallery--cols-4 .nvf-gallery-inner {
    --nvf-gallery-cols: 1;
    gap: var(--nvf-space-xs, 8px);
  }
}

/* 3 columns: 3 → 2 (tablet) → 1 (mobile) */
@media (max-width: 1024px) {
  .nvf-gallery.nvf-gallery-g2.nvf-gallery--cols-3 .nvf-gallery-inner {
    --nvf-gallery-cols: 2;
  }
}
@media (max-width: 768px) {
  .nvf-gallery.nvf-gallery-g2.nvf-gallery--cols-3 .nvf-gallery-inner {
    --nvf-gallery-cols: 2;
    gap: var(--nvf-space-s, 14px);
  }
}
@media (max-width: 540px) {
  .nvf-gallery.nvf-gallery-g2.nvf-gallery--cols-3 .nvf-gallery-inner {
    --nvf-gallery-cols: 1;
    gap: var(--nvf-space-xs, 8px);
  }
}

/* 2 columns: 2 → 2 (tablet) → 1 (mobile) */
@media (max-width: 768px) {
  .nvf-gallery.nvf-gallery-g2.nvf-gallery--cols-2 .nvf-gallery-inner {
    --nvf-gallery-cols: 1;
    gap: var(--nvf-space-s, 14px);
  }
}

/* 1 column: always 1 column */
@media (max-width: 768px) {
  .nvf-gallery.nvf-gallery-g2.nvf-gallery--cols-1 .nvf-gallery-inner {
    gap: var(--nvf-space-s, 14px);
  }
}

/* -----------------------------------------
   Gallery overlay responsive
   ----------------------------------------- */
@media (max-width: 768px) {
  .nvf-gallery.nvf-gallery-g2 .nvf-gallery-overlay {
    padding: 12px 12px;
  }
  
  .nvf-gallery.nvf-gallery-g2 .nvf-gallery-title {
    font-size: var(--nvf-gallery-title-fs-tablet, 13px);
  }
}

@media (max-width: 540px) {
  .nvf-gallery.nvf-gallery-g2 .nvf-gallery-overlay {
    padding: 10px 10px;
  }
  
  .nvf-gallery.nvf-gallery-g2 .nvf-gallery-title {
    font-size: var(--nvf-gallery-title-fs-mobile, 12px);
  }
}

/* =========================================================
   GENERIC GALLERY SPACING RESPONSIVE
   Applies to any image-based gallery
   ========================================================= */

/* Tablet breakpoint: reduce gap */
@media (max-width: 768px) {
  /* Reduce gap from "m" to "s" */
  .nvf-services--gap-m,
  .nvf-gallery--gap-m,
  .nvf-portfolio--gap-m {
    gap: var(--nvf-space-s, 14px) !important;
  }
  
  /* Reduce large gaps to medium on tablet */
  .nvf-services--gap-l,
  .nvf-gallery--gap-l,
  .nvf-portfolio--gap-l {
    gap: var(--nvf-space-m, 22px) !important;
  }
}

/* Mobile breakpoint: tight spacing */
@media (max-width: 540px) {
  /* Reduce gap to extra-small */
  .nvf-services--gap-m,
  .nvf-gallery--gap-m,
  .nvf-portfolio--gap-m,
  .nvf-services--gap-l,
  .nvf-gallery--gap-l,
  .nvf-portfolio--gap-l {
    gap: var(--nvf-space-xs, 8px) !important;
  }
}

/* ==========================================================================
   HORIZONTAL PADDING / RESPIRATION SYSTEM
   Prevents grid content from touching screen edges (MAX 10% total)
   ========================================================================== */

/* Portfolio Grid: horizontal respiration (the page container handles Gallery G2 breathing) */
.nvf-core-portfolio-grid__inner {
  padding-inline: var(--nvf-layout-padding-x, 20px);
}

/* ==========================================================================
   GALLERY G2 - FORCE MAX 2 COLUMNS ON MOBILE
   Ensure gallery respects 2-column limit at all responsive breakpoints
   ========================================================================== */

/* Mobile (768px): Force max 2 columns regardless of col setting */
@media (max-width: 768px) {
  /* 3, 4, 5, 6 columns → all become 2 columns on mobile */
  .nvf-gallery.nvf-gallery-g2.nvf-gallery--cols-3 .nvf-gallery-inner,
  .nvf-gallery.nvf-gallery-g2.nvf-gallery--cols-4 .nvf-gallery-inner,
  .nvf-gallery.nvf-gallery-g2.nvf-gallery--cols-5 .nvf-gallery-inner,
  .nvf-gallery.nvf-gallery-g2.nvf-gallery--cols-6 .nvf-gallery-inner {
    --nvf-gallery-cols: 2 !important;
  }
}

/* Ultra-mobile (540px): Force 1 column for readability */
@media (max-width: 540px) {
  /* All columns → 1 column on ultra-mobile */
  .nvf-gallery.nvf-gallery-g2 .nvf-gallery-inner {
    --nvf-gallery-cols: 1 !important;
  }
}