/**
 * Feature Points: front end styles (the editor loads them too), for the
 * block and its points (the point block has no style file of its own).
 *
 * Look: S04 Lab Points of the homepage sample (test1.html). Heading from
 * ../shared/section-head.css. Own pf-feature-points classes; --pf-* tokens.
 *
 * Spacing default (test1.html): no top padding, because the section above
 * already leaves 80px; 80px below. Change it in Styles > Dimensions.
 */
.pf-feature-points{
  --pf-feature-points-pad:var(--pf-s5);
  max-width:var(--pf-maxw);margin-left:auto;margin-right:auto;
  padding:0 var(--pf-s5) var(--pf-s9);
  box-sizing:border-box;
}

/* ---------- Colours: Light (default, as always), Grey, Dark ----------
   The block's box keeps its content width (Full / Narrow), so the colour
   is painted out to both screen edges with a spread shadow, clipped to the
   block's height; nothing gets wider, so no side scroll. Grey and Dark
   need room above the heading inside the band: 80px top (48px under
   900px) instead of 0. Dimensions set in the editor still win (inline).
   Class twice: beats the layout margin/padding resets (AGENTS lesson 8). */
.pf-feature-points.pf-feature-points.is-scheme-grey,
.pf-feature-points.pf-feature-points.is-scheme-dark{
  padding-top:var(--pf-s9);
  background:var(--pf-feature-points-bg);
  box-shadow:0 0 0 100vmax var(--pf-feature-points-bg);
  clip-path:inset(0 -100vmax);
}
.pf-feature-points.is-scheme-grey{
  --pf-feature-points-bg:var(--pf-hover);
  --pf-line:color-mix(in srgb, var(--pf-text) 14%, var(--pf-hover));
}
.pf-feature-points.is-scheme-dark{
  --pf-feature-points-bg:var(--pf-text);
  --pf-feature-points-soft:color-mix(in srgb, var(--pf-bg) 80%, transparent);
  --pf-line:color-mix(in srgb, var(--pf-bg) 20%, transparent);
  color:var(--pf-bg);
}
.pf-feature-points.is-scheme-dark .pf-section-head .pf-section-head__intro,
.pf-feature-points.is-scheme-dark .pf-feature-point__text,
.pf-feature-points.is-scheme-dark .pf-feature-points__tab{color:var(--pf-feature-points-soft)}
.pf-feature-points.is-scheme-dark .pf-feature-points__tab.is-active{border-top-color:var(--pf-bg);color:var(--pf-bg)}
.pf-feature-points.is-scheme-dark .pf-feature-points__tab:focus-visible{outline-color:var(--pf-bg)}
@media (hover:hover) and (pointer:fine){
  .pf-feature-points.is-scheme-dark .pf-feature-points__tab:hover{color:var(--pf-bg)}
}
@media (max-width:900px){
  .pf-feature-points.pf-feature-points.is-scheme-grey,
  .pf-feature-points.pf-feature-points.is-scheme-dark{padding-top:var(--pf-s7)}
}

/* ---------- Photo: one wide photo, fixed height on desktop ---------- */
.pf-feature-points__photo{
  position:relative;overflow:hidden;
  height:var(--pf-feature-points-photo-h,560px);
  border-radius:var(--pf-radius);
  background:var(--pf-hover);
}
.pf-feature-points__head + .pf-feature-points__photo,
.pf-feature-points__head + .pf-feature-points__list{margin-top:var(--pf-s6)}
.pf-feature-points__img{
  position:absolute;inset:0;
  display:block;width:100%;height:100%;object-fit:cover;
}

/* ---------- Points ---------- */
.pf-feature-points .pf-feature-points__list{
  --pf-feature-points-cols:4;
  margin:var(--pf-s6) 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(var(--pf-feature-points-cols),minmax(0,1fr));
  gap:var(--pf-s6) var(--pf-s5);
}
.pf-feature-points.is-cols-3 .pf-feature-points__list{--pf-feature-points-cols:3}
.pf-feature-points.is-cols-2 .pf-feature-points__list{--pf-feature-points-cols:2}
.pf-feature-points__head + .pf-feature-points__list{margin-top:var(--pf-s6)}

