/**
 * Systems Slider: front end styles (the editor loads them too), for the
 * slider, its groups' switcher, the System Cards and the end card (the
 * card and group blocks have no style file of their own).
 *
 * Look: S03 "Ecosystem" of the owner's new system.html (Large cards, pill
 * switcher, dark end card); Classic keeps the earlier test1.html cards.
 * The row, dots, arrows and pause button come from
 * ../shared/card-slider.css, the heading from ../shared/section-head.css,
 * the buttons from ../shared/buttons.css. Own pf-systems-* classes only;
 * --pf-* tokens.
 */

/* ---------- Section: full width and clipped; content box inside ---------- */
.pf-systems-slider{
  overflow:hidden;
  padding-top:var(--pf-s9);padding-bottom:var(--pf-s9);
}
.pf-systems-slider__inner{
  max-width:var(--pf-maxw);margin:0 auto;padding:0 var(--pf-s5);
  box-sizing:border-box;
}
.pf-systems-slider__head + .pf-systems-slider__row,
.pf-systems-slider__head + .pf-systems-slider__switch{margin-top:var(--pf-s7)}
.pf-systems-slider__switch ~ .pf-systems-slider__panel{margin-top:var(--pf-s7)}
.pf-systems-slider__panel[hidden]{display:none}

/* ---------- Group switcher: grey pill bar, category link on the right ---------- */
/* Pills and link share one line; every pill always shows (the owner did
   not want a scrolling bar that hides tabs). Below 760px, where the two
   no longer fit side by side, the compact layout takes over (2 x 2 pill
   grid, link in the end card), see the 760px rules below. */
.pf-systems-slider__switch{
  display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;
  column-gap:var(--pf-s6);row-gap:var(--pf-s4);
}
.pf-systems-slider__tabs{
  flex:none;
  display:flex;gap:var(--pf-s1);padding:var(--pf-s1);max-width:100%;
  border-radius:var(--pf-radius);background:var(--pf-hover);
  overflow-x:auto;scrollbar-width:none;
}
.pf-systems-slider__tabs::-webkit-scrollbar{display:none}
.pf-systems-slider .pf-systems-slider__tab{
  flex:none;margin:0;padding:var(--pf-s2) var(--pf-s4);
  border:0;border-radius:4px;background:transparent;
  font-family:inherit;font-size:var(--pf-ui);font-weight:600;line-height:20px;
  color:var(--pf-text-faint);cursor:pointer;
  transition:background .2s var(--pf-ease),color .2s var(--pf-ease);
}
.pf-systems-slider .pf-systems-slider__tab.is-active,
.pf-systems-slider .pf-systems-slider__tab[aria-selected="true"]{background:var(--pf-bg);color:var(--pf-text)}
@media (hover:hover) and (pointer:fine){
  .pf-systems-slider .pf-systems-slider__tab:hover{color:var(--pf-text)}
}
.pf-systems-slider .pf-systems-slider__tab:focus-visible{outline:2px solid var(--pf-text);outline-offset:2px}

/* Category link: underlined label and an arrow (new system.html). The
   same link sits in the end card on phones. */
.pf-systems-slider .pf-systems-slider__cat-link,
.pf-systems-slider .pf-systems-end__link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--pf-ui);font-weight:600;color:var(--pf-text);text-decoration:none;
}
.pf-systems-slider .pf-systems-slider__cat-link{flex:none;white-space:nowrap}
.pf-systems-slider__cat-link span,
.pf-systems-end__link span{border-bottom:1px solid currentColor}
.pf-systems-slider__cat-link svg,
.pf-systems-end__link svg{
  flex:none;width:14px;height:14px;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s var(--pf-ease);
}
@media (hover:hover) and (pointer:fine){
  .pf-systems-slider__cat-link:hover svg,
  .pf-systems-end__link:hover svg{transform:translateX(3px)}
}
.pf-systems-slider .pf-systems-end__link{display:none;margin-top:var(--pf-s1);color:var(--pf-bg)}
.pf-systems-slider__cat-link[hidden]{display:none}
.pf-systems-slider .pf-systems-slider__cat-link:focus-visible,
.pf-systems-slider .pf-systems-end__link:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}
@media (hover:hover) and (pointer:fine){
  .pf-systems-slider .pf-systems-slider__cat-link:hover{opacity:.85}
}

/* ---------- Card: the photo fills it, text top left, button bottom left ---------- */
.pf-systems-card,
.pf-systems-end{
  position:relative;overflow:hidden;box-sizing:border-box;
  border-radius:var(--pf-radius);
}
/* Card background: the slider's Styles tab setting (--pf-systems-card-bg,
   set by render.php on the block), else light grey. */
.pf-systems-card{background:var(--pf-systems-card-bg,var(--pf-hover));color:var(--pf-text)}
.pf-systems-card__img{
  position:absolute;inset:0;
  display:block;width:100%;height:100%;object-fit:cover;
}
.pf-systems-card__text{
  position:absolute;top:0;left:0;right:0;z-index:1;
  display:flex;flex-direction:column;gap:var(--pf-s1);
  padding:var(--pf-s5);
}
.pf-systems-card .pf-systems-card__kind{font-size:var(--pf-small);line-height:1.4;color:var(--pf-text-faint)}
.pf-systems-card .pf-systems-card__title{margin:0;font-size:var(--pf-h4);font-weight:600;line-height:1.3;letter-spacing:0;color:inherit}
.pf-systems-card .pf-systems-card__line{margin:0;font-size:var(--pf-ui);line-height:1.5;color:var(--pf-text-soft)}
.pf-systems-card .pf-systems-card__link{color:inherit;text-decoration:none}
@media (hover:hover) and (pointer:fine){
  .pf-systems-card .pf-systems-card__link:hover{text-decoration:underline;text-underline-offset:3px}
}
.pf-systems-card .pf-systems-card__link:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}

