/* ==========================================================================
   NovaFolio Core — Portfolio Grid (Front skin)
   Goal: close to NovaFolio theme portfolio.css, but theme-agnostic.
   - Uses CSS variables for easy theming/overrides
   - Supports: grid / masonry (column-based) / metro (basic grid)
   ========================================================================== */

/* Block wrapper — padding handled by functions.php global rule
   (max-width: calc(100% - padding*2)). */
.wp-block-novafolio-portfolio-grid {
  box-sizing: border-box;
}

/* Cancel the theme's .nvf-portfolio-inner padding (archive layout)
   so it doesn't add an extra layer inside the Gutenberg block. */
.wp-block-novafolio-portfolio-grid .nvf-portfolio-inner {
  padding-left: 0;
  padding-right: 0;
}

/* -----------------------------
   Tokens (safe defaults)
   ----------------------------- */
.nvf-core-portfolio-grid{
  --nvf-pg-gap: var(--nvf-portfolio-grid-gap, 32px);
  --nvf-pg-radius: var(--nvf-portfolio-card-radius, 16px);
  --nvf-pg-shadow: 0 18px 40px rgba(15,23,42,.20);
  --nvf-pg-shadow-hover: 0 22px 55px rgba(15,23,42,.28);
  max-width: var(--nvf-layout-max-width, 1440px);
  margin-inline: auto;
  box-sizing: border-box;

  --nvf-pg-overlay-from: rgba(2,6,23,0);
  --nvf-pg-overlay-to: rgba(2,6,23,.70);
  --nvf-pg-overlay-blur: 0px;

  --nvf-pg-title-color: var(--nvf-color-white, #f9fafb);
  --nvf-pg-subtitle-color: var(--nvf-color-white-muted, rgba(243,244,246,.85));

  --nvf-pg-title-size: 15px;
  --nvf-pg-subtitle-size: 10px;

  --nvf-pg-title-weight: 500;
  --nvf-pg-subtitle-weight: 600;

  --nvf-pg-title-tracking: .03em;
  --nvf-pg-subtitle-tracking: .18em;

  --nvf-pg-content-pad: 18px 18px 16px;
  --nvf-pg-media-scale: 1.03;
  --nvf-pg-media-scale-hover: 1.07;

  /* Columns fallbacks if theme doesn't provide vars */
  --nvf-cols-desktop: 3;
  --nvf-cols-tablet: 2;
  --nvf-cols-mobile: 1;
}

/* -----------------------------
   Layout wrappers
   ----------------------------- */
.nvf-core-portfolio-grid__inner{
  width: 100%;
}

/* ===== GRID (default) ===== */
.nvf-core-portfolio-grid--grid .nvf-core-portfolio-grid__inner{
  display: grid;
  gap: var(--nvf-pg-gap);
  grid-template-columns: repeat(var(--nvf-cols-desktop), minmax(0, 1fr));
}

@media (max-width: 1024px){
  .nvf-core-portfolio-grid--grid .nvf-core-portfolio-grid__inner{
    grid-template-columns: repeat(var(--nvf-cols-tablet), minmax(0, 1fr));
  }
}
@media (max-width: 640px){
  .nvf-core-portfolio-grid--grid .nvf-core-portfolio-grid__inner{
    grid-template-columns: repeat(var(--nvf-cols-mobile), minmax(0, 1fr));
  }
}

/* Also support cols-N classes produced by renderer as an override (wins over vars) */
/* NOTE: Responsive rules for cols-N classes are now in galleries-responsive.css for intelligent breakpoint handling */
.nvf-core-portfolio-grid__inner.cols-1{ grid-template-columns: repeat(1, minmax(0,1fr)); }
.nvf-core-portfolio-grid__inner.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.nvf-core-portfolio-grid__inner.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.nvf-core-portfolio-grid__inner.cols-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.nvf-core-portfolio-grid__inner.cols-5{ grid-template-columns: repeat(5, minmax(0,1fr)); }
.nvf-core-portfolio-grid__inner.cols-6{ grid-template-columns: repeat(6, minmax(0,1fr)); }

/* ===== MASONRY (Pinterest columns) =====
   Renderer doesn't output individual .item wrappers, so we apply masonry on cards. */
.nvf-core-portfolio-grid--masonry .nvf-core-portfolio-grid__inner{
  display: block;
  column-count: var(--nvf-cols-desktop);
  column-gap: var(--nvf-pg-gap);
}

@media (max-width: 1024px){
  .nvf-core-portfolio-grid--masonry .nvf-core-portfolio-grid__inner{
    column-count: var(--nvf-cols-tablet);
  }
}
@media (max-width: 640px){
  .nvf-core-portfolio-grid--masonry .nvf-core-portfolio-grid__inner{
    column-count: var(--nvf-cols-mobile);
  }
}

.nvf-core-portfolio-grid--masonry .nvf-core-card--portfolio{
  display: inline-block;
  width: 100%;
  margin: 0 0 var(--nvf-pg-gap);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
}

/* ===== METRO (basic dense grid) =====
   Without per-item span classes, we keep it as a dense grid variant. */
.nvf-core-portfolio-grid--metro .nvf-core-portfolio-grid__inner{
  display: grid;
  gap: var(--nvf-pg-gap);
  grid-auto-flow: dense;
  grid-template-columns: repeat(var(--nvf-cols-desktop), minmax(0, 1fr));
}

@media (max-width: 1024px){
  .nvf-core-portfolio-grid--metro .nvf-core-portfolio-grid__inner{
    grid-template-columns: repeat(var(--nvf-cols-tablet), minmax(0, 1fr));
  }
}
@media (max-width: 640px){
  .nvf-core-portfolio-grid--metro .nvf-core-portfolio-grid__inner{
    grid-template-columns: repeat(var(--nvf-cols-mobile), minmax(0, 1fr));
  }
}

/* -----------------------------
   Card (Portfolio)
   ----------------------------- */
.nvf-core-card--portfolio{
  background: var(--nvf-pg-card-bg, #000); /* image-led */
  border: none;
  border-radius: var(--nvf-pg-radius);
  overflow: hidden;
  box-shadow: var(--nvf-pg-shadow);
  transform: translateY(0);
  transition: transform .22s ease, box-shadow .22s ease;
}

.nvf-core-card--portfolio:hover{
  transform: translateY(-3px);
  box-shadow: var(--nvf-pg-shadow-hover);
}

.nvf-core-card--portfolio .nvf-core-card__link{
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Media */
.nvf-core-card--portfolio .nvf-core-card__media{
  position: relative;
  overflow: hidden;
}

.nvf-core-card--portfolio .nvf-core-card__media img{
  display: block;
  width: 100%;
  height: auto;
  transform: scale(var(--nvf-pg-media-scale));
  transition: transform .65s cubic-bezier(.15, 1, .18, 1);
}

/* Subtle zoom on hover */
.nvf-core-card--portfolio:hover .nvf-core-card__media img{
  transform: scale(var(--nvf-pg-media-scale-hover));
}

/* Overlay gradient + blur (optional) */
.nvf-core-card--portfolio .nvf-core-card__media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom, var(--nvf-pg-overlay-from), var(--nvf-pg-overlay-to));
  pointer-events:none;
}

@supports (backdrop-filter: blur(1px)){
  .nvf-core-card--portfolio .nvf-core-card__body{
    backdrop-filter: blur(var(--nvf-pg-overlay-blur));
  }
}

/* Body overlay */
.nvf-core-card--portfolio .nvf-core-card__body{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--nvf-pg-content-pad);
  z-index: 2;
  color: var(--nvf-pg-title-color);
}

