/* FACC-NY Testimonials. Replaces the four hand-made columns on the About page, so
   the quotes keep that look: centred, italic, the theme's lead size and grey. The
   row's "Testimonials" heading and beige background stay in WPBakery. Breakpoints
   are Uncode's own (959px tablet, 569px phone), where its columns stack too. */
.facct{
  --facct-ink:#303133;       /* headings and names (theme "Dark 4") */
  --facct-muted:#777;        /* the quotes, as the old text-lead columns */
  --facct-line:#ccc9bd;      /* separators, as in the events list */
  --facct-green:#2f6f5e;     /* FACC-green */
  --facct-bg:#f3ede4;        /* the About row's beige: long quotes fade into it */
  --facct-lines:6;           /* lines shown before a long quote fades out */
  --facct-per:4;             /* testimonials per slide */
  --facct-gap:36px;
  position:relative; margin:0;
}
.facct *{box-sizing:border-box}
.facct [hidden]{display:none !important}

/* ================= TRACK ================= */
.facct .facct-track{
  list-style:none; margin:0;
  padding:0 !important;   /* Uncode gives every list an !important 18px indent on phones */
  display:flex; gap:var(--facct-gap);
  overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
}
/* scrollbar hidden only once the arrows work; without the script it stays scrollable */
.facct.facct-js .facct-track{scrollbar-width:none; overflow-y:hidden}
.facct.facct-js .facct-track::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:no-preference){
  .facct .facct-track{scroll-behavior:smooth}
}
.facct .facct-item{
  flex:0 0 calc((100% - (var(--facct-per) - 1) * var(--facct-gap)) / var(--facct-per));
  margin:0; padding:0; list-style:none;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
/* snap to the first testimonial of each slide, so a swipe moves a whole slide */
.facct .facct-item:nth-child(4n+1){scroll-snap-align:start}
.facct .facct-pad{visibility:hidden}

/* Shared rows: every quote sits in one row, "Read more" in the next and the names in
   the last, so a short quote is centred on the other quotes (not on the whole column,
   names included, where it looked to drop) and the names line up across a slide.
   Browsers without subgrid keep the plain columns above. */
@supports (grid-template-rows:subgrid){
  .facct .facct-track{
    display:grid; grid-auto-flow:column; grid-template-rows:auto auto auto;
    grid-auto-columns:calc((100% - (var(--facct-per) - 1) * var(--facct-gap)) / var(--facct-per));
    gap:0 var(--facct-gap);
  }
  .facct .facct-item,
  .facct .facct-fig{display:grid; grid-row:span 3; grid-template-rows:subgrid}
  .facct .facct-quote{grid-row:1; align-self:center}
  .facct .facct-toggle{grid-row:2; justify-self:center; align-self:start}
  .facct .facct-cite{grid-row:3; align-self:start}
}

/* ================= QUOTE ================= */
.facct .facct-fig{margin:0; padding:0}
.facct blockquote.facct-quote{
  position:relative; margin:0; padding:0; border:0; background:none;
  font:inherit; color:inherit; quotes:none;
}
.facct blockquote.facct-quote::before,
.facct blockquote.facct-quote::after{content:none; display:none}
.facct .facct-quote p{
  max-width:28em; margin:0 auto; padding:0;   /* ~70 characters a line in the wide 2-per-slide columns */
  font-style:italic; font-weight:400; font-size:1.2rem; line-height:1.75; color:var(--facct-muted);
}
.facct .facct-quote p::before{content:"\201C"}
.facct .facct-quote p::after{content:"\201D"}

/* "Read more": the script marks a quote longer than --facct-lines as clamped, and
   it then shows those lines, the last ones fading into the row's background.
   Opening slides the text to its full height and dissolves the fade. */
.facct.facct-js .facct-clamped .facct-quote p{
  max-height:calc(var(--facct-lines) * 1.75em);   /* 1.75 = the line height */
  overflow:hidden;
}
.facct.facct-js .facct-clamped blockquote.facct-quote::after{
  content:""; display:block; position:absolute; left:0; right:0; bottom:0; height:3.5em;
  background:linear-gradient(to bottom, transparent, var(--facct-bg));
  pointer-events:none;
}
.facct.facct-js .facct-clamped.facct-open blockquote.facct-quote::after{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .facct.facct-js .facct-quote p{transition:max-height .45s ease}
  .facct.facct-js .facct-clamped blockquote.facct-quote::after{transition:opacity .45s ease}
}
.facct .facct-toggle{
  margin:.5rem 0 0; padding:0; cursor:pointer;
  background:none; border:0; border-radius:0;
  font:inherit; font-size:14px; font-weight:400; line-height:1.4; color:var(--facct-green);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
}
.facct .facct-toggle:hover{color:var(--facct-ink)}
.facct .facct-toggle:focus-visible{outline:2px solid var(--facct-ink); outline-offset:2px}

/* name and title, under a short green rule (as the directory's section rules) */
.facct .facct-cite{
  position:relative; display:flex; flex-direction:column; gap:.1rem;
  margin:1.2rem 0 0; padding:1rem 0 0; font-style:normal;
}
.facct .facct-cite::before{
  content:""; position:absolute; top:0; left:50%; width:28px; height:2px; margin-left:-14px;
  background:var(--facct-green);
}
.facct .facct-name{font-size:15px; font-weight:600; line-height:1.4; color:var(--facct-ink)}
.facct .facct-role{font-size:13px; line-height:1.5; color:var(--facct-muted)}

/* ================= ARROWS + DOTS ================= */
.facct .facct-nav{display:flex; align-items:center; justify-content:center; gap:1.2rem; margin:2.4rem 0 0}
.facct .facct-arrow{
  flex:none; width:44px; height:44px; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:var(--facct-ink); border:1px solid var(--facct-ink); border-radius:2px;
  font:inherit; font-size:18px; line-height:1;
  transition:background .15s, color .15s, opacity .15s;
}
.facct .facct-arrow:hover:not(:disabled){background:var(--facct-ink); color:#fff}
.facct .facct-arrow:disabled{opacity:.3; cursor:default}
.facct .facct-arrow:focus-visible,
.facct .facct-dot:focus-visible{outline:2px solid var(--facct-ink); outline-offset:2px}
/* the dots shrink to fit between the arrows, however many slides there are */
.facct .facct-dots{display:flex; gap:8px; flex:0 1 auto; min-width:0}
.facct .facct-dot{
  flex:0 1 28px; width:28px; min-width:8px; height:23px; padding:10px 0; margin:0; cursor:pointer;   /* 3px bar, taller hit area */
  background:var(--facct-line); background-clip:content-box; border:0; border-radius:0;
  transition:background-color .15s;
}
.facct .facct-dot:hover{background-color:var(--facct-ink)}
.facct .facct-dot[aria-current="true"]{background-color:var(--facct-green)}

/* ================= RESPONSIVE =================
   Each width resets the snap points (:nth-child(n), to outweigh the 4n+1 rule) and
   sets its own, so a swipe always stops at the start of a slide. */
@media (max-width:1499px){   /* Uncode's laptop breakpoint: 2 per slide, so opened quotes have room */
  .facct{--facct-per:2}
  .facct .facct-item:nth-child(n){scroll-snap-align:none}
  .facct .facct-item:nth-child(2n+1){scroll-snap-align:start}
}
@media (max-width:959px){
  .facct{--facct-gap:28px}
}
@media (max-width:569px){
  .facct{--facct-per:1}
  .facct .facct-item:nth-child(n){scroll-snap-align:start}
  .facct .facct-nav{gap:.8rem}
  .facct .facct-dots{gap:6px}
  .facct .facct-quote p{font-size:1.05rem}
}