/**
 * ============================================================================
 * CIRCULAR TEXT WIDGET - Responsive Styling (5 Breakpoints)
 * ============================================================================
 * 
 * Purpose: Displays text within a responsive circular SVG decoration that
 * automatically sizes based on text content. JavaScript handles dynamic
 * sizing while CSS provides the layout structure and visual styling.
 * 
 * Features:
 * - JS-controlled dynamic sizing (see widget-assets.js)
 * - 5 SVG variants with responsive breakpoint swapping
 * - Breakpoints: 1920px, 1680px, 1440px, 992px, 512px
 * - Responsive padding and scaling
 * - Smooth transition animations
 * - Prevents text overflow with safe padding zones
 * 
 * Usage:
 * - Container: "circle-wrap"
 * - Text element: "circle-text"
 * - SVG wrappers: "circle-svg-1920", "circle-svg-1680", "circle-svg-1440", "circle-svg-992", "circle-svg-512"
 * 
 * @package     4pmix-WordPress
 * @subpackage  Circular-Text-Block/Assets
 * @version     2.1.0
 * ============================================================================
 */


/* ============================================================================
   CIRCLE WRAP CONTAINER
   ============================================================================
   Main container with JS-controlled width and CSS-controlled padding/scaling.
   The --circleSize variable is set by JavaScript based on text content size.
   ============================================================================ */

.circle-wrap {
  position: relative;
  display: inline-grid;
  place-items: center;
  text-align: center;

  /* Width can be controlled via Elementor or JS */
  width: var(--circleSize, 420px);

  /* Smooth visual transitions when size changes */
  transition: width 220ms ease;

  /* Ring padding prevents text from touching SVG edges (5 breakpoints) */
  --ringPadding1920: 24px;
  --ringPadding1680: 22px;
  --ringPadding1440: 20px;
  --ringPadding992: 18px;
  --ringPadding512: 16px;
  --ringPadding: var(--ringPadding1920); /* Default to 1920 */

  /* Default offsets for SVG positioning (can be overridden by Elementor) */
  --svgOffsetY1920: 0px;
  --svgOffsetX1920: 0px;
  --svgOffsetY1680: 0px;
  --svgOffsetX1680: 0px;
  --svgOffsetY1440: 0px;
  --svgOffsetX1440: 0px;
  --svgOffsetY992: 0px;
  --svgOffsetX992: 0px;
  --svgOffsetY512: 0px;
  --svgOffsetX512: 0px;

  /* Scale multipliers for each breakpoint (can be overridden by Elementor) */
  --svgScale1920: 1.12;
  --svgScale1680: 1.3;
  --svgScale1440: 1.5;
  --svgScale992: 1.8;
  --svgScale512: 2;
}


/* ============================================================================
   TEXT CONTENT
   ============================================================================ */

.circle-text {
  position: relative;
  z-index: 3;
  max-width: calc(100% - (var(--ringPadding) * 2));
  padding: 0 var(--ringPadding);
  overflow-wrap: anywhere;
  /* Prevent text overflow */
}


/* ============================================================================
   SVG DECORATIONS - BASE STYLES
   ============================================================================ */

.circle-svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  /* Default: hidden and removed from layout */
  display: none;
  opacity: 1; /* User-controllable via Elementor */
  transition: opacity 0.35s ease, transform 220ms ease;
  transform-origin: 50% 50%;
}

.circle-svg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}


/* ============================================================================
   DEFAULT (>1680px) - Show 1920px SVG
   ============================================================================ */

.circle-svg-1920 {
  display: block;
  transform: 
    translateY(var(--svgOffsetY1920)) 
    translateX(var(--svgOffsetX1920)) 
    scale(var(--svgScale1920));
}


/* ============================================================================
   1680px BREAKPOINT (1441px - 1680px)
   ============================================================================ */

@media (max-width: 1680px) {
  .circle-wrap {
    --ringPadding: var(--ringPadding1680);
  }

  /* Hide all SVGs first */
  .circle-svg {
    display: none;
  }

  /* Show only 1680px SVG */
  .circle-svg-1680 {
    display: block;
    transform: 
      translateY(var(--svgOffsetY1680)) 
      translateX(var(--svgOffsetX1680)) 
      scale(var(--svgScale1680));
  }
}


/* ============================================================================
   1440px BREAKPOINT (993px - 1440px)
   ============================================================================ */

@media (max-width: 1440px) {
  .circle-wrap {
    --ringPadding: var(--ringPadding1440);
  }

  /* Hide all SVGs first */
  .circle-svg {
    display: none;
  }

  /* Show only 1440px SVG */
  .circle-svg-1440 {
    display: block;
    transform: 
      translateY(var(--svgOffsetY1440)) 
      translateX(var(--svgOffsetX1440)) 
      scale(var(--svgScale1440));
  }
}


/* ============================================================================
   992px BREAKPOINT (513px - 992px)
   ============================================================================ */

@media (max-width: 992px) {
  .circle-wrap {
    --ringPadding: var(--ringPadding992);
  }

  /* Hide all SVGs first */
  .circle-svg {
    display: none;
  }

  /* Show only 992px SVG */
  .circle-svg-992 {
    display: block;
    transform: 
      translateY(var(--svgOffsetY992)) 
      translateX(var(--svgOffsetX992)) 
      scale(var(--svgScale992));
  }
}


/* ============================================================================
   512px BREAKPOINT (≤512px)
   ============================================================================ */

@media (max-width: 512px) {
  .circle-wrap {
    --ringPadding: var(--ringPadding512);
  }

  /* Hide all SVGs first */
  .circle-svg {
    display: none;
  }

  /* Show only 512px SVG */
  .circle-svg-512 {
    display: block;
    transform: 
      translateY(var(--svgOffsetY512)) 
      translateX(var(--svgOffsetX512)) 
      scale(var(--svgScale512));
  }
}