/* Two Column Text Left Block - Frontend Styles */

.two-col-text-left {
  /* Layout - exact Figma specs */
  min-height: 620px;
  position: relative;
  overflow: visible; /* Allow content overflow */
}

.two-col-text-left .text-content {
  /* Left column styling */
  background-color: var(--color-green-100, var(--color-green-200));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.5rem; /* 40px */
  padding: 5rem; /* 80px */
  position: relative;
  z-index: 10; /* Above image column */
  overflow: visible;
}

.two-col-text-left .copy-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.75rem; /* 28px */
  width: 100%;
}

.two-col-text-left .heading-component {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* 12px */
  max-width: 32.5rem; /* 520px - max width instead of fixed */
}

.two-col-text-left .image-content {
  /* Right column styling */
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  align-items: stretch;
  gap: 0.625rem; /* 10px */
  position: relative;
  z-index: 1; /* Below text column */
}

.two-col-text-left .photo-frame {
  display: flex;
  flex-direction: column;
  gap: 5rem; /* 80px */
  width: 100%;
  height: 100%;
  min-height: 620px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Subhead Typography - Exact Figma Specs */
.two-col-text-left .subhead-apolline {
  font-family: var(--font-subheading, "Libre Baskerville", serif) !important;
  font-weight: 700 !important;
  font-size: var(--font-size-xl, 20px) !important;
  line-height: 1.2em !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  color: var(--color-green-700, var(--color-green-800)) !important;
}

/* H1 Header Typography - Exact Figma Specs */
.two-col-text-left .h1-header {
  font-family: var(--font-heading, "Sora", sans-serif) !important;
  font-weight: var(--font-weight-extrabold, 800) !important;
  font-size: var(--font-size-5xl, 48px) !important;
  line-height: 0.9166666666666666em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  color: var(var(--color-green-950), #373A19) !important;
  font-kerning: none;
  font-variant-numeric: lining-nums proportional-nums;
  /* Allow overflow with readability enhancement */
  position: relative;
  z-index: 20;
  /* Natural line breaks without word breaking */
  overflow-wrap: normal;
  word-wrap: normal;
  hyphens: none; /* Disable hyphenation */
}

/* Desktop-specific overflow behavior */
@media (min-width: 1024px) {
  .two-col-text-left .h1-header {
    margin-right: -100px; /* Allow text to extend right into image */
    padding-right: 20px; /* Some padding for breathing room */
  }
}

/* Body Text Typography - Exact Figma Specs */
.two-col-text-left .body-text-azo {
  font-family: var(--font-body, "Inter", sans-serif) !important;
  font-weight: 400 !important;
  font-size: var(--font-size-base, 16px) !important;
  line-height: 1.5em !important;
  text-align: left !important;
  color: var(var(--color-green-950), #373A19) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
  .two-col-text-left {
    min-height: auto;
  }
  
  .two-col-text-left .text-content {
    padding: 2.5rem 1.25rem; /* 40px 20px */
  }
  
  .two-col-text-left .heading-component {
    width: 100%;
  }
  
  .two-col-text-left .h1-header {
    font-size: var(--font-size-4xl, 36px) !important;
    margin-right: 0; /* Reset margin */
    padding-right: 0; /* Reset padding */
  }
  
  .two-col-text-left .photo-frame {
    min-height: 300px;
  }
}