/* HDL Kit — card_grid block styles.
 *
 * The base `.grid-2/.grid-3/.grid-4 > .card` family is shared across 20 pages
 * and already lives in assets/css/modules.css — not duplicated here.
 *
 * Everything below is the six bespoke variants render.php emits. Each exists
 * only in its own page's inline <style> block and in no shared stylesheet:
 *
 *   .mods       replatforma-magento.html   (inline-css/replatforma-magento.css 13-19, 31-32)
 *   .pkg        self-hosted.html           (inline-css/self-hosted.css 5-10, 36)
 *   .cat        solaris.html               (inline-css/solaris.css 27-32, 42)
 *   .clouds     self-hosted.html           (inline-css/self-hosted.css 27-35)
 *   .efeat      enterprise.html            (inline-css/enterprise.css 2-14)
 *   .jobs-tools verktyg.html               (inline-css/verktyg.css 16-23)
 *
 * They share one signature — `gap: 2px` over a hairline parent background, so
 * the cells read as a hairline table rather than as floating boxes. Ported
 * here rather than into the shared sheet because each is a single-page
 * component owned by this block, matching stat_row/style.css's `.stat4`
 * precedent.
 *
 * Two deliberate departures from the source declarations:
 *
 * 1. Cell element. Each handoff page renders its variant's cells as one fixed
 *    element (`.mods a`, `.efeat a`, `.pkg > div`, …) because those pages
 *    happen to link all of them or none of them. render.php decides per card —
 *    a card with a URL is the anchor, a card without one is a div — so every
 *    cell rule below is written `> a, > div` and carries `text-decoration:
 *    none`, including on the variants the design wrote as divs only. Pinning
 *    each rule to the design's single element would leave the other element
 *    rendering as an unpadded hole in the hairline table. `:hover` stays
 *    anchor-only, as in the source.
 *
 * 2. `.cat`'s container rule is scoped `.wrap-wide > .cat`. blogg.html — and
 *    the `blog` block's render.php after it — uses the same class name for the
 *    post-card category eyebrow (`<span class="cat">`, styled at
 *    modules.css:4683). Both blocks can sit on one page, so a bare `.cat` grid
 *    rule would turn every eyebrow into a bordered grid container. The
 *    descendant rules need no such guard: that eyebrow span holds text only,
 *    so `.cat > a`, `.cat > div`, `.cat h3`, `.cat ul` and `.cat li` cannot
 *    match inside it.
 *
 * `.mods`, `.pkg` and `.cat` carry `style="margin-top:36px"` on the container
 * in their source pages rather than in the CSS (hard rule 2 bans inline
 * style). It is not reproduced here: the block's own `.sec-head` already
 * supplies that gap via `--wp--custom--section-head-gap`, and `.clouds` /
 * `.efeat` show the design puts container spacing in the stylesheet when it
 * means it to be part of the component.
 *
 * Not ported from these pages: `.app-cap` (enterprise.css 15-16), which
 * render.php also emits — already defined in assets/css/appui.css.
 *
 * No token match, left literal: `#07090c` (cell hover, the same value
 * jump_strip/style.css already keeps literal), `#3a3f47` (`.efeat li b`
 * bullet) and `rgba( 255, 255, 255, 0.08 )` (`.jobs-tools` cell border, as in
 * steps/style.css).
 *
 * No radius anywhere: the app_mockup kit is the only place on this site that
 * has rounded corners.
 */

/* --------------------------------------------------------------------------
   .mods — module index, replatforma-magento.html
   -------------------------------------------------------------------------- */
.mods {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 2px;
	background: var( --wp--custom--hairline );
	border: 1px solid var( --wp--custom--hairline );
}

