/* =========================================
   Nova Section (front + editor) — CLEAN
   - Width: content / wide / full
   - Background variants
   - Spacing: nvf-space-top/bottom-*
   - Padding: nvf-pad-* ; nvf-pad-x-*
   - Tokens: token.css
========================================= */

.nvf-section{
  width: 100%;
  position: relative;
  display: flow-root;

  /* Defaults pilotés globalement (Customizer si présent) */
  --nvf-section-pad-x: var(
    --nvf-section-pad-x-default,
    var(--nvf-layout-padding-x, var(--nvf-space-m, 22px))
  );

  --nvf-section-pad-y: var(
    --nvf-section-pad-y-default,
    var(--nvf-space-l, 48px)
  );
}

/* Prevent legacy float grid from affecting Nova layout blocks */
.wp-block-novafolio-section .nvf-column{ float: none; }

/* -----------------------------------------
   Background variants
----------------------------------------- */
/* :not(.has-background) ensures Nova presets don't conflict with a
   WP Color Panel choice.  When .has-background is present, WP's own
   !important preset class controls the color. */
.nvf-section--bg-none:not(.has-background){ background-color: transparent; }

.nvf-section--bg-light:not(.has-background){
  background-color: var(--nvf-color-surface, #F9FAFB);
}

.nvf-section--bg-dark:not(.has-background){
  background-color: var(--nvf-color-ink, #111827);
  color: var(--nvf-color-on-ink, #FFFFFF);
}

.nvf-section--bg-accent:not(.has-background){
  background-color: var(--nvf-color-accent, #4F46E5);
  color: var(--nvf-color-on-accent, #FFFFFF);
}

/* -----------------------------------------
   Shape-divider-aware background
   When dividers are present the native bg is transparent so the SVG
   wave can sit above a colored ::before.  The ::before covers the
   FULL section box (top:0 / bottom:0) so the divider SVG (z-index:1)
   is always painted on a colored surface and remains visible.
----------------------------------------- */
.nvf-section--has-dividers{
  --nvf-dt: 0px; /* top divider height */
  --nvf-db: 0px; /* bottom divider height */
  overflow: visible;
}

.nvf-section--has-dividers.nvf-section--bg-light,
.nvf-section--has-dividers.nvf-section--bg-dark,
.nvf-section--has-dividers.nvf-section--bg-accent{
  background-color: transparent !important;
}

.nvf-section--has-dividers.nvf-section--bg-light::before,
.nvf-section--has-dividers.nvf-section--bg-dark::before,
.nvf-section--has-dividers.nvf-section--bg-accent::before{
  content: '';
  position: absolute;
  top: var(--nvf-dt, 0px);
  left: 0;
  right: 0;
  bottom: var(--nvf-db, 0px);
  z-index: 0;
  pointer-events: none;
}

.nvf-section--has-dividers.nvf-section--bg-light::before{
  background-color: var(--nvf-color-surface, #F9FAFB);
}
.nvf-section--has-dividers.nvf-section--bg-dark::before{
  background-color: var(--nvf-color-ink, #111827);
}
.nvf-section--has-dividers.nvf-section--bg-accent::before{
  background-color: var(--nvf-color-accent, #4F46E5);
}

/* WP Color Panel (native) background + dividers:
   Same ::before technique — the bg variable is injected by section.php. */
.nvf-section--has-dividers.has-background{
  background-color: transparent !important;
}
.nvf-section--has-dividers.has-background::before{
  content: '';
  position: absolute;
  top: var(--nvf-dt, 0px);
  left: 0;
  right: 0;
  bottom: var(--nvf-db, 0px);
  z-index: 0;
  pointer-events: none;
  background-color: var(--nvf-section-bg-color, transparent);
}

/* -----------------------------------------
   Content alignment (horizontal)
   Uses flex column + align-items to position block-level
   children (div, figure, etc.). text-align alone only works
   for inline content — not for block containers.
   !important needed to beat columns.css width
   system rules of equal specificity.
----------------------------------------- */

/* Activate flex column whenever alignment is set */
.nvf-section--align-left .nvf-section__inner,
.nvf-section--align-center .nvf-section__inner,
.nvf-section--align-right .nvf-section__inner{
  display: flex;
  flex-direction: column;
}

/* Left */
.nvf-section--align-left .nvf-section__inner{
  text-align: left;
  align-items: flex-start;
}
/* Center */
.nvf-section--align-center .nvf-section__inner{
  text-align: center;
  align-items: center;
}
/* Right */
.nvf-section--align-right .nvf-section__inner{
  text-align: right;
  align-items: flex-end;
}

/* Full-width children (Columns, Groups, etc.) must still span 100%
   even inside a flex container; only intrinsic-width children shrink. */
.nvf-section[class*="nvf-section--align-"] .nvf-section__inner > .nvf-columns,
.nvf-section[class*="nvf-section--align-"] .nvf-section__inner > .wp-block-novafolio-columns,
.nvf-section[class*="nvf-section--align-"] .nvf-section__inner > .wp-block-group,
.nvf-section[class*="nvf-section--align-"] .nvf-section__inner > .wp-block-cover,
.nvf-section[class*="nvf-section--align-"] .nvf-section__inner > .wp-block-columns,
.nvf-section[class*="nvf-section--align-"] .nvf-section__inner > [class*="alignwide"],
.nvf-section[class*="nvf-section--align-"] .nvf-section__inner > [class*="alignfull"]{
  width: 100%;
  align-self: stretch;
}

/* Align the constrained .nvf-columns__inner grid
   within its full-width .nvf-columns wrapper.
   !important overrides columns.css margin-inline:auto. */
.nvf-section--align-left .nvf-columns__inner{
  margin-left: 0 !important;
  margin-right: auto !important;
}
.nvf-section--align-center .nvf-columns__inner{
  margin-left: auto !important;
  margin-right: auto !important;
}
.nvf-section--align-right .nvf-columns__inner{
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Also align the .nvf-section__inner itself if the
   section width > inner max-width (e.g. full > content). */
.nvf-section--align-left > .nvf-section__inner{
  margin-left: 0; margin-right: auto;
}
.nvf-section--align-right > .nvf-section__inner{
  margin-left: auto; margin-right: 0;
}

/* Editor: horizontal alignment — flex-based (same as frontend) */
.editor-styles-wrapper .nvf-section--align-left .nvf-section__inner,
.editor-styles-wrapper .nvf-section--align-center .nvf-section__inner,
.editor-styles-wrapper .nvf-section--align-right .nvf-section__inner{
  display: flex !important;
  flex-direction: column;
}
.editor-styles-wrapper .nvf-section--align-left .nvf-section__inner{
  text-align: left;
  align-items: flex-start;
}
.editor-styles-wrapper .nvf-section--align-center .nvf-section__inner{
  text-align: center;
  align-items: center;
}
.editor-styles-wrapper .nvf-section--align-right .nvf-section__inner{
  text-align: right;
  align-items: flex-end;
}
.editor-styles-wrapper .nvf-section[class*="nvf-section--align-"] .nvf-section__inner > .nvf-columns,
.editor-styles-wrapper .nvf-section[class*="nvf-section--align-"] .nvf-section__inner > .wp-block-novafolio-columns,
.editor-styles-wrapper .nvf-section[class*="nvf-section--align-"] .nvf-section__inner > .wp-block-group,
.editor-styles-wrapper .nvf-section[class*="nvf-section--align-"] .nvf-section__inner > [class*="alignwide"],
.editor-styles-wrapper .nvf-section[class*="nvf-section--align-"] .nvf-section__inner > [class*="alignfull"]{
  width: 100%;
  align-self: stretch;
}

/* Editor: align Columns __inner (same !important override) */
.editor-styles-wrapper .nvf-section--align-left .nvf-columns__inner{
  margin-left: 0 !important;
  margin-right: auto !important;
}
.editor-styles-wrapper .nvf-section--align-center .nvf-columns__inner{
  margin-left: auto !important;
  margin-right: auto !important;
}
.editor-styles-wrapper .nvf-section--align-right .nvf-columns__inner{
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* -----------------------------------------
   Content vertical alignment
   flex-direction:column + justify-content positions children.
   Needs a min-height so there IS vertical space to distribute.
   When the section has media, --has-media provides min-height:40vh.
   Otherwise, we set a sensible default so the user sees the effect.
   :where() keeps specificity low so explicit min-height wins.
----------------------------------------- */

/* Provide a fallback min-height when valign is set but no media */
:where(.nvf-section[class*="nvf-section--valign-"]:not(.nvf-section--has-media)){
  min-height: var(--nvf-section-min-height, 40vh);
}

:where(.nvf-section--valign-top) .nvf-section__inner{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
:where(.nvf-section--valign-center) .nvf-section__inner{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
:where(.nvf-section--valign-bottom) .nvf-section__inner{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Ensure inner wrapper fills section height so vertical
   alignment works when min-height is set (bg media, custom). */
.nvf-section[class*="nvf-section--valign-"] .nvf-section__inner{
  min-height: inherit;
}

/* Vertical-aligned children keep normal width (don't shrink-wrap) */
:where(.nvf-section[class*="nvf-section--valign-"]) .nvf-section__inner > * {
  width: 100%;
}

/* Combine horizontal + vertical: when BOTH are active, flex properties
   must coexist. align-items handles horizontal, justify-content vertical. */
.nvf-section[class*="nvf-section--align-"][class*="nvf-section--valign-"] .nvf-section__inner{
  display: flex;
  flex-direction: column;
}

/* Editor: vertical alignment — higher-specificity overrides to beat
   the Gutenberg editor's own display / layout rules which can
   override :where() selectors (specificity 0). */
.editor-styles-wrapper .nvf-section--valign-top .nvf-section__inner{
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start;
}
.editor-styles-wrapper .nvf-section--valign-center .nvf-section__inner{
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}
.editor-styles-wrapper .nvf-section--valign-bottom .nvf-section__inner{
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
}
.editor-styles-wrapper .nvf-section[class*="nvf-section--valign-"] .nvf-section__inner{
  min-height: inherit;
}
.editor-styles-wrapper .nvf-section[class*="nvf-section--valign-"]:not(.nvf-section--has-media){
  min-height: var(--nvf-section-min-height, 40vh);
}
.editor-styles-wrapper .nvf-section[class*="nvf-section--valign-"] .nvf-section__inner > *{
  width: 100%;
}

/* -----------------------------------------
   Section typography: heading → subtitle gap
   Extra breathing room between a section title (H2/H3) and
   the subtitle paragraph that follows it.
----------------------------------------- */
.nvf-section__inner > .wp-block-heading + p {
  margin-top: var(--nvf-heading-subtitle-gap, 0.75em);
}

/* -----------------------------------------
   Inner wrapper
----------------------------------------- */
.nvf-section__inner{
  position: relative;
  /* z-index intentionally omitted for plain sections.
     Only media / divider sections scope z-index:2 below
     so non-divider inners stay at z-index:auto and never
     paint over a neighbouring section's shape divider. */

  width: 100%;
  margin-left: auto;
  margin-right: auto;

  /* Ensure section is visible even without content (bg + padding) */
  min-height: 1px;

  padding-top: var(--nvf-section-pad-y);
  padding-bottom: var(--nvf-section-pad-y);
  padding-left: var(--nvf-section-pad-x);
  padding-right: var(--nvf-section-pad-x);
}

/* Sections with media layers or dividers need their own stacking
   context so internal z-indexes (bg:0, overlay:1, divider:1, inner:2)
   don't bleed across section boundaries. */
:is(.nvf-section--has-media, .nvf-section--has-dividers) > .nvf-section__inner {
  z-index: 2;
}

/* -----------------------------------------
   Width system (single source of truth)
----------------------------------------- */

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

/* Wide */
.nvf-section--width-wide .nvf-section__inner{
  max-width: var(--nvf-layout-wide-width, 1440px);
}

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

/* Full + alignfull: the <section> stretches edge-to-edge but the
   inner constrains content to the Customizer wide-width so that ALL
   child blocks (native wp:columns, headings, etc.) are centred.
   Blocks with .alignfull break out to fill the section (see below). */
.nvf-section--width-full.alignfull .nvf-section__inner{
  max-width: var(--nvf-layout-wide-width, 1440px);
  margin-left: auto;
  margin-right: auto;
}

/* alignfull children (CTA, Hero …) break out of the constrained
   inner to fill the full-bleed section edge-to-edge.
   Excluded when an explicit horizontal-padding class is set
   (nvf-pad-x-xs/s/m/l/xl): the user-chosen padding must be respected
   — EXCEPT for Nova Columns fullwidth which always breaks out (see below). */
.nvf-section--width-full.alignfull:not([class*="nvf-pad-x-"]) .nvf-section__inner > .alignfull,
.nvf-section--width-full.alignfull.nvf-pad-x-none .nvf-section__inner > .alignfull{
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Nova Columns fullwidth: always breaks out of the Section inner,
   even when the Section has an explicit horizontal padding.
   The user chose "Full Width" on the Columns block, so it must span
   edge-to-edge regardless of the parent Section's padding setting.
   Uses negative margin equal to the Section's current pad-x to
   counteract the inner container's padding.
   Excluded for pad-x-none: the general alignfull rule above already
   provides 100vw breakout — this rule would restrict to 100% of inner. */
.nvf-section--width-full.alignfull[class*="nvf-pad-x-"]:not(.nvf-pad-x-none) .nvf-section__inner > .wp-block-novafolio-columns.nvf-columns--width-full.alignfull{
  width: calc(100% + var(--nvf-section-pad-x) * 2);
  max-width: none;
  margin-left: calc(-1 * var(--nvf-section-pad-x));
  margin-right: calc(-1 * var(--nvf-section-pad-x));
}

/* Editor only — Content width override */
.editor-styles-wrapper .nvf-section--width-content .nvf-section__inner{
  max-width: var(--nvf-block-content-width, 920px) !important;
}

/* Responsive
   – The CSS variable system (--nvf-section-pad-x, --nvf-section-pad-y)
     is the single source of truth for spacing.  No hard-coded 90 %
     max-width or 5 % padding — those created double-constraining and
     overrode user choices (especially nvf-pad-x-none).
   – Full+alignfull sections WITHOUT any explicit pad-x class get a
     safety-net padding from the layout variable so content never
     touches the viewport edge on narrow screens.
   – Large explicit pad-x values are scaled down on mobile to prevent
     excessive whitespace. */

/* 768px — mobile: scale down large pad-x presets, ensure vertical padding */
@media (max-width: 768px) {
  /* Full+alignfull with NO pad-x class: safety-net horizontal padding */
  .nvf-section--width-full.alignfull:not([class*="nvf-pad-x-"]) .nvf-section__inner {
    padding-left: var(--nvf-layout-padding-x, 24px);
    padding-right: var(--nvf-layout-padding-x, 24px);
  }

  .nvf-section--width-full.alignfull .nvf-section__inner {
    padding-top: var(--nvf-section-pad-y, 60px);
    padding-bottom: var(--nvf-section-pad-y, 60px);
  }

  /* Cap large inline padding-top/bottom on mobile.
     Inline styles (editor spacing panel) can set 200px+ values
     that are fine on desktop but crush content on small screens. */
  .nvf-section__inner {
    padding-top: clamp(24px, 6vw, var(--nvf-section-pad-y, 60px)) !important;
    padding-bottom: clamp(24px, 6vw, var(--nvf-section-pad-y, 60px)) !important;
  }

  /* Scale down large explicit pad-x on mobile to avoid excessive
     horizontal padding on narrow viewports. */
  .nvf-pad-x-xl{ --nvf-section-pad-x: var(--nvf-layout-padding-x, 40px); }
  .nvf-pad-x-l{ --nvf-section-pad-x: var(--nvf-layout-padding-x, 40px); }

  /* Prevent double horizontal padding: section __inner already provides
     the horizontal padding, so WP blocks with their own inline padding
     (set via the editor spacing panel) must be reset on mobile. */
  .nvf-section__inner > .wp-block-columns,
  .nvf-section__inner > .wp-block-group,
  .nvf-section__inner .wp-block-column {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* 540px — small mobile: further reduce pad-x and vertical */
@media (max-width: 540px) {
  .nvf-section--width-full.alignfull:not([class*="nvf-pad-x-"]) .nvf-section__inner {
    padding-left: var(--nvf-layout-padding-x, 18px);
    padding-right: var(--nvf-layout-padding-x, 18px);
  }

  .nvf-section__inner {
    padding-top: clamp(20px, 5vw, var(--nvf-section-pad-y, 40px)) !important;
    padding-bottom: clamp(20px, 5vw, var(--nvf-section-pad-y, 40px)) !important;
  }

  /* Further reduction: cap all explicit pad-x at the layout value */
  .nvf-pad-x-xl,
  .nvf-pad-x-l,
  .nvf-pad-x-m { --nvf-section-pad-x: var(--nvf-layout-padding-x, 40px); }
}

/* -----------------------------------------------
   Breakout : bloc Hero alignfull dans une Section
   → annule tout padding horizontal du inner-container
   Spécificité (0,5,0) — l'emporte sur les règles responsive 5%
   Compatibilité :has() : Chrome 105+, Safari 15.4+, Firefox 121+
   Excluded when explicit pad-x is set (same logic as alignfull breakout).
   ------------------------------------------------ */
.nvf-section--width-full.alignfull:not([class*="nvf-pad-x-"]) .nvf-section__inner:has(> .wp-block-novafolio-hero.alignfull),
.nvf-section--width-full.alignfull.nvf-pad-x-none .nvf-section__inner:has(> .wp-block-novafolio-hero.alignfull) {
  padding-left: 0;
  padding-right: 0;
}

/* -----------------------------------------
   Portfolio grid inside Section: neutralize
   the archive template's own containment.
   The Section handles width, padding & bg.
----------------------------------------- */
.nvf-section__inner .nvf-portfolio-archive {
  padding-top: 0;
  padding-bottom: 0;
  background: transparent;
}
.nvf-section__inner .nvf-portfolio-inner {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Alignfull base (no hacks) */
.nvf-section.alignfull{
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 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-section,
:where(.is-layout-constrained) > .wp-block-novafolio-section {
  margin-block-start: 0;
  margin-block-end: 0;
}
/* Editor-specific (kept for backward compat with older WP) */
.editor-styles-wrapper :where(.is-layout-flow) > .wp-block-novafolio-section,
.editor-styles-wrapper :where(.is-layout-constrained) > .wp-block-novafolio-section {
  margin-block-start: 0;
  margin-block-end: 0;
}
/* -----------------------------------------
   Spacing utilities (external margin)
----------------------------------------- */
.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; }

/* -----------------------------------------
   Padding utilities (internal)
----------------------------------------- */

/* Padding Y */
.nvf-pad-none{ --nvf-section-pad-y: 0px; }
.nvf-pad-xs{ --nvf-section-pad-y: var(--nvf-space-xs, 8px); }
.nvf-pad-s{ --nvf-section-pad-y: var(--nvf-space-s, 14px); }
.nvf-pad-m{ --nvf-section-pad-y: var(--nvf-space-m, 22px); }
.nvf-pad-l{ --nvf-section-pad-y: var(--nvf-space-xl, 48px); }
.nvf-pad-xl{ --nvf-section-pad-y: calc(var(--nvf-space-xl, 48px) * 1.5); }

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

/* -----------------------------------------
   Optional surface "card" (non-breaking)
----------------------------------------- */
.nvf-section--surface .nvf-section__inner{
  background: var(--nvf-color-white, #fff);
  border: 1px solid var(--nvf-color-border, #e5e7eb);
  border-radius: var(--nvf-radius-l, 16px);
  box-shadow: var(--nvf-shadow-s, 0 8px 18px rgba(0,0,0,.08));
}

.nvf-section--bg-dark.nvf-section--surface .nvf-section__inner{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
}
/* -----------------------------------------
   Content defaults inside Nova Section
   - Works with nested blocks (Nova Columns, Group, etc.)
   - Centers intrinsic blocks by default
   - Respects explicit Gutenberg alignments
----------------------------------------- */

/* Center intrinsic blocks (figure wrappers) by default */
.nvf-section__inner :where(.wp-block-image, .wp-block-gallery){
  margin-left: auto;
  margin-right: auto;
}

/* Do not override explicit left/right alignment */
.nvf-section__inner :where(.wp-block-image.alignleft, .wp-block-image.alignright,
                           .wp-block-gallery.alignleft, .wp-block-gallery.alignright){
  margin-left: 0;
  margin-right: 0;
}

/* Center the actual image when not explicitly aligned */
.nvf-section__inner :where(.wp-block-image):not(.alignleft):not(.alignright) img{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Center Buttons group wherever it is nested */
.nvf-section__inner :where(.wp-block-buttons){
  justify-content: center;
}

/* -----------------------------------------
   Mobile responsive (max-width: 768px)
   Reduce padding/spacing on smaller screens
----------------------------------------- */
@media (max-width: 768px) {
  /* Only reduce horizontal padding when no explicit paddingX class.
     nvf-pad-x-none also gets the safety net — on mobile it must not
     leave content flush against the viewport edges. */
  .nvf-section:not([class*="nvf-pad-x-"]) > .nvf-section__inner,
  .nvf-section.nvf-pad-x-none > .nvf-section__inner {
    padding-left: var(--nvf-space-s, 14px);
    padding-right: var(--nvf-space-s, 14px);
  }

  /* Reduce large spacing on mobile */
  .nvf-space-top-xl {
    margin-top: var(--nvf-space-xl, 48px) !important;
  }

  .nvf-space-bottom-xl {
    margin-bottom: var(--nvf-space-xl, 48px) !important;
  }

  /* Stack-friendly padding on mobile */
  .nvf-pad-xl {
    --nvf-section-pad-y: var(--nvf-space-xl, 48px);
  }

  .nvf-pad-l {
    --nvf-section-pad-y: var(--nvf-space-m, 22px);
  }
}

/* -----------------------------------------
   Background media layers (image / video / parallax)
----------------------------------------- */
.nvf-section--has-media {
  position: relative;
  overflow: hidden;
  min-height: 40vh; /* fallback si aucune hauteur définie sur le bloc */
}

/* Dividers must visually overflow into adjacent sections */
.nvf-section--has-media.nvf-section--has-dividers {
  overflow: visible;
}

/* When a slider breaks out of the section (any custom max-width or alignfull),
   switch to overflow:visible so the breakout margins aren't clipped.
   The bg image/video stays contained by position:absolute + inset:0. */
.nvf-section--has-media:has(> .nvf-section__inner > .nvf-slider[style*="--nvf-slider-max-width"]),
.nvf-section--has-media:has(> .nvf-section__inner > .nvf-slider.alignfull) {
  overflow: visible;
}

.nvf-section--has-media .nvf-section__inner {
  position: relative;
  z-index: 2;
}

.nvf-section__bg-image,
.nvf-section__bg-video,
.nvf-section__bg-overlay {
  position: absolute;
  inset: 0;
}

.nvf-section__bg-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

.nvf-section--parallax .nvf-section__bg-image {
  background-attachment: fixed;
}

@media (pointer: coarse) {
  .nvf-section--parallax .nvf-section__bg-image {
    background-attachment: scroll;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nvf-section--parallax .nvf-section__bg-image {
    background-attachment: scroll;
  }
}

.nvf-section__bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.nvf-section__bg-overlay {
  z-index: 1;
  pointer-events: none;
}

/* -----------------------------------------
   Shape-divider inner padding compensation
   Must come AFTER all responsive rules so that cascade order
   guarantees the divider offset is always applied.
   Uses the --nvf-dt / --nvf-db CSS variables set on the
   section wrapper via inline style in section.php.
----------------------------------------- */
.nvf-section.nvf-section--has-dividers > .nvf-section__inner {
  padding-top: calc(var(--nvf-section-pad-y, 48px) + var(--nvf-dt, 0px));
  padding-bottom: calc(var(--nvf-section-pad-y, 48px) + var(--nvf-db, 0px));
}