/*
IDP Cloud Hero – Design Kit
KPI cards + hover motion + scroll-in animations
*/

:root{
  --idp-card-radius: 18px;
  --idp-card-padding: 18px;
  /* default shadow (Medium). Can be overridden per KPI section via idp-shadow-* classes */
  --idp-card-shadow: 0 8px 18px rgba(0,0,0,.12);
  --idp-card-shadow-hover: 0 10px 24px rgba(0,0,0,.14);
  --idp-card-border: 1px solid rgba(255,255,255,.55);
  --idp-card-bg: rgba(255,255,255,.92);
  --idp-card-text: #1B2845;
  /* default hover shift (kept intentionally small to prevent hover jitter) */
  --idp-shift: 5px;
  --idp-lift: 1px;
}

/*
  Global Gutenberg image rounding
  User request: "images that are just an image" => core Image block.
  Scoped to .idp-round-images-15 (body + cloud wrapper) so it can be turned off.
*/
.idp-round-images-15 .wp-block-image img,
.idp-round-images-15 .wp-block-gallery img,
.idp-round-images-15 .wp-block-media-text__media img{
  border-radius: 15px;
}

/* Preserve WP's Rounded style when selected */
.idp-round-images-15 .wp-block-image.is-style-rounded img,
.idp-round-images-15 figure.wp-block-image.is-style-rounded img{
  border-radius: 9999px !important;
}

/* Opt-out: add class "idp-no-round" to an Image block wrapper */
.idp-round-images-15 .wp-block-image.idp-no-round img,
.idp-round-images-15 figure.wp-block-image.idp-no-round img{
  border-radius: 0 !important;
}

/* KPI section spacing */
.idp-kpi-section{ margin: 28px 0; }

/* Shadow levels (set on KPI SECTION wrapper) */
.idp-kpi-section.idp-shadow-none{ --idp-card-shadow: none; --idp-card-shadow-hover: none; }
.idp-kpi-section.idp-shadow-low{ --idp-card-shadow: 0 4px 10px rgba(0,0,0,.10); --idp-card-shadow-hover: 0 6px 14px rgba(0,0,0,.12); }
.idp-kpi-section.idp-shadow-md{ --idp-card-shadow: 0 8px 18px rgba(0,0,0,.12); --idp-card-shadow-hover: 0 10px 24px rgba(0,0,0,.14); }
.idp-kpi-section.idp-shadow-high{ --idp-card-shadow: 0 12px 28px rgba(0,0,0,.16); --idp-card-shadow-hover: 0 14px 34px rgba(0,0,0,.18); }

.idp-kpi-section > .wp-block-heading{ margin-bottom: 14px; }

