/* PEACH CONNECT 0.5.6 — align incomplete card rows without changing copy or media.
 * Deliberately asymmetric photo stories and the alternating production timeline
 * remain untouched. Rules apply only to the relevant reusable LP components. */

/* Partial outsourcing: five benefits used a three-column grid, leaving the
 * last two cards anchored on the left. Keep equal card widths in centered rows. */
.pcnx-root.pcnx-page-spot #benefits .pcnx-items--five-benefits {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:stretch;
  gap:22px;
  max-width:1140px;
  margin-inline:auto;
}
.pcnx-root.pcnx-page-spot #benefits .pcnx-items--five-benefits > .pcnx-item {
  flex:0 1 calc((100% - 44px) / 3);
  min-width:0;
}
/* A third price feature must sit under the first two, not at the far left. */
@media (min-width:701px){
  .pcnx-root.pcnx-page-spot #price .pcnx-items--price-items > .pcnx-item:last-child:nth-child(odd) {
    grid-column:1 / -1;
    justify-self:center;
    width:calc((100% - 12px) / 2);
    max-width:100%;
  }
}

/* Four event benefits read better as an evenly balanced two-by-two grid. */
@media (min-width:701px){
  .pcnx-root.pcnx-page-event #benefits .pcnx-items--benefits {
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:1040px;
    margin-inline:auto;
  }
}

/* Percent columns summing to 100% PLUS a gap exceeded the parent width.
 * Fractional tracks include the gap in the grid's available width. */
.pcnx-root.pcnx-page-event .pcnx-type-feature .pcnx-feature {
  grid-template-columns:minmax(0,2fr) minmax(0,3fr);
}
.pcnx-root.pcnx-page-sns .pcnx-sns-benefit-editorial {
  grid-template-columns:minmax(0,42fr) minmax(0,58fr);
}

/* A three-card section in a two-column breakpoint has one stranded card.
 * Center it at the same width as other cards rather than stretching it. */
@media (min-width:701px) and (max-width:1000px){
  .pcnx-root.pcnx-page-spot #benefits .pcnx-items--five-benefits > .pcnx-item {
    flex-basis:calc((100% - 22px) / 2);
  }
  .pcnx-root.pcnx-page-event #uses .pcnx-items--showcase > .pcnx-item:last-child:nth-child(odd),
  .pcnx-root.pcnx-page-flow #before .pcnx-items--benefits > .pcnx-item:last-child:nth-child(odd) {
    grid-column:1 / -1;
    justify-self:center;
    width:calc((100% - 22px) / 2);
    max-width:100%;
  }
}

/* Restore explicitly single-column layouts on phones. */
@media (max-width:760px){
  .pcnx-root.pcnx-page-event .pcnx-type-feature .pcnx-feature,
  .pcnx-root.pcnx-page-sns .pcnx-sns-benefit-editorial {
    grid-template-columns:minmax(0,1fr);
  }
}
@media (max-width:700px){
  .pcnx-root.pcnx-page-spot #benefits .pcnx-items--five-benefits > .pcnx-item {
    flex:0 0 100%;
    width:100%;
  }
}