/* Page Intro Block - Frontend Styles */
.page-intro-block {
  background-color: var(--color-green-100, var(--color-green-200));
  padding: var(--spacing-20, 80px) var(--spacing-7, 28px);
  width: 100%;
}

.page-intro-block .content-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-10, 40px);
  max-width: 1440px;
  margin: 0 auto;
}

.page-intro-block .heading-container {
  flex: 1 1 40%;
  max-width: 640px;
  min-width: 300px;
}

.page-intro-block .page-intro-heading {
  /* Figma: H1 - Exact specs from design */
  color: var(--color-green-900, #373A19) !important;
  font-family: var(--font-heading, "Sora") !important;
  font-size: var(--font-size-5xl, 48px) !important;
  font-weight: var(--font-weight-extrabold, 800) !important;
  line-height: 0.9166666666666666em !important; /* 44px / 48px */
  text-transform: uppercase !important;
  font-kerning: none;
  font-variant-numeric: lining-nums proportional-nums;
  margin: 0;
}

.page-intro-block .body-container {
  flex: 1 1 60%;
  max-width: 720px;
  min-width: 300px;
}

.page-intro-block .page-intro-body {
  /* Figma: Body copy - Exact specs from design */
  color: var(--color-green-900, #373A19) !important;
  font-family: var(--font-body, "Azo Sans", "Inter") !important;
  font-size: var(--font-size-base, 16px) !important;
  font-weight: var(--font-weight-normal, 400) !important;
  line-height: 1.5em !important; /* 24px / 16px */
  text-align: left !important;
  margin: 0;
}

/* Large screens - 1920px and above */
@media (min-width: 1920px) {
  .page-intro-block {
    padding: var(--spacing-20, 80px) var(--spacing-16, 64px);
  }
  
  .page-intro-block .content-wrapper {
    max-width: 1600px;
    gap: var(--spacing-16, 64px);
  }
  
  .page-intro-block .page-intro-heading {
    font-size: var(--font-size-6xl, 60px) !important;
    line-height: 0.9em !important;
  }
  
  .page-intro-block .page-intro-body {
    font-size: var(--font-size-lg, 18px) !important;
    line-height: 1.6em !important;
  }
}

/* Tablet and smaller desktop */
@media (max-width: 1024px) {
  .page-intro-block .content-wrapper {
    flex-direction: column;
    gap: var(--spacing-8, 32px);
  }
  
  .page-intro-block .heading-container {
    max-width: none;
  }
  
  .page-intro-block .body-container {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 768px) {
  .page-intro-block {
    padding: var(--spacing-16, 64px) var(--spacing-5, 20px);
  }
  
  .page-intro-block .page-intro-heading {
    font-size: var(--font-size-4xl, 36px) !important;
    line-height: 1em !important;
  }
  
  .page-intro-block .page-intro-body {
    font-size: var(--font-size-sm, 14px) !important;
    line-height: 1.5em !important;
  }
}

/* Progressive enhancement - content visible by default */
.page-intro-block {
  opacity: 1;
  visibility: visible;
}

/* Accessibility - Focus states */
.page-intro-block a:focus {
  outline: 2px solid var(--color-blue-focus, #4F85FD);
  outline-offset: 2px;
  border-radius: 2px;
}