/* ======================================================
   p-module — 12-column system (matches main-container)
   ====================================================== */

/* Wrapper just ensures full width; container handles centering */
.p-module-wrapper {
  width: 100%;
}

/* Main container: 12-col grid, same max-width, gaps, and padding */
.p-module {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  max-width: 1900px;
  margin: 0 auto;
  gap: 60px;          /* space between columns (future-proofing) */
  padding: 80px 0;    /* top/bottom spacing */
}

/* ------------------------------------------------------
   Text Column
   ------------------------------------------------------ */
.p-module .txt-col {
  grid-column: 2 / span 7; /* aligns with heading column */
  display: flex;
  flex-direction: column;  /* stack rich text, paragraph, CTA */
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}

/* ------------------------------------------------------
   Rich Text
   ------------------------------------------------------ */
.p-module .p-rich {
  width: 100%;
}

.p-module .p-rich h2 {
  font-weight: 600;
  line-height: 1.2;
}

.p-module .p-rich h3 {
  font-weight: 400;
  line-height: 1.3;
}

/* Optional: basic bottom margin rhythm for common blocks */
.p-module .p-rich :where(h1, h2, h3, p, ul, ol) {
  margin: 0 0 16px;
}

/* ----------------------
   Paragraph block 
   ---------------------*/
.p-module .page-p {
  margin-top: 10px;
  width: 100%;
}

.p-module .page-p p {
  margin: 0;               /* tight control so spacing is predictable */
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #1A1A1A;
  letter-spacing: 0;       /* use number, not % */
}

/* ------------------------
   CTA block — spacing + 
   ------------------------ */
.p-module .page-cta {
  margin-top: 20px; 
  width: 100%;
}

.p-module .page-cta span {
  display: inline-flex;
}

/* Baseline CTA style */
.p-module .page-cta :where(a, button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 12px 20px;
  border-radius: 6px;
  border: 0;

  background: #1A1A1A;
  color: #fff;
  text-decoration: none;

  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

/* Hover/Focus states for accessibility and affordance */
.p-module .page-cta :where(a, button):hover {
  background: #000;
}

.p-module .page-cta :where(a, button):focus-visible {
  outline: 2px solid #A335FF;
  outline-offset: 2px;
}

/* Disabled style safeguard (if applicable) */
.p-module .page-cta :where(a[aria-disabled="true"], button:disabled) {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* ======================================================
   Responsive: Tablet (≤ 1023px)
   ====================================================== */
@media (max-width: 1023px) {
  .p-module {
    display: flex;
    flex-direction: column;
    padding: 40px 20px;
    gap: 20px;
  }
  .p-module .txt-col {
    grid-column: 1 / -1;
    width: 100%;
  }


/* ======================================================
   Responsive: Mobile Large (≤ 767px)
   ====================================================== */
@media (max-width: 767px) {
  .p-module .p-rich h2 {
    font-size: 36px !important;
    line-height: 44px !important;
  }
}

/* ======================================================
   Responsive: Mobile Small (≤ 576px)
   - Match heading sizes from your reference
   ====================================================== */
@media (max-width: 576px) {
  .p-module .p-rich h2 {
    font-size: 28px !important;
    line-height: 36px !important;
  }
}

/* ======================================================
   Reduced Motion (nice-to-have)
   ====================================================== */
@media (prefers-reduced-motion: reduce) {
  .p-module .page-cta :where(a, button) {
    transition: none;
  }
}