:root {
  --eu-primary:#228bc5; /* European Blue */
  --eu-accent: #ffcc00;  /* European Gold */
  --eu-text: #1a1a1a;
  --eu-bg: transparent;
  --eu-card-bg: rgba(255, 255, 255, 0.8);
  --eu-border: rgba(0, 0, 0, 0.1);
  --eu-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Dark Mode Overrides */
[data-dmt-mode="dark"] {
  --eu-text: #f0f0f0;
  --eu-bg: color(display-p3 0.07 0.07 0.07);
  --eu-card-bg: rgba(20, 24, 35, 0.7);
  --eu-border: rgba(255, 255, 255, 0.1);
}

.eu-sanctuary-componentx {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--eu-text);
  background-color: var(--eu-bg);
  padding: 60px 20px;
  line-height: 1.6;
  overflow-x: hidden;
}

.eu-container {
  max-width: 1100px;
  margin: 0 auto;
}

/* Alternating Grid System */
.eu-block, .block-content-advertise {
  display: grid!important;
  grid-template-columns: 1fr 1fr!important;
  gap: 60px;
  align-items: center;
  margin-bottom: 100px;
  opacity: 0; /* For Animation */
  transform: translateY(30px)!important;
  animation: euFadeInUp 0.8s forwards!important;
}

.eu-block:nth-child(even) .eu-content, .block-content-advertise:nth-child(even) .content {
  order: 2;
}

.eu-block:last-child, .block-content-advertise:last-child {
  margin-bottom: 0;
}

/* Content Styling */
.eu-punchline, .field--name-field-ad-title {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}

.eu-punchline span {
  color: var(--eu-primary);
  display: block;
}

.eu-description, .block-content-advertise .field--name-body {
  font-size: 1.15rem;
  margin-bottom: 30px;
  opacity: 0.9;
}

/* Visual Elements */
.eu-image-wrapper, .block-content-advertise .field--name-field-ad-image {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  background: var(--eu-card-bg);
  border: 1px solid var(--eu-border);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eu-image-placeholder, .block-content-advertise .field--name-field-media-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--eu-transition);
}

.eu-image-wrapper:hover .eu-image-placeholder {
  transform: scale(1.05);
}

/* Button Styling */
.eu-cta, .block-content-advertise .field--name-field-action-link a {
  display: inline-block;
  padding: 14px 32px;
  background-color: var(--eu-primary);
  color: white !important;
  text-decoration: none !important;
  border-radius: 50px;
  font-weight: 600;
  transition: var(--eu-transition);
  border: 2px solid transparent;
}

.eu-cta:hover, .block-content-advertise .field--name-field-action-link a:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 51, 153, 0.3);
  background-color: #002a7a;
}

/* Animations */
@keyframes euFadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Staggering the animation for blocks */
.eu-block:nth-child(1), 
.block-content-advertise:nth-child(1) { animation-delay: 0.2s; }
.eu-block:nth-child(2), 
.block-content-advertise:nth-child(2) { animation-delay: 0.4s; }
.eu-block:nth-child(3), 
.block-content-advertise:nth-child(3) { animation-delay: 0.6s; }

/* Mobile Optimization */
@media (max-width: 768px) {
  .eu-block,
  .eu-block:nth-child(even) .eu-content,
  .block-content-advertise,
  .block-content-advertise:nth-child(even) .content {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align:left;
  }

.eu-cta, .block-content-advertise .field--name-field-action-link a {	padding: 3px 32px; font-size: 0.8em;}


  .eu-block:nth-child(even) .eu-content, 
  .block-content-advertise:nth-child(even) .content {
    order: 0;
  }

  .eu-punchline, .field--name-field-ad-title {
    font-size: 1.8rem;
  }
}