/* =========================
   LAYOUT
========================= */
.rotating-image-wrapper{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:24px;
}

.image-container{
  position:relative;
  flex-shrink:0;
  display:inline-block;
}

.problem-text-wrapper{
  display:flex;
  flex-direction:column;
  justify-content:center;
  flex:1;
  z-index:5;
  overflow:visible;
}

.problem-row{
  display:flex;
  align-items:center;
  gap:30px; /* fixed space between title + detail */
}

/* =========================
   IMAGE
========================= */
#rotatableImage{
  transform-origin:center center;
  max-width:100%;
  height:auto;
  display:block;
  backface-visibility:hidden;
  transform-style:preserve-3d;
  will-change:transform;
}

/* =========================
   BUTTONS
========================= */
.rotate-btn{
  position:absolute;
  top:8px;
  background-color:;
  border:none;
  font-size:20px;
  cursor:pointer;
  padding:6px 10px;
  color:;
  border-radius:4px;
  box-shadow:0 2px 4px rgba(0,0,0,0.2);
  z-index:4;
}

.rotate-btn{
  position:absolute;

  bottom:12px;       /* move to bottom */
  top:auto;          /* remove top positioning */
  transform:none;    /* remove vertical centering */

  background-color:;
  border:none;

  font-size:32px;
  font-weight:700;
  line-height:1;

  width:44px;
  height:44px;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  color:;

  border-radius:50%;
  box-shadow:0 4px 10px rgba(0,0,0,0.25);

  z-index:4;
}

.rotate-btn.top-left{ left:12px; }
.rotate-btn.top-right{ right:12px; }

.image-container img{
  transition:box-shadow 0.3s ease-in-out;
}
.image-container.swipe-glow img{
  box-shadow:0 0 12px ;
}

/* =========================
   DEBUG
========================= */
.rotation-debug{
  position:absolute;
  bottom:8px;
  right:8px;
  background:rgba(0,0,0,0.6);
  color:#fff;
  font-size:14px;
  padding:4px 8px;
  border-radius:4px;
  pointer-events:none;
  font-family:monospace;
  z-index:5;
}
.rotation-debug.hidden{ display:none; }

/* =========================
   OVERLAYS
========================= */
.overlay-image-wrapper{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:3;
}
.overlay-image{
  display:block;
  height:auto;
}

.triangle-overlay{
  position:absolute;
  right:0;
  top:50%;
  transform:translate(2px,-50%);
  background:#6EA4BF;
  z-index:3;
  pointer-events:none;
}

/* =========================
   TITLE + LABEL + TRIANGLE
========================= */

/* Outer fixed title box */
.problem-title{
  position:relative;

  width:300px;
  height:100px;

  flex:0 0 300px;

  background:#faf9f5;

  border-top:1px solid #faf9f5;
  border-bottom:1px solid #faf9f5;

  box-sizing:border-box;
  overflow:visible;

  /* Move box 5px left so it touches triangle */
  transform:translateX(-5px);
}

/* Label above title */
.problem-title .problem-label{
  position:absolute;
  top:-28px;
  left:0;
  width:100%;
  text-align:center;

  font-size:18px;
  color:#FAF9F5;
}

/* Inner text container */
/* Ensure injected HTML doesn't add margins that break vertical centering */
.problem-title-inner,
.problem-title-inner *{
  margin: 0;
}

/* If HubSpot injects <p> / <h*> etc, make them behave nicely */
.problem-title-inner p,
.problem-title-inner h1,
.problem-title-inner h2,
.problem-title-inner h3,
.problem-title-inner h4,
.problem-title-inner h5,
.problem-title-inner h6{
  margin: 0;
}

/* Keep true center for wrapped text */
.problem-title-inner{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Triangle: left -55px, width 50px */
.problem-title::before{
  content:"";
  position:absolute;
  left:-50px;
  top:0;

  width:0;
  height:0;

  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
  border-right:50px solid #faf9f5;
}

/* =========================
   DETAIL
========================= */
.problem-detail{
  border-left:2px solid #faf9f5;
  padding-left:16px;
}

/* =========================
   MOBILE
========================= */
@media (max-width:768px){

  /* overall stack */
  .rotating-image-wrapper{
    flex-direction:column;
    gap:12px;
    align-items:center;
  }

  #rotatableImage{
    max-width:90vw;
    height:auto;
  }

  /* keep the text block centered under the image */
  .problem-text-wrapper{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:-12px; /* 50px under the image */
  }

  /* mobile: title + detail stack (if you still want detail under it)
     If you want detail next to it on mobile, tell me. */
  .problem-row{
    flex-direction:column;
    align-items:center;
    gap:12px;
  }

  /* TITLE BOX: fixed width, variable height */
  .problem-title{
    width:300px;
    flex:0 0 auto;
    height:auto;             /* <-- variable height */
    min-height:100px;        /* optional: keeps a nice minimum */
   transform: translateX(10px);  /* move box + triangle 5px right */
    overflow:visible;
    position:relative;
    padding:0;               /* keep clean, inner handles padding */
  }

  /* inner: centered and wrapping, no clipping */
  .problem-title-inner{
    width:100%;
    height:auto;
    padding:12px;
    box-sizing:border-box;

    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;

    white-space:normal;
    overflow:visible;        /* allow height to grow */
    overflow-wrap:anywhere;
    word-break:break-word;
    line-height:1.2;
  }

  /* Ensure injected <p> etc. don't add margins */
  .problem-title-inner,
  .problem-title-inner *{
    margin:0;
  }

  /* REMOVE the desktop left-pointing triangle */
  .problem-title::before{
    content:"";
    position:absolute;
    left:50%;
    top:-100px;                 /* sits on the top border */
    transform:translateX(-50%);

    width:0;
    height:0;

    /* Upward triangle: width 50, height 50 */
    border-left:25px solid transparent;
    border-right:25px solid transparent;
    border-bottom:50px solid #faf9f5;  /* fill */
  }

  /* PAINPOINT vertically on the left of the box */
@media (max-width:768px){

  .problem-title .problem-label{
    position:absolute;
    left:-25px;
    top:50%;
    transform:translateY(-50%) rotate(180deg);

    font-size:18px;
    color:#FAF9F5;

    writing-mode:vertical-rl;
    text-orientation:mixed;

    white-space:nowrap;   /* ← prevents PAINP / OINT split */
  }
 /* detail styling stays */
  .problem-detail{
    border-left:none;
    text-align: center;
    padding-left:0;
  }
  
}
    /* optional: flip direction if you prefer reading top-to-bottom */
    /* transform:translateY(-50%) rotate(180deg); */
  }


}