/* components/card-layouts.css

   Reusable layout modifiers for any card-grid wrapper (module-cards, role-summary-cards,
   stat-cards, stage-cards, etc.), so a page doesn't need its own media query every time its
   card count or its collapse point differs from a component's own built-in default.

   Two choices, composed as classes on the grid wrapper itself, next to its own existing class
   (e.g. <div class="module-cards cards-type-tile cards-cols-5 cards-cols-md-1">):

   1. Mechanism -- cards-type-tile (flex, centers a short last row; use when the count doesn't
      always divide evenly, like 5 cards in 3 columns) or cards-type-fixed (CSS grid, no
      centering; use when the count always divides evenly at every step, like a fixed 3 or 4).

   2. Column count per breakpoint -- cards-cols-N sets the base/desktop count (2 through 6).
      cards-cols-lg-N / cards-cols-md-N / cards-cols-sm-N each override it starting at that
      breakpoint, the same desktop-first "max-width" tiers as the rest of the site (lg:
      991.98px, md: 767.98px, sm: 575.98px). Only add the breakpoint classes a section actually
      needs -- any tier left unset just keeps the next-wider tier's count, same as Bootstrap's
      own row-cols-* utilities. Written in lg -> md -> sm order so each narrower override wins
      the cascade tie against a wider one at the same specificity, without needing extra
      specificity tricks.

   Gap stays owned by the host component (module-cards.css, role-summary-cards.css, etc.) at
   every width EXCEPT when a section is fully stacked to one column (cards-cols-lg-1/md-1/sm-1):
   that state always gets the sitewide 8px mobile card gap, baked in below, so no page needs to
   hand-add it. --cards-gap (default 24px) exists purely so the flex-basis math has a number to
   subtract; if a section's real gap isn't 24px, set --cards-gap to match it on the section's own
   wrapper (its actual `gap` declaration is untouched at every width where this file isn't
   already forcing 8px).
*/

.cards-type-tile,
.cards-type-fixed {
    --cards-gap: 24px;
}

/* Editor-only, scoped under .editor-styles-wrapper so this can never reach the front end — see
   the full comment on .wp-block-tt360-section in components/section.css. tt360/card-grid is
   nested inside tt360/section's own InnerBlocks, same situation as tt360/lifecycle-stages: only
   GeneratePress's own `body .wp-block { max-width: var(--content-width) }` rule reaches it.
   Confirmed directly: every cards-cols-* flex-basis is a percentage of this wrapper's own
   width, so a constrained wrapper (1120px instead of the real 1168px) was silently making every
   card ~16px narrower than the front end, not just the wrapper itself. */
.editor-styles-wrapper .block-editor-block-list__layout .wp-block-tt360-card-grid {
    max-width: none;
}

.cards-type-tile {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Flex items default to min-width: auto, which floors their shrink at their own content's
   intrinsic width (e.g. an unwrapping heading) regardless of flex-basis, letting that one card
   push wider than its column share while its neighbors stay correct. min-width: 0 removes that
   floor so flex-basis is the only thing setting each card's width. */
.cards-type-tile > * {
    min-width: 0;
}

.cards-type-fixed {
    display: grid;
}

/* Base/desktop column count. */
.cards-cols-2.cards-type-tile > * { flex: 0 1 calc((100% - var(--cards-gap)) / 2); }
.cards-cols-3.cards-type-tile > * { flex: 0 1 calc((100% - (var(--cards-gap) * 2)) / 3); }
.cards-cols-4.cards-type-tile > * { flex: 0 1 calc((100% - (var(--cards-gap) * 3)) / 4); }
.cards-cols-5.cards-type-tile > * { flex: 0 1 calc((100% - (var(--cards-gap) * 4)) / 5); }
.cards-cols-6.cards-type-tile > * { flex: 0 1 calc((100% - (var(--cards-gap) * 5)) / 6); }

.cards-cols-2.cards-type-fixed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards-cols-3.cards-type-fixed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-cols-4.cards-type-fixed { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cards-cols-5.cards-type-fixed { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cards-cols-6.cards-type-fixed { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* lg: 768px-991.98px. Add -6 the same way if a future section needs it. */
@media (max-width: 991.98px) {
    .cards-cols-lg-1.cards-type-tile { gap: 8px; }
    .cards-cols-lg-1.cards-type-tile > * { flex-basis: 100%; }
    .cards-cols-lg-2.cards-type-tile > * { flex-basis: calc((100% - var(--cards-gap)) / 2); }
    .cards-cols-lg-3.cards-type-tile > * { flex-basis: calc((100% - (var(--cards-gap) * 2)) / 3); }
    .cards-cols-lg-4.cards-type-tile > * { flex-basis: calc((100% - (var(--cards-gap) * 3)) / 4); }
    .cards-cols-lg-5.cards-type-tile > * { flex-basis: calc((100% - (var(--cards-gap) * 4)) / 5); }

    .cards-cols-lg-1.cards-type-fixed { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .cards-cols-lg-2.cards-type-fixed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cards-cols-lg-3.cards-type-fixed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cards-cols-lg-4.cards-type-fixed { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cards-cols-lg-5.cards-type-fixed { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* md: below 768px. */
@media (max-width: 767.98px) {
    .cards-cols-md-1.cards-type-tile { gap: 8px; }
    .cards-cols-md-1.cards-type-tile > * { flex-basis: 100%; }
    .cards-cols-md-2.cards-type-tile > * { flex-basis: calc((100% - var(--cards-gap)) / 2); }
    .cards-cols-md-3.cards-type-tile > * { flex-basis: calc((100% - (var(--cards-gap) * 2)) / 3); }
    .cards-cols-md-4.cards-type-tile > * { flex-basis: calc((100% - (var(--cards-gap) * 3)) / 4); }

    .cards-cols-md-1.cards-type-fixed { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .cards-cols-md-2.cards-type-fixed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cards-cols-md-3.cards-type-fixed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cards-cols-md-4.cards-type-fixed { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* sm: below 576px. */
@media (max-width: 575.98px) {
    .cards-cols-sm-1.cards-type-tile { gap: 8px; }
    .cards-cols-sm-1.cards-type-tile > * { flex-basis: 100%; }
    .cards-cols-sm-2.cards-type-tile > * { flex-basis: calc((100% - var(--cards-gap)) / 2); }

    .cards-cols-sm-1.cards-type-fixed { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .cards-cols-sm-2.cards-type-fixed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}