/* =========================================================
   Nova Columns — Base (front + shared)
   No editor-only rules here (handled by theme editor-style.css)
   ========================================================= */

.nvf-columns{
  width: 100%;
  /* Frame paddings are driven by tokens through classes. */
  --nvf-columns-pad-y: 0;
  --nvf-columns-pad-x: 0;

  /* Style tokens (presets) */
  --nvf-columns-radius: 0;
  --nvf-columns-shadow: none;

  border-radius: var(--nvf-columns-radius);
  box-shadow: var(--nvf-columns-shadow);

  /* Gutenberg may also set border-radius via inline style when
     the native border controls are used — that always wins. */
}

/* Child base styling (so presets + core background styles apply) */
.nvf-column{
  --nvf-column-radius: 0;
  --nvf-column-shadow: none;

  border-radius: var(--nvf-column-radius);
  box-shadow: var(--nvf-column-shadow);

  /* Theme default column padding — driven by Customizer > Rhythm & Spacing */
  padding: var(--nvf-column-pad, var(--nvf-columns-colpad-default, 0));

  /* Ensure child content is clipped when native Gutenberg border-radius
     is set via inline style (supports.border.radius = true). */
}
.nvf-column[style*="border-radius"]{ overflow: hidden; }

/* -----------------------------------------
   Column padding presets (per-column)
   Uses the existing --nvf-column-pad variable.
   "theme" = no class (inherits from Customizer).
   Gutenberg native padding (inline style) overrides.
----------------------------------------- */
.nvf-column--pad-none{ --nvf-column-pad: 0; }
.nvf-column--pad-xs{ --nvf-column-pad: var(--nvf-space-xs, 8px); }
.nvf-column--pad-s{ --nvf-column-pad: var(--nvf-space-s, 14px); }
.nvf-column--pad-m{ --nvf-column-pad: var(--nvf-space-m, 22px); }
.nvf-column--pad-l{ --nvf-column-pad: var(--nvf-space-xl, 48px); }
.nvf-column--pad-xl{ --nvf-column-pad: calc(var(--nvf-space-xl, 48px) * 1.5); }

/* -----------------------------------------
   Column vertical content alignment
   Works with or without equal-height mode.
   Uses flexbox on .nvf-column__inner.
----------------------------------------- */
/* Per-column vertical alignment requires the column to stretch to
   the full row height. align-self:stretch makes this work even when
   the parent grid default is align-items:start (no equal-height). */
.nvf-column--valign-top,
.nvf-column--valign-center,
.nvf-column--valign-bottom{ align-self: stretch; }

