.callout-block {
  width: 100%;
  position: relative;
}
.callout-block__container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}
.callout-block[data-width="full_width_bg_full_content"],
.callout-block[data-width="full_width_bg_container_content"] {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.callout-block[data-margin-top="none"] { margin-top: 0; }
.callout-block[data-margin-top="small"] { margin-top: 1rem; }
.callout-block[data-margin-top="medium"] { margin-top: 2rem; }
.callout-block[data-margin-top="large"] { margin-top: 3rem; }
.callout-block[data-margin-top="xlarge"] { margin-top: 4rem; }
.callout-block[data-margin-bottom="none"] { margin-bottom: 0; }
.callout-block[data-margin-bottom="small"] { margin-bottom: 1rem; }
.callout-block[data-margin-bottom="medium"] { margin-bottom: 2rem; }
.callout-block[data-margin-bottom="large"] { margin-bottom: 3rem; }
.callout-block[data-margin-bottom="xlarge"] { margin-bottom: 4rem; }
.callout-block[data-bg="white"] { background-color: #ffffff; }
.callout-block[data-bg="light_gray"] { background-color: #f8f9fa; }
.callout-block__inner {
  border-left: 5px solid #3b97de;
  background: linear-gradient(135deg, #f0f7ff 0%, #e8f0fe 100%);
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 1.75rem 1.5rem;
}
.callout-block[data-style="green"] .callout-block__inner {
  border-left-color: #28a745;
  background: linear-gradient(135deg, #f0fff4 0%, #e8f8ed 100%);
}
.callout-block[data-style="yellow"] .callout-block__inner {
  border-left-color: #ffc107;
  background: linear-gradient(135deg, #fffef0 0%, #fff8e1 100%);
}
.callout-block[data-style="red"] .callout-block__inner {
  border-left-color: #dc3545;
  background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
}
.callout-block[data-style="dark"] .callout-block__inner {
  border-left-color: #1f537a;
  background: linear-gradient(135deg, #1a2e3f 0%, #1f537a 100%);
  color: #ffffff;
}
.callout-block__content {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #1a2e3f;
}
.callout-block[data-style="dark"] .callout-block__content {
  color: #ffffff;
}
.callout-block__content p { margin: 0 0 0.75rem; }
.callout-block__content p:last-child { margin-bottom: 0; }
.callout-block__content strong { color: #1f537a; font-weight: 600; }
.callout-block[data-style="dark"] .callout-block__content strong { color: #7cc8f5; }
.callout-block__content a { color: #3b97de; text-decoration: underline; }
/* Hover effect */
.callout-block { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.callout-block:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }
/* Blocks template integration */
.blocks-wrapper article > .callout-block { padding-left: 0; padding-right: 0; }

/* Container width alignment: 1200px to match text block */
.blocks-wrapper .callout-block .callout-block__container { max-width: 1200px; }

/* Fix: subtle hover instead of aggressive lift */
.blocks-wrapper .callout-block:hover { transform: none; box-shadow: none; }
.blocks-wrapper .callout-block .callout-block__inner { transition: box-shadow 0.3s ease; }
.blocks-wrapper .callout-block:hover .callout-block__inner { box-shadow: 0 4px 16px rgba(59, 151, 222, 0.12); }

/* Silky smooth hover transitions */
.callout-block .callout-block__inner { transition: box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

/* Editor: consistent 1200px container width */
.editor-styles-wrapper .callout-block .callout-block__container,
.acf-block-preview .callout-block .callout-block__container { max-width: 1200px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; }

/* Editor: widen block wrapper to match frontend 1200px */
.editor-styles-wrapper .wp-block[data-type="acf/callout"] { max-width: 1200px; }