.mods > a,
.mods > div {
	background: var( --dark );
	padding: clamp( 17px, 2vw, 24px );
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mods > a:hover {
	background: #07090c;
}

.mods .nm {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.98rem;
	color: var( --wp--preset--color--contrast );
	font-weight: 500;
}

.mods .nm i {
	width: 9px;
	height: 9px;
	background: var( --mint );
	flex: 0 0 auto;
}

.mods > a:hover .nm {
	color: var( --mint-bright );
}

.mods p {
	font-size: 0.84rem;
	color: var( --wp--custom--status--mute );
	line-height: 1.55;
}

/* --------------------------------------------------------------------------
   .pkg — package list, self-hosted.html
   -------------------------------------------------------------------------- */
.pkg {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 2px;
	background: var( --wp--custom--hairline );
	border: 1px solid var( --wp--custom--hairline );
}

.pkg > a,
.pkg > div {
	background: var( --dark );
	padding: clamp( 18px, 2.2vw, 26px );
	text-decoration: none;
}

.pkg h3 {
	font-size: 0.95rem;
	color: var( --wp--preset--color--contrast );
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 10px;
}

.pkg h3 i {
	width: 9px;
	height: 9px;
	background: var( --mint );
	flex: 0 0 auto;
}

.pkg ul {
	list-style: none;
	margin: 13px 0 0;
	padding: 0;
	display: grid;
	gap: 7px;
}

.pkg li {
	font-size: 0.85rem;
	color: var( --wp--preset--color--muted );
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   .cat — component catalogue, solaris.html
   -------------------------------------------------------------------------- */
.wrap-wide > .cat {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 2px;
	background: var( --wp--custom--hairline );
	border: 1px solid var( --wp--custom--hairline );
}

.cat > a,
.cat > div {
	background: var( --dark );
	padding: clamp( 18px, 2.2vw, 25px );
	text-decoration: none;
}

.cat h3 {
	font-size: 0.95rem;
	color: var( --wp--preset--color--contrast );
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 10px;
}

.cat h3 i {
	width: 9px;
	height: 9px;
	background: var( --mint );
	flex: 0 0 auto;
}

.cat ul {
	list-style: none;
	margin: 13px 0 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.cat li {
	font-family: var( --font-mono );
	font-size: 0.74rem;
	color: var( --wp--preset--color--muted );
}

/* --------------------------------------------------------------------------
   .clouds — hosting providers, self-hosted.html. `.ours` is the highlighted
   cell; it outranks the cell background rule on specificity and order.
   -------------------------------------------------------------------------- */
.clouds {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 2px;
	background: var( --wp--custom--hairline );
	border: 1px solid var( --wp--custom--hairline );
	margin-top: clamp( 28px, 3.4vw, 42px );
}

.clouds > a,
.clouds > div {
	background: var( --dark );
	padding: clamp( 20px, 2.4vw, 28px );
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.clouds .nm {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1.05rem;
	color: var( --wp--preset--color--contrast );
	font-weight: 500;
}

.clouds .nm i {
	width: 10px;
	height: 10px;
	background: var( --mint );
	flex: 0 0 auto;
}

.clouds p {
	font-size: 0.85rem;
	color: var( --wp--custom--status--mute );
	line-height: 1.55;
}

.clouds .ours {
	background: linear-gradient( 180deg, var( --wp--custom--wash--soft ), transparent );
}

.clouds .tagm {
	font-family: var( --font-mono );
	font-size: 0.64rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --mint-bright );
	margin-top: auto;
}

/* --------------------------------------------------------------------------
   .efeat — enterprise features, enterprise.html
   -------------------------------------------------------------------------- */
.efeat {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 2px;
	background: var( --wp--custom--hairline );
	border: 1px solid var( --wp--custom--hairline );
	margin-top: 36px;
}

.efeat > a,
.efeat > div {
	background: var( --dark );
	padding: clamp( 20px, 2.4vw, 30px );
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-decoration: none;
}

.efeat > a:hover {
	background: #07090c;
}

.efeat .tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var( --font-mono );
	font-size: 0.62rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var( --mint-bright );
}

.efeat .tag i {
	width: 8px;
	height: 8px;
	background: var( --mint );
}

.efeat h3 {
	font-size: 1.1rem;
	color: var( --wp--preset--color--contrast );
	font-weight: 500;
}

.efeat p {
	font-size: 0.88rem;
	color: var( --wp--custom--status--mute );
	line-height: 1.6;
}

.efeat ul {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.efeat li {
	font-family: var( --font-mono );
	font-size: 0.72rem;
	color: var( --wp--preset--color--muted );
	display: flex;
	gap: 9px;
}

.efeat li b {
	color: #3a3f47;
	font-weight: 400;
}

.efeat .go {
	margin-top: auto;
	padding-top: 6px;
	font-family: var( --font-mono );
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --mint );
}

/* --------------------------------------------------------------------------
   .jobs-tools — tool specs, verktyg.html. Flex, not grid: the column count is
   the flex basis, which is why this variant declares no breakpoints.
   -------------------------------------------------------------------------- */
.jobs-tools {
	display: flex;
	gap: 2px;
	flex-wrap: wrap;
	margin-top: 2px;
}

.jobs-tools > a,
.jobs-tools > div {
	flex: 1 1 220px;
	background: var( --dark );
	border: 1px solid rgba( 255, 255, 255, 0.08 );
	padding: clamp( 18px, 2.2vw, 26px );
	text-decoration: none;
}

.jobs-tools h3 {
	font-size: 1rem;
	color: var( --wp--preset--color--contrast );
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 10px;
}

.jobs-tools h3 i {
	width: 10px;
	height: 10px;
	background: var( --mint );
	flex: 0 0 auto;
}

.jobs-tools p {
	font-size: 0.88rem;
	color: var( --wp--preset--color--muted );
	line-height: 1.6;
	margin-top: 9px;
}

.jobs-tools dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 5px 14px;
	margin: 14px 0 0;
	font-family: var( --font-mono );
	font-size: 0.72rem;
}

.jobs-tools dt {
	color: var( --wp--preset--color--dim );
}

.jobs-tools dd {
	margin: 0;
	color: var( --wp--preset--color--body-text );
}

/* --------------------------------------------------------------------------
   Breakpoints — each variant's own, from its source page.
   -------------------------------------------------------------------------- */
@media ( max-width: 1000px ) {
	.mods,
	.clouds,
	.efeat {
		grid-template-columns: 1fr 1fr;
	}

	.pkg,
	.wrap-wide > .cat {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 680px ) {
	.mods {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 640px ) {
	.efeat {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 620px ) {
	.clouds {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   .card.is-highlight — the mint-washed Light edition card, plattform.html:103.
   The design carries this as inline background/border-color styles on one
   cell (invisible to the class scanner); render.php maps the card repeater's
   `highlight` field to this class on the grid/value family. The design's
   translucent .tag background on the same card is NOT ported — the label
   system (assets/css/base.css:283-300) deliberately flattens all .tag
   backgrounds site-wide with !important.
   -------------------------------------------------------------------------- */
.card.is-highlight {
	background: var( --mint-wash );
	border-color: var( --mint-soft );
}

/* --------------------------------------------------------------------------
   .report .cover has-img treatment — hard rule 12, defined beside the report
   variant that owns the slot. The base .report .cover box (64x80, decorative
   gradient) is ported in assets/css/modules.css (gap G35); render.php only
   emits the node when a real image is set, with the image filling the box
   and the gradient suppressed behind it.
   -------------------------------------------------------------------------- */
.report .cover.has-img {
	background: none;
}

.report .cover.has-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   `feature` variant centring + .nl-form — blogg.html:68-75 (the newsletter
   card, which carries its entire layout as inline styles in the handoff;
   hard rule 2 bans porting them inline). Scoped to the block's narrow .wrap
   container because only the feature variant renders there — a bare
   .card-pad-lg selector would leak onto plattform.html's 2-up wrap-wide
   grid. light.html:66-74's feature card shares these rules.

   Retint per the established dark-only marketing layer: mint-wash/mint-soft
   card surface dropped (modules.css already forces .card transparent with a
   hairline border) and the input's 999px pill squared to radius 0 to match
   `.btn { border-radius: 0 !important }` (assets/css/base.css:586). The
   ≤520px mobile hardening for .nl-form .btn already ships in
   assets/css/modules.css:5775-5779.
   -------------------------------------------------------------------------- */
.wp-block-hdl-kit-card-grid > .wrap .card.card-pad-lg {
	text-align: center;
}

.wp-block-hdl-kit-card-grid > .wrap .card.card-pad-lg .h2 {
	max-width: 18ch;
	margin-inline: auto;
}

.wp-block-hdl-kit-card-grid > .wrap .card.card-pad-lg .lead {
	margin: 14px auto 0;
	max-width: 42ch;
}

.nl-form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 420px;
	margin: 24px auto 0;
}

.nl-form input {
	flex: 1 1 200px;
	min-width: 0;
	border: 1px solid var( --line );
	padding: 13px 18px;
	background: rgba( 255, 255, 255, 0.08 );
	border-radius: 0;
}