/* Link cards — the card that carries a destination.
   Two dresses over one box: a label chip + a text link (Applications by cell
   type) or a 16:10 image + a button (FutureReady). Everything down to the
   "variants" block is shared by both, which is the reason they are one widget
   and not two. */

/* ---------- intro ---------- */
/* No cap on the block: the heading keeps its own measure so it breaks on the
   same word, while a two-column intro needs the full width underneath it. */
.srweb .srw-lc-title {
	max-width: 42rem;
	/* The mockup types both of these headings one step above the pack's default
	   h2 (clamp(1.8rem, 3.4vw, 2.6rem)): 47.2px against 41.6px at a 1440 window,
	   with the tracking pulled in to match. Measured on the approved page, and
	   it is the same figure for the chip grid and for FutureReady, because both
	   are the same heading class there. */
	font-size: clamp(1.85rem, 3.3vw, 2.95rem);
	line-height: 1.06;
	letter-spacing: -.028em;
}
.srweb .srw-lc-intro { margin-bottom: 0; }
.srweb .srw-lc-intro p { font-size: 1.1rem; line-height: 1.6; color: var(--c-text-soft); max-width: 38em; margin: 0 0 var(--sp-md); }
.srweb .srw-lc-intro p:last-child { margin-bottom: 0; }
.srweb .srw-lc-intro--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-lg); align-items: start; }
.srweb .srw-lc-intro--2 p { max-width: none; margin: 0; }
@media (max-width: 760px) {
	.srweb .srw-lc-intro--2 { grid-template-columns: minmax(0, 1fr); gap: var(--sp-xs); }
}

/* ---------- the hairline that opens the section ---------- */
/* The pack's "hairline on top" is a full-bleed solid inset line. In the mockup
   the bands are separated by a rule the width of the container that fades out
   at both ends, so inside this widget the switch draws that one instead. Rule
   and section keep the same control; only the drawing changes. */
.srweb .srw-lc-sec.srw-bg-rule { box-shadow: none; }
.srweb .srw-lc-sec.srw-bg-rule::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	/* Same measure the .wrap inside resolves to, so the rule starts and ends on
	   the copy, whatever the theme sets the container to. */
	width: min(100% - 2 * var(--srw-wrap-pad, 1.25rem), var(--srw-wrap-max, 1200px) - 2 * var(--srw-wrap-pad, 1.25rem));
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(36, 67, 120, .16) 14%, rgba(36, 67, 120, .16) 86%, transparent 100%);
}

/* ---------- the grid ---------- */
/* The gap follows the column count, not the dress: three across need to sit
   tighter or the cards get narrow, two across can breathe. */
.srweb .srw-lc-grid { display: grid; align-items: stretch; }
.srweb .srw-lc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.85rem, 1.6vw, 1.15rem); }
.srweb .srw-lc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-lg); }
/* Only when there is something above it: a bare grid starts at the top. */
.srweb .srw-lc-head + .srw-lc-grid { margin-top: clamp(2rem, 4vw, 3rem); }
/* Nine boxes in one row on a phone cannot be read: the grid narrows in steps. */
@media (max-width: 900px) { .srweb .srw-lc-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .srweb .srw-lc-grid--2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .srweb .srw-lc-grid--3 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- the card ---------- */
.srweb .srw-lc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .7rem;
	margin: 0;
	padding: clamp(1.15rem, 2vw, 1.5rem);
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--r-xl);
	box-shadow: var(--sh-soft);
	transition: transform var(--t-micro) var(--ease-out), box-shadow var(--t-micro) var(--ease-out), border-color var(--t-micro) var(--ease-out);
}
.srweb .srw-lc-card--link { cursor: pointer; }
.srweb .srw-lc-card:hover { transform: translateY(-4px); box-shadow: var(--sh-card-hov); }
/* Keyboard users get the same read as the mouse: the box answers when the link
   inside it takes focus. */
.srweb .srw-lc-card:focus-within { box-shadow: var(--sh-card-hov); border-color: var(--c-glow); }

/* Chip and title stack instead of sharing a row: at a third of the width there
   is no room for a label, a heading and an arrow side by side. */