/* Ensure body overlays media even if media is last */
.nvf-core-card--portfolio .nvf-core-card__media{
  /* create stacking context */
  z-index: 0;
}

/* Make the card a positioning context if it contains media */
.nvf-core-card--portfolio{
  position: relative;
}

/* Title & subtitle */
.nvf-core-card--portfolio.nvf-core-card--portfolio .nvf-core-card__title{
  margin: 0;
  color: var(--nvf-pg-title-color);
  font-family: var(--nvf-headings-font-family, inherit);
  font-weight: var(--nvf-pg-title-weight);
  font-size: clamp(14px, 1.1vw, var(--nvf-pg-title-size));
  letter-spacing: var(--nvf-pg-title-tracking);
  line-height: 1.2;
}

.nvf-core-card--portfolio.nvf-core-card--portfolio .nvf-core-card__subtitle{
  margin: 3px 0 0;
  color: var(--nvf-pg-subtitle-color);
  text-transform: uppercase;
  letter-spacing: var(--nvf-pg-subtitle-tracking);
  font-weight: var(--nvf-pg-subtitle-weight);
  font-size: clamp(9px, .85vw, var(--nvf-pg-subtitle-size)) !important;
  font-family: inherit !important;
  line-height: 1.25 !important;
}

/* Optional excerpt */
.nvf-core-card--portfolio .nvf-core-card__excerpt{
  margin: 10px 0 0;
  color: var(--nvf-pg-excerpt-color, rgba(243,244,246,.78));
  font-size: var(--nvf-pg-excerpt-fs, 13px);
  line-height: 1.5;
  max-width: 60ch;
}