.nvf-column--valign-top .nvf-column__inner,
.nvf-column--valign-center .nvf-column__inner,
.nvf-column--valign-bottom .nvf-column__inner{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.nvf-column--valign-top .nvf-column__inner{ justify-content: flex-start; }
.nvf-column--valign-center .nvf-column__inner{ justify-content: center; }
.nvf-column--valign-bottom .nvf-column__inner{ justify-content: flex-end; }

/* -----------------------------------------
   Column horizontal content alignment
   Controls text-align and centers child blocks.
   Activates flex on __inner so align-items works
   even without a verticalAlignment setting.
   height:100% ensures equal-height mode works
   when contentAlign is set without verticalAlignment.
----------------------------------------- */
/* Per-column content alignment also needs stretch for height:100%
   to have meaning when the parent grid default is align-items:start. */
.nvf-column--content-left,
.nvf-column--content-center,
.nvf-column--content-right{ align-self: stretch; }

.nvf-column--content-left .nvf-column__inner{
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: flex-start;
  text-align: left;
}
.nvf-column--content-center .nvf-column__inner{
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: center;
  text-align: center;
}
.nvf-column--content-right .nvf-column__inner{
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: flex-end;
  text-align: right;
}

/* Left-aligned: children keep full width (normal block flow) */
.nvf-column--content-left .nvf-column__inner > *{
  width: 100%;
  max-width: 100%;
}
/* Center / right: shrink children to content width */
.nvf-column--content-center .nvf-column__inner > *,
.nvf-column--content-right .nvf-column__inner > *{
  width: fit-content;
  max-width: 100%;
}

.nvf-columns .nvf-columns__inner{
  display: grid;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: var(--nvf-columns-pad-y);
  padding-bottom: var(--nvf-columns-pad-y);
  padding-left: var(--nvf-columns-pad-x);
  padding-right: var(--nvf-columns-pad-x);

  /* The theme provides the token values. The plugin only consumes them.
     .nvf-columns parent ensures specificity (0,2,0) beats any
     Gutenberg-injected layout gap at (0,1,0). */
  gap: var(--nvf-columns-gap, var(--nvf-columns-gap-default, var(--nvf-space-m)));
  align-items: start;
}

/* When Columns is nested in Section Nova, remove padding duplication */
/* (Rules are in section.css media queries for responsive-only application) */

/* -----------------------------------------
   Width system (single source of truth)
   – Mirrors Section pattern: fallback values
     ensure widths work even without tokens.
   – alignfull is handled separately for true
     full-bleed on the front-end.
----------------------------------------- */

/* Content — uses a dedicated block-level variable so it stays
   narrower than Wide even when the theme layout width is large. */
.nvf-columns--width-content .nvf-columns__inner{
  max-width: var(--nvf-block-content-width, 920px);
  margin-inline: auto;
}

/* Wide */
.nvf-columns--width-wide .nvf-columns__inner{
  max-width: var(--nvf-layout-wide-width, 1440px);
  margin-inline: auto;
}

/* Full (readable by default): full background, inner constrained */
.nvf-columns--width-full:not(.alignfull) .nvf-columns__inner{
  max-width: var(--nvf-layout-max-width, 1440px);
  margin-inline: auto;
}

/* Full + alignfull: true full-bleed inner */
.nvf-columns--width-full.alignfull .nvf-columns__inner{
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* -----------------------------------------
   Editor only: ensure width variants are
   visible in the editing canvas.
   useInnerBlocksProps can inject Gutenberg
   layout styles → !important overrides them.
   (Loaded as editorStyle via block.json —
   selectors are NOT auto-prefixed.)
----------------------------------------- */
.editor-styles-wrapper .nvf-columns--width-content .nvf-columns__inner{
  max-width: var(--nvf-block-content-width, 920px) !important;
  margin-inline: auto;
}
.editor-styles-wrapper .nvf-columns--width-wide .nvf-columns__inner{
  max-width: var(--nvf-layout-wide-width, 1440px) !important;
  margin-inline: auto;
}
.editor-styles-wrapper .nvf-columns--width-full .nvf-columns__inner{
  max-width: none !important;
}
/* Keep inner centered in full-width mode in editor */
.editor-styles-wrapper .nvf-columns--width-full.alignfull .nvf-columns__inner{
  max-width: var(--nvf-layout-max-width, 1440px);
  margin-left: auto;
  margin-right: auto;
}

/* Editor: force our grid + gap over any Gutenberg layout injection */
.editor-styles-wrapper .nvf-columns .nvf-columns__inner{
  display: grid !important;
  gap: var(--nvf-columns-gap, var(--nvf-columns-gap-default, var(--nvf-space-m))) !important;
}

/* Background variants
   :not(.has-background) ensures the Nova preset doesn't conflict with a
   WP Color Panel choice. When .has-background is present, WP's own
   !important preset class controls the color. */
.nvf-columns--bg-none:not(.has-background){ background: transparent; }
.nvf-columns--bg-light:not(.has-background){ background: var(--nvf-color-surface); }
.nvf-columns--bg-dark:not(.has-background){ background: var(--nvf-color-ink); color: var(--nvf-color-on-ink); }
.nvf-columns--bg-accent:not(.has-background){ background: var(--nvf-color-accent); color: var(--nvf-color-on-accent); }

/* When WP background classes are transferred to __inner by the PHP filter
   (frontend) or JS edit() transfer (editor), inherit border-radius from
   parent so the background respects rounding. */
.nvf-columns__inner.has-background{
  border-radius: inherit;
}

/* Editor: ensure the outer wrapper does NOT show its own background when
   the JS edit() transfer has moved the classes to the inner.  Safety net
   for any residual Gutenberg injection on the outer element. */
.editor-styles-wrapper .nvf-columns:not(.has-background) > .nvf-columns__inner.has-background{
  /* Inner already has the background — nothing extra needed */
}

/* Column count */
.nvf-columns--cols-1 .nvf-columns__inner{ grid-template-columns: 1fr; }
.nvf-columns--cols-2 .nvf-columns__inner{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nvf-columns--cols-3 .nvf-columns__inner{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nvf-columns--cols-4 .nvf-columns__inner{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Vertical align */
.nvf-columns--valign-top .nvf-columns__inner{ align-items: start; }
.nvf-columns--valign-center .nvf-columns__inner{ align-items: center; }
.nvf-columns--valign-bottom .nvf-columns__inner{ align-items: end; }

/* Horizontal align (position the grid within its wrapper) */
.nvf-columns--halign-left .nvf-columns__inner{
  margin-left: 0 !important;
  margin-right: auto !important;
}
.nvf-columns--halign-center .nvf-columns__inner{
  margin-left: auto !important;
  margin-right: auto !important;
}
.nvf-columns--halign-right .nvf-columns__inner{
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Overflow safety: allow children to shrink in grid */
.nvf-columns__inner > *,
.nvf-column,
.nvf-column__inner{ min-width: 0; }

/* Stack on mobile */
@media (max-width: 768px){
  .nvf-columns--stack .nvf-columns__inner{
    grid-template-columns: 1fr !important;
  }
}

/* Responsive polish (optional premium): 4->2 and 3->2 on tablet */
@media (max-width: 1024px){
  .nvf-columns--cols-4 .nvf-columns__inner{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .nvf-columns--cols-3 .nvf-columns__inner{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 2-col layouts (desktop only) */
@media (min-width: 769px){
  .nvf-columns--cols-2.nvf-columns--layout-60-40 .nvf-columns__inner{ grid-template-columns: 3fr 2fr; }
  .nvf-columns--cols-2.nvf-columns--layout-40-60 .nvf-columns__inner{ grid-template-columns: 2fr 3fr; }
  .nvf-columns--cols-2.nvf-columns--layout-70-30 .nvf-columns__inner{ grid-template-columns: 7fr 3fr; }
  .nvf-columns--cols-2.nvf-columns--layout-30-70 .nvf-columns__inner{ grid-template-columns: 3fr 7fr; }
}

/* Equal height */
.nvf-columns--equal-height .nvf-columns__inner{ align-items: stretch; }
.nvf-columns--equal-height .nvf-column{ height: 100%; }
.nvf-columns--equal-height .nvf-column__inner{
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Column content polish */
.nvf-column__inner > :first-child{ margin-top: 0 !important; }
.nvf-column__inner > :last-child{ margin-bottom: 0 !important; }
.nvf-column__inner figure{ margin: 0; }

/* Heading → paragraph gap inside columns (mirror section.css rule) */
.nvf-column__inner > .wp-block-heading + p,
.nvf-column__inner > .wp-block-heading + .is-style-nvf-muted,
.nvf-column__inner > .wp-block-heading + .wp-block-social-links{
  margin-block-start: var(--nvf-heading-subtitle-gap, 0.35em) !important;
  margin-top: var(--nvf-heading-subtitle-gap, 0.35em) !important;
}

/* Tighten h4 label → value rhythm (contact-info card pattern) */
.nvf-column__inner > h4.wp-block-heading{
  margin-block-end: 0.2em;
  margin-bottom: 0.2em;
}

/* Consistent section gap between value paragraph and next h4 */
.nvf-column__inner > p + .wp-block-heading,
.nvf-column__inner > .wp-block-social-links + .wp-block-heading{
  margin-block-start: 1.4em;
  margin-top: 1.4em;
}

.nvf-column__inner img,
.nvf-column__inner video,
.nvf-column__inner iframe{
  display: block;
  max-width: 100%;
  height: auto;
}

/* Media never overflow the column */
.nvf-column img,
.nvf-column video,
.nvf-column iframe,
.nvf-column svg{
  max-width: 100%;
  height: auto;
}

/* WordPress Social Links — override column SVG reset with explicit px sizes
   `:not()` with descendant selectors is invalid CSS, so we use higher
   specificity + !important to beat the generic `.nvf-column svg` rule.     */
.nvf-column .wp-block-social-links .wp-social-link svg{
  max-width: none !important;
  width: 24px !important;
  height: 24px !important;
}
.nvf-column .wp-block-social-links.has-small-icon-size .wp-social-link svg{
  width: 16px !important;
  height: 16px !important;
}
.nvf-column .wp-block-social-links.has-large-icon-size .wp-social-link svg{
  width: 36px !important;
  height: 36px !important;
}
.nvf-column .wp-block-social-links.has-huge-icon-size .wp-social-link svg{
  width: 48px !important;
  height: 48px !important;
}

/* Gutenberg image block can cause overflow via figure defaults */
.nvf-column figure,
.nvf-column .wp-block-image,
.nvf-column .wp-block-image figure{
  margin: 0;
  max-width: 100%;
}

/* If Gutenberg sets width on figure/img, force it to be responsive */
.nvf-column .wp-block-image img{
  width: 100%;
  height: auto;
}
/* Gap scale from tokens
   Follows the same xs→s→m→l→xl token progression
   used by spacing utilities throughout NovaFolio.

   Two layers:
   1. CSS variable (--nvf-columns-gap) for external consumers.
   2. Direct gap on __inner with !important — beats any
      Gutenberg-injected layout gap (inline styles, generated
      <style> tags, is-layout-* rules). */
.nvf-columns--gap-none { --nvf-columns-gap: 0; }
.nvf-columns--gap-xs   { --nvf-columns-gap: var(--nvf-space-xs, 8px); }
.nvf-columns--gap-s    { --nvf-columns-gap: var(--nvf-space-s, 14px); }
.nvf-columns--gap-m    { --nvf-columns-gap: var(--nvf-space-m, 22px); }
.nvf-columns--gap-l    { --nvf-columns-gap: var(--nvf-columns-gap-l, 48px); }
.nvf-columns--gap-xl   { --nvf-columns-gap: var(--nvf-columns-gap-xl, 72px); }

.nvf-columns--gap-none .nvf-columns__inner { gap: 0 !important; }
.nvf-columns--gap-xs .nvf-columns__inner   { gap: var(--nvf-space-xs, 8px) !important; }
.nvf-columns--gap-s .nvf-columns__inner    { gap: var(--nvf-space-s, 14px) !important; }
.nvf-columns--gap-m .nvf-columns__inner    { gap: var(--nvf-space-m, 22px) !important; }
.nvf-columns--gap-l .nvf-columns__inner    { gap: var(--nvf-columns-gap-l, 48px) !important; }
.nvf-columns--gap-xl .nvf-columns__inner   { gap: var(--nvf-columns-gap-xl, 72px) !important; }

/* Theme default */
.nvf-columns--gap-theme { --nvf-columns-gap: var(--nvf-columns-gap-default, var(--nvf-space-m)); }
.nvf-columns--gap-theme .nvf-columns__inner { gap: var(--nvf-columns-gap-default, var(--nvf-space-m)) !important; }

/* -------------------------------------------------
   Section-like spacing utilities (scoped to Nova Columns)
   Must stay in sync with section.css equivalents.
   !important ensures these beat Gutenberg flow-layout resets.
   ------------------------------------------------- */
.nvf-space-top-none{ margin-top: 0 !important; margin-block-start: 0 !important; }
.nvf-space-top-xs{ margin-top: var(--nvf-space-xs, 8px) !important; margin-block-start: var(--nvf-space-xs, 8px) !important; }
.nvf-space-top-s{ margin-top: var(--nvf-space-s, 14px) !important; margin-block-start: var(--nvf-space-s, 14px) !important; }
.nvf-space-top-m{ margin-top: var(--nvf-space-m, 22px) !important; margin-block-start: var(--nvf-space-m, 22px) !important; }
.nvf-space-top-l{ margin-top: var(--nvf-space-xl, 48px) !important; margin-block-start: var(--nvf-space-xl, 48px) !important; }
.nvf-space-top-xl{ margin-top: calc(var(--nvf-space-xl, 48px) * 1.5) !important; margin-block-start: calc(var(--nvf-space-xl, 48px) * 1.5) !important; }

.nvf-space-bottom-none{ margin-bottom: 0 !important; margin-block-end: 0 !important; }
.nvf-space-bottom-xs{ margin-bottom: var(--nvf-space-xs, 8px) !important; margin-block-end: var(--nvf-space-xs, 8px) !important; }
.nvf-space-bottom-s{ margin-bottom: var(--nvf-space-s, 14px) !important; margin-block-end: var(--nvf-space-s, 14px) !important; }
.nvf-space-bottom-m{ margin-bottom: var(--nvf-space-m, 22px) !important; margin-block-end: var(--nvf-space-m, 22px) !important; }
.nvf-space-bottom-l{ margin-bottom: var(--nvf-space-xl, 48px) !important; margin-block-end: var(--nvf-space-xl, 48px) !important; }
.nvf-space-bottom-xl{ margin-bottom: calc(var(--nvf-space-xl, 48px) * 1.5) !important; margin-block-end: calc(var(--nvf-space-xl, 48px) * 1.5) !important; }

/* Vertical padding (applies to .nvf-columns__inner via CSS vars) */
.nvf-columns-pad-none{ --nvf-columns-pad-y: 0; }
.nvf-columns-pad-xs{ --nvf-columns-pad-y: var(--nvf-space-xs, 8px); }
.nvf-columns-pad-s{ --nvf-columns-pad-y: var(--nvf-space-s, 14px); }
.nvf-columns-pad-m{ --nvf-columns-pad-y: var(--nvf-space-m, 22px); }
.nvf-columns-pad-l{ --nvf-columns-pad-y: var(--nvf-space-xl, 48px); }
.nvf-columns-pad-xl{ --nvf-columns-pad-y: calc(var(--nvf-space-xl, 48px) * 1.5); }

/* Horizontal padding: theme|none|xs|s|m|l|xl */
.nvf-columns-pad-x-theme{ --nvf-columns-pad-x: var(--nvf-layout-padding-x, 40px); }
.nvf-columns-pad-x-none{ --nvf-columns-pad-x: 0; }
.nvf-columns-pad-x-xs{ --nvf-columns-pad-x: var(--nvf-space-xs, 8px); }
.nvf-columns-pad-x-s{ --nvf-columns-pad-x: var(--nvf-space-s, 14px); }
.nvf-columns-pad-x-m{ --nvf-columns-pad-x: var(--nvf-space-m, 22px); }
.nvf-columns-pad-x-l{ --nvf-columns-pad-x: var(--nvf-space-xl, 48px); }
.nvf-columns-pad-x-xl{ --nvf-columns-pad-x: calc(var(--nvf-space-xl, 48px) * 1.5); }

.wp-block-novafolio-columns .nvf-column{
  float: none;
  width: auto;
}

/* =========================================================
   Radius presets (Columns + Column)
   - Defaults are "theme" (no class) + none shadow.
   - Theme can override the token values globally.
   ========================================================= */

/* Radius presets — reference theme tokens (--nvf-radius-sm/md/lg)
   directly with hardcoded pixel fallbacks. No intermediate variables,
   so values resolve correctly even inside the Gutenberg iframe. */

.nvf-columns--radius-none{ --nvf-columns-radius: 0; }
.nvf-columns--radius-xs{ --nvf-columns-radius: var(--nvf-radius-xs, 4px);  overflow: hidden; }
.nvf-columns--radius-s{  --nvf-columns-radius: var(--nvf-radius-sm, 8px);  overflow: hidden; }
.nvf-columns--radius-m{  --nvf-columns-radius: var(--nvf-radius-md, 12px); overflow: hidden; }
.nvf-columns--radius-l{  --nvf-columns-radius: var(--nvf-radius-lg, 16px); overflow: hidden; }
.nvf-columns--radius-xl{ --nvf-columns-radius: var(--nvf-radius-xl, 20px); overflow: hidden; }

.nvf-column--radius-none{ --nvf-column-radius: 0; }
.nvf-column--radius-xs{ --nvf-column-radius: var(--nvf-radius-xs, 4px);  overflow: hidden; }
.nvf-column--radius-s{  --nvf-column-radius: var(--nvf-radius-sm, 8px);  overflow: hidden; }
.nvf-column--radius-m{  --nvf-column-radius: var(--nvf-radius-md, 12px); overflow: hidden; }
.nvf-column--radius-l{  --nvf-column-radius: var(--nvf-radius-lg, 16px); overflow: hidden; }
.nvf-column--radius-xl{ --nvf-column-radius: var(--nvf-radius-xl, 20px); overflow: hidden; }

/* =========================================================
   Shadow presets (Columns + Column)
   Neutral shadows (ink). Theme can override by redefining
   the CSS variables below.
   ========================================================= */

:root{
  --nvf-shadow-soft:   0 10px 30px rgba(15, 23, 42, .08);
  --nvf-shadow-medium: 0 14px 45px rgba(15, 23, 42, .12);
  --nvf-shadow-strong: 0 20px 70px rgba(15, 23, 42, .18);
}

.nvf-columns--shadow-none{ --nvf-columns-shadow: none; }
.nvf-columns--shadow-soft{ --nvf-columns-shadow: var(--nvf-shadow-soft); }
.nvf-columns--shadow-medium{ --nvf-columns-shadow: var(--nvf-shadow-medium); }
.nvf-columns--shadow-strong{ --nvf-columns-shadow: var(--nvf-shadow-strong); }

.nvf-column--shadow-none{ --nvf-column-shadow: none; }
.nvf-column--shadow-soft{ --nvf-column-shadow: var(--nvf-shadow-soft); }
.nvf-column--shadow-medium{ --nvf-column-shadow: var(--nvf-shadow-medium); }
.nvf-column--shadow-strong{ --nvf-column-shadow: var(--nvf-shadow-strong); }

/* ============================================
   Section → Columns nesting reset
   ============================================
   Responsibility split:
   - Section controls outer spacing (breathing) + inner padding
   - Columns controls the grid (gap, column count, layout)
   - Column controls local cell padding

   When Columns is nested inside Section, its padding is
   redundant — Section already provides edge spacing.

   Approach:
   1. :where() fallback (spec 0,0,0): handles rare case where
      no padding class is present (old deprecated saves).
   2. Targeted resets (spec 0,2,0) for the DEFAULT classes
      (nvf-columns-pad-m, nvf-columns-pad-x-theme) to prevent
      double-padding. Beats the class spec (0,1,0).
   3. Explicit non-default choices (xs, s, l, xl) are NOT
      reset — if the user deliberately chose padding inside
      a Section, it's intentional (e.g. Columns with its own
      background/radius).

   Uses descendant selector (not child >) so it works in the
   editor too, where Gutenberg inserts intermediate wrappers
   between .nvf-section__inner and .wp-block-novafolio-columns.
   ============================================ */

/* 1. Low-specificity fallback for edge cases */
:where(.nvf-section__inner) :where(.wp-block-novafolio-columns) {
  --nvf-columns-pad-y: 0;
  --nvf-columns-pad-x: 0;
}

/* 2. Reset the default vertical padding ("m" = 22px) inside Section.
   Specificity (0,2,0) beats the standalone class (0,1,0). */
.nvf-section__inner .nvf-columns-pad-m {
  --nvf-columns-pad-y: 0;
}

/* 3. Reset the default horizontal padding ("theme" = layout-padding-x)
   inside Section — Section already provides the horizontal inset. */
.nvf-section__inner .nvf-columns-pad-x-theme {
  --nvf-columns-pad-x: 0;
}

/* -----------------------------------------
   Reset Gutenberg flow-layout block-gap margins
   (front-end + editor). Nova spacing utilities
   (.nvf-space-top-*, .nvf-space-bottom-*) are the
   single source of truth for external margins.
----------------------------------------- */
:where(.is-layout-flow) > .wp-block-novafolio-columns,
:where(.is-layout-constrained) > .wp-block-novafolio-columns {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* -----------------------------------------
   Responsive scaling (mobile)
   Reduce large gap and padding values on smaller
   viewports to prevent excessive whitespace when
   columns are stacked or squeezed.
   Mirrors Section's mobile padding reduction.
----------------------------------------- */
@media (max-width: 768px) {
  /* Gap: scale down L/XL on mobile */
  .nvf-columns--gap-xl { --nvf-columns-gap: var(--nvf-columns-gap-l, 48px); }
  .nvf-columns--gap-xl .nvf-columns__inner { gap: var(--nvf-columns-gap-l, 48px) !important; }
  .nvf-columns--gap-l  { --nvf-columns-gap: var(--nvf-space-m, 22px); }
  .nvf-columns--gap-l .nvf-columns__inner  { gap: var(--nvf-space-m, 22px) !important; }

  /* Columns wrapper padding: scale down L/XL */
  .nvf-columns-pad-xl { --nvf-columns-pad-y: var(--nvf-space-l, 48px); }
  .nvf-columns-pad-l  { --nvf-columns-pad-y: var(--nvf-space-m, 22px); }

  /* Column cell padding: scale down L/XL */
  .nvf-column--pad-xl { --nvf-column-pad: var(--nvf-space-l, 48px); }
  .nvf-column--pad-l  { --nvf-column-pad: var(--nvf-space-m, 22px); }
}