/*
  Hydrogen Value Chain - scoped for Magnolia.

  Generated by tools/build.py from the design package; do not hand-edit.

  Every selector is prefixed with .value-chain and every custom property is
  namespaced --hvc-*. The package styles html, body, h1 and button globally
  and defines --line/--soft/--max/--text/--muted, all of which would
  otherwise restyle or collide with the host ANP page this block sits in.
*/

.value-chain {
  --hvc-anp-red: #e30613;
  --hvc-text: #363a3e;
  --hvc-muted: #666b70;
  --hvc-line: #d9dcdf;
  --hvc-soft: #eef0f1;
  --hvc-white: #ffffff;
  --hvc-max: 1180px;
}

.value-chain, .value-chain * { box-sizing: border-box; }
.value-chain { font-family: Arial, Helvetica, sans-serif; color: var(--hvc-text); background: var(--hvc-white); }
.value-chain { margin: 0; background: var(--hvc-white); }
.value-chain button { font: inherit; }

.value-chain {
  padding: 72px 24px 86px;
  background: linear-gradient(180deg, #fff 0, #fff 235px, #f1f2f3 235px, #f1f2f3 100%);
}

.value-chain__inner { max-width: var(--hvc-max); margin: 0 auto; }
.value-chain__intro { max-width: 820px; margin-bottom: 38px; }
.value-chain__eyebrow { margin: 0 0 11px; color: var(--hvc-anp-red); font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.value-chain h1 { margin: 0; color: #44494d; font-size: clamp(38px, 4.6vw, 62px); font-weight: 300; line-height: 1.05; letter-spacing: -.035em; }
.value-chain__lead { max-width: 720px; margin: 19px 0 0; color: #5f6468; font-size: 17px; line-height: 1.6; }

.value-chain__guide {
  display: flex;
  max-width: 780px;
  margin: 0 auto 22px;
  align-items: center;
  color: var(--hvc-anp-red);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}

.value-chain__guide i { height: 1px; flex: 1; margin: 0 9px; background: #cfd3d6; }

.value-chain .card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.value-chain .flip-card { min-width: 0; height: 472px; perspective: 1500px; }
.value-chain .flip-card__button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.value-chain .flip-card__button:focus-visible { outline: 3px solid var(--hvc-anp-red); outline-offset: 4px; }

.value-chain .flip-card__inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .68s cubic-bezier(.2, .72, .24, 1);
}

.value-chain .flip-card.is-flipped .flip-card__inner { transform: rotateY(180deg); }

.value-chain .flip-card__face {
  position: absolute;
  inset: 0;
  display: flex;
  overflow: hidden;
  padding: 28px 28px 26px;
  flex-direction: column;
  border: 1px solid var(--hvc-line);
  background: var(--hvc-white);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 12px 34px rgba(35, 39, 42, .07);
}

.value-chain .flip-card__front { border-top: 3px solid transparent; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.value-chain .flip-card__button:hover .flip-card__front { border-top-color: var(--hvc-anp-red); transform: translateY(-4px); box-shadow: 0 18px 42px rgba(35, 39, 42, .12); }
.value-chain .flip-card__back { transform: rotateY(180deg); border-top: 4px solid var(--hvc-anp-red); background: #3c4145; color: var(--hvc-white); }

.value-chain .flip-card__topline,
.value-chain .flip-card__back-heading { display: flex; align-items: center; gap: 12px; }
.value-chain .flip-card__number { color: var(--hvc-anp-red); font-size: 13px; font-weight: 700; letter-spacing: .1em; }
.value-chain .flip-card__category { color: #686d71; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

.value-chain .flip-card__icon { display: flex; height: 130px; margin: 18px 0 15px; align-items: center; justify-content: center; background: #f6f6f6; }
.value-chain .flip-card__icon svg { width: 120px; height: 80px; fill: none; stroke: #666c70; stroke-width: 2.15; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s ease, transform .25s ease; }
.value-chain .flip-card__button:hover .flip-card__icon svg { stroke: var(--hvc-anp-red); transform: scale(1.04); }

.value-chain .flip-card__title { color: #34393d; font-size: 24px; font-weight: 400; line-height: 1.2; }
.value-chain .flip-card__factors { display: block; margin-top: 15px; color: var(--hvc-muted); font-size: 14px; line-height: 1.55; }
.value-chain .flip-card__action { display: inline-block; margin-top: auto; padding-top: 18px; color: var(--hvc-anp-red); font-size: 13px; font-weight: 700; }

.value-chain .flip-card__back-heading { color: #f1f2f3; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.value-chain .flip-card__back-title { display: block; margin: 24px 0 20px; color: var(--hvc-white); font-size: 25px; font-weight: 400; line-height: 1.22; }
.value-chain .flip-card__copy { display: block; margin-bottom: 14px; color: #e4e6e7; font-size: 14px; line-height: 1.58; }
.value-chain .flip-card__backlink { display: inline-block; margin-top: auto; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 13px; font-weight: 700; }

.value-chain .capability-band {
  display: grid;
  grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr);
  gap: 40px;
  margin-top: 20px;
  padding: 28px 32px;
  border-left: 4px solid var(--hvc-anp-red);
  background: var(--hvc-white);
  box-shadow: 0 10px 30px rgba(35,39,42,.06);
}

.value-chain .capability-band__heading { color: #383d41; font-size: 20px; font-weight: 700; line-height: 1.3; }
.value-chain .capability-band p { margin: 0; color: #5c6165; font-size: 15px; line-height: 1.65; }

@media (max-width: 960px) {
  .value-chain { padding: 58px 20px 72px; }
  .value-chain .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .value-chain .flip-card { height: 465px; }
}

@media (max-width: 640px) {
  .value-chain { padding: 48px 15px 60px; background: linear-gradient(180deg, #fff 0, #fff 210px, #f1f2f3 210px, #f1f2f3 100%); }
  .value-chain h1 { font-size: 39px; }
  .value-chain__lead { font-size: 16px; }
  .value-chain__guide { display: none; }
  .value-chain .card-grid { grid-template-columns: 1fr; gap: 14px; }
  .value-chain .flip-card { height: 460px; }
  .value-chain .flip-card__face { padding: 24px 22px; }
  .value-chain .flip-card__icon { height: 112px; }
  .value-chain .flip-card__title { font-size: 22px; }
  .value-chain .flip-card__back-title { font-size: 23px; margin-top: 20px; }
  .value-chain .capability-band { grid-template-columns: 1fr; gap: 10px; padding: 24px; }
}

@media (max-width: 380px) {
  .value-chain .flip-card { height: 492px; }
  .value-chain .flip-card__copy { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .value-chain, .value-chain * { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Host-page defence: neutralise element-level styling from the page
   this block is dropped into (ANP styles bare <header> as fixed site
   chrome, which would pin our intro to the top of the viewport). */
.value-chain header,
.value-chain footer,
.value-chain nav,
.value-chain main {
  position: static;
  top: auto;
  left: auto;
  width: auto;
  min-height: 0;
  z-index: auto;
  background: none;
}

/* Back-face refinements.
   The stage number uses the brand red on both faces, but the back is
   dark (#3c4145) and #e30613 on it is close to unreadable. A lighter
   tint keeps the brand cue and measures 4.7:1, clearing 4.5:1 for
   13px bold text.
   The back link was an inline-block, so it did not align with the copy
   above it; as a flex row it sits on the same left edge as everything
   else in the card. */
.value-chain .flip-card__back .flip-card__number {
  color: #ff8f96;
}

.value-chain .flip-card__backlink {
  display: flex;
  align-items: center;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  transition: color .2s ease;
}

.value-chain .flip-card__button:hover .flip-card__backlink {
  color: #ffb0b5;
}

/* A slightly nearer vanishing point gives the flip visible depth
   instead of reading as a flat horizontal squash. */
.value-chain .flip-card {
  perspective: 1150px;
}

/* Align with the host page.
   ANP lays every component out in .container: 10px side padding and a
   STEPPED max-width (540/768/960/1170). The package used a fluid
   1180px with 24px section padding, so the block sat ~15px left of the
   header and other page content, and drifted further at intermediate
   widths. Mirroring ANP exactly keeps the left edge on the logo. */
.value-chain {
  padding-left: 0;
  padding-right: 0;
}

.value-chain__inner {
  width: 100%;
  /* ANP .container is a single max-width:1170px with NO padding and
     no stepped breakpoints - below 1170 it simply fills the width.
     An earlier version copied Bootstrap 3 steps (540/768/960/1170),
     which matched only at >=1200: at 1100 ANP ran full width while
     this block capped itself at 960 and sat visibly narrower. */
  max-width: 1170px;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
}

/* Below the container width ANP indents its own copy by the column
   padding, so match that rather than running into the screen edge. */
@media (max-width: 991px) {
  .value-chain__inner { padding-left: 10px; padding-right: 10px; }
}

/* Alignment follows the PAGE, not the header bar.

   An earlier version overrode the stepped widths above with the white
   header bar's geometry - max(10px, calc((100% - 1396px) / 2 + 10px)).
   ANP does not align those two itself: the header is fixed at left:10px
   and centres its own 1376px bar, while page content uses .container
   (540/768/960/1170). The two even cross over between 1280 and 1440.

   That was right while the block was the whole page. It is wrong now
   that editors drop it beside ordinary components: at >=992px it made
   the block wider than every neighbour and started it further left.
   Reported from a real page. The stepped widths above already mirror
   .container exactly, so the override simply comes off. */
/* Grey ground covers the cards when there is no intro.

   .value-chain paints a hard-stop gradient: white to 235px, grey
   after. That 235px is the height of the eyebrow + h1 + lead. The
   component no longer renders those, so the band left the first row
   of cards sitting on white - reported from a real page. Solid grey
   instead. The standalone page keeps the gradient: it still has the
   intro, and there the white top is the point.

   Declared after the mobile @media that repeats the gradient at
   210px, so it wins there too on equal specificity. */
.value-chain--embedded {
  background: #f1f2f3;
  padding-top: 56px;
}

@media (max-width: 640px) {
  .value-chain--embedded { padding-top: 36px; }
}

/* The stage guide was capped at 780px and centred, so it floated
   narrower than the grid it labels. It marks the six cards, so it
   should span exactly the same width. */
.value-chain__guide {
  max-width: none;
}