/* ---------------------------------------------------------------------------
   Shared components for Industrial Automation & Connectivity:
   the related-products block and the section breadcrumb.

   PART 1 - RELATED PRODUCTS

   The visual language is the one already used by the Pico product pages
   (.pc-similar-v2 in css/modules/product-catalogue-v2.css). That stylesheet is
   only linked on three pages in this section, and it carries a great many
   other page-level overrides, so pulling it in everywhere would restyle
   unrelated parts of these pages. The component is therefore reproduced here
   under its own .arp- prefix: same design, no dependency, no collision with
   the global .sim-* slider rules.

   Every colour below is measured against WCAG AA on the surface it sits on:
   name #152a40 14.2:1, copy #5b7085 5.1:1, label #5f7488 4.8:1,
   action #c8420f 4.95:1.
   --------------------------------------------------------------------------- */

.arp-section {
  padding: clamp(38px, 4vw, 56px) 0;
  border-top: 1px solid #e3e9f0;
  background: #fff;
}

.arp-wrap {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}

.arp-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}

.arp-eyebrow {
  margin: 0 0 8px;
  color: #c8420f !important;
  font: 800 11px/1.25 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.arp-title {
  margin: 0 !important;
  color: #10253d !important;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.arp-brand {
  flex: 0 0 auto;
  color: #a8350b !important;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.arp-brand:hover { color: #c8420f !important; text-decoration: underline; }

.arp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.arp-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dfe5eb;
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease,
              background-color .18s ease;
}
.arp-card:is(:hover, :focus-visible, :focus-within) {
  transform: translateY(-3px);
  border-color: rgba(230, 74, 25, .62);
  background: #fffaf7;
  box-shadow: 0 16px 34px rgba(16, 37, 61, .11);
  outline: none;
}

.arp-media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  margin: 28px 28px 0;
  padding: 16px;
  overflow: hidden;
  border-radius: 5px;
  background: #f3f5f7;
}
.arp-media img {
  width: 86%;
  height: 86%;
  object-fit: contain;
}
.arp-media--empty::after {
  content: "Product image unavailable";
  color: #62778b;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.arp-body { flex: 1 1 auto; padding: 18px 28px 10px; }

.arp-cat {
  display: block;
  margin: 0 0 7px;
  color: #5f7488 !important;
  font: 700 9px/1.25 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.arp-name {
  display: block;
  margin: 0;
  color: #152a40 !important;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
}

.arp-desc {
  display: -webkit-box;
  margin: 8px 0 0 !important;
  overflow: hidden;
  color: #5b7085 !important;
  font-size: 13px;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.arp-foot { padding: 0 28px 26px; }

.arp-go {
  color: #c8420f !important;
  font-size: 13px;
  font-weight: 800;
}
.arp-go::after { content: " \2192"; }

@media (max-width: 1024px) {
  .arp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .arp-wrap { width: calc(100% - 32px); }
  .arp-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .arp-grid { grid-template-columns: 1fr; }
  .arp-media { margin: 20px 20px 0; }
  .arp-body { padding-inline: 20px; }
  .arp-foot { padding: 0 20px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .arp-card { transition: none; }
  .arp-card:is(:hover, :focus-visible, :focus-within) { transform: none; }
}


/* ===========================================================================
   PART 3 - INDUSTRY APPLICATIONS

   Section 16 asks the technology-area pages to link out to solution and
   industry pages. Only two pages on the site are a genuine match for
   automation content (industrial-manufacturing and the industrial IoT
   gateway/dashboard solution); the other industry pages are test-and-
   measurement subjects, so they are deliberately not linked from here.
   =========================================================================== */

.apx-industry {
  padding: clamp(34px, 3.5vw, 48px) 0;
  border-top: 1px solid #e3e9f0;
  background: #f7f9fc;
}
.apx-industry__wrap { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.apx-industry h2 {
  margin: 0 0 20px !important;
  color: #10253d !important;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.12;
  letter-spacing: -.03em;
}
.apx-industry__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.apx-industry__list li { margin: 0; }
.apx-industry__list a {
  display: block;
  height: 100%;
  padding: 18px 20px;
  border: 1px solid #dfe5eb;
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.apx-industry__list a:is(:hover, :focus-visible) {
  transform: translateY(-2px);
  border-color: rgba(230, 74, 25, .55);
  box-shadow: 0 12px 26px rgba(16, 37, 61, .09);
  outline: none;
}
.apx-industry__list b {
  display: block;
  margin-bottom: 5px;
  color: #10253d !important;
  font-size: 15px;
  font-weight: 800;
}
.apx-industry__list span {
  display: block;
  color: #5b7085 !important;
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 680px) {
  .apx-industry__wrap { width: calc(100% - 32px); }
  .apx-industry__list { grid-template-columns: 1fr; }
}


/* ===========================================================================
   PART 4 - PRODUCT INDEX

   Sixteen ifm family pages had no inbound link anywhere in the section: they
   were reachable only by search. This index on the ifm technology page gives
   each one a static, crawlable entry point and doubles as direct navigation
   for an engineer who already knows the technology.
   =========================================================================== */

.apx-index { padding: clamp(34px, 3.5vw, 48px) 0; border-top: 1px solid #e3e9f0; background: #fff; }
.apx-index__wrap { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.apx-index h2 {
  margin: 0 0 8px !important; color: #10253d !important;
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.12; letter-spacing: -.03em;
}
.apx-index__lead { margin: 0 0 20px !important; max-width: 62ch; color: #5b7085 !important; font-size: 14px; line-height: 1.65; }
.apx-index__list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2px 20px; margin: 0; padding: 0; list-style: none;
}
.apx-index__list li { margin: 0; border-bottom: 1px solid #eef2f6; }
.apx-index__list a {
  display: block; padding: 9px 2px; color: #2d4762 !important;
  font-size: 14px; line-height: 1.45; text-decoration: none;
}
.apx-index__list a:is(:hover, :focus-visible) { color: #c8420f !important; text-decoration: underline; outline: none; }

@media (max-width: 680px) {
  .apx-index__wrap { width: calc(100% - 32px); }
  .apx-index__list { grid-template-columns: 1fr; }
}


/* ===========================================================================
   PART 5 - CARD ACTIONS

   Every card action ("View product", "Explore ...") now sits in the same
   place: pinned to the bottom of the card and aligned right, so a grid of
   cards with unequal copy still has its actions on one line. The cards are
   made flex columns where they were not already, which is what allows
   margin-top:auto to push the action down.
   =========================================================================== */

.ifm-card, .ifp-card, .sft-card, .nv-card, .cdy-card, .aw-area-card {
  display: flex;
  flex-direction: column;
}

.ifm-card__link,
.aw-area-card__link,
.aw-inline-link,
.arp-card .arp-foot,
.pz-card__go {
  margin-top: auto;
}

.ifm-card__link,
.aw-area-card__link,
.aw-inline-link {
  align-self: flex-end;
  text-align: right;
}

/* .pz-card__go keeps its hairline rule across the full card width, so the
   text is right-aligned inside it rather than the element being shrunk. */
.pz-card__go { text-align: right; }

/* The related-products action, and the equivalent in the catalogue component. */
.arp-foot { text-align: right; }
.sim-foot { text-align: right; }


/* ===========================================================================
   PART 6 - OFFICIAL CODESYS PRODUCT IMAGERY

   The CODESYS pages previously carried in-house architecture illustrations.
   They now use the official CODESYS Store product tiles, which are square
   220px badges rather than wide photography, so the stage centres them at
   their natural size instead of stretching them to the full panel.
   =========================================================================== */

.cdy-stage:has(.cdy-stage__official) {
  display: grid;
  place-items: center;
  min-height: 300px;
  padding: 32px;
}
.cdy-stage img.cdy-stage__official {
  width: 220px !important;
  height: 220px !important;
  max-width: 220px !important;
  min-height: 0 !important;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(16, 37, 61, .16);
}

@media (max-width: 680px) {
  .cdy-stage:has(.cdy-stage__official) { min-height: 220px; padding: 22px; }
  .cdy-stage img.cdy-stage__official { width: 170px !important; height: 170px !important; max-width: 170px !important; }
}


/* ===========================================================================
   PART 7 - SECTION RHYTHM AND HERO IMAGE SCALE

   Sections ran at 76px top and bottom, which reads as a gap rather than a
   change of subject. They are brought to a moderate, consistent rhythm.

   Hero product images filled about 87% of their stage; on a product page the
   product should be the largest thing in the panel, so the stage is given
   more height and the image is allowed to fill it.
   =========================================================================== */

:is(.ifm-section, .ifp-section, .sft-section, .nv-section,
    .cdy-section, .pz-section, .csp-section, .aw-section) {
  padding-top: clamp(40px, 4vw, 56px) !important;
  padding-bottom: clamp(40px, 4vw, 56px) !important;
}

/* Bands that deliberately butt against the next block keep their zero edge. */
:is(.ifm-section, .ifp-section, .sft-section, .nv-section,
    .cdy-section, .pz-section, .csp-section, .aw-section).is-flush-top {
  padding-top: 0 !important;
}

/* ---- larger hero product imagery ---- */
:is(.ifm-media, .ifp-stage, .sft-stage, .nv-stage,
    .pz-hero__visual, .pz-stage) {
  min-height: clamp(320px, 34vw, 460px);
}
:is(.ifm-media, .ifp-stage, .sft-stage, .nv-stage,
    .pz-hero__visual, .pz-stage) > img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 10px;
}

@media (max-width: 900px) {
  :is(.ifm-media, .ifp-stage, .sft-stage, .nv-stage,
      .pz-hero__visual, .pz-stage) { min-height: 260px; }
}


/* ===========================================================================
   PART 8 - FLOW CONNECTORS BETWEEN CARDS

   The step arrows were a bare 20px text glyph sitting in the gap between
   cards, which reads as a stray character rather than a connection. Each is
   given a chip so it reads as a junction on the flow, with a lighter
   treatment on the dark bands where the same markup is reused.
   =========================================================================== */

:is(.ifm-arrow, .ifp-arrow, .nv-arrow, .sft-arrow, .cdy-arrow) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  align-self: center;
  border: 1px solid #dfe5eb;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 37, 61, .06);
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1;
  text-indent: 1px;
}

/* On the dark bands the chip becomes a translucent well rather than a disc. */
:is(.ifm-facts,.ifm-fact,.ifm-cta,.ifm-split__lead,.ifm-section--navy,.ifp-cta,
    .sft-cta,.sft-system-aside,.sft-section--navy,
    .nv-facts,.nv-fact,.nv-cta,.nv-system-aside,.nv-section--navy,
    .cdy-facts,.cdy-fact,.cdy-cta,.cdy-support-card,.cdy-section--navy,.pz-darkband)
  :is(.ifm-arrow,.ifp-arrow,.nv-arrow,.sft-arrow,.cdy-arrow) {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .07);
  box-shadow: none;
}

@media (max-width: 900px) {
  :is(.ifm-arrow, .ifp-arrow, .nv-arrow, .sft-arrow, .cdy-arrow) {
    width: 28px; height: 28px; font-size: 13px !important;
    transform: rotate(90deg);
  }
}


/* ===========================================================================
   PART 9 - TABLES AND CARDS

   Specification tables were inconsistent across the section: Pilz used a pale
   13px header while NOVUS and CODESYS used a navy 12px one, none used lining
   figures, and the Pilz wrapper clipped overflow instead of scrolling. One
   treatment is applied to all of them: a quiet tinted header, hairline rows,
   tabular numerals so specification values line up, and a scroll container.
   =========================================================================== */

:is(.pz-table, .nv-tablewrap, .cdy-tablewrap, .ifm-tablewrap,
    .sft-tablewrap, .ifp-tablewrap, .csp-tablewrap) {
  overflow-x: auto !important;
  border: 1px solid #e2e8ee;
  border-radius: 10px;
  background: #fff;
}

:is(.pz-table, .nv-tablewrap, .cdy-tablewrap, .ifm-tablewrap,
    .sft-tablewrap, .ifp-tablewrap, .csp-tablewrap) > table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.pz-table.pz-table th, .nv-tablewrap.nv-tablewrap th, .cdy-tablewrap.cdy-tablewrap th,
.ifm-tablewrap.ifm-tablewrap th, .sft-tablewrap.sft-tablewrap th,
.ifp-tablewrap.ifp-tablewrap th, .csp-tablewrap.csp-tablewrap th,
.pz-table.pz-table thead th, .nv-tablewrap.nv-tablewrap thead th,
.cdy-tablewrap.cdy-tablewrap thead th {
  padding: 11px 16px !important;
  border-bottom: 1px solid #d8e0e7 !important;
  background: #f4f7fa !important;
  color: #10253d !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

:is(.pz-table, .nv-tablewrap, .cdy-tablewrap, .ifm-tablewrap,
    .sft-tablewrap, .ifp-tablewrap, .csp-tablewrap) td {
  padding: 12px 16px !important;
  border-bottom: 1px solid #eef2f6 !important;
  color: #3d4d5c !important;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

:is(.pz-table, .nv-tablewrap, .cdy-tablewrap, .ifm-tablewrap,
    .sft-tablewrap, .ifp-tablewrap, .csp-tablewrap) tbody tr:last-child td {
  border-bottom: 0 !important;
}
:is(.pz-table, .nv-tablewrap, .cdy-tablewrap, .ifm-tablewrap,
    .sft-tablewrap, .ifp-tablewrap, .csp-tablewrap) td:first-child {
  color: #16202a !important;
  font-weight: 600;
}
:is(.pz-table, .nv-tablewrap, .cdy-tablewrap, .ifm-tablewrap,
    .sft-tablewrap, .ifp-tablewrap, .csp-tablewrap) tbody tr:hover td {
  background: #f8fafc !important;
}

/* ---- cards: one border, radius and hover across the five portfolios ---- */
:is(.ifm-card, .ifp-card, .sft-card, .nv-card, .cdy-card,
    .pz-card, .aw-card, .aw-area-card, .cdy-product) {
  border: 1px solid #e2e8ee !important;
  border-radius: 12px !important;
  background: #fff;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
a:is(.ifm-card, .ifp-card, .sft-card, .nv-card, .cdy-card, .pz-card,
     .aw-card, .aw-area-card):is(:hover, :focus-visible),
:is(.ifm-card, .ifp-card, .sft-card, .nv-card, .cdy-card,
    .pz-card, .aw-card, .aw-area-card):has(a:hover) {
  transform: translateY(-2px);
  border-color: rgba(230, 74, 25, .5) !important;
  box-shadow: 0 12px 28px rgba(16, 37, 61, .10);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  :is(.ifm-card,.ifp-card,.sft-card,.nv-card,.cdy-card,.pz-card,.aw-card,.aw-area-card) {
    transition: none;
  }
  :is(.ifm-card,.ifp-card,.sft-card,.nv-card,.cdy-card,.pz-card,.aw-card,.aw-area-card):hover {
    transform: none;
  }
}


/* ===========================================================================
   PART 10 - STICKY BAR STACKING

   The main menu bar is sticky at top:0 and 73px tall. Each partner page also
   has its own in-page anchor bar, and those were sticky at top:0 as well, so
   once the page scrolled far enough the two occupied the same band: the
   anchor bar slid underneath the menu (z-index 10-20 against 1000) and the
   menu appeared to be missing or overlapped. The anchor bars now stop below
   the menu, and anchor targets clear both.
   =========================================================================== */

:root { --pm-nav-h: 73px; }

:is(.ifm-local, .ifp-local, .sft-local, .nv-local, .cdy-local,
    .csp-local, .pz-anchorbar, .aw-local) {
  position: sticky !important;
  top: var(--pm-nav-h) !important;
  z-index: 40 !important;
  background: #fff;
  border-bottom: 1px solid #e3e9f0;
}

/* In-page links must not land underneath the menu plus the anchor bar. */
:is(.ifm-section, .ifp-section, .sft-section, .nv-section, .cdy-section,
    .pz-section, .csp-section, .aw-section, section[id], [id][class*=-section]) {
  scroll-margin-top: calc(var(--pm-nav-h) + 60px);
}


/* ===========================================================================
   PART 11 - CARD CALL-TO-ACTION PLACEMENT

   The card actions were plain unclassed spans sitting wherever the copy
   ended, so in a grid of cards they landed at a different height in every
   card. Each real action label now carries .apx-go and is pushed to the
   bottom-right of its card, giving the grid one action baseline.
   Eyebrow labels that merely end in an arrow are deliberately not included.
   =========================================================================== */

.apx-go {
  display: block;
  margin-top: auto;
  margin-left: auto;      /* right-aligns when the card is a normal block   */
  align-self: flex-end;   /* ...and when the card is a flex column          */
  padding-top: 12px;
  text-align: right;
  color: #c8420f !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

/* The card (or its body) must be a column for margin-top:auto to push down. */
:is(.ifm-card, .ifp-card, .sft-card, .nv-card, .cdy-card, .pz-card,
    .aw-card, .aw-area-card, .cdy-product, .cdy-route, .cdy-resource,
    .sft-resource, .sft-status, .nv-product-card, .pz-fn, .arp-card,
    .nv-product-card__body, .cdy-product__body, .sft-card__body,
    .ifm-card__body, .pz-card__body):has(> .apx-go),
:is(.ifm-card, .ifp-card, .sft-card, .nv-card, .cdy-card, .pz-card,
    .aw-card, .aw-area-card, .cdy-product, .cdy-route, .cdy-resource,
    .sft-resource, .nv-product-card, .pz-fn):has(.apx-go) {
  display: flex;
  flex-direction: column;
}

a.apx-go:is(:hover, :focus-visible) { text-decoration: underline; outline: none; }


/* ===========================================================================
   PART 12 - TECHNOLOGY-ROLE CARD MEDIA

   The five portfolio cards mix a software product tile with hardware
   photography, and the supplied renders carry different backgrounds (white,
   grey gradient). Without a common ground the row looks accidental, so every
   media box gets the same neutral panel, aspect and inset and the artwork is
   contained rather than cropped.
   =========================================================================== */

.aw-area-card .aw-area-card__media.aw-area-card__media {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  flex: 0 0 auto;
  aspect-ratio: 16 / 10;
  height: auto !important;
  min-height: 0 !important;
  margin: 0;
  padding: 18px;
  overflow: hidden;
  border-bottom: 1px solid #eef2f6;
  background: #f4f6f8 !important;
}
.aw-area-card .aw-area-card__media.aw-area-card__media img {
  width: auto !important;
  height: auto !important;
  max-width: 82% !important;
  max-height: 82% !important;
  object-fit: contain !important;
  mix-blend-mode: multiply;   /* drops the white/grey plate the renders ship with */
}

@media (max-width: 680px) {
  .aw-area-card .aw-area-card__media.aw-area-card__media { aspect-ratio: 16 / 9; padding: 14px; }
}


/* ===========================================================================
   PART 13 - ifm STAT STRIP

   This band was written expecting styles from ifm-parent-professional.css,
   a stylesheet that does not exist in the repository. Unstyled, its <small>
   label and <strong> value stayed inline and ran together on screen as
   "Selection basisApplication & environment". The band is given the layout
   it was written for.
   =========================================================================== */

.ifp-stat-strip {
  padding: 22px 0;
  border-top: 1px solid #e3e9f0;
  border-bottom: 1px solid #e3e9f0;
  background: #f7f9fc;
}
.ifp-stat-strip__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 28px;
}
.ifp-stat-strip__item {
  display: flex !important;
  flex-direction: column;
  gap: 5px;
  padding-left: 14px;
  border-left: 2px solid #d9e2ea;
}
.ifp-stat-strip__item small {
  display: block !important;
  color: #5f7488 !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.3;
}
.ifp-stat-strip__item strong {
  display: block !important;
  color: #10253d !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

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