/*
 * MSterious Miracles - volunteer positions carousel.
 *
 * Generated by build-plugin-assets.py from positions-carousel.html.
 * Every rule is prefixed with `.msm-pc`: the theme styles page content with
 * selectors like `.entry-content ul`, which outranks a bare class.
 */
.msm-pc ul,.msm-pc ol,.msm-pc li{margin:0;padding:0;list-style:none;}
.msm-pc figure,.msm-pc p,.msm-pc h3{margin:0;}

/* ------------------------------------------------------------------
   Local review copy. Colours follow the Astra theme's global palette
   so this drops onto msteriousmiracles.org without a restyle.
   ------------------------------------------------------------------ */
.msm-pc{
  color:var(--msm-text);line-height:1.65;
  --msm-accent:#046bd2;
  --msm-accent-dark:#045cb4;
  --msm-heading:#1e293b;
  --msm-text:#334155;
  --msm-surface:#f0f5fa;
  --msm-border:#d8e0ea;
  --msm-muted:#64748b;
  --msm-radius:10px;
}.msm-pc,.msm-pc *,.msm-pc *::before,.msm-pc *::after{box-sizing:border-box;}

/* ---------- Carousel shell ---------- */
.msm-pc{
  border:1px solid var(--msm-border);
  border-radius:var(--msm-radius);
  background:#fff;overflow:hidden;
}.msm-pc .msm-pc__viewport{overflow:hidden;}.msm-pc .msm-pc__track{
  display:flex;margin:0;padding:0;list-style:none;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}.msm-pc .msm-pc__slide{flex:0 0 100%;min-width:0;}

/* ---------- Slide layout ---------- */
/* No height:100% on the stacked layout. With a definite height to work from,
   the figure's aspect-ratio resolves width *from* height and blows the column
   out past the slide; width:100% below forces the intended direction. */
.msm-pc .msm-pc__inner{display:grid;grid-template-columns:1fr;}
@media (min-width:820px){.msm-pc .msm-pc__inner{grid-template-columns:1.15fr 1fr;align-items:stretch;min-height:430px;height:100%;}
}
/* The figure is the positioning context and the image fills it absolutely.
   Sizing the image with height:100% instead would collapse to its natural
   height, because the figure's own height comes from the grid row. */
.msm-pc .msm-pc__figure{
  margin:0;position:relative;background:var(--msm-surface);
  width:100%;min-width:0;aspect-ratio:16/10;
}
@media (min-width:820px){.msm-pc .msm-pc__figure{aspect-ratio:auto;} }.msm-pc .msm-pc__figure img{
  position:absolute;inset:0;display:block;
  width:100%;height:100%;object-fit:cover;
}
/* Some photos have their subject off-centre; `focus` shifts the crop. */
.msm-pc .msm-pc__body{
  padding:28px 30px 32px;min-width:0;
  display:flex;flex-direction:column;justify-content:center;
}
@media (min-width:820px){.msm-pc .msm-pc__body{padding:36px 40px;} }.msm-pc .msm-pc__eyebrow{
  margin:0 0 .5em;font-size:12px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--msm-accent);
}.msm-pc .msm-pc__title{
  margin:0 0 .5em;font-size:26px;line-height:1.2;font-weight:700;color:var(--msm-heading);
}
@media (min-width:820px){.msm-pc .msm-pc__title{font-size:30px;} }.msm-pc .msm-pc__desc{margin:0;font-size:15.5px;line-height:1.7;}.msm-pc .msm-pc__badges{margin:1em 0 0;display:flex;gap:.5em;flex-wrap:wrap;}.msm-pc .msm-pc__badge{
  display:inline-block;padding:.3em .85em;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.03em;
  background:var(--msm-surface);color:var(--msm-accent-dark);
  border:1px solid var(--msm-border);
}.msm-pc .msm-pc__badge--warn{background:#fdf3f2;color:#b3261e;border-color:#f3c9c5;}

/* ---------- Controls ---------- */
.msm-pc .msm-pc__controls{
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;border-top:1px solid var(--msm-border);
  background:var(--msm-surface);
}
/* padding:0 and min-width:0 are load-bearing, not tidiness. A theme that gives
   buttons horizontal padding raises this flex item's automatic minimum size
   (min-width:auto resolves to min-content), which clamps the width up and
   stretches the circle into an oval - width alone cannot override that. */
.msm-pc .msm-pc__btn{
  flex:none;width:42px;height:42px;min-width:0;padding:0;
  border-radius:50%;
  border:1px solid var(--msm-border);background:#fff;color:var(--msm-heading);
  cursor:pointer;display:grid;place-items:center;line-height:1;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}.msm-pc .msm-pc__btn:hover:not(:disabled){background:var(--msm-accent);border-color:var(--msm-accent);color:#fff;}.msm-pc .msm-pc__btn:disabled{opacity:.35;cursor:default;}.msm-pc .msm-pc__btn svg{width:18px;height:18px;}.msm-pc .msm-pc__btn:focus-visible,.msm-pc .msm-pc__dot:focus-visible{outline:2px solid var(--msm-accent);outline-offset:2px;}.msm-pc .msm-pc__dots{
  flex:1;display:flex;flex-wrap:wrap;gap:7px;justify-content:center;
  margin:0;padding:0;list-style:none;
}.msm-pc .msm-pc__dot{
  width:10px;height:10px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--msm-border);background:#fff;
  transition:background-color .15s ease,transform .15s ease;
}.msm-pc .msm-pc__dot[aria-current="true"]{background:var(--msm-accent);border-color:var(--msm-accent);transform:scale(1.25);}.msm-pc .msm-pc__sr{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){.msm-pc .msm-pc__track{transition:none;}.msm-pc .msm-pc__dot{transition:none;}
}

/* ---------- No-JavaScript / pre-init fallback ----------
   Until the script marks the carousel ready every position is simply listed
   down the page, so the content is never trapped behind controls that cannot
   work. The sliding layout is applied only once behaviour is attached. */
.msm-pc .msm-pc__track{display:block;}
.msm-pc .msm-pc__slide + .msm-pc__slide{border-top:1px solid var(--msm-border);}
.msm-pc .msm-pc__controls{display:none;}

.msm-pc.is-ready .msm-pc__track{display:flex;}
.msm-pc.is-ready .msm-pc__slide{flex:0 0 100%;min-width:0;}
.msm-pc.is-ready .msm-pc__slide + .msm-pc__slide{border-top:0;}
.msm-pc.is-ready .msm-pc__controls{display:flex;}

/* ---------- Narrow screens ----------
   A row of sixteen dots wraps onto two lines and gives tiny tap targets, so
   below this width the position counter replaces them. */
.msm-pc .msm-pc__count{
  display:none;flex:1;text-align:center;
  font-size:14px;font-weight:600;color:var(--msm-muted);
  font-variant-numeric:tabular-nums;
}
@media (max-width:559px){
  .msm-pc .msm-pc__dots{display:none;}
  .msm-pc .msm-pc__count{display:block;}
  .msm-pc .msm-pc__controls{padding:12px 14px;}
}

/* ---------- Containment ----------
   The track is a flex row of sixteen slides that each refuse to shrink below
   100% width. That makes its min-content width sixteen screens wide, and a
   flex ancestor with the default min-width:auto grows to fit it, pushing the
   whole page sideways on a phone. Nothing here may size to its own content. */
.msm-pc{width:100%;max-width:100%;min-width:0;}
.msm-pc .msm-pc__viewport{min-width:0;max-width:100%;}