/**
 * Callout Card Styling
 * This targets the exact DOM structure of Ghost's callout card component
 */

/* Main callout card container */
.kg-card.kg-callout-card,
.kg-callout-card {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  margin: 4rem 0 !important;
  padding: 3rem 0 !important;
  position: relative !important;
}

/* Style the callout text */
.kg-callout-text {
  font-family: var(--font-primary) !important;
  font-size: 4rem !important;
  line-height: 1.2 !important;
  color: var(--charcoal) !important;
  text-transform: uppercase !important;
  text-align: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* Target style variants */
.kg-callout-card-white,
.kg-callout-card-grey,
.kg-callout-card-pink,
.kg-callout-card-red,
.kg-callout-card-orange,
.kg-callout-card-yellow,
.kg-callout-card-green,
.kg-callout-card-blue,
.kg-callout-card-purple {
  background-color: transparent !important;
  color: var(--charcoal) !important;
}

/* Remove any emoji or icon that might be present */
.kg-callout-emoji {
  display: none !important;
}

/* Remove any potential extra elements */
.kg-callout-card::before,
.kg-callout-card::after,
.kg-callout-text::before,
.kg-callout-text::after {
  display: none !important;
  content: none !important;
}

/* Make sure nothing protrudes */
.kg-callout-card * {
  max-width: 100% !important;
  border: none !important;
  background-image: none !important;
}