/*
  Peaceful World Design System v0.4
  STABLE COMPONENT: section header layout (stable since v0.3.3)

  Validated unchanged across Mission + Projects. This file owns geometry only.
  Typography, section spacing, numbering style and local color remain consumer-owned.
*/
:where(.pw-section-head){
  display:grid;
  grid-template-columns:
    var(--pw-section-index-col,60px)
    minmax(0,1fr)
    minmax(0,1fr);
  gap:var(--pw-section-gap,18px);
  align-items:start;
}

:where(.pw-section-head)>*{min-width:0}

:where(.pw-section-head)>.pw-section-desc{
  justify-self:end;
  max-width:var(--pw-section-desc-max,520px);
  overflow-wrap:break-word;
}

:where(.pw-section-head)>h2{
  overflow-wrap:break-word;
}

@media(max-width:900px){
  :where(.pw-section-head){
    grid-template-columns:
      var(--pw-section-index-col-tablet,46px)
      minmax(0,1fr);
  }
  :where(.pw-section-head)>.pw-section-desc{
    grid-column:2;
    justify-self:start;
  }
}

@media(max-width:620px){
  :where(.pw-section-head){
    grid-template-columns:1fr;
    gap:var(--pw-section-gap-mobile,7px);
  }
  :where(.pw-section-head)>.pw-section-desc{
    grid-column:1;
  }
}