/* ============================
   Nova Services (front + editor)
   Consolidated + tokens-first
============================ */

.nvf-services{
  width: 100%;
  max-width: var(--nvf-layout-max-width, 1440px);
  margin-inline: auto;

  /* Tokens-driven defaults */
  --nvf-services-gap: var(--nvf-space-m, 22px);
  --nvf-services-card-pad: var(--nvf-space-m, 22px);
  --nvf-services-radius: var(--nvf-radius-l, 16px);
  --nvf-services-border: 1px solid var(--nvf-color-border, rgba(15,17,21,.10));
  --nvf-services-surface: var(--nvf-color-surface, #fff);
  --nvf-services-ink: var(--nvf-services-text, var(--nvf-color-ink, #0f1115));

  /* Subtle premium shadow */
  --nvf-services-shadow: 0 12px 30px rgba(15,17,21,.10);
  --nvf-services-shadow-hover: 0 18px 44px rgba(15,17,21,.12);
}

/* Grid */
.nvf-services__grid{
  display: grid;
  gap: var(--nvf-services-gap);
}

/* Gap scale (tokens only) */
.nvf-services--gap-xs{ --nvf-services-gap: var(--nvf-space-xs, 8px); }
.nvf-services--gap-s { --nvf-services-gap: var(--nvf-space-s, 14px); }
.nvf-services--gap-m { --nvf-services-gap: var(--nvf-space-m, 22px); }
.nvf-services--gap-l { --nvf-services-gap: var(--nvf-space-l, 34px); }
.nvf-services--gap-xl{ --nvf-services-gap: var(--nvf-space-xl, 48px); }

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

/* Item base */
.nvf-services__item{
  min-width: 0;
}

/* Align */
.nvf-services--align-left { text-align: left; }
.nvf-services--align-center { text-align: center; }

/* Espacement vertical (top / bottom) — scoped to .nvf-services
   Padding-based (internal spacing for bg blocks).
   margin-top/bottom: 0 neutralises the global margin-based .nvf-space-*
   rules from section.css / columns.css when both files load on the same page. */
.nvf-services.nvf-space-top-none  { padding-top: 0; margin-top: 0; }
.nvf-services.nvf-space-top-xs    { padding-top: var(--nvf-space-xs, 8px); margin-top: 0; }
.nvf-services.nvf-space-top-s     { padding-top: var(--nvf-space-s, 14px); margin-top: 0; }
.nvf-services.nvf-space-top-m     { padding-top: var(--nvf-space-m, 22px); margin-top: 0; }
.nvf-services.nvf-space-top-l     { padding-top: var(--nvf-space-xl, 48px); margin-top: 0; }
.nvf-services.nvf-space-top-xl    { padding-top: calc(var(--nvf-space-xl, 48px) * 1.5); margin-top: 0; }

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

/* ============================
   Variant: CARD (premium)
   - Portrait feel: media full-bleed on top
   - Content padded below
============================ */
.nvf-services--variant-card .nvf-services__item{
  background-color: var(--nvf-services-surface);
  border: var(--nvf-services-border);
  border-radius: var(--nvf-services-radius);
  overflow: hidden;

  display: flex;
  flex-direction: column;

  /* no global padding: we pad content blocks instead
     so media can be full-bleed */
  padding: 0;

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 10px 28px rgba(15,17,21,.08);
}

.nvf-services--variant-card .nvf-services__item:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--nvf-services-ink, #0f1115), transparent 86%);
  box-shadow: var(--nvf-services-shadow-hover);
}
.nvf-services__link:hover,
.nvf-services__link:focus,
.nvf-services__link:active{
  color: var(--nvf-color-on-accent, #fff);
}

/* Card clickable: the entire item is an <a> */
.nvf-services--link-card .nvf-services__item{
  text-decoration: none;
  color: inherit;
}

/* Center alignment inside card */
.nvf-services--variant-card.nvf-services--align-center .nvf-services__item{
  text-align: center;
  align-items: stretch; /* keep media full width */
}

/* ============================
   Media
============================ */
.nvf-services__media{
  margin: 0 0 var(--nvf-space-s, 14px);
}

/* ICON */
.nvf-services__media--icon{
  padding: var(--nvf-services-card-pad);
  padding-bottom: 0;
}

.nvf-services__media--icon .nvf-services__icon{
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(15,23,42,.06);
  /* color hérite selon iconStyle — voir règles --icon-* ci-dessous */
  color: var(--nvf-color-accent, #6b7cff);
  flex-shrink: 0;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.nvf-services__media--icon .nvf-services__icon svg{
  display: block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* IMAGE: full-bleed at the top of the card */
.nvf-services--media-image .nvf-services__media--image{
  margin: 0; /* no gap above, no side padding */
  width: 100%;
  overflow: hidden;
  border-radius: 0; /* card radius handles outer corners */
  background: transparent; /* avoid “visible background behind image” */
}

/* Default ratio = portrait */
.nvf-services--media-image .nvf-services__media--image{ aspect-ratio: 3 / 4; }
.nvf-services--ratio-landscape .nvf-services__media--image{ aspect-ratio: 4 / 3; }
.nvf-services--ratio-square .nvf-services__media--image{ aspect-ratio: 1 / 1; }
.nvf-services--ratio-auto .nvf-services__media--image{ aspect-ratio: auto; }

/* Image fill */
.nvf-services--media-image .nvf-services__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 20%;
}

/* Contain : image entière visible, sans recadrage
   — On NE surcharge PAS aspect-ratio : chaque carte garde la même hauteur
     d'image (cohérence de la grille) et les titres s'alignent à la même hauteur.
   — Pour le variant card : on ajoute du padding dans le wrapper pour que
     l'image "flotte" à l'intérieur de la carte, sans toucher les bords. */

/* Variant card + contain : padding interne → image non full-bleed */
.nvf-services--fit-contain.nvf-services--variant-card .nvf-services__media--image{
  padding: var(--nvf-services-card-pad);
  box-sizing: border-box;
  /* La couleur de fond de la carte (--nvf-services-surface) reste visible
     autour de l'image grâce au padding */
}

/* Image en contain pour tous les variants */
.nvf-services--fit-contain .nvf-services__img{
  object-fit: contain;
  object-position: center center;
}

/* Désactiver le zoom sur hover pour les images en contain
   (le zoom ne fait sens que sur les images recadrées en cover) */
.nvf-services--fit-contain.nvf-services--variant-card .nvf-services__item:hover .nvf-services__img{
  transform: none;
}

/* If ratio auto: let the image define height */
.nvf-services--ratio-auto .nvf-services__img{
  height: auto;
  object-fit: cover;
}

/* ============================
   Content (padded area)
============================ */
.nvf-services--variant-card .nvf-services__title,
.nvf-services--variant-card .nvf-services__text,
.nvf-services--variant-card .nvf-services__cta{
  padding-left: var(--nvf-services-card-pad);
  padding-right: var(--nvf-services-card-pad);
}

/* First content block spacing */
.nvf-services.nvf-services--variant-card .nvf-services__title{
  margin: 0 0 var(--nvf-space-xs, 8px);
  padding-top: var(--nvf-space-s, 14px);
  font-family: var(--nvf-headings-font-family, inherit);
  font-size: var(--nvf-services-title-size, 1rem);
  font-weight: var(--nvf-services-title-weight, 600);
  letter-spacing: var(--nvf-services-title-ls, normal);
  text-transform: var(--nvf-services-title-transform, none);
  line-height: 1.25;
}

.nvf-services--variant-card .nvf-services__text{
  margin: 0;
  padding-bottom: var(--nvf-space-s, 14px);
  font-size: var(--nvf-services-text-size, .875rem); /* 14px sur une base 16px */
  letter-spacing: var(--nvf-services-text-ls, normal);
  line-height: 1.6;
  opacity: .88;

  /* push CTA to bottom to keep cards consistent */
  margin-bottom: auto;
}

/* Resist theme typography overrides on <p> inside text */
.nvf-services.nvf-services .nvf-services__text p{
  font-size: var(--nvf-services-text-size, .875rem) !important;
  font-family: inherit !important;
  line-height: 1.6 !important;
}

/* CTA container */
.nvf-services__cta{
  padding-bottom: var(--nvf-services-card-pad);
  margin-top: 0;
}

/* ============================
   CTA button (single source of truth)
============================ */
.nvf-services__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nvf-space-xs, 8px);
  padding: 0.62em 1.05em;
  border-radius: var(--nvf-radius-pill, 999px);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;

  color: var(--nvf-color-on-accent, #fff);
  background-color: var(--nvf-color-accent, #6b7cff);
  border: 1px solid color-mix(in srgb, var(--nvf-color-accent, #6b7cff), #000 10%);

  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.nvf-services__link:hover{
  filter: brightness(0.98);
  transform: translateY(-1px);
}

.nvf-services__link:focus-visible,
.nvf-services--link-card .nvf-services__item:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--nvf-color-accent, #6b7cff), #fff 55%);
  outline-offset: 3px;
}

/* ============================
   Variant: MINIMAL
============================ */
.nvf-services--variant-minimal .nvf-services__item{
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.nvf-services--variant-minimal .nvf-services__media{
  margin-bottom: var(--nvf-space-s, 14px);
}

.nvf-services.nvf-services--variant-minimal .nvf-services__title{
  font-family: var(--nvf-headings-font-family, inherit);
  font-size: var(--nvf-services-title-size, 1rem);
  font-weight: var(--nvf-services-title-weight, 600);
  letter-spacing: var(--nvf-services-title-ls, normal);
  text-transform: var(--nvf-services-title-transform, none);
  line-height: 1.25;
  margin: 0 0 var(--nvf-space-xs, 8px);
}

.nvf-services--variant-minimal .nvf-services__text{
  font-size: var(--nvf-services-text-size, .875rem);
  letter-spacing: var(--nvf-services-text-ls, normal);
  line-height: 1.6;
  opacity: .86;
  margin: 0;
}

/* ============================
   Editor helpers
============================ */
.nvf-services--is-editor{
  outline: 1px dashed rgba(0,0,0,.10);
  outline-offset: 6px;
  border-radius: var(--nvf-radius-md, 12px);
  padding: 8px;
}

/* Skeleton placeholder for images in editor preview */
.nvf-services__media-skel{
  width: 100%;
  height: 100%;
  min-height: 120px;
  background: linear-gradient(90deg, rgba(0,0,0,.06) 25%, rgba(0,0,0,.10) 50%, rgba(0,0,0,.06) 75%);
  background-size: 200% 100%;
  animation: nvf-skel-shimmer 1.4s ease infinite;
}
@keyframes nvf-skel-shimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

/* ============================
   Icon styles — premium variants
============================ */

/* accent (default): fond subtil, icon couleur accent */
.nvf-services--icon-accent .nvf-services__icon{
  background: var(--nvf-services-icon-bg, color-mix(in srgb, var(--nvf-color-accent,#6b7cff), transparent 88%));
  color: var(--nvf-color-accent, #6b7cff);
}

/* light: fond blanc/surface, icon foncé */
.nvf-services--icon-light .nvf-services__icon{
  background: var(--nvf-color-surface, #fff);
  color: var(--nvf-color-ink, #0f1115);
  box-shadow: 0 2px 8px rgba(15,17,21,.10);
}

/* outlined: fond transparent, bordure couleur accent */
.nvf-services--icon-outlined .nvf-services__icon{
  background: transparent;
  color: var(--nvf-color-accent, #6b7cff);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--nvf-color-accent,#6b7cff), transparent 40%);
}

/* plain: juste l'icône, pas de fond */
.nvf-services--icon-plain .nvf-services__icon{
  background: transparent;
  color: var(--nvf-color-accent, #6b7cff);
}

/* Icon hover enlarge */
.nvf-services__item:hover .nvf-services__icon{
  transform: scale(1.10);
}

/* ============================
   Hover effects
============================ */

/* lift (default) — already handled by card rule */

/* glow: card glows on hover */
.nvf-services--hover-glow.nvf-services--variant-card .nvf-services__item:hover{
  transform: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--nvf-color-accent,#6b7cff), transparent 55%),
              0 16px 40px rgba(15,17,21,.12);
  border-color: color-mix(in srgb, var(--nvf-color-accent,#6b7cff), transparent 60%);
}

/* none: disable all hover transitions */
.nvf-services--hover-none.nvf-services--variant-card .nvf-services__item{
  transition: none;
}
.nvf-services--hover-none.nvf-services--variant-card .nvf-services__item:hover{
  transform: none;
  box-shadow: 0 10px 28px rgba(15,17,21,.08);
  border-color: var(--nvf-services-border);
}
.nvf-services--hover-none .nvf-services__item:hover .nvf-services__icon{
  transform: none;
}

/* ============================
   Stagger entrance animation
============================ */
[data-nvf-animate="services"] .nvf-services__item{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .45s ease, transform .45s ease;
}
[data-nvf-animate="services"] .nvf-services__item.nvf-services--item-visible{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  [data-nvf-animate="services"] .nvf-services__item{
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ============================
   Motion preferences
============================ */
@media (prefers-reduced-motion: reduce){
  .nvf-services--variant-card .nvf-services__item,
  .nvf-services__link{
    transition: none;
  }
  .nvf-services--variant-card .nvf-services__item:hover,
  .nvf-services__link:hover{
    transform: none;
  }
}
/* ============================
   Media subtle zoom on card hover
============================ */

/* Base state */
.nvf-services--variant-card .nvf-services__img{
  transition: transform .35s ease;
  will-change: transform;
}

/* Hover on card */
.nvf-services--variant-card .nvf-services__item:hover .nvf-services__img{
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce){
  .nvf-services--variant-card .nvf-services__img{
    transition: none;
    transform: none !important;
  }
}

/* ============================
   Responsive
============================ */
@media (max-width: 1024px) {
  .nvf-services--cols-4 .nvf-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .nvf-services--cols-3 .nvf-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  /* Réduire le padding interne des cartes sur mobile
     (ne touche pas au gap ni au layout full-bleed de l'image) */
  .nvf-services {
    --nvf-services-card-pad: var(--nvf-space-s, 14px);
  }

  /* Réduire le gap uniquement pour les tailles m/l/xl
     Les valeurs xs et s restent intactes (choix explicite de l'utilisateur) */
  .nvf-services--gap-m,
  .nvf-services--gap-l,
  .nvf-services--gap-xl {
    --nvf-services-gap: var(--nvf-space-s, 14px);
  }
}

@media (max-width: 540px) {
  .nvf-services__grid { grid-template-columns: 1fr !important; }
}

/* La respiration horizontale est gérée par le conteneur de page (layout).
   Ajouter du padding ici compresserait visuellement le bloc dans les mises
   en page Gutenberg wide/full-width. */