/* =========================================
   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/content sections placed in the page flow already sit inside a
   padded container (.nvf-prose / #primary). When pad-x uses Theme
   default (no explicit nvf-pad-x-* class), avoid a second horizontal
   inset so native and Nova blocks align on the same visual column. */
.nvf-section--width-wide:not([class*="nvf-pad-x-"])>.nvf-section__inner,
.nvf-section--width-content:not([class*="nvf-pad-x-"])>.nvf-section__inner {
  padding-left: 0;
  padding-right: 0;
}

/* 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);
}

/* =================================================================
   v1.7.6 — Desktop safety net for FULL-BLEED `nvf-pad-x-none` sections.
   ---------------------------------------------------------------
   Only targets `.nvf-section--width-full.alignfull.nvf-pad-x-none` —
   i.e. sections that physically stretch to 100vw via the alignfull
   breakout. With pad-x-none, their content would otherwise touch the
   viewport edges, breaking the Customizer's horizontal safety gutter
   contract.
   ---------------------------------------------------------------
   IMPORTANT — do NOT broaden this selector to all `.nvf-pad-x-none`:
   `width-wide` and `width-content` sections are already constrained
   by the parent (#primary / .nvf-prose) which provides the gutter.
   Adding padding here would cause a 40px offset versus adjacent
   wide sections, visibly misaligning content (regression observed
   in v1.7.6 pre-release).
   ---------------------------------------------------------------
   Exclusions (= keep edge-to-edge):
     - direct child is `.alignfull` (CTA full, columns full, etc.)
     - direct child is Nova Hero / Nova Hero-Slider / Nova CTA
       (intentional banner/hero wrappers)
   Mirrors the existing @768 rule (~line 846) so behaviour is
   consistent across viewports.
   ---------------------------------------------------------------
   ALIGNMENT — content stays perfectly aligned with sibling
   `.nvf-section--width-wide` sections at ALL viewports:
     - vw < 1520: inner = vw − 80, centered (40px gutter)
     - vw ≥ 1520: inner = 1440, centered (matches wide max-width)
   This is achieved via `max-width: min(100% − 2*pad, wide-width)`
   on the inner — NO internal padding (which would create a double
   gutter at large viewports and visibly misalign content).
   `:has()` is supported in all current evergreen browsers.
   ================================================================= */
.nvf-section--width-full.alignfull.nvf-pad-x-none:not(:has(> .nvf-section__inner > .alignfull)):not(:has(> .nvf-section__inner > .wp-block-novafolio-hero)):not(:has(> .nvf-section__inner > .wp-block-novafolio-hero-slider)):not(:has(> .nvf-section__inner > .wp-block-novafolio-cta))>.nvf-section__inner {
  max-width: min(calc(100% - var(--nvf-section-pad-x-default, var(--nvf-layout-padding-x, 40px)) * 2),
      var(--nvf-layout-wide-width, 1440px));
  margin-left: auto;
  margin-right: auto;
}

/* 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. */