.srweb .srw-lc-hd { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.srweb .srw-lc-t { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.25; letter-spacing: -.01em; color: var(--c-ink); margin: 0; }

/* The body grows and pushes the link to the foot, so the links of one row all
   land on the same line however long each paragraph runs. */
.srweb .srw-lc-bd { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.srweb .srw-lc-bd p { font-size: .95rem; line-height: 1.6; color: var(--c-text-soft); margin: 0; }

/* ---------- the chip ---------- */
.srweb .srw-lc-tag {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: .72rem;
	letter-spacing: .12em;
	color: var(--c-ink);
	background: var(--c-glow-soft);
	border: 1px solid rgba(34, 211, 238, .4);
	border-radius: var(--r-pill);
	padding: .28em .85em;
	transition: background .25s var(--ease-out), color .25s, border-color .25s;
}
.srweb .srw-lc-card:hover .srw-lc-tag { background: var(--c-glow); color: #fff; border-color: var(--c-glow); }

/* ---------- the picture ---------- */
.srweb .srw-lc-img,
.srweb .srw-lc-ph { width: 100%; margin: 0 0 var(--sp-md); }
.srweb .srw-lc-img {
	aspect-ratio: 16 / 10;
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	background: #fff;
	overflow: hidden;
	display: grid;
	grid-template-rows: 1fr;
	place-items: stretch;
}
/* "contain", not "cover": these are whole products photographed, and cropping a
   border off one to fill the box is exactly what cannot be done.

   min-height:0 is what keeps the well at 16/10. A grid item may not shrink below
   its content by default, so a square picture pushed the well square and left the
   two cards in a row with wells of different heights. */
.srweb .srw-lc-img img {
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: contain;
	display: block;
}

/* ---------- the link ---------- */
.srweb .srw-lc-go,
.srweb .srw-lc-btn { margin-top: auto; }
.srweb .srw-lc-go {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	min-height: 24px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .92rem;
	color: var(--c-ink);
	border-bottom: 0;
	text-decoration: none;
}
/* Every state, not only the resting one. The theme and the Elementor kit paint
   a:hover and a:focus with their own cyan from a selector as specific as ours,
   so a link that names its colour once loses the label the moment you reach it
   with the keyboard — the same failure base.css already documents for the
   buttons. */
.srweb a.srw-lc-go:hover,
.srweb a.srw-lc-go:focus,
.srweb a.srw-lc-go:active { color: var(--c-accent); border-bottom: 0; }
/* The label of a text link wraps like any other sentence — it is a line of
   copy, not a button. */
.srweb .srw-lc-go .btn-lbl { display: inline; white-space: normal; }
/* A card whose link has no destination is not a link, so it does not pretend to
   be one: no pointer, no arrow travel, no stretched hit area. */
.srweb span.srw-lc-go { color: var(--c-text-soft); }

/* The whole card is the link, not just its last line: the anchor spreads over
   the box. One destination, one element to focus, and the text is not repeated
   for a screen reader. Only real anchors get it. */
.srweb a.srw-lc-go::after,
.srweb a.srw-lc-btn::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-xl); }
.srweb .srw-lc-card:hover .srw-lc-go .arr { transform: translateX(4px); }

/* ---------- variants: what the two dresses do differently ---------- */
/* An image card carries more inside, so it is padded wider and its title runs a
   step larger. */
.srweb .srw-lc-card--img { padding: clamp(1.3rem, 2.4vw, 1.8rem); }
.srweb .srw-lc-card--img .srw-lc-t { font-size: 1.12rem; line-height: 1.2; }

/* The button answers to the card, not only to itself: the pointer is over the
   box the whole time, so the button has to look pressed-into from anywhere. */
.srweb .srw-lc-card:hover .srw-lc-btn { background: var(--c-accent-hov); box-shadow: 0 14px 32px rgba(249, 115, 22, .36); }
.srweb .srw-lc-card:hover .srw-lc-btn .arr { transform: translateX(4px); }
.srweb .srw-lc-card--img:hover { border-color: rgba(249, 115, 22, .38); }
/* The pack's buttons hold their label on one line, which is right for a CTA in
   a full-width band. Inside a card on a phone "Explore G-Rex for Robotics"
   would then run past the edge, so here it is allowed to break. */
.srweb .srw-lc-btn { text-align: left; }
.srweb .srw-lc-btn .btn-lbl { white-space: normal; }

/* ---------- variants: the chip dress ---------- */
/* A picture card is a product and reads as a headline: display face, ink, tight
   tracking. A chip card is an entry in a taxonomy and the mockup types it as
   copy — the body face, no tracking, the text colour rather than ink — so the
   nine of them read as a list and not as nine headlines. Measured on the
   approved page: Mulish 16.8/21, #33405a, tracking normal. */
.srweb .srw-lc-card--tag .srw-lc-t {
	font-family: var(--font-body);
	letter-spacing: normal;
	color: var(--c-text);
}
.srweb .srw-lc-card--tag .srw-lc-bd p { line-height: 1.62; }

/* The two lines of this card that never state a line-height of their own — the
   chip and the link — and so take whatever they inherit. The mockup's page sets
   1.55 on the body; the pack normalises to 1.5 (tokens.css sets it on `.srweb`,
   and again on anything whose class reads like a chip through
   `:where([class*="-tag"], …)`, which `srw-lc-tag` matches). Measured against
   the approved page: chip 17.28px where it wants 17.856, link 22.08 where it
   wants 22.816, and the card came out 323.92 tall against 325.23.
   Restated here as a ratio, not a pixel value, so the normalisation the pack is
   protecting against — a destination theme handing down `1.41667em` — still
   cannot reach these two. Scoped to the chip dress, which is the Applications
   grid: FutureReady renders no chips and its link is a button, so neither
   selector exists over there. */
.srweb .srw-lc-card--tag .srw-lc-tag,
.srweb .srw-lc-card--tag .srw-lc-go { line-height: 1.55; }

/* The link line of a chip card is ink, at rest and on the way through: the
   mockup gives it no colour change, only the arrow travels. The pack paints a
   link that leads nowhere in soft grey, which is right where the label is the
   only thing on the line, but here it sits under a paragraph of that same grey
   and disappears into it. */
.srweb .srw-lc-card--tag .srw-lc-go { color: var(--c-ink); padding-block: 2px; }
.srweb .srw-lc-card--tag a.srw-lc-go:hover,
.srweb .srw-lc-card--tag a.srw-lc-go:focus,
.srweb .srw-lc-card--tag a.srw-lc-go:active { color: var(--c-ink); }

/* ---------- reduced motion ---------- */
/* tokens.css cuts every transition down to .001ms for this reader, which is not
   the same as holding still: the lift and the arrow still land, only instantly.
   Here they are dropped, as the mockup does. */
@media (prefers-reduced-motion: reduce) {
	.srweb .srw-lc-card:hover { transform: none; }
	.srweb .srw-lc-card:hover .arr { transform: none; }
}

/* ---------- FutureReady: the picture dress, measured against the mockup ------
   Everything below is scoped to the card that carries an image (media = image),
   which is the second instance of this widget. The chip grid never sees it. */

/* The 16px under the picture. It is declared up in "the picture", but Elementor
   resets every figure inside a widget with
   `.elementor .elementor-widget:not(…):not(…) figure { margin:0 }`, which counts
   four classes and a type — one step above the two-class selector above, so the
   reset won. Measured on the page: 11px of air between picture and title where
   the mockup measures 27. The class is repeated to buy the specificity back
   (five classes and a type) instead of reaching for !important. The placeholder
   is a div, which that reset never touches, so it keeps its margin as it is. */
.srweb .srw-lc-grid .srw-lc-card--img figure.srw-lc-img.srw-lc-img { margin-bottom: var(--sp-md); }

/* The picture card types a step below the chip card — .93rem against .95rem —
   and leaves the title on the face's own tracking; the tighter -.01em belongs to
   the chip card, where the titles run to three lines. */
.srweb .srw-lc-card--img .srw-lc-bd p { font-size: .93rem; }
.srweb .srw-lc-card--img .srw-lc-t { letter-spacing: normal; }
/* Same air between paragraph and button as between picture, title and body:
   the mockup keeps one rhythm inside this card (11px), not two. */
.srweb .srw-lc-card--img .srw-lc-bd { gap: .7rem; }

/* The card button is the pack's button one size down, as the mockup's own
   "small button" modifier sets it: .88rem on .7em/1.25em against 1rem on
   .85em/1.6em. */
/* The line-height comes with it: the pack's .btn leaves it to inherit, which in
   a card means the body's 1.7 and a button 43px tall where the mockup measures
   38.6. */
.srweb .srw-lc-btn { font-size: .88rem; padding: .7em 1.25em; line-height: 1.2; }
/* And the label with it. The pack's catch-all for small type
   (`:where([class*="btn"], …) { line-height: 1.5 }`) also catches `.btn-lbl`,
   which left the label's line box 21px inside a 17px button and made the box
   43px tall against the mockup's 38.6. Two classes beat that :where(), which
   carries none. */
.srweb .srw-lc-btn .btn-lbl { line-height: 1.2; }
/* A button with no destination opens the specialist modal, and it carries the
   whole card exactly as the anchor does: one target, the size of the box. */
.srweb button.srw-lc-btn::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-xl); }