/* KPI Card base */
.idp-kpi-card{
  position: relative;
  background: var(--idp-card-bg);
  color: var(--idp-card-text);
  border: var(--idp-card-border);
  border-radius: var(--idp-card-radius);
  padding: var(--idp-card-padding);
  box-shadow: var(--idp-card-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  transition: transform 200ms cubic-bezier(.2,.9,.2,1), box-shadow 200ms cubic-bezier(.2,.9,.2,1);
  will-change: transform;
  overflow: hidden;
}

/* Safari hover jitter/flicker fixes */
.idp-is-safari .idp-kpi-card{
  /* backdrop-filter + transforms can flicker in Safari; keep it simple */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  /* avoid animating box-shadow in Safari (repaint jitter) */
  transition: transform 200ms cubic-bezier(.2,.9,.2,1);
  contain: paint;
}
/* Keep hover motion subtle and stable in Safari (no sideways shift that can toggle hover) */
.idp-is-safari .idp-kpi-section.idp-motion-right .idp-kpi-card:hover,
.idp-is-safari .idp-kpi-section.idp-motion-left .idp-kpi-card:hover{
  transform: translate3d(0, calc(var(--idp-lift) * -1), 0);
}
.idp-is-safari .idp-kpi-card:hover{ box-shadow: var(--idp-card-shadow-hover); }


/* Ensure inner text follows the computed/selected text color */
.idp-kpi-card :where(h1,h2,h3,h4,h5,h6,p,li,span,a){
  color: inherit;
}

/* tighten heading/paragraph */
.idp-kpi-card .wp-block-heading{ margin: 0 0 8px 0; }
.idp-kpi-card p{ margin: 0; opacity: .92; }

/*
  Image rounding inside KPI cards
  Virtue (and some optimization plugins) can prevent wp-block-library styles from applying.
  This ensures the Image block "Rounded" style works inside KPI cards, and provides a sane default.
*/
.idp-kpi-card figure.wp-block-image{ overflow: hidden; }
.idp-kpi-card figure.wp-block-image img{
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 14px !important;
}
.idp-kpi-card figure.wp-block-image.is-style-rounded img,
.idp-kpi-card .wp-block-image.is-style-rounded img{ border-radius: 9999px !important; }

/*
  Background modes
  - Legacy: can be set on KPI SECTION wrapper (idp-bg-*)
  - Preferred: set per-card via idp-card-bg-* + CSS vars
*/

/* Legacy section-level background modes (still supported) */
.idp-kpi-section.idp-bg-gradient .idp-kpi-card,
.idp-kpi-section.idp-bg-rainbow .idp-kpi-card{
  background: var(--idp-kpi-bg-gradient, var(--idp-card-bg));
}

.idp-kpi-section.idp-bg-anim .idp-kpi-card{
  background-size: 400% 400%;
  animation: idpGradientFlow 12s ease infinite;
}

.idp-kpi-section.idp-bg-image .idp-kpi-card{
  background-image: linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.82)), var(--idp-kpi-bg-image);
  background-size: cover;
  background-position: center;
}

/* Per-card background modes */
.idp-kpi-card.idp-card-bg-solid{ background: var(--idp-card-bg) !important; }

