/* =============================================================================
   TW Library — Content card (ampeco/tw-card) — Figma 11007:8633
   -----------------------------------------------------------------------------
   Self-contained, hand-authored component styles SCOPED under `.tw-card`
   (track 2 — see README). Pixel-matched to the Figma resource card: a
   translucent card (white 5% fill, white 30% hairline) designed to sit on a
   DARK section — media (≈2498:1312) → title → excerpt → "Read more" + chevron.
   The card fills its container so three drop into a Kadence / core columns row
   for a 3-up grid; the dark section band + grid are composed on the PAGE, not in
   this block (same split as tw-testimonial / tw-myth-cards). Values are the
   literal Figma tokens so the subtree renders identically regardless of host
   theme. When no image is set, the media area shows the brand-secondary colour
   placeholder (#cee5fd, Figma's empty image frame). Lexend is the body font.
   ============================================================================= */
.tw-card {
  font-family: "Lexend", system-ui, -apple-system, sans-serif;
  height: 100%;
}
.tw-card *,
.tw-card *::before,
.tw-card *::after {
  box-sizing: border-box;
}

.tw-card__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.3);  /* Black & White / White 30% */
  border-radius: 12px;                          /* NDS radius --m */
  background: rgba(255, 255, 255, 0.05);        /* Black & White / White 5% */
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Linked card: subtle lift + brighter hairline on hover/focus. */
.tw-card--linked .tw-card__inner:hover,
.tw-card--linked .tw-card__inner:focus-visible {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
  transform: translateY(-4px);
}
.tw-card--linked .tw-card__inner:focus-visible {
  outline: 2px solid #519efc;
  outline-offset: 2px;
}

.tw-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 2498 / 1312;            /* Figma image frame ratio */
  overflow: hidden;
  background: #cee5fd;                   /* Background / Brand / Secondary — placeholder */
}
.tw-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.tw-card--linked .tw-card__inner:hover .tw-card__media img {
  transform: scale(1.04);
}

.tw-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 24px;                            /* --xxl */
  padding: 24px;                        /* --xxl */
}

.tw-card__title {
  margin: 0;
  font-weight: 500;                     /* Desktop / H5 */
  font-size: 22px;
  line-height: 1.4;
  color: #f5faff;                       /* Text / Default / Default */
}

