/* ==========================================================================
   Other JPiOT systems: the section that closes every JPiOT product page.

   The markup is written by systems-nav/systems.py and pasted by each page's
   assembler, so all seven pages carry the same section. Two parts:

     the next system   one large picture card, the page after this one in the
                       series (it wraps round), so "Next" walks a visitor
                       through all seven systems
     the other five    the compact cards approved on the mushroom page:
                       picture, name, one line, arrow

   Colours come from the product pages' own tokens (--em-*, --ink, --hair...),
   with the site's colours as fallbacks, so the section takes each page's
   palette without any page-specific rule. The company orange is spent on the
   one thing that says "go": the round arrow on the next system.
   ========================================================================== */
.xs{
  --xs-ink:var(--ink,#242818);
  --xs-text:var(--ch,#33382A);
  --xs-sub:var(--ch-3,#666B55);
  --xs-line:var(--hair,#DCD2BF);
  --xs-line-hi:var(--em-400,#7C914D);
  --xs-paper:var(--paper,#FFFDF8);
  --xs-k:var(--em-500,#5B6F31);
  --xs-link:var(--em-600,#4A5C28);
  --xs-deep:var(--em-900,#1B2415);
  --xs-or:var(--or,#E05616);
  --xs-or-hi:var(--or-hi,#F0752E);
  position:relative;color:var(--xs-text);
  padding:clamp(50px,7.35vh,92px) var(--pad) clamp(32px,4.7vh,60px)}
.xs-wrap{max-width:var(--maxw);margin:0 auto;position:relative}

/* the heading, as the pages set their own */
.xs-k{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--xs-k);
  display:flex;align-items:center;gap:12px;margin:0 0 14px}
.xs-k::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6;flex:0 0 auto}
.xs-h{margin:0;font-family:var(--display);font-weight:300;font-size:clamp(1.6rem,2.6vw,2.3rem);
  line-height:1.08;letter-spacing:-.02em;color:var(--xs-ink)}

/* next system on the left, the other five beside it; the row is as tall as the list */
.xs-grid{margin-top:24px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(12px,1.6vw,20px);align-items:stretch}
.xs-feat{display:flex;min-width:0}

/* ---------------------------------------------------------- the next system */
.xs-next{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;min-height:360px;
  overflow:hidden;isolation:isolate;border-radius:22px;background:var(--xs-deep);color:#fff;text-decoration:none;
  box-shadow:0 30px 60px -44px rgba(7,26,21,.7)}
.xs-art{position:absolute;inset:0;z-index:-2}
.xs-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  transition:transform 1.1s var(--ease)}
/* the words sit bottom left, so each crop keeps its product to the right of them
   (or, for a product on the left of its picture, as far left as it goes) */
.xs-next[data-sys="monitoring"] img{object-position:0% 50%}
.xs-next[data-sys="aquaculture"] img{object-position:0% 50%}
.xs-next[data-sys="poultry"] img{object-position:50% 70%}
.xs-next[data-sys="mushroom"] img{object-position:100% 50%}
/* a shade under the words, clear over the product */
.xs-next::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,22,17,0) 38%,rgba(7,22,17,.62) 68%,rgba(7,22,17,.9) 100%)}
.xs-tx{display:flex;flex-direction:column;gap:6px;padding:clamp(20px,2.4vw,32px);padding-right:96px;min-width:0}
.xs-nk{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:#F6C9A6}
.xs-nk::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--xs-or);flex:none}
.xs-nm{font-family:var(--display);font-weight:300;font-size:clamp(1.7rem,2.6vw,2.4rem);line-height:1.06;
  letter-spacing:-.02em;color:#fff;text-wrap:balance;text-shadow:0 1px 22px rgba(7,22,17,.45)}
.xs-nw{font-size:.98rem;line-height:1.4;color:rgba(255,255,255,.84)}
.xs-go{position:absolute;right:clamp(20px,2.4vw,32px);bottom:clamp(20px,2.4vw,32px);display:grid;place-items:center;
  width:56px;height:56px;border-radius:50%;background:var(--xs-or);color:#fff;
  box-shadow:0 10px 26px -10px rgba(224,86,22,.7);transition:background .3s var(--ease),transform .35s var(--ease)}
.xs-go svg{width:22px;height:22px}
.xs-next:hover .xs-art img{transform:scale(1.045)}
.xs-next:hover .xs-go{background:var(--xs-or-hi);transform:translateX(4px)}
.xs-next:focus-visible{border-radius:22px}

/* ---------------------------------------------------------- the other five */
.xs-list{list-style:none;margin:0;padding:0;display:grid;grid-template-rows:repeat(5,minmax(0,1fr));gap:12px;min-width:0}
.xs-list li{display:flex;min-width:0}
.xs-list a{flex:1;display:flex;align-items:center;gap:14px;min-height:84px;min-width:0;padding:10px 16px 10px 10px;
  border-radius:18px;border:1px solid var(--xs-line);background:var(--xs-paper);color:var(--xs-ink);text-decoration:none;
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.xs-list a:hover{border-color:var(--xs-line-hi);transform:translateY(-2px)}
.xs-list a:focus-visible{border-radius:18px}
.xs-list img{width:104px;height:66px;flex:0 0 auto;object-fit:cover;border-radius:12px}
.xs-list span{min-width:0}
.xs-list b{display:block;font-weight:600;font-size:.98rem;line-height:1.3}
.xs-list small{display:block;color:var(--xs-sub);font-size:.86rem;line-height:1.4;margin-top:3px}
.xs-list svg{width:18px;height:18px;flex:0 0 auto;margin-left:auto;color:var(--xs-k);transition:transform .3s var(--ease)}
.xs-list a:hover svg{transform:translateX(3px)}

/* the whole grid, on the agriculture page */
.xs-all{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:14px;color:var(--xs-link);
  font-weight:600;font-size:.97rem;text-decoration:none}
.xs-all svg{width:18px;height:18px;transition:transform .35s var(--ease)}
.xs-all:hover span{text-decoration:underline;text-underline-offset:4px}
.xs-all:hover svg{transform:translateX(3px)}

/* ---------------------------------------------------------- narrower */
@media (max-width:900px){
  .xs-grid{grid-template-columns:1fr}
  .xs-next{min-height:0;aspect-ratio:16/9}
  .xs-list{grid-template-rows:none}
}
@media (max-width:560px){
  .xs-next{aspect-ratio:4/3}
  .xs-tx{padding:18px 84px 18px 18px;gap:4px}
  .xs-nm{font-size:1.6rem}
  .xs-nw{font-size:.92rem}
  .xs-go{width:50px;height:50px;right:18px;bottom:18px}
  .xs-list a{gap:12px;padding:8px 12px 8px 8px;min-height:76px}
  .xs-list img{width:88px;height:56px;border-radius:10px}
}

@media (prefers-reduced-motion:reduce){
  .xs-art img,.xs-go,.xs-list a,.xs-list svg,.xs-all svg{transition:none!important}
  .xs-next:hover .xs-art img,.xs-next:hover .xs-go,.xs-list a:hover,.xs-list a:hover svg,.xs-all:hover svg{transform:none}
}

@media print{
  .xs-art,.xs-list img,.xs-go{display:none!important}
  .xs-next{min-height:0;aspect-ratio:auto;background:none;color:#111;box-shadow:none;border:1px solid #ccc}
  .xs-next::after{display:none}
  .xs-nk,.xs-nm,.xs-nw{color:#111}
  .xs-tx{padding:14px 16px}
}