.pf-feature-points .pf-feature-point{
  display:flex;flex-direction:column;gap:var(--pf-s2);
  margin:0;
}
.pf-feature-points .pf-feature-point__title{
  margin:0;font-size:var(--pf-h4);font-weight:600;line-height:1.3;letter-spacing:0;color:inherit;
}
.pf-feature-points .pf-feature-point__text{
  margin:0;font-size:var(--pf-ui);line-height:1.5;color:var(--pf-text-faint);
}
/* Optional contact value (phone or email, a link when it is one), links
   in the line, and the optional arrow link under it. */
.pf-feature-points .pf-feature-point__contact{
  margin:0;font-size:var(--pf-ui);font-weight:600;line-height:1.5;color:inherit;
}
.pf-feature-points .pf-feature-point__contact a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.pf-feature-points .pf-feature-point__text a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.pf-feature-points .pf-feature-point__links{margin-top:var(--pf-s2)}
.pf-feature-points__tab-contact{display:block;font-size:var(--pf-ui);font-weight:600;line-height:1.5}

/* Thin dividers between points; none before the first point of a row. */
.pf-feature-points.has-dividers .pf-feature-point{padding-left:var(--pf-feature-points-pad);border-left:1px solid var(--pf-line)}
.pf-feature-points.has-dividers.is-cols-4 .pf-feature-point:nth-child(4n+1),
.pf-feature-points.has-dividers.is-cols-3 .pf-feature-point:nth-child(3n+1),
.pf-feature-points.has-dividers.is-cols-2 .pf-feature-point:nth-child(2n+1){padding-left:0;border-left:0}

/* ---------- Tablet: 2 x 2, photo 16:9 ---------- */
@media (max-width:900px){
  .pf-feature-points{padding:0 var(--pf-s4) var(--pf-s7)}
  .pf-feature-points__photo{height:auto;aspect-ratio:16/9}
  .pf-feature-points.is-cols-4 .pf-feature-points__list,
  .pf-feature-points.is-cols-3 .pf-feature-points__list{--pf-feature-points-cols:2}
  .pf-feature-points.has-dividers.is-cols-4 .pf-feature-point:nth-child(n),
  .pf-feature-points.has-dividers.is-cols-3 .pf-feature-point:nth-child(n){padding-left:var(--pf-feature-points-pad);border-left:1px solid var(--pf-line)}
  .pf-feature-points.has-dividers .pf-feature-point:nth-child(2n+1):nth-child(n){padding-left:0;border-left:0}
}

/* ---------- Phone: photo 4:3, one point per line ----------
   Selectors repeat a class or add :nth-child(n) to outrank the tablet
   rules above. With dividers, the line moves from the left of each point
   to above it (none above the first). */
@media (max-width:520px){
  .pf-feature-points{--pf-feature-points-pad:var(--pf-s4)}
  .pf-feature-points__photo{aspect-ratio:4/3}
  .pf-feature-points.pf-feature-points .pf-feature-points__list{--pf-feature-points-cols:1;gap:var(--pf-s4)}
  .pf-feature-points.has-dividers .pf-feature-points__list .pf-feature-point:nth-child(n):nth-child(n){
    padding-left:0;border-left:0;
    padding-top:var(--pf-s4);border-top:1px solid var(--pf-line);
  }
  .pf-feature-points.has-dividers .pf-feature-points__list .pf-feature-point:first-child:nth-child(n){padding-top:0;border-top:0}
}

/* =========================================================================
   Options added October 2026 (About Us "What We Stand For"): width, split
   heading, and Tabs mode. Static Feature Points look as before.
   ========================================================================= */

/* Narrow: 1440px content. */
.pf-feature-points.is-width-narrow{max-width:calc(1440px + 2 * var(--pf-s5))}

