/**
 * ============================================================================
 * YELP PAGE - Text Circle (Alternative Implementation)
 * ============================================================================
 * 
 * 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 yelp-text-circle.js)
 * - Two SVG variants (circle-img-a and circle-img-b) with breakpoint swap
 * - Responsive padding and scaling
 * - Smooth transition animations
 * - Prevents text overflow with safe padding zones
 * 
 * Usage:
 * - Add "circle-wrap-alt" class to container
 * - Add "circle-text-alt" class to text element
 * - Add "circle-img-a" and "circle-img-b" classes to SVG wrappers
 * 
 * @package     4pmix-WordPress
 * @subpackage  Question-Answer-Block/Assets
 * @version     1.0.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-alt {
  position: relative;
  display: inline-grid;
  place-items: center;
  text-align: center;

  /* JS controls this variable - it's the single source of truth for sizing */
  width: var(--circleSize, 420px);

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

  /* Ring padding prevents text from touching SVG edges */
  --ringPadding: clamp(18px, 2vw, 36px);

  /* Vertical offset controls for each SVG variant */
  --alt-y1: 0px;
  --alt-y2: 0px;

  /* Scale multipliers for each SVG variant */
  --svgScaleA: 1.12;
  --svgScaleB: 1.9;
}


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

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


/* ============================================================================
   SVG DECORATIONS
   ============================================================================
   Two SVG variants that swap based on viewport size. Both positioned
   absolutely to overlay the text, with smooth opacity transitions.
   ============================================================================ */

.circle-wrap-alt .circle-img-a,
.circle-wrap-alt .circle-img-b {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  /* Default: hidden, fades in via breakpoint rules */
  opacity: 0;
  transition: opacity 0.35s ease, transform 220ms ease;
  transform-origin: 50% 50%;
}

.circle-wrap-alt .circle-img-a img,
.circle-wrap-alt .circle-img-b img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}


/* ============================================================================
   SVG VARIANT DISPLAY LOGIC
   ============================================================================ */

/* Desktop (>1200px): Show SVG A with custom scale */
.circle-wrap-alt .circle-img-a {
  opacity: 1;
  transform: translateY(var(--alt-y1)) scale(var(--svgScaleA));
}

.circle-wrap-alt .circle-img-b {
  transform: translateY(var(--alt-y2)) scale(var(--svgScaleB));
}

/* Tablet and below (≤1200px): Switch to SVG B with neutral scale */
@media (max-width: 1200px) {
  .circle-wrap-alt .circle-img-a {
    opacity: 0;
  }

  .circle-wrap-alt .circle-img-b {
    opacity: 1;
    transform: translateY(var(--alt-y1)) scale(1);
  }
}

/* Mobile (≤992px): Increase SVG B scale for better visibility */
@media (max-width: 992px) {
  .circle-wrap-alt .circle-img-b {
    transform: translateY(var(--alt-y1)) scale(1.8);
  }
}

/* Optional: Very small phones - uncomment if needed
@media (max-width: 472px) {
  .circle-wrap-alt .circle-img-b { 
    transform: translateY(var(--alt-y1)) scale(1.2);
  }
}
*/