/* ============================================================
INDUSTRY CARDS: one shared look for every migrated page's Industries
section. Owner rule 2026-10-05 (CLAUDE.md "Industry section: one card
design"). Reference: the industry section of /it-managed-services,
measured at 1440 / 768 / 390:
card 256x250 desktop (5 per row, centred, 15 apart), 2 columns at
681-1080, 1 full-width column at <=680; height 250 everywhere
front #f1f1f7, radius 10, padding 30px 24px, icon + title grouped and
vertically CENTRED, 20px apart, LEFT aligned
icon 44x44 glyph on a 75x75 WHITE tile, radius 16
title 16px / 600 / 19.2px, #111, left
back #fff, radius 10, padding 11px, 1px rgba(6,0,28,.12) border,
soft shadow, content vertically centred; DISC-marker bullets
at 15px indent, 11.5px / 16.1px #333, 5px apart
Loaded through inc/it-managed-services-zazz/industry-cards.php, AFTER the
page sheet, by every page whose Industries section was off-spec. It styles
only the look. Flip vs link is unchanged: an unlinked card still flips (the
page sheet), a linked card does not (css/msp-industry-links.css).
Covers all three card builds in use:
.zmit-industries .zmit-ind-card > .zmit-ind-inner > .zmit-ind-front / -back
.zab-flip .zab-flip-card > .zab-flip-inner > .zab-flip-front / -back
.zab-flip .flip-card > .flip-card-inner > .flip-card-front / -back
.zab-flip .zab-flip-card with no inner (a static tile: icon + title only)
Every selector starts ".zmit section:is(.zab-flip, .zmit-industries)" so it
outranks the page sheets' ".zmit .zab-flip-..." rules without !important.
============================================================ */
/* ---- Grid: 1 column on phones, 2 on tablets ---- */
.zmit section:is(.zab-flip, .zmit-industries) :is(.zab-flip-wrap, .zab-flip-grid, .zmit-industries-grid) {
display: grid; grid-template-columns: minmax(0, 1fr); gap: 15px;
justify-content: normal; align-items: stretch;
}
@media (min-width: 681px) and (max-width: 1080px) {
.zmit section:is(.zab-flip, .zmit-industries) :is(.zab-flip-wrap, .zab-flip-grid, .zmit-industries-grid) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.zmit section:is(.zab-flip, .zmit-industries) :is(.zab-flip-wrap, .zab-flip-grid, .zmit-industries-grid) > :is(.zmit-ind-card, .zab-flip-card, .flip-card) {
flex: none; width: auto; max-width: none; grid-column: auto;
}
/* Desktop: a centred, wrapping row of 256px cards, so a short last row sits in
the middle, as on the reference. */
@media (min-width: 1081px) {
.zmit section:is(.zab-flip, .zmit-industries) :is(.zab-flip-wrap, .zab-flip-grid, .zmit-industries-grid) {
display: flex; flex-wrap: wrap; justify-content: center;
}
.zmit section:is(.zab-flip, .zmit-industries) :is(.zab-flip-wrap, .zab-flip-grid, .zmit-industries-grid) > :is(.zmit-ind-card, .zab-flip-card, .flip-card) {
flex: 0 0 256px; width: 256px; max-width: 256px;
}
}
/* ---- Card: the same 250px height at every width ---- */
.zmit section:is(.zab-flip, .zmit-industries) :is(.zmit-ind-card, .zab-flip-card, .flip-card) {
height: 250px; min-height: 250px; margin: 0; border-radius: 10px; box-sizing: border-box;
}
.zmit section:is(.zab-flip, .zmit-industries) :is(.zmit-ind-inner, .zab-flip-inner, .flip-card-inner) {
height: 100%; min-height: 0;
}
/* ---- Front face (and the static tile, which IS its own front) ---- */
.zmit section:is(.zab-flip, .zmit-industries) :is(.zmit-ind-front, .zab-flip-front, .flip-card-front),
.zmit section.zab-flip .zab-flip-card:not(:has(> .zab-flip-inner)) {
display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
gap: 20px; padding: 30px 24px; box-sizing: border-box;
background: #f1f1f7; border-radius: 10px; text-align: left;
}
/* A face fills its card. Kept apart from the rule above: the static tile IS the
card, and this rule's higher specificity would otherwise undo its 250px height. */
.zmit section:is(.zab-flip, .zmit-industries) :is(.zmit-ind-front, .zab-flip-front, .flip-card-front) {
height: 100%; min-height: 0;
}
.zmit section:is(.zab-flip, .zmit-industries) :is(.zmit-ind-front, .zab-flip-front, .flip-card-front) h3,
.zmit section.zab-flip .zab-flip-card:not(:has(> .zab-flip-inner)) h3 {
font-size: 16px; font-weight: 600; line-height: 19.2px; color: #111;
text-align: left; margin: 0; align-self: stretch;
}
/* ---- Icon: a 44px glyph on a 75px white tile ---- */
/* Pages that wrap the glyph in a tile span */
.zmit section.zmit-industries .zmit-ind-ic {
display: flex; align-items: center; justify-content: center; flex: 0 0 75px;
width: 75px; height: 75px; margin: 0; padding: 0; border-radius: 16px; background: #fff;
}
.zmit section.zmit-industries .zmit-ind-ic :is(img, svg) {
display: block; width: 44px; height: 44px; max-width: none; margin: 0; padding: 0;
background: none; border-radius: 0; object-fit: contain;
}
/* Pages that put the bare ![]()
/