/* Split heading: heading left (a third), text right (two thirds). */
.pf-feature-points.is-head-split .pf-feature-points__head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:var(--pf-s8);align-items:start;max-width:none;
}
.pf-feature-points.is-head-split .pf-feature-points__head .pf-section-head__intro{margin-top:0;max-width:720px}

/* ---------- Tabs: one photo per point, cross-fading ---------- */
.pf-feature-points__shot{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--pf-ease)}
.pf-feature-points__shot.is-active{opacity:1}

.pf-feature-points .pf-feature-points__tabs{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--pf-s5);margin-top:var(--pf-s6);
  padding:0 8%;
}
.pf-feature-points.is-cols-3 .pf-feature-points__tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
.pf-feature-points.is-cols-2 .pf-feature-points__tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
.pf-feature-points__head + .pf-feature-points__tabs{margin-top:var(--pf-s6)}

/* A point: thin top line; the chosen one a thick dark line and dark text. */
.pf-feature-points .pf-feature-points__tab{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--pf-s2);
  margin:0;padding:var(--pf-s4) 0 0;
  border:0;border-top:2px solid var(--pf-line);border-radius:0;
  background:none;font:inherit;text-align:left;cursor:pointer;
  color:var(--pf-text-faint);
  transition:color .3s var(--pf-ease),border-color .3s var(--pf-ease);
}
.pf-feature-points .pf-feature-points__tab.is-active{
  border-top:4px solid var(--pf-text);padding-top:calc(var(--pf-s4) - 2px);
  color:var(--pf-text);
}
@media (hover:hover) and (pointer:fine){
  .pf-feature-points .pf-feature-points__tab:hover{color:var(--pf-text)}
}
.pf-feature-points .pf-feature-points__tab:focus-visible{outline:2px solid var(--pf-text);outline-offset:4px}
.pf-feature-points .pf-feature-points__tab-title{font-size:var(--pf-h4);font-weight:600;line-height:1.3}
.pf-feature-points .pf-feature-points__tab-text{font-size:var(--pf-ui);line-height:1.5}

/* Autoplay pause / play button: the photo's top right corner (as Media
   List). Hidden until view.js starts autoplay. */
.pf-feature-points .pf-feature-points__pause{
  position:absolute;top:var(--pf-s4);right:var(--pf-s4);z-index:2;
  display:grid;place-items:center;
  width:40px;height:40px;margin:0;padding:0;
  border:0;border-radius:50%;
  background:rgba(0,0,0,.4);color:#ffffff;
  cursor:pointer;
  transition:background-color .15s var(--pf-ease);
}
.pf-feature-points .pf-feature-points__pause[hidden]{display:none}
.pf-feature-points__pause svg{width:16px;height:16px;fill:currentColor}
.pf-feature-points__pause .is-play,
.pf-feature-points__pause.is-paused .is-pause{display:none}
.pf-feature-points__pause.is-paused .is-play{display:block}
.pf-feature-points .pf-feature-points__pause:focus-visible{outline:2px solid #ffffff;outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .pf-feature-points .pf-feature-points__pause:hover{background:rgba(0,0,0,.6)}
}

/* ---------- Tablet ---------- */
@media (max-width:900px){
  .pf-feature-points.is-head-split .pf-feature-points__head{grid-template-columns:minmax(0,1fr);gap:var(--pf-s3)}
  .pf-feature-points.is-head-split .pf-feature-points__head .pf-section-head__intro{max-width:none}
  .pf-feature-points .pf-feature-points__tabs{padding:0}
  .pf-feature-points.is-cols-4 .pf-feature-points__tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ---------- Phone: one point per line ---------- */
@media (max-width:520px){
  .pf-feature-points.pf-feature-points .pf-feature-points__tabs{grid-template-columns:minmax(0,1fr);gap:var(--pf-s4)}
}

@media (prefers-reduced-motion:reduce){
  .pf-feature-points__shot,
  .pf-feature-points .pf-feature-points__tab,
  .pf-feature-points .pf-feature-points__pause{transition:none}
}