/* Resist theme typography overrides on <p> inside excerpt */
.nvf-core-card--portfolio.nvf-core-card--portfolio .nvf-core-card__excerpt p{
  font-size: var(--nvf-pg-excerpt-fs, 13px) !important;
  font-family: inherit !important;
  line-height: 1.5 !important;
  color: inherit;
}

/* If no thumbnail, make body static (avoid overlay floating on empty) */
.nvf-core-card--portfolio:not(:has(.nvf-core-card__media)) .nvf-core-card__body{
  position: static;
  color: var(--nvf-color-ink-deep, #0b1220);
  background: var(--nvf-color-white, #fff);
}

/* Keyboard focus */
.nvf-core-card--portfolio .nvf-core-card__link:focus-visible{
  outline: 2px solid rgba(99,102,241,.85);
  outline-offset: 3px;
  border-radius: calc(var(--nvf-pg-radius) - 2px);
}

/* -----------------------------
   Reduced motion
   ----------------------------- */
@media (prefers-reduced-motion: reduce){
  .nvf-core-card--portfolio,
  .nvf-core-card--portfolio .nvf-core-card__media img{
    transition: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Stagger reveal – cards fade-in on viewport entry via IntersectionObserver.
   Progressive enhancement: `data-nvf-stagger` is added by JS; without JS
   cards remain fully visible (no opacity:0).
   ========================================================================== */

/* --- Core template cards --- */
.nvf-core-portfolio-grid[data-nvf-stagger] .nvf-core-card--portfolio{
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity  .5s cubic-bezier(.2,.8,.2,1),
    transform .5s cubic-bezier(.2,.8,.2,1),
    box-shadow .22s ease;
}

.nvf-core-portfolio-grid[data-nvf-stagger] .nvf-core-card--portfolio.nvf-card--visible{
  opacity: 1;
  transform: translateY(0);
  /* After reveal → use fast transition for hover */
  transition:
    opacity  .5s cubic-bezier(.2,.8,.2,1),
    transform .22s ease,
    box-shadow .22s ease;
}

.nvf-core-portfolio-grid[data-nvf-stagger] .nvf-core-card--portfolio.nvf-card--visible:hover{
  transform: translateY(-3px);
  box-shadow: var(--nvf-pg-shadow-hover);
}

/* --- NovaFolio theme template cards (block can render either template) --- */
.nvf-portfolio-archive[data-nvf-stagger] .nvf-portfolio-item{
  opacity: 0;
  transform: translateY(20px);
  contain: layout paint style;
  transition:
    opacity  .5s cubic-bezier(.2,.8,.2,1),
    transform .5s cubic-bezier(.2,.8,.2,1);
}

/* content-visibility: auto removed — caused scroll rebound near footer
   when off-viewport cards collapsed to intrinsic size, mutating scrollHeight.
   Performance gain is negligible for typical portfolio archives. */

.nvf-portfolio-archive[data-nvf-stagger] .nvf-portfolio-item.nvf-card--visible{
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity  .5s cubic-bezier(.2,.8,.2,1),
    transform .22s ease;
}

/* Override theme animation (nvf-card-fade-up) when stagger is active */
.nvf-portfolio-archive[data-nvf-stagger] .nvf-portfolio-item .nvf-portfolio-card{
  animation: none;
}

/* Preserve hover lift */
.nvf-portfolio-archive[data-nvf-stagger] .nvf-portfolio-item.nvf-card--visible .nvf-portfolio-card:hover{
  transform: translateY(-4px);
}

/* Reduced motion — disable stagger entirely */
@media (prefers-reduced-motion: reduce){
  [data-nvf-stagger] .nvf-core-card--portfolio,
  [data-nvf-stagger] .nvf-portfolio-item{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-nvf-stagger] .nvf-portfolio-item .nvf-portfolio-card{
    animation: none !important;
  }
}