/**
 * Two Column CTA Right Block - Frontend Styles
 * Defers typography to design system classes
 */

.two-col-cta-right-section {
  /* Block wrapper - minimal styling, defer to Tailwind */
  position: relative;
}

/* Container overflow handling */
.two-col-cta-right-section > div {
  overflow: visible; /* Allow content to overflow */
  position: relative;
}

/* Image column - lower z-index */
.two-col-cta-right-section > div > div:first-child {
  position: relative;
  z-index: 1;
}

/* Content column - higher z-index for overflow */
.two-col-cta-right-section > div > div:last-child {
  position: relative;
  z-index: 10;
  overflow: visible;
}

.two-col-cta-right-section h3 {
  /* Figma: Subhead medium */
  color: var(--color-yellow-200, #FBEB8F) !important;
  font-kerning: none;
  font-variant-numeric: lining-nums proportional-nums;
  font-family: var(--font-subheading, "Apolline Std") !important;
  font-size: var(--font-size-xl, 20px) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  line-height: var(--spacing-6, 24px) !important; /* 120% */
  letter-spacing: 0.4px !important;
  text-transform: capitalize !important;
}

.two-col-cta-right-section h2 {
  /* Figma: H1 */
  color: var(--color-yellow-200, #FBEB8F) !important;
  font-family: var(--font-heading, "Sora") !important;
  font-size: var(--font-size-7xl, 72px) !important;
  font-style: normal !important;
  font-weight: var(--font-weight-extrabold, 800) !important;
  line-height: var(--spacing-16, 64px) !important; /* 88.889% */
  text-transform: uppercase !important;
  /* Allow overflow with shadow for readability */
  position: relative;
  z-index: 20;
  /* Natural line breaks without word breaking */
  overflow-wrap: normal;
  word-wrap: normal;
  hyphens: none; /* Disable hyphenation */
  margin-left: -100px; /* Allow text to extend left into image */
  padding-left: 100px; /* Compensate for negative margin */
}

.two-col-cta-right-section p {
  /* Typography via .ds-body from design-system.css */
}

.two-col-cta-right-section a {
  /* Typography via .ds-body from design-system.css */
}

.two-col-cta-right-section a:hover {
  /* Enhanced hover state beyond Tailwind */
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
  .two-col-cta-right-section h2 {
    /* Smaller heading on mobile */
    font-size: 3rem !important;
    line-height: 1.2 !important;
    margin-left: 0; /* Reset margin */
    padding-left: 0; /* Reset padding */
  }
  
  .two-col-cta-right-section a {
    /* Adjust button width on mobile */
    width: 100% !important;
    max-width: 348px;
  }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  .two-col-cta-right-section h2 {
    /* Slightly smaller heading on tablet */
    font-size: 4rem !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .two-col-cta-right-section a {
    border-width: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .two-col-cta-right-section a {
    transition: none;
  }
  
  .two-col-cta-right-section a:hover {
    transform: none;
  }
}