/* wps-rotator.css — "What People Say" rotator.
   Loads on menu 482 ("What People Say — Rotator Preview") and menu 258
   (school home) via the mod_rawtags module 199. Works with two source
   layouts:
     - a Joomla Category Blog list       (.blog .items-leading .page-header + <p>)
     - a Gantry content-array particle   (.wps-wrapper .g-content-array .g-array-item)
   The script tags the source with .wpsr-source and builds .wpsr. */

.wpsr-source{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

@keyframes wpsr-in{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}

.wpsr{
  --wpsr-green:#34603A;
  --wpsr-rule:rgba(255,255,255,.30);
  --wpsr-ink:#ffffff;
  --wpsr-ink-soft:rgba(255,255,255,.82);
  --wpsr-bubble:#ffffff;
  --wpsr-bubble-mark:#2B3F2B;
  font-family:'Literata', Georgia, 'Times New Roman', serif;
  background:var(--wpsr-green);
  color:var(--wpsr-ink);
  border-radius:14px;
  padding:2.4rem clamp(1.15rem,4vw,2rem) 2.6rem;
  margin:.5rem 0 2rem;
  animation:wpsr-in .55s cubic-bezier(.22,.61,.36,1) both;
}
.wpsr *{ box-sizing:border-box; }

.wpsr-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.1rem;
  margin:0 0 2rem;
  padding:0;
  border:0;
  font-size:clamp(1.4rem,3vw,1.9rem);
  font-weight:600;
  color:var(--wpsr-ink);
  text-align:center;
}
.wpsr-title::before,
.wpsr-title::after{
  content:"";
  flex:1;
  max-width:170px;
  height:1px;
  background:var(--wpsr-rule);
}

.wpsr-stage{ max-width:1080px; margin:0 auto; }

.wpsr-card{
  display:flex;
  gap:1.6rem;
  align-items:flex-start;
  padding:1.9rem 2.1rem;
  background:rgba(255,255,255,.055);
  border:1px solid var(--wpsr-rule);
  border-radius:12px 12px 0 0;
}

.wpsr-icon{
  position:relative;
  flex:none;
  width:78px;
  height:66px;
  margin-top:.15rem;
  border-radius:16px;
  background:var(--wpsr-bubble);
  display:grid;
  place-items:center;
  transition:transform .5s cubic-bezier(.34,1.4,.64,1);
}
.wpsr-icon::after{
  content:"";
  position:absolute;
  left:18px;
  bottom:-11px;
  border:12px solid transparent;
  border-bottom:0;
  border-top-color:var(--wpsr-bubble);
  border-left-width:4px;
  border-right-width:17px;
}
.wpsr-icon span{
  font-size:2.5rem;
  line-height:1;
  font-weight:700;
  color:var(--wpsr-bubble-mark);
  transform:translateY(.2em);
}
/* gentle dip + spring on the speech bubble as the quote changes */
.wpsr.is-swapping .wpsr-icon{ transform:scale(.9); }

.wpsr-quote-wrap{
  flex:1;
  min-height:6rem; /* JS raises this to hold the card steady across quotes */
  display:flex;
  flex-direction:column;
  justify-content:center;
  transition:min-height .35s ease;
}

/* neutralise the theme's <blockquote> styling completely */
.wpsr blockquote.wpsr-quote{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  color:var(--wpsr-ink) !important;
  quotes:none;
  font-style:normal;
  opacity:1;
  transform:translateY(0);
  transition:opacity .4s ease, transform .4s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.wpsr blockquote.wpsr-quote::before,
.wpsr blockquote.wpsr-quote::after,
.wpsr .wpsr-attr::before,
.wpsr .wpsr-attr::after{
  content:none !important;
}
/* the "leaving" state — a touch quicker than the ease back in */
.wpsr-quote.is-swapping{
  opacity:0;
  transform:translateY(12px);
  transition-duration:.26s;
}

.wpsr-quote-body p{
  margin:0 0 1rem;
  font-style:italic;
  font-size:clamp(1.12rem,1.7vw,1.32rem);
  line-height:1.62;
  color:var(--wpsr-ink);
}
.wpsr-quote-body p:last-child{ margin-bottom:0; }

.wpsr-attr{
  display:flex;
  flex-direction:column;
  gap:.12rem;
  margin-top:1.1rem;
  padding-top:.95rem;
  border-top:1px solid var(--wpsr-rule);
  color:var(--wpsr-ink);
}
.wpsr-name{ font-weight:700; font-size:1.18rem; font-style:normal; color:var(--wpsr-ink); }
.wpsr-role{
  font-size:.76rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--wpsr-ink-soft);
}

.wpsr-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.7rem 1rem;
  background:rgba(255,255,255,.055);
  border:1px solid var(--wpsr-rule);
  border-top:0;
  border-radius:0 0 12px 12px;
}
.wpsr-nav{
  flex:none;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--wpsr-rule);
  border-radius:50%;
  background:transparent;
  color:var(--wpsr-ink);
  cursor:pointer;
  transition:background .15s ease;
}
.wpsr-nav:hover{ background:rgba(255,255,255,.14); }
.wpsr-nav svg{ width:15px; height:15px; display:block; }
.wpsr-dots{ display:flex; gap:.55rem; }
.wpsr-dot{
  width:9px;
  height:9px;
  padding:0;
  border:0;
  border-radius:2.5px;
  background:rgba(255,255,255,.35);
  cursor:pointer;
  transition:background .2s ease, transform .2s cubic-bezier(.34,1.4,.64,1);
}
.wpsr-dot[aria-current="true"]{ background:#FBFAF6; transform:scale(1.3); }

.wpsr-progress{
  height:3px;
  margin-top:.85rem;
  border-radius:2px;
  background:var(--wpsr-rule);
  overflow:hidden;
}
.wpsr-progress-bar{
  display:block;
  height:100%;
  width:100%;
  transform:scaleX(0);
  transform-origin:left center;
  background:#FBFAF6;
}

.wpsr-nav:focus-visible,
.wpsr-dot:focus-visible,
.wpsr:focus-visible{
  outline:2px solid #FBFAF6;
  outline-offset:3px;
}

@media (max-width:700px){
  .wpsr-card{ flex-direction:column; gap:1rem; }
  .wpsr-icon{ margin-top:0; }
  .wpsr-quote-wrap{ min-height:0; }
}
@media (prefers-reduced-motion:reduce){
  .wpsr{ animation:none; }
  .wpsr-progress{ visibility:hidden; }
  .wpsr blockquote.wpsr-quote{ transition:none; transform:none; }
  .wpsr-quote.is-swapping{ transform:none; }
  .wpsr-quote-wrap{ transition:none; }
  .wpsr-icon{ transition:none; }
  .wpsr.is-swapping .wpsr-icon{ transform:none; }
  .wpsr-dot,.wpsr-nav{ transition:none; }
}