.idp-kpi-card.idp-card-bg-gradient{
  background: linear-gradient(135deg, var(--idp-card-bg1, #87CEEB), var(--idp-card-bg2, #A78BFA)) !important;
}

.idp-kpi-card.idp-card-bg-image{
  background-image: linear-gradient(rgba(255,255,255,.78), rgba(255,255,255,.78)), var(--idp-card-bg-image) !important;
  background-size: cover !important;
  background-position: center !important;
}

.idp-kpi-card.idp-card-bg-rainbow{
  background: linear-gradient(120deg,
    rgba(255,0,128,.55),
    rgba(255,140,0,.55),
    rgba(255,255,0,.45),
    rgba(0,255,128,.45),
    rgba(0,128,255,.45),
    rgba(128,0,255,.45)
  ) !important;
}

.idp-kpi-card.idp-card-bg-anim{
  background-size: 400% 400% !important;
  animation: idpGradientFlow 12s ease infinite !important;
}

@keyframes idpGradientFlow{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* intensity */
.idp-intensity-sm{ --idp-shift: 3px; --idp-lift: 1px; }
.idp-intensity-md{ --idp-shift: 5px; --idp-lift: 1px; }
.idp-intensity-lg{ --idp-shift: 8px; --idp-lift: 2px; }

/* Hover shadow baseline */
.idp-kpi-card:hover{ box-shadow: var(--idp-card-shadow-hover); }

/* Hover effects off (no motion, no hover shadow change) */
.idp-kpi-section.idp-hover-off .idp-kpi-card{ transition: none !important; }
.idp-kpi-section.idp-hover-off .idp-kpi-card:hover{ transform: none !important; box-shadow: var(--idp-card-shadow) !important; }


/* Global hover effects off (sitewide) */
.idp-kpi-hover-global-off .idp-kpi-card{
  transition: none !important;
}
.idp-kpi-hover-global-off .idp-kpi-card:hover{
  transform: none !important;
  box-shadow: var(--idp-card-shadow) !important;
}

/*
  IMPORTANT:
  Motion is controlled only by the SECTION wrapper (idp-motion-*).
  This prevents legacy card classes from causing unexpected movement.
*/
.idp-kpi-section.idp-intensity-sm{ --idp-shift: 3px; --idp-lift: 1px; }
.idp-kpi-section.idp-intensity-md{ --idp-shift: 5px; --idp-lift: 1px; }
.idp-kpi-section.idp-intensity-lg{ --idp-shift: 8px; --idp-lift: 2px; }

.idp-kpi-section.idp-motion-right .idp-kpi-card:hover{ transform: translate3d(var(--idp-shift), calc(var(--idp-lift) * -1), 0); }
.idp-kpi-section.idp-motion-left .idp-kpi-card:hover{ transform: translate3d(calc(var(--idp-shift) * -1), calc(var(--idp-lift) * -1), 0); }
.idp-kpi-section.idp-motion-up .idp-kpi-card:hover{ transform: translate3d(0, calc(var(--idp-shift) * -1), 0); }
.idp-kpi-section.idp-motion-pop .idp-kpi-card:hover{ transform: translate3d(0, calc(var(--idp-lift) * -1), 0) scale(1.015); }

/* KPI row spacing */
.wp-block-columns.idp-kpi-row{
  --wp--style--block-gap: 20px;
  gap: 20px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.wp-block-columns.idp-kpi-row > .wp-block-column{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Scroll-in animations */
.idp-animate-floatin{
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 650ms cubic-bezier(.2,.9,.2,1), transform 650ms cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform;
}

.idp-animate-floatin.idp-inview{
  opacity: 1;
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Button hover utility */
.idp-hover-grow a,
.wp-block-button__link.idp-hover-grow{
  /*
    IMPORTANT:
    Scaling text on hover can cause blurry/faded glyph rendering on some browsers
    (Chrome/Safari subpixel AA + compositor changes). Use a lift-only hover by default.
  */
  transition: transform 180ms cubic-bezier(.2,.9,.2,1), box-shadow 180ms cubic-bezier(.2,.9,.2,1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  transform: translateZ(0);
}

.idp-hover-grow a:hover,
.wp-block-button__link.idp-hover-grow:hover{
  /* lift only (no scale) to avoid blurry hover text */
  transform: translate3d(0,-2px,0);
  filter: none !important;
  opacity: 1 !important;
}

/* Optional: if you *want* a pop/scale effect, use this class instead. */
.idp-hover-pop a,
.wp-block-button__link.idp-hover-pop{
  transition: transform 180ms cubic-bezier(.2,.9,.2,1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  transform: translateZ(0);
}

.idp-hover-pop a:hover,
.wp-block-button__link.idp-hover-pop:hover{
  transform: translate3d(0,-2px,0) scale(1.03);
}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce){
  .idp-kpi-card,
  .idp-animate-floatin,
  .idp-hover-grow a,
  .wp-block-button__link.idp-hover-grow{
    transition: none !important;
    transform: none !important;
  }
  .idp-animate-floatin{ opacity: 1 !important; }
}


/* WooCommerce card styling (optional via body class) */
.idp-woo-cards-on .woocommerce ul.products li.product a img,
.idp-woo-cards-on .woocommerce-page ul.products li.product a img,
.idp-woo-cards-on .wc-block-grid__product-image img,
.idp-woo-cards-on .wc-block-components-product-image img{
  border-radius: var(--idp-card-radius) !important;
  overflow: hidden;
}

.idp-woo-cards-on .woocommerce ul.products li.product,
.idp-woo-cards-on .wc-block-grid__product{
  border-radius: var(--idp-card-radius);
}

/* Make product titles sit vertically centered within a consistent title area */
.idp-woo-cards-on .woocommerce ul.products li.product .woocommerce-loop-product__title,
.idp-woo-cards-on .wc-block-grid__product-title{
  min-height: 2.8em;
  display: flex;
  align-items: center;
}

/* Featured Product block and similar layouts: vertically center text next to image */
.idp-woo-cards-on .wp-block-woocommerce-featured-product,
.idp-woo-cards-on .wc-block-featured-product{
  align-items: center;
}



/* Utility: vertically center contents (add class "idp-vcenter" to a Columns block or Group) */
.idp-vcenter{ align-items: center; }
.idp-vcenter.wp-block-columns{ align-items: center; }
.idp-vcenter .wp-block-column{ display:flex; flex-direction:column; justify-content:center; }