.tw-card__excerpt {
  margin: 0;
  font-weight: 300;                     /* Desktop / Body Medium */
  font-size: 16px;
  line-height: 1.4;
  color: #cee5fd;                       /* Text / Default / Tertiary */
  /* Keep a row of cards even (Figma shows ~3 lines). */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tw-card__more {
  display: inline-flex;
  align-items: center;
  gap: 12px;                            /* --m */
  margin-top: auto;                     /* pin to the bottom of the card */
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  color: #f5faff;                       /* Text / Default / Default */
}
.tw-card__arrow {
  flex: 0 0 auto;
  transition: transform 0.2s ease;
}
.tw-card--linked .tw-card__inner:hover .tw-card__arrow {
  transform: translateX(4px);
}

@media (max-width: 639.98px) {
  .tw-card__body { padding: 20px; gap: 20px; }
  .tw-card__title { font-size: 20px; }
}

/* ── Flat (light, icon) style — `is-style-flat` ───────────────────────────────
   A light, icon-led card for LIGHT sections (e.g. the careers Values "What Drives
   Us" grid). Re-skins the dark resource-card defaults: transparent fill + hairline
   that fills white on hover, a 48px brand icon at the top, dark title, muted body.
   DS tokens (--c-*) with hex fallbacks so it holds up even where ampeco-base isn't
   enqueued. Mirrors the design's `.card` (#values). Opt in by selecting the style
   (adds .is-style-flat) and setting the `icon` attribute. */
.tw-card.is-style-flat .tw-card__inner {
  border: 1px solid var(--c-line, #a7b1c1);
  border-radius: 12px;
  background: transparent;
  padding: 32px;                 /* --spacing-4xl */
  overflow: visible;
  min-height: 300px;
}
.tw-card.is-style-flat .tw-card__inner:hover {
  background: var(--c-surface-card, #fff);
  border-color: var(--c-line, #a7b1c1);
  box-shadow: var(--c-shadow-1, 0 10px 25px rgba(50, 50, 93, 0.1));
}
.tw-card.is-style-flat .tw-card__body {
  padding: 0;
  gap: 24px;                     /* --spacing-xxl */
}
.tw-card.is-style-flat .tw-card__icon {
  width: 48px;
  height: 48px;
  color: var(--c-icon-brand, #0e60c3);
  flex: 0 0 auto;
}
.tw-card.is-style-flat .tw-card__title {
  color: var(--c-ink, #1a1e22);
  font-size: 24px;
}
.tw-card.is-style-flat .tw-card__excerpt {
  color: var(--c-ink-2, #5b6676);
  -webkit-line-clamp: unset;     /* let the value-card copy run full length */
}

/* ── Resource (light, image-led) style — `is-style-resource` ──────────────────
   The About us "Resources" grid (2026-08-10-about-us.dc.html:790): a white,
   bordered, 20px-radius card whose image bleeds to the card's own edges above a
   title / paragraph / arrow-link stack.

   Neither existing look fits. The DEFAULT card is built for a DARK band (white
   5% fill, white 30% hairline, light type) and `is-style-flat` deletes the card
   chrome altogether for the icon-led values grid. This one keeps the chrome and
   makes it light — which is exactly what a block style is for, so the section
   needs no new block.

   THE MEDIA MUST CANCEL THE PADDING, NOT AVOID IT. The export draws the image
   full-bleed with `margin:-32px -32px 24px` inside a 32px-padded card; the
   inner's own `overflow:hidden` + radius then clips it. Reproduced verbatim.
   The default `aspect-ratio: 2498/1312` has to be switched OFF explicitly —
   left on, it beats the fixed height and the image comes out ~204px tall.

   #E3EAF2, #0E1828 and #5A6675 are the approved bespoke values already declared
   by tw-membership-cards (tasks/about-2026/NOTES.md); everything else is a DS
   token with a hex fallback, as above. */
.tw-card.is-style-resource {
  --tw-card-res-line: #e3eaf2;   /* BESPOKE — the card border */
  --tw-card-res-title: #0e1828;  /* BESPOKE — --p-midnight-800, no semantic slot */
  --tw-card-res-body: #5a6675;   /* BESPOKE — not in the 124-colour palette */
  --tw-card-res-pad: 32px;
}
.tw-card.is-style-resource .tw-card__inner {
  border: 1px solid var(--tw-card-res-line);
  border-radius: 20px;
  background: var(--c-surface-card, #fff);
  padding: var(--tw-card-res-pad);
  min-height: 220px;
  overflow: hidden;
}
.tw-card--linked.is-style-resource .tw-card__inner:hover,
.tw-card--linked.is-style-resource .tw-card__inner:focus-visible {
  border-color: var(--color-text-brand, #0e60c3);
  background: var(--c-surface-card, #fff);
  box-shadow: var(--c-shadow-1, 0 10px 25px rgba(50, 50, 93, 0.1));
}
.tw-card.is-style-resource .tw-card__media {
  /* Cancel the card's padding so the image meets its edges.
     `width: auto` is NOT cosmetic. The default media carries `width: 100%`,
     and a percentage resolves against the CONTENT box — so the negative
     margins slide the image left without making it any wider, and it stops
     64px short of the card's right edge. Measured: media 121..439 inside a
     card 120..504. Only `auto` lets the column-flex stretch plus the negative
     margins reach both edges. */
  width: auto;
  margin: calc(var(--tw-card-res-pad) * -1) calc(var(--tw-card-res-pad) * -1) 24px;
  height: 170px;
  aspect-ratio: auto;            /* the 2498/1312 default would win otherwise */
  border-radius: 20px 20px 0 0;
}
.tw-card.is-style-resource .tw-card__body {
  padding: 0;
  gap: 0;                        /* the export spaces these individually */
}
.tw-card.is-style-resource .tw-card__title {
  margin-bottom: 8px;
  font-family: var(--font-display, "Manrope", sans-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
  color: var(--tw-card-res-title);
}
.tw-card.is-style-resource .tw-card__excerpt {
  flex: 1 1 auto;                /* pushes the link down, as the export's p does */
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tw-card-res-body);
  -webkit-line-clamp: unset;     /* the resource copy runs full length */
}
.tw-card.is-style-resource .tw-card__more {
  margin-top: 22px;              /* overrides the default `auto` pin */
  gap: 6px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: var(--color-text-brand, #0e60c3);
}

@media (max-width: 639.98px) {
  .tw-card.is-style-resource {
    --tw-card-res-pad: 24px;
  }
  .tw-card.is-style-resource .tw-card__media { height: 150px; }
  .tw-card.is-style-resource .tw-card__title { font-size: 20px; }
}

/* ── Outline (light, icon) style — `is-style-outline` ──────────────────────────
   Case studies (Powy "Why AMPECO"): a bordered card on a light section, a 24px
   brand glyph in a 48px slot, then title and text; cards in a row share a 300px
   minimum height, dropped on phones. Differs from `is-style-flat` on purpose —
   16px radius, 22px title, darker body copy, and no hover fill — so flat keeps
   its careers look. Preset variables: they print on every page, the DS ones only
   where a block loads ampeco-base. */
.tw-card.is-style-outline .tw-card__inner {
	min-height: 300px;
	padding: var(--wp--preset--spacing--4-xl, 32px);
	overflow: visible;
	border: 1px solid var(--wp--preset--color--border-default-default-light, #A7B1C1);
	border-radius: var(--wp--preset--border-radius--l, 16px);
	background: transparent;
}
.tw-card.is-style-outline .tw-card__body { padding: 0; gap: 0; }
/* The icon helper's span is the box: the theme sizes `.nds-icon svg` to 100% of it
   with !important. A 24px box with 12px above and below is the design's 48px slot. */
.tw-card.is-style-outline .tw-card__icon {
	display: block;
	width: 24px;
	height: 24px;
	margin: var(--wp--preset--spacing--m, 12px) 0;
	flex: 0 0 auto;
	color: var(--wp--preset--color--icon-brand-default-light, #0E60C3);
}
.tw-card.is-style-outline .tw-card__title {
	margin: var(--wp--preset--spacing--xxl, 24px) 0 0;
	font-size: var(--wp--preset--font-size--h-5, 22px);
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--preset--color--midnight-800, #0E1828);
}
.tw-card.is-style-outline .tw-card__excerpt {
	display: block;
	margin: var(--wp--preset--spacing--l, 16px) 0 0;
	overflow: visible;
	-webkit-line-clamp: unset;
	font-size: var(--wp--preset--font-size--body-medium, 16px);
	line-height: 1.6;
	color: var(--wp--preset--color--text-default-tertiary-light, #233D63);
}
@media (max-width: 640px) {
	.tw-card.is-style-outline .tw-card__inner { min-height: 0; }
}