/* 1024px — tablet + mobile safety rails
   - Keep content off viewport edges for wide/content sections that
     intentionally remove default inner padding on desktop.
   - Normalize alignwide containers to 95vw for consistent block widths.
   - v1.7.3: universal width cap for ALL non-full-bleed sections.
*/
@media (max-width: 1024px) {

  /* -------------------------------------------------------------------
     v1.7.4 — Universal width consistency (sections + native WP blocks).
     EVERY top-level block on tablet & mobile shares the SAME visual
     width: min(95vw, wide-width), centered. Guarantees perfect x-anchor
     alignment when blocks stack vertically.

     COVERED:
     - Nova Section width-wide / width-content
     - Nova Section width-full WITHOUT alignfull (full width on desktop
       still caps at 95vw on mobile — visually aligned with siblings)
     - Native WP top-level blocks (group/cover/columns/media-text/gallery)
       with .alignfull OR .alignwide
     EXCLUDED by design:
     - Nova Section width-full + alignfull (intentional edge-to-edge
       hero/banner sections — author opted in)
     - Hero / Hero-slider Nova blocks (immersive by design, own breakout)
     ------------------------------------------------------------------- */
  :is(.entry-content, .nvf-prose)>.wp-block-novafolio-section.nvf-section--width-wide,
  :is(.entry-content, .nvf-prose)>.wp-block-novafolio-section.nvf-section--width-content,
  :is(.entry-content, .nvf-prose)>.wp-block-novafolio-section.nvf-section--width-full:not(.alignfull),
  :is(.entry-content, .nvf-prose)>.wp-block-group.alignfull,
  :is(.entry-content, .nvf-prose)>.wp-block-group.alignwide,
  :is(.entry-content, .nvf-prose)>.wp-block-cover.alignfull,
  :is(.entry-content, .nvf-prose)>.wp-block-cover.alignwide,
  :is(.entry-content, .nvf-prose)>.wp-block-columns.alignfull,
  :is(.entry-content, .nvf-prose)>.wp-block-columns.alignwide,
  :is(.entry-content, .nvf-prose)>.wp-block-media-text.alignfull,
  :is(.entry-content, .nvf-prose)>.wp-block-media-text.alignwide,
  :is(.entry-content, .nvf-prose)>.wp-block-gallery.alignfull,
  :is(.entry-content, .nvf-prose)>.wp-block-gallery.alignwide {
    max-width: min(95vw, var(--nvf-layout-wide-width, 1440px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto !important;
    box-sizing: border-box;
  }

  /* -------------------------------------------------------------------
     v1.7.9 — UNIVERSAL mobile contract (aligned with theme templates).
     EVERY Nova Section inner has `padding-inline: 0` on mobile, with
     NO exception. The parent wrapper (`#primary` / `.nvf-prose` /
     `.entry-content`) already provides `padding-inline:
     var(--nvf-layout-padding-x)` (≈ 5vw on mobile via Customizer).
     Any internal pad-x adds a second gutter and misaligns the section
     versus its siblings — exactly the bug observed on `/exhibitions/`
     where sections containing alignfull children kept their 5vw inner
     pad and appeared narrower than neighbours.

     `.alignfull` children (CTA, Gallery, Columns full, Hero, …)
     continue to break out edge-to-edge via their own rule
     (`width: 100vw; margin-left: calc(50% - 50vw)`) which is computed
     relative to the viewport, not the inner — so removing inner pad
     does NOT affect their breakout.

     KEY: `pad-x-none` ALWAYS means zero padding. All pad-x-* presets
     converge to zero on mobile (≤ 1024px); breathing room comes from
     the 95vw cap and the parent gutter. Pad-x-* remain active on
     DESKTOP (≥ 1025px) where there is no parent gutter doubling.
     ------------------------------------------------------------------- */
  .nvf-section>.nvf-section__inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Width caps per variant — all sections share the SAME visual column. */
  .nvf-section--width-wide>.nvf-section__inner,
  .nvf-section--width-content>.nvf-section__inner {
    max-width: min(95vw, var(--nvf-layout-wide-width, 1440px));
    margin-inline: auto;
  }

  /* Full-bleed sections (alignfull) live OUTSIDE the parent gutter via
     their 100vw breakout. Cap their inner to the SAME visual column
     as `width-wide` siblings: `100vw - 2 * layout-padding-x`, capped
     at wide-width. Excluded: Hero / Hero-Slider / CTA full-bleed
     wrappers (intentional edge-to-edge). Sections that hold an
     alignfull child block are NOT excluded — the inner cap doesn't
     affect the child's 100vw breakout (computed from viewport). */
  .nvf-section--width-full.alignfull:not(:has(> .nvf-section__inner > .wp-block-novafolio-hero.alignfull)):not(:has(> .nvf-section__inner > .wp-block-novafolio-hero-slider.alignfull)):not(:has(> .nvf-section__inner > .wp-block-novafolio-cta.alignfull))>.nvf-section__inner {
    max-width: min(calc(100vw - var(--nvf-layout-padding-x, 40px) * 2),
        var(--nvf-layout-wide-width, 1440px));
    margin-inline: auto;
  }

  .nvf-section__inner>.alignwide,
  .nvf-section__inner>.wp-block-group.alignwide,
  .nvf-section__inner>.wp-block-cover.alignwide,
  .nvf-section__inner>.wp-block-media-text.alignwide,
  .nvf-section__inner>.wp-block-gallery.alignwide,
  .nvf-section__inner>[class*="wp-block-novafolio-"].alignwide {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  /* Gutenberg columns alignwide can inherit negative margin math from
     global padding rules. Inside Nova sections, pin them to inner width.
     NOTE specificity: prefixed with .wp-block-novafolio-section to outrank
     any (max-width:1024px) override coming from the Customizer
     "Additional CSS" panel, which historically grouped
     .wp-block-columns.alignwide with the generic alignwide rule and forced
     min(95vw, 1440px) — causing the columns to overflow the section inner. */
  .wp-block-novafolio-section .nvf-section__inner>.wp-block-columns.alignwide,
  .nvf-section .nvf-section__inner>.wp-block-columns.alignwide {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  /* v1.7.5 — Zero out horizontal padding on Nova custom blocks AND native
     WP blocks when they sit as direct children of a section.
     The section's __inner already provides the unified gutter — children
     adding their own padding-inline causes double-indent (cards/columns
     misaligned, content shifted). Applied at @1024 to cover tablet range.
     Mobile (@768) has its own AUTO-NORMALIZE rule with the same intent. */
  .nvf-section__inner>.wp-block-columns,
  .nvf-section__inner>.wp-block-group,
  .nvf-section__inner>.wp-block-cover,
  .nvf-section__inner>.wp-block-media-text,
  .nvf-section__inner>.wp-block-gallery,
  .nvf-section__inner>.wp-block-buttons,
  .nvf-section__inner>[class*="wp-block-novafolio-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* 768px — mobile: cap vertical padding presets, normalize children. */
@media (max-width: 768px) {
  /* Full-bleed (alignfull) inner width cap is applied at @1024 above
     so tablets share the same harmonised column as phones. */

  .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 (v1.8.0).
     Inline styles (editor spacing panel) can set 200px+ values that
     crush content on small screens. Floor at 32px guarantees the
     content never feels glued to the section's top/bottom edge while
     keeping a premium gallery rhythm. */
  .nvf-section:not(.nvf-pad-none)>.nvf-section__inner {
    padding-top: clamp(32px, 6.4vw, var(--nvf-section-pad-y, 60px)) !important;
    padding-bottom: clamp(32px, 6.4vw, var(--nvf-section-pad-y, 60px)) !important;
  }

  /* v1.8.0 — Top-level Nova blocks with inline Gutenberg padding
     (set via the editor spacing panel as inline style) get the same
     vertical floor as sections, so a Hero / CTA / Columns dropped
     directly in the page flow keeps a consistent rhythm. */
  :is(.entry-content, .nvf-prose) > [class*="wp-block-novafolio-"][style*="padding-top"],
  :is(.entry-content, .nvf-prose) > [class*="wp-block-novafolio-"][style*="padding-bottom"] {
    padding-top: clamp(32px, 6.4vw, 48px) !important;
    padding-bottom: clamp(32px, 6.4vw, 48px) !important;
  }

  /* -------------------------------------------------------------------
     AUTO-NORMALIZE direct WP block children inside sections.
     Section __inner already provides the horizontal gutter, so child
     blocks must NOT add their own horizontal padding (would double-up).
     This makes ANY new block/pattern dropped in a section "just work".
     ------------------------------------------------------------------- */
  .nvf-section__inner>.wp-block-columns,
  .nvf-section__inner>.wp-block-group,
  .nvf-section__inner>.wp-block-cover,
  .nvf-section__inner>.wp-block-media-text,
  .nvf-section__inner>.wp-block-gallery,
  .nvf-section__inner>.wp-block-quote,
  .nvf-section__inner>.wp-block-pullquote,
  .nvf-section__inner>.wp-block-buttons,
  .nvf-section__inner>.wp-block-table,
  .nvf-section__inner>.wp-block-image,
  .nvf-section__inner>.wp-block-embed,
  .nvf-section__inner>[class*="wp-block-novafolio-"],
  .nvf-section__inner .wp-block-column {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Make all direct children respect the section's inner width on mobile
     (prevents stray overflow from blocks with intrinsic widths). */
  .nvf-section__inner>* {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Keep starter patterns with alignwide content off viewport edges on mobile
     (About — Bio, Newsletter — Sign Up, and similar section layouts).
     alignwide containers fit the section inner exactly — no extra 95vw rule.
     v1.7.5 — added Nova custom blocks ([class*="wp-block-novafolio-"]) to fix
     Artists Grid / Hero / etc. overflowing the section gutter on mobile. */
  .nvf-section__inner>.alignwide,
  .nvf-section__inner>.wp-block-group.alignwide,
  .nvf-section__inner>.wp-block-cover.alignwide,
  .nvf-section__inner>.wp-block-media-text.alignwide,
  .nvf-section__inner>.wp-block-gallery.alignwide,
  .nvf-section__inner>[class*="wp-block-novafolio-"].alignwide {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  /* Specificity bump — see comment in 1024px block above. */
  .wp-block-novafolio-section .nvf-section__inner>.wp-block-columns.alignwide,
  .nvf-section .nvf-section__inner>.wp-block-columns.alignwide {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }
}

/* 540px — small mobile: bump vertical breathing to keep a premium
   gallery rhythm on phones. Horizontal alignment continues to follow
   the parent gutter + `min(95vw, wide-width)` cap inherited from the
   @1024 / @768 rules. */
@media (max-width: 540px) {
  .nvf-section:not(.nvf-pad-none)>.nvf-section__inner {
    padding-top: clamp(36px, 8vw, var(--nvf-section-pad-y, 56px)) !important;
    padding-bottom: clamp(36px, 8vw, var(--nvf-section-pad-y, 56px)) !important;
  }

  /* v1.8.0 — Same floor for top-level Nova blocks with inline
     Gutenberg padding (consistency with the section rule above). */
  :is(.entry-content, .nvf-prose) > [class*="wp-block-novafolio-"][style*="padding-top"],
  :is(.entry-content, .nvf-prose) > [class*="wp-block-novafolio-"][style*="padding-bottom"] {
    padding-top: clamp(36px, 8vw, 56px) !important;
    padding-bottom: clamp(36px, 8vw, 56px) !important;
  }
}

/* -----------------------------------------------
   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)
   - xs/s/m: fixed token values (small, no need to fluid-scale)
   - l/xl: FLUID clamp() so they shrink on mobile without media queries
     (avoids load-order cascade conflicts with columns.css / nvf-responsive.css)
----------------------------------------- */
.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: clamp(20px, 4vw, var(--nvf-space-xl, 48px)) !important;
  margin-block-start: clamp(20px, 4vw, var(--nvf-space-xl, 48px)) !important;
}

.nvf-space-top-xl {
  margin-top: clamp(28px, 5vw, calc(var(--nvf-space-xl, 48px) * 1.25)) !important;
  margin-block-start: clamp(28px, 5vw, calc(var(--nvf-space-xl, 48px) * 1.25)) !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: clamp(20px, 4vw, var(--nvf-space-xl, 48px)) !important;
  margin-block-end: clamp(20px, 4vw, var(--nvf-space-xl, 48px)) !important;
}

.nvf-space-bottom-xl {
  margin-bottom: clamp(28px, 5vw, calc(var(--nvf-space-xl, 48px) * 1.25)) !important;
  margin-block-end: clamp(28px, 5vw, calc(var(--nvf-space-xl, 48px) * 1.25)) !important;
}

/* -----------------------------------------
   Padding utilities (internal)
   - l/xl: FLUID clamp() for consistent mobile breathing room.
----------------------------------------- */

/* 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: clamp(24px, 4.4vw, var(--nvf-space-xl, 48px));
}

.nvf-pad-xl {
  --nvf-section-pad-y: clamp(32px, 5.6vw, calc(var(--nvf-space-xl, 48px) * 1.25));
}

/* 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) {
  :root {
    /* v1.7.4 — Coherent inter-section margins & internal pad floors.
       - space-xl/l: capped to avoid exaggerated gaps on mobile
       - pad-y-xl/l: bumped floor so content always has real breath */
    --nvf-mobile-space-xl: clamp(24px, 5vw, 36px);
    --nvf-mobile-space-l: clamp(18px, 4.2vw, 28px);
    --nvf-mobile-pad-y-xl: clamp(36px, 8vw, 56px);
    --nvf-mobile-pad-y-l: clamp(32px, 6.4vw, 48px);
  }

  /* v1.7.7 — No `.nvf-section:not([nvf-pad-x-*])` clamp here:
     sections inherit the parent gutter, like theme templates do.
     No `width-full.alignfull.nvf-pad-x-none` safety net here either:
     the @768 rule above caps full-bleed sections to `min(95vw, wide-width)`
     which keeps content perfectly aligned with siblings. */

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

  .nvf-space-top-l {
    margin-top: var(--nvf-mobile-space-l) !important;
  }

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

  .nvf-space-bottom-l {
    margin-bottom: var(--nvf-mobile-space-l) !important;
  }

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

  .nvf-pad-l {
    --nvf-section-pad-y: var(--nvf-mobile-pad-y-l);
  }
}

/* -----------------------------------------
   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));
}

/* Final responsive guardrails (must stay last).
   v1.7.7 — Sections inherit horizontal gutter from the parent wrapper
   (`#primary` / `.nvf-prose` / `.entry-content`) on mobile, exactly like
   theme templates (archive-portfolio, single, etc.). The only thing
   needed here is the alignwide cap inside sections + a width cap for
   full-bleed `pad-x-none.pad-xl` sections (legacy exhibition pages). */
@media (max-width: 1024px) {

  .nvf-section__inner>.alignwide,
  .nvf-section__inner>.wp-block-group.alignwide,
  .nvf-section__inner>.wp-block-cover.alignwide,
  .nvf-section__inner>.wp-block-media-text.alignwide {
    width: min(95vw, var(--nvf-layout-wide-width, 1440px)) !important;
    max-width: min(95vw, var(--nvf-layout-wide-width, 1440px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  /* Specificity bump — see comment in earlier 1024px block. */
  .wp-block-novafolio-section .nvf-section__inner>.wp-block-columns.alignwide,
  .nvf-section .nvf-section__inner>.wp-block-columns.alignwide {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  /* Full-width sections with explicit pad-x-none + pad-xl can feel edge-to-edge
     on small screens (notably exhibition-style pages). Keep mobile breathing
     room via the 95vw cap — NOT via inner padding (pad-x-none = real zero). */
  .nvf-section--width-full.alignfull.nvf-pad-x-none.nvf-pad-xl>.nvf-section__inner {
    width: min(95vw, var(--nvf-layout-wide-width, 1440px));
    max-width: min(95vw, var(--nvf-layout-wide-width, 1440px));
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }
}

:root {
  --nvf-mobile-block-pad-y: clamp(24px, 5vw, 48px);
}

/* -------------------------------------------------------------------
   Mobile override for Gutenberg inline spacing.
   Harmonised with Section mobile rhythm.
   ------------------------------------------------------------------- */

@media (max-width: 768px) {

  :is(.entry-content, .nvf-prose)>[class*="wp-block-novafolio-"][style*="padding-top"],
  :is(.entry-content, .nvf-prose)>[class*="wp-block-novafolio-"][style*="padding-bottom"] {
    padding-top: clamp(32px, 6.4vw, 48px) !important;
    padding-bottom: clamp(32px, 6.4vw, 48px) !important;
  }

  :is(.entry-content, .nvf-prose)>[class*="wp-block-novafolio-"][style*="margin-bottom"] {
    margin-bottom: clamp(24px, 5vw, 40px) !important;
  }
}

@media (max-width: 540px) {

  :is(.entry-content, .nvf-prose)>[class*="wp-block-novafolio-"][style*="padding-top"],
  :is(.entry-content, .nvf-prose)>[class*="wp-block-novafolio-"][style*="padding-bottom"] {
    padding-top: clamp(36px, 8vw, 56px) !important;
    padding-bottom: clamp(36px, 8vw, 56px) !important;
  }
}