/* Light text, for dark photos. */
.pf-systems-card.is-text-light{color:var(--pf-bg)}
.pf-systems-card.is-text-light .pf-systems-card__kind,
.pf-systems-card.is-text-light .pf-systems-card__line{color:var(--pf-line)}

.pf-systems-card__actions{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:var(--pf-s5);
}
.pf-systems-card__actions .pf-buttons__item{min-width:160px}

/* ---------- End card: dark, centred, same size as the cards ---------- */
.pf-systems-end{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--pf-s4);
  padding:var(--pf-s6);text-align:center;
  background:var(--pf-text);color:var(--pf-bg);
}
.pf-systems-end .pf-systems-end__title{margin:0;font-size:var(--pf-h3);font-weight:600;line-height:1.25;color:inherit}
.pf-systems-end .pf-systems-end__text{margin:0;max-width:300px;font-size:var(--pf-ui);line-height:1.5;color:var(--pf-line)}
.pf-systems-end__button{margin-top:var(--pf-s2)}

/* ---------- Large (default): two in view, fixed height ----------
   Desktop and tablet: half the row each; phones: full row minus 32px so
   the next card peeks in. Height 600 / 520 / 480px. Name larger; the
   small label is hidden (as in new system.html). */
.pf-systems-slider.is-size-large .pf-systems-card,
.pf-systems-slider.is-size-large .pf-systems-end{
  width:calc((100% - var(--pf-s5)) / 2);height:600px;
}
.pf-systems-slider.is-size-large .pf-systems-card__kind{display:none}
.pf-systems-slider.is-size-large .pf-systems-card .pf-systems-card__title{font-size:var(--pf-h2);font-weight:600;line-height:1.25}
.pf-systems-slider.is-size-large .pf-systems-card__text,
.pf-systems-slider.is-size-large .pf-systems-card__actions{padding:var(--pf-s6)}

/* ---------- Classic: portrait 4:5, about three in view ----------
   clamp(260px, 30%, 360px); 500px from 1250px up; 72% under 900px and
   85% under 520px. */
.pf-systems-slider.is-size-classic .pf-systems-card,
.pf-systems-slider.is-size-classic .pf-systems-end{width:clamp(260px,30%,360px);aspect-ratio:4/5}
@media (min-width:1250px){
  .pf-systems-slider.is-size-classic .pf-systems-card,
  .pf-systems-slider.is-size-classic .pf-systems-end{width:500px}
}

/* ---------- Smaller screens ---------- */
@media (max-width:900px){
  .pf-systems-slider{padding-top:var(--pf-s7);padding-bottom:var(--pf-s7)}
  .pf-systems-slider__inner{padding:0 var(--pf-s4)}
  .pf-systems-slider__head + .pf-systems-slider__row,
  .pf-systems-slider__head + .pf-systems-slider__switch,
  .pf-systems-slider__switch ~ .pf-systems-slider__panel{margin-top:var(--pf-s6)}
  .pf-systems-slider.is-size-large .pf-systems-card,
  .pf-systems-slider.is-size-large .pf-systems-end{height:520px}
  .pf-systems-slider.is-size-classic .pf-systems-card,
  .pf-systems-slider.is-size-classic .pf-systems-end{width:72%}
}
@media (max-width:760px){
  /* Compact switcher (new system.html's phone layout), from 760px down,
     where the pills and the link no longer fit on one line: the pills
     become a 2 x 2 grid of separate full width buttons, no grey bar; the
     chosen one is white with a border. The category link moves into the
     end card. Every pill always shows. */
  .pf-systems-slider__switch{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
  .pf-systems-slider__tabs{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--pf-s2);
    width:100%;padding:0;background:transparent;overflow:visible;
  }
  .pf-systems-slider .pf-systems-slider__tab{
    padding:10px var(--pf-s3);text-align:center;
    border:1px solid var(--pf-hover);border-radius:var(--pf-radius);background:var(--pf-hover);
  }
  .pf-systems-slider .pf-systems-slider__tab.is-active,
  .pf-systems-slider .pf-systems-slider__tab[aria-selected="true"]{
    background:var(--pf-bg);border-color:color-mix(in srgb, var(--pf-text-faint) 55%, var(--pf-bg));
  }
  .pf-systems-slider .pf-systems-slider__cat-link{display:none}
  .pf-systems-slider .pf-systems-end__link{display:inline-flex}
}
@media (max-width:520px){
  .pf-systems-slider.is-size-large .pf-systems-card,
  .pf-systems-slider.is-size-large .pf-systems-end{width:calc(100% - 32px);height:480px}
  .pf-systems-slider.is-size-classic .pf-systems-card,
  .pf-systems-slider.is-size-classic .pf-systems-end{width:85%}
  .pf-systems-card__text,
  .pf-systems-card__actions,
  .pf-systems-slider.is-size-large .pf-systems-card__text,
  .pf-systems-slider.is-size-large .pf-systems-card__actions{padding:var(--pf-s4)}
  .pf-systems-end{padding:var(--pf-s5)}
}

/* Reduced motion: no sliding arrows or tab fades. */
@media (prefers-reduced-motion:reduce){
  .pf-systems-slider .pf-systems-slider__tab,
  .pf-systems-slider__cat-link svg,
  .pf-systems-end__link svg{transition:none}
  .pf-systems-slider__cat-link:hover svg,
  .pf-systems-end__link:hover svg{transform:none}
}