/* ---------- FutureReady, second pass: what the first one left on the table ---
   Same rule as above: every selector here needs `--img` or `.srw-lc-btn`, both
   of which only exist in the picture dress, so the Applications grid cannot be
   reached from any of them. */

/* The band's own vertical air. The shared scale tops out at "Large" (3.8rem =
   60.8px) and the approved layout asks for 64px over the rule and 86.4px under
   the cards — 25.6px short at the foot, which is the gap onto the next band.
   The two expressions are the mockup's own, copied whole so the band narrows
   with the window exactly as it does there (its top is deliberately shorter
   than a standalone section's: this band shares a run with the one above it).
   Stated on the section, so it supersedes the srw-pt / srw-pb steps for this
   dress: if the pack ever grows a step that lands on these numbers, delete this
   rule and the section control takes over again. */
.srweb .srw-lc-sec.srw-lc-sec--img {
	padding-top: clamp(2.6rem, 5vw, 4rem);
	padding-bottom: clamp(3.4rem, 7vw, 5.4rem);
}

/* The label over the heading. tokens.css normalises anything that reads like a
   chip to line-height 1.5 — `.srweb.srweb :where([class*="eyebrow"], …)` — so
   the label came out 19.2px tall where the approved page measures 19.84 (1.55,
   the ratio its body runs at). Two classes and a type beat that :where(), which
   carries none of its own. */
