.nyhx{--p:#8D22C3;--plt:#A93FDD;font-family:inherit;color:#15192C;grid-column:1 / -1;width:100%;min-width:0;flex:1 1 100%}
.nyhx *{box-sizing:border-box}
.nyhx-realms{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.nyhx-realm{border:1.5px solid #e2d6f0;background:#fff;color:#261A48;cursor:pointer;padding:8px 17px;border-radius:999px;font-family:inherit;font-weight:600;font-size:13.5px;transition:.15s}
.nyhx-realm:hover{border-color:var(--p);color:var(--p)}
.nyhx-realm.on{background:var(--p);border-color:var(--p);color:#fff}
.nyhx-rail-outer{position:relative}
.nyhx-rail{--nyhx-gap:22px;display:flex;align-items:flex-start;gap:var(--nyhx-gap);overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 2px 14px;width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#c9b8e0 transparent}
.nyhx-rail::-webkit-scrollbar{height:8px}
.nyhx-rail::-webkit-scrollbar-track{background:transparent}
.nyhx-rail::-webkit-scrollbar-thumb{background:#d3c4ea;border-radius:999px}
.nyhx-rail::-webkit-scrollbar-thumb:hover{background:#b79fd8}
.nyhx-rail::-webkit-scrollbar{height:0}
.nyhx-arrow{position:absolute;top:44%;transform:translateY(-50%);z-index:6;width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;background:#fff;color:#261A48;font-size:20px;line-height:1;box-shadow:0 8px 22px rgba(20,12,45,.22);display:none;align-items:center;justify-content:center;transition:transform .15s,background .15s}
.nyhx-rail-outer:hover .nyhx-arrow{display:none}
.nyhx-arrow:hover{background:var(--p);color:#fff;transform:translateY(-50%) scale(1.06)}
.nyhx-arrow.prev{left:-8px}.nyhx-arrow.next{right:-8px}
.nyhx-arrow{display:none !important}
.nyhx-card{position:relative;display:flex;flex-direction:column;flex:0 0 clamp(200px,24vw,232px);width:auto;max-width:86vw;align-self:stretch;background:#fff;border:1.5px solid rgba(38,26,72,.12);border-radius:14px;overflow:hidden;text-decoration:none;color:#261A48;isolation:isolate;scroll-snap-align:start;box-shadow:0 4px 18px rgba(20,12,40,.06);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.nyhx-card:hover{transform:translateY(-6px);box-shadow:0 16px 30px -16px rgba(20,12,40,.36)}
.nyhx-media{position:relative;aspect-ratio:4/5;overflow:hidden}
.nyhx-bg{position:absolute;inset:0;z-index:0;display:block;transition:transform .6s ease;background-size:cover;background-position:center}
.nyhx-card:hover .nyhx-bg{transform:scale(1.05)}
.nyhx-shade{position:absolute;inset:0;z-index:1;display:block;background:linear-gradient(to bottom,rgba(8,5,18,.34) 0%,rgba(8,5,18,0) 42%)}
.nyhx-top{position:absolute;top:0;left:0;right:0;z-index:2;padding:11px;display:flex;justify-content:flex-start;align-items:flex-start;gap:8px}
.nyhx-badge{display:inline-flex;align-items:center;gap:5px;font-family:inherit;font-weight:700;font-size:10.5px;letter-spacing:.4px;color:#2a1402;background:#F2B23B;padding:5px 9px;border-radius:8px;white-space:nowrap}
.nyhx-badge.rec{background:rgba(0,0,0,.34);backdrop-filter:blur(10px);color:#fff;font-weight:500;font-size:10px}
.nyhx-badge.free{background:#fff;color:var(--p)}
.nyhx-body{display:flex;flex-direction:column;flex:1;padding:11px 13px 13px}
.nyhx-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance;font-family:inherit;font-weight:600;font-size:14.5px;line-height:1.3;height:calc(2 * 1.3em);color:#261A48}
.nyhx-meta{display:flex;align-items:center;gap:5px;font-family:inherit;font-size:12px;color:#261A48;opacity:.62;margin-top:6px;height:1.5em;overflow:hidden;white-space:nowrap}
.nyhx-ment{font-weight:600}
.nyhx-when{display:inline-flex;align-items:center;gap:5px}
.nyhx-ment + .nyhx-when::before{content:"\00b7";opacity:.6;margin-right:3px}
.nyhx-foot{margin-top:auto;padding-top:11px;display:flex;align-items:center;justify-content:flex-start}
.nyhx-buy{display:inline-flex;align-items:center;gap:6px;background:var(--p);color:#fff;border-radius:999px;padding:8px 13px;box-shadow:0 8px 18px -10px rgba(141,34,195,.9);transition:background .25s}
.nyhx-buy-price{display:inline-block;font-family:inherit;font-weight:600;font-size:13px;line-height:1;color:#fff;white-space:nowrap}
.nyhx-buy-go{flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;color:#fff}
.nyhx-card:hover .nyhx-buy{background:var(--plt)}
@media(max-width:980px){.nyhx-card{flex:0 0 auto;width:min(60vw,232px);max-width:none}}
@media(max-width:600px){
	/* keep the filters and cards off the screen edges on phones */
	.nyhx{padding-left:16px;padding-right:16px}
	.nyhx-rail{--nyhx-gap:14px}
	/* Explicit width so the card never balloons even if the Elementor container
	   it sits in leaves its width unconstrained. Height comes from the 4:5 media
	   plus the text panel, so no fixed height is needed. */
	.nyhx-card{flex:0 0 auto;width:min(72vw,240px);max-width:none}
	.nyhx-realms{gap:8px}
	.nyhx-realms.is-img{gap:8px}
	.nyhx-realms.is-img .nyhx-realm{flex:1 1 calc(50% - 4px);min-width:0}
	.nyhx-realm.has-img{min-width:0;height:60px}
}

/* category filtering + graceful empty state (added for the shortcode) */
.nyhx-card.nyhx-hide{display:none !important}
.nyhx-rail:empty::after,.nyhx-rail.nyhx-none::after{content:"No items to show yet.";display:block;padding:28px 4px;color:#8a83a0;font-family:inherit;font-size:14px}

/* ── Shared catalog card (.nyc-card) rendered inside a home rail ──────────────
   Rails now render the exact catalog card component. The catalog's grid widths
   (width:95%; justify-self:center) don't apply in the rail's horizontal flex
   scroller, so re-apply the rail item sizing here — mirroring the old
   .nyhx-card breakpoints so the visual footprint is unchanged. The card's own
   aspect-ratio, colours and internals come from catalog.css. */
/* The catalog card reads --nyc-* custom properties that catalog.css defines on
   the .nyc root — which is absent here (the card lives under .nyhx). Re-declare
   the palette on the card so its buy button, badges and focus ring keep their
   brand colours. Custom properties inherit, so descendants pick these up. */
.nyhx-rail > .nyc-card{
  --nyc-purple:#8D22C3;--nyc-purple-lt:#A93FDD;--nyc-deep:#261A48;
  --nyc-orange:#FF551D;--nyc-peach:#FFD4C6;--nyc-cream:#FAF9F6;
  --nyc-navy:#15192C;--nyc-grey:#B0B0B0;--nyc-line:rgba(38,26,72,.10);
  flex:0 0 clamp(200px,24vw,232px);width:auto;max-width:86vw;justify-self:auto;margin-inline:0;align-self:stretch;scroll-snap-align:start}
@media(max-width:980px){.nyhx-rail > .nyc-card{flex:0 0 auto;width:min(60vw,232px);max-width:none}}
@media(max-width:600px){.nyhx-rail > .nyc-card{flex:0 0 auto;width:min(72vw,240px);max-width:none}}
.nyhx-rail > .nyc-card.nyhx-hide{display:none !important}

/* image-backed filter buttons */
.nyhx-realm{position:relative;overflow:hidden}
.nyhx-realm.has-img{border:none;color:#fff;padding:0;min-width:150px;height:74px;border-radius:12px;background-size:cover;background-position:center;display:inline-flex;align-items:center;justify-content:center}
.nyhx-realm.has-img::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(18,10,38,.55),rgba(18,10,38,.2))}
.nyhx-realm.has-img .nyhx-realm-t{position:relative;font-weight:700;font-size:15px;color:#fff}
.nyhx-realm.has-img.on{box-shadow:0 0 0 2px #E9A6F0,0 8px 22px rgba(141,34,195,.35)}

/* Community Speaks — rotating, no box, initials circles (heading stays in section) */
.elementor-element-ad8e6b3{background:linear-gradient(180deg,#FCEEE6 0%,#F7DBCE 100%) !important}
.nyh-tst{font-family:inherit;text-align:center;max-width:760px;margin:0 auto;padding:64px 16px 60px}
.nyh-tst-eyebrow{font-family:inherit;font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:#8D22C3;margin-bottom:6px}
.nyh-tst-h2{font-family:inherit;font-weight:700;font-size:clamp(26px,3.4vw,38px);line-height:1.15;color:#261A48;margin:0 0 26px}
.nyh-tst-stage{min-height:148px}
.nyh-tst-quote{font-size:clamp(19px,2.3vw,26px);line-height:1.55;color:#2c2440;margin:0 0 18px;transition:opacity .3s}
.nyh-tst-program{font-family:inherit;font-weight:600;font-size:14px;letter-spacing:.04em;color:#8D22C3;margin:0 0 18px;min-height:1em;transition:opacity .3s}
.nyh-tst-program:empty{display:none}
.nyh-tst-who{display:inline-flex;align-items:center;justify-content:center;gap:12px}
.nyh-tst-av{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:18px;flex:none;font-family:inherit}
.nyh-tst-meta{text-align:left;display:flex;flex-direction:column;justify-content:center}
.nyh-tst-name{font-weight:600;font-size:16px;color:#261A48}
.nyh-tst-role{font-size:13px;color:#6f6786}
.nyh-tst-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:22px}
.nyh-tst-prev,.nyh-tst-next{width:auto;height:auto;border:none;background:transparent;color:#8D22C3;cursor:pointer;font-size:30px;line-height:1;padding:4px 10px;box-shadow:none}
.nyh-tst-prev:hover,.nyh-tst-next:hover{color:#E96F46}
.nyh-tst-dots{display:none}
.nyh-tst-dots{display:flex;gap:8px}
.nyh-tst-dot{width:9px;height:9px;border-radius:50%;border:none;cursor:pointer;padding:0;background:#d9cfe8}
.nyh-tst-dot.on{background:#8D22C3}
.nyh-tst-data{display:none}

/* image-filter row: even widths like the original */
.nyhx-realms.is-img{gap:12px}
.nyhx-realms.is-img .nyhx-realm{flex:1 1 150px}

/* never underline our CTAs / links, including on hover */
.nyhx-card,.nyhx-card:hover,.nyhx-card:focus,.nyhx-buy,.nyhx-seeall,.nyhx-realm,.nyh-tst-prev,.nyh-tst-next,.nyh-tst a{text-decoration:none !important}

/* ── Events section: same boxed column + side gutter as the Programs / Sadhana
   rails, desktop and mobile ───────────────────────────────────────────────────
   Programs / Sadhanas / Live sit in Elementor-id'd containers that inherit the
   theme's boxed content-width (min(100%, --container-max-width)) and centre their
   inner, so their card rail starts at the centred content column. The events
   section is the one hand-placed container: on some mounts its inner runs
   full-width, so the events rail sits flush to the viewport edge while the others
   are inset. Pin the events inner to the same content column (tracking the theme's
   own --container-max-width, so it matches at every breakpoint), and add the same
   20px side gutter the other rails pick up at <=767px. !important beats Elementor's
   own .e-con>.e-con-inner max-width so a full-width mount can't win. */
.nypl-events-section > .e-con-inner{
  max-width:min(100%,var(--container-max-width,1140px)) !important;
  margin-inline:auto !important;
  width:100%;
}
@media(max-width:767px){
  .nypl-events-section > .e-con-inner{padding-inline:20px}
}

/* ── Events rail boxes ITSELF to the content column ────────────────────────────
   The rule above only works when the events section carries .nypl-events-section
   (the baked template). On the live Elementor homepage the events rail is mounted
   inside a plain, full-width container that has no such class, so the rail ran
   flush to the viewport edge there. This keys off a class printed directly ONTO
   the rail markup (.nyhx-r-events), so it lands no matter what wraps it: box the
   whole rail to the theme's content width and centre it, matching where the
   Programs / Sadhana rails start. A no-op where the rail already sits in a boxed
   container (it's already <= that width). Tracks the theme's own
   --container-max-width so it lines up at every breakpoint; mobile gutter matches
   the 20px (<=767px) + 16px (<=600px) the other rails pick up. */
.nyhx.nyhx-r-events{max-width:min(100%,var(--container-max-width,1140px));margin-inline:auto;width:100%}
@media(max-width:767px){.nyhx.nyhx-r-events{max-width:100%;padding-inline:20px}}
@media(max-width:600px){.nyhx.nyhx-r-events{padding-inline:36px}}