/* "Why TerraTech 360" (patterns/pricing-why.php), ported from the prototype's
   .why-title/.why-description (html/assets/css/layout/pricing.css). This section appears
   exactly once on the whole site, so these are plain, pattern-specific classes rather than a
   new reusable block style — the same reasoning already used for this pattern's own icon
   circle not getting its own one-off wrapper beyond the shared Icon Circle style. */

/* The three columns themselves (core/columns, className "pricing-why-columns" on the pattern's
   own wrapper): the prototype's .pricing-why .why-columns is a 3-column CSS grid with a 40px
   gap, not core/columns' own default flex layout and 2em (32px) blockGap — this was missing
   entirely until found against the real rendered width/gap (measured 368px/32px against the
   prototype's real 363px/40px). margin-top: 55px is this site's standing section-heading gap,
   also missing until now since core/columns isn't covered by components/card-layouts.css's
   shared card-grid mechanism at all.

   .wp-block-columns.pricing-why-columns, not the bare class: Gutenberg's own global styles
   set a competing rule on this same element by its layout class (display/gap for a flex
   layout), at a specificity a single class here can't beat regardless of stylesheet order —
   found and fixed the identical problem on .pricing-cta in components/pricing-cards.css, same
   repeated-class bump already used there and in components/button-block-styles.css. */
.wp-block-columns.pricing-why-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    margin-top: 55px;
    /* Gutenberg's own block-spacing system (the default gap between root-level blocks) was
       adding its own margin-bottom here too, measured at 28px — found against the real
       rendered section height (632px against the prototype's real 604px), not assumed. Nothing
       follows this block inside the section, so this space was pure excess. */
    margin-bottom: 0;
    text-align: center;
}

/* md: stacks to one column, matching the prototype's own .pricing-why .why-columns rule at this
   breakpoint exactly (gap widens to 48px once there's only one column per row). */
@media (max-width: 767.98px) {
    .wp-block-columns.pricing-why-columns {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
    }
}

.pricing-why-title {
    margin: 20px 0 0;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(var(--terra-green), 1);
    text-align: center;
}

.pricing-why-description {
    max-width: 340px;
    margin: 15px auto 0;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}