.srweb .srw-lc-sec--img .eyebrow { line-height: 1.55; }

/* The card's edge. The mockup does not paint these boxes with the shared border
   token (#e5eaf1, which it keeps for the picture frame inside — measured, and
   the frame already matches): the cards get their own #e3ebf5, a touch cooler.
   Frame and card sit one inside the other, so the difference is the reason you
   can tell them apart. */
.srweb .srw-lc-card--img { border-color: #e3ebf5; }

/* The button's corner. tokens.css sets --r-btn to 12px and the approved page
   draws 14px. Only this button is restated, not the token: every other button
   on the site answers to the token and is not this module's to move. */
.srweb .srw-lc-btn { border-radius: 14px; }

/* The lift on hover, and the time it takes. The shared card rises 4px in
   var(--t-micro); the mockup's picture card rises 5 over .3s, which is the
   slower, heavier travel a card this size wants. */
.srweb .srw-lc-card--img { transition-duration: .3s; }
.srweb .srw-lc-card--img:hover { transform: translateY(-5px); }
@media (prefers-reduced-motion: reduce) {
	.srweb .srw-lc-card--img:hover { transform: none; }
}


/* The faint tint the mockup used, kept as an option: a shot that is not cut out
   on white needs an edge to sit against. Only the white well is the default. */
.srweb .srw-lc-card--tint .srw-lc-img { background: linear-gradient(160deg, #f7fbfe, #eef4fb); }


/* ---------- the seam ----------
   The approved layout draws a hairline on the boundary with the block above:
   as wide as the text column, fading out at both ends. It is not the shared
   "Hairline on top" of the Layout tab, which runs the full width of the window
   and is solid. Living inside .wrap is what gives it the column's exact width
   at every breakpoint; it is then lifted back through the section's own top
   padding so it lands on the boundary instead of hanging above the block. */
.srweb .srw-lc-seam {
	display: block;
	position: relative;
	height: 1px;
	/* Ink at 16%: the same wash the approved layout uses over a light page. */
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(36, 67, 120, .16) 14%,
		rgba(36, 67, 120, .16) 86%,
		transparent 100%);
	/* Its own pixel is given back so the block below does not shift down. */
	margin-bottom: -1px;
}


/* ---------- the section's own breathing room ----------
   The approved layout gives every section «padding: clamp(3.4rem, 7vw, 5.4rem)»
   of its own — 86px at a desktop width — and some of them open a little tighter,
   at «clamp(2.6rem, 5vw, 4rem)» = 64px. The Layout tab's spacing steps top out
   at 40px, so a section built only from those reads visibly more cramped than
   the design. The padding lives here, and those steps are then set to "None"
   in the page content so the two do not add up. */
.srweb .srw-lc-sec { padding-block: clamp(3.4rem, 7vw, 5.4rem); }
.srweb .srw-lc-sec--tight { padding-top: clamp(2.6rem, 5vw, 4rem); }


/* The seam sits inside .wrap, which the section's top padding has already
   pushed down, so it has to climb back exactly that far to land on the
   boundary between the blocks instead of just above the eyebrow. The travel
   is read from a custom property the padding sets, so the two can never
   drift apart: change one and the other follows. */
.srweb .srw-lc-sec { --srw-seam-lift: clamp(3.4rem, 7vw, 5.4rem); }
.srweb .srw-lc-sec--tight { --srw-seam-lift: clamp(2.6rem, 5vw, 4rem); }

/* This seam sits in the flow inside .wrap, which the section's top padding
   has already pushed down, so it climbs back exactly that far to land on the
   boundary. Read from the same custom property the padding sets, so the two
   cannot drift apart. Two of the six seams are anchored instead and need no
   travel at all — check which before touching this. */
.srweb .srw-lc-seam { top: calc(-1 * var(--srw-seam-lift, 0px)); }