/* NovaFolio – Shared base styles for Nova blocks */

/* ── Site-width constraint for all Nova content blocks ─────
   Every Nova block (except Hero, Section, Columns which have
   their own width system) inherits the site max-width from
   the Customizer token --nvf-layout-max-width.

   Without this, blocks placed top-level or inside a full-width
   Section stretch infinitely — the theme's entry-content rule
   excludes wp-block-novafolio-* from its max-width constraint.

   :where() keeps specificity at 0 so block-specific rules always win.
   ──────────────────────────────────────────────────────────── */
:where(
  .wp-block-novafolio-blog-posts,
  .wp-block-novafolio-faq,
  .wp-block-novafolio-services,
  .wp-block-novafolio-cta,
  .wp-block-novafolio-gallery-g2,
  .wp-block-novafolio-contact,
  .wp-block-novafolio-images-slider,
  .wp-block-novafolio-portfolio-grid,
  .wp-block-novafolio-testimonials,
  .wp-block-novafolio-counter,
  .wp-block-novafolio-logo-bar
) {
  max-width: var(--nvf-layout-max-width, 1440px);
  margin-inline: auto;
  box-sizing: border-box;
}

/* alignfull: allow true full-bleed */
:where(
  .wp-block-novafolio-blog-posts,
  .wp-block-novafolio-faq,
  .wp-block-novafolio-services,
  .wp-block-novafolio-cta,
  .wp-block-novafolio-gallery-g2,
  .wp-block-novafolio-contact,
  .wp-block-novafolio-images-slider,
  .wp-block-novafolio-portfolio-grid,
  .wp-block-novafolio-testimonials,
  .wp-block-novafolio-counter,
  .wp-block-novafolio-logo-bar
).alignfull {
  max-width: none;
  margin-inline: 0;
}

/* alignwide: use the wide-width Customizer token */
:where(
  .wp-block-novafolio-blog-posts,
  .wp-block-novafolio-faq,
  .wp-block-novafolio-services,
  .wp-block-novafolio-cta,
  .wp-block-novafolio-gallery-g2,
  .wp-block-novafolio-contact,
  .wp-block-novafolio-images-slider,
  .wp-block-novafolio-portfolio-grid,
  .wp-block-novafolio-testimonials,
  .wp-block-novafolio-counter,
  .wp-block-novafolio-logo-bar
).alignwide {
  max-width: var(--nvf-layout-wide-width, 1440px);
  margin-inline: auto;
}

/* Inside a Nova Section, blocks keep a sensible max-width so that
   a full-bleed Section (width:full + alignfull, inner unconstrained)
   doesn’t cause content to stretch to 100 vw.
   Blocks with .alignfull (CTA, Hero) override this to go edge-to-edge
   via the .alignfull rule above (higher specificity). */
:where(.nvf-section__inner) > :where(
  .wp-block-novafolio-blog-posts,
  .wp-block-novafolio-faq,
  .wp-block-novafolio-services,
  .wp-block-novafolio-cta,
  .wp-block-novafolio-gallery-g2,
  .wp-block-novafolio-contact,
  .wp-block-novafolio-images-slider,
  .wp-block-novafolio-portfolio-grid,
  .wp-block-novafolio-testimonials,
  .wp-block-novafolio-counter,
  .wp-block-novafolio-logo-bar
) {
  max-width: var(--nvf-layout-wide-width, 1440px);
  margin-inline: auto;
}

/* ── Portfolio Grid block (system aligned) ─────────────────── */

.nvf-portfolio-grid-block {
  display: grid;
  grid-template-columns: repeat(var(--nvf-grid-cols, 3), minmax(0, 1fr));

  /* Gap responsive basé sur l’échelle NovaFolio */
  gap: clamp(var(--nvf-space-s, 14px), 2vw, var(--nvf-space-l, 34px));

  /* Rythme vertical cohérent avec Sections */
  margin-block:
    var(--nvf-space-xl, 48px)
    calc(var(--nvf-space-xl, 48px) + var(--nvf-space-s, 14px));
}

.nvf-p-item {
  list-style: none;
}

.nvf-p-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition:
    transform var(--nvf-transition, 180ms ease),
    box-shadow var(--nvf-transition, 180ms ease);
}

.nvf-p-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--nvf-shadow-s, 0 8px 18px rgba(0, 0, 0, 0.08));
}

/* Thumb */

.nvf-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--nvf-radius-l, 16px);
  overflow: hidden;
  background: var(--nvf-color-soft, #f3f4f6);
}

.nvf-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.nvf-p-card:hover .nvf-thumb-img {
  transform: scale(1.06);
}

.nvf-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--nvf-color-gray, #9ca3af);
}

/* Text area */

.nvf-info {
  margin-top: var(--nvf-space-s, 14px);
}

.nvf-title {
  font-size: var(--nvf-pg-title-fs, 1.05rem);
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--nvf-color-ink, #111827);
}

.nvf-sub {
  margin: 0;
  font-size: var(--nvf-pg-sub-fs, 0.85rem);
  color: var(--nvf-color-slate, #6b7280);
}

.nvf-excerpt {
  margin: 6px 0 0;
  font-size: var(--nvf-pg-excerpt-fs, 0.9rem);
  color: var(--nvf-color-slate-dark, #4b5563);
}

/* Editor placeholder */

.nvf-grid-placeholder {
  border-radius: var(--nvf-radius-s, 10px);
  border: 1px dashed var(--nvf-color-border, #e5e7eb);

  padding: var(--nvf-space-s, 14px);
  font-size: 0.9rem;

  color: var(--nvf-color-slate-dark, #4b5563);
  background: var(--nvf-color-surface, #f9fafb);
}