/*
Theme Name: AfterShock Fam Child
Theme URI: https://staging.aftershockfam.org
Description: Hello Biz child theme for AfterShock Fam. Public marketing site is built with Elementor Free + JetEngine + JetThemeCore (native-widget-first). This child theme holds design tokens, conditionally-enqueued per-component CSS (last resort only), and functions.php hooks. NEVER edit the Hello Biz parent.
Author: AfterShock Fam
Template: hello-biz
Version: 1.6.8
Text Domain: aftershockfam-child
*/

/* Design tokens + utilities live here. Per elementor-patterns.md Rule 3,
   mu-plugins NEVER style public pages and CSS is the last resort — prefer
   native Elementor widget settings. Component CSS goes in assets/css/ and is
   conditionally enqueued via functions.php. */

/* ── Element-ID-scoped JetEngine-widget CSS (read before extending) ──────────
   These blocks exist ONLY because JetEngine widget style/grid CSS does not emit
   on a headless `wp elementor flush-css` (doc-test D13/D26) and LiteSpeed drops
   separately-enqueued files (D22). Each is scoped to ONE Elementor element id.
   Inventory — keep this list current when adding/removing a block:
     .elementor-element-aee85bf  → HOME Research accordion (jet-accordion) styling
     .elementor-element-{6ba9c9e,f10931b,6cc1987,6ab52f6,fe5cd05,998dab3,47255ee} → Our Partners 7 category grids (3-up) + .asf-partner-logo box
     .elementor-element-1dbcc05  → Events listing grid (3-up flex)
     .elementor-widget-jet-tabs  → ALL home jet-tabs pill styling + content-wrapper + mobile-stack (WWWW/Programs/Services; widget-class scoped to dodge per-id drift)
     .elementor-widget-jet-horizontal-timeline → WWWW (#05) timeline: line/nodes/cards/arrows (D53; replaced the old 3dd8f19… card-row grid)
     .elementor-widget-jet-slider → Programs/Services (#06/#07) slider overlay + thumbnail nav (D53; replaced the old 777a61b overlay card)
     .elementor-element-{0dc0bbb,4b29bc7,5fe96d4 / d592af2,a6d3c46,91adf8a} → How We Help (#04) 2-col text/photo split (flex-child width non-emission, D33/D53)
     .asf-pg-*  → /our-programs/ FLAT grid card + the shared headwrap/solid/ghost-echo heading (also reused by home #06/#07 + /our-services/, D51/D53)
     .elementor-element-{e6ba79a,aab9164,ad0c11a} + .asf-sv-* → /our-services/ 3 category grids (3-up) + magenta card title/eyebrow/divider (S18)
     .elementor-element-{cc6f76e,5752ace} + .asf-mu-* + #157b660 → /our-music/ 2 category grids (3-up) + card title/terms + MUSIC hero (S19, D59)
     .elementor-element-{d635091,a40e9c6,ba4d92a} + .asf-op-* + #19bdfe0 → /our-opportunities/ 3 category grids + card + OPPORTUNITIES hero (S19, D60)
     .elementor-element-{d098106,8d9ae04} + .asf-cr-* + #fe3da0f → /content-resources/ 2 category grids + card + CONTENT&RESOURCES hero (S19, D61)
     .jet-listing-not-found → JetEngine empty-grid message forced white on dark (axe; S19)
     .elementor-widget-jet-form-builder-form → #09/#10 form labels white on dark (JFB default label is #333)
     .asf-single-* → CPT Single templates (program/partner/event) native dynamic body (D55)
   The proper fix is an editor Update per page (emits the CSS into post-<id>.css);
   these scoped blocks keep the rebuild fully headless. Confirm the native/editor-save
   path genuinely can't deliver before adding a block (D13/D32). */

/* ── GLOBAL DARK PAGE BACKGROUND — now KIT-DRIVEN (S26 A2, D72) ──────────────
   REMOVED the child-CSS `body:not(.asf-dash-page){background:#0a0218}` override.
   The dark canvas is now seeded into the Elementor Global Kit itself
   (scripts/seed/jet/seed-kit.php sets body_background_color #0A0218 +
   system_colors/typography to the source-exact palette). The kit emits
   `.elementor-kit-4{background-color:#0A0218}` (specificity 0,1,0) which beats
   HelloBiz's `body{background:#fff}` (0,0,1) — verified via computed-style probe
   that no parent rule paints the inner wrappers white, so the body rule alone
   covers the canvas. This makes the dark background REPRODUCIBLE from git (re-run
   seed-kit.php after a wipe) instead of a child-CSS patch. SPA dashboards are
   unaffected (they carry .asf-dash-page and paint their own opaque surface; the
   kit body bg sits behind that). If a future page exposes a white HelloBiz wrapper,
   re-add a scoped wrapper rule here — but the body canvas stays kit-owned. */

/* ── Listing-card default text color (S24/D68 axe fix) ──────────────────────
   JetEngine `jet-listing-dynamic-field` renders `.jet-listing-dynamic-field__content`
   at the default #333. On the dark cards (#2a2a2a) any field WITHOUT an explicit
   per-card color class is invisible AND fails axe color-contrast (1.13:1) — this hit
   the partner card's post_title + description + category fields (84 nodes/page) and the
   program card. Force a light default for field content inside listing items; the specific
   magenta tag/eyebrow rules below still win on their own classes via specificity. */
.jet-listing-grid__item .jet-listing-dynamic-field__content {
  color: #f5f0ff;
}
/* The whole-card overlay link tints inner text with the theme anchor color (#f05b5b);
   keep field content readable regardless. */
.jet-listing-grid__item .jet-engine-listing-overlay-wrap .jet-listing-dynamic-field__content {
  color: #f5f0ff;
}

/* HOME Research accordion (#08) — jet-accordion style settings don't emit CSS on
   a headless flush (doc-test D13); a separate conditionally-enqueued file gets
   dropped by LiteSpeed CSS-combine (D22). So the scoped rules live in the
   already-loaded child style.css, targeting the one widget id. Source = purple
   bars + white labels on the dark page. */
.elementor-element-aee85bf .jet-toggle {
  background-color: #4f217d !important; /* source PURPLE bars, not dark #2a2a2a (D53) */
  border-radius: 8px;
  margin-bottom: 14px;
  overflow: hidden;
}
.elementor-element-aee85bf .jet-toggle__label-text,
.elementor-element-aee85bf .jet-toggle__heading {
  color: #ffffff !important;
  font-weight: 600;
  text-transform: none !important; /* source labels are sentence-case (D53) */
}
.elementor-element-aee85bf .jet-toggle__control,
.elementor-element-aee85bf .jet-toggle__label-icon {
  color: #ffffff !important;
}
.elementor-element-aee85bf .jet-toggle__content {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
}
.elementor-element-aee85bf .jet-toggle__content p {
  color: #ffffff !important;
}

/* Our Partners — 7 category 3-up listing grids (#03–#08 + Sponsors). JetEngine emits the
   items wrapper as `.jet-listing-grid__items.grid-col-desk-3` (display:flex) but the per-item
   WIDTH CSS only generates on an editor save, not a headless flush (D13/D26) — so all items
   sit full-width and only ~2 fit. Force the source's 3-up by sizing the flex items. Each of
   the 7 grids has its own element id (deterministic asf_p_eid('grid-<cat>')); the OLD single
   id 4038410 from the pre-categories build no longer exists on the page (D38 — a hardcoded id
   that stopped matching after the rebuild). Written via the editor, NOT a heredoc (D24). */
.elementor-element-6ba9c9e .jet-listing-grid__items,
.elementor-element-f10931b .jet-listing-grid__items,
.elementor-element-6cc1987 .jet-listing-grid__items,
.elementor-element-6ab52f6 .jet-listing-grid__items,
.elementor-element-fe5cd05 .jet-listing-grid__items,
.elementor-element-998dab3 .jet-listing-grid__items,
.elementor-element-47255ee .jet-listing-grid__items {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
}
.elementor-element-6ba9c9e .jet-listing-grid__items > .jet-listing-grid__item,
.elementor-element-f10931b .jet-listing-grid__items > .jet-listing-grid__item,
.elementor-element-6cc1987 .jet-listing-grid__items > .jet-listing-grid__item,
.elementor-element-6ab52f6 .jet-listing-grid__items > .jet-listing-grid__item,
.elementor-element-fe5cd05 .jet-listing-grid__items > .jet-listing-grid__item,
.elementor-element-998dab3 .jet-listing-grid__items > .jet-listing-grid__item,
.elementor-element-47255ee .jet-listing-grid__items > .jet-listing-grid__item {
  flex: 0 0 calc((100% - 40px) / 3) !important;
  max-width: calc((100% - 40px) / 3) !important;
}
@media (max-width: 1024px) {
  .elementor-element-6ba9c9e .jet-listing-grid__items > .jet-listing-grid__item,
  .elementor-element-f10931b .jet-listing-grid__items > .jet-listing-grid__item,
  .elementor-element-6cc1987 .jet-listing-grid__items > .jet-listing-grid__item,
  .elementor-element-6ab52f6 .jet-listing-grid__items > .jet-listing-grid__item,
  .elementor-element-fe5cd05 .jet-listing-grid__items > .jet-listing-grid__item,
  .elementor-element-998dab3 .jet-listing-grid__items > .jet-listing-grid__item,
  .elementor-element-47255ee .jet-listing-grid__items > .jet-listing-grid__item {
    flex: 0 0 calc((100% - 20px) / 2) !important;
    max-width: calc((100% - 20px) / 2) !important;
  }
}
@media (max-width: 767px) {
  .elementor-element-6ba9c9e .jet-listing-grid__items > .jet-listing-grid__item,
  .elementor-element-f10931b .jet-listing-grid__items > .jet-listing-grid__item,
  .elementor-element-6cc1987 .jet-listing-grid__items > .jet-listing-grid__item,
  .elementor-element-6ab52f6 .jet-listing-grid__items > .jet-listing-grid__item,
  .elementor-element-fe5cd05 .jet-listing-grid__items > .jet-listing-grid__item,
  .elementor-element-998dab3 .jet-listing-grid__items > .jet-listing-grid__item,
  .elementor-element-47255ee .jet-listing-grid__items > .jet-listing-grid__item {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}
/* Logo box — source renders each logo in a fixed 313×250 object-fit:cover box on a light
   tile so wildly-varying natural logo dimensions (300×61 … 232×300) read as a uniform grid.
   Scoped to the partner-logo widget class inside every category grid. */
.asf-partner-logo img {
  width: 100% !important;
  height: 220px !important;
  object-fit: contain !important;
  display: block;
  background: #ffffff;
  border-radius: 8px 8px 0 0;
  padding: 16px;
}

/* Events listing grid (#1dbcc05) — same 3-up flex fix as the partners grid
   (jet-listing-grid per-item width CSS doesn't emit headlessly — D13/D26).
   Written via the editor, not a heredoc (D24). */
.elementor-element-1dbcc05 .jet-listing-grid__items {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
}
.elementor-element-1dbcc05 .jet-listing-grid__items > .jet-listing-grid__item {
  flex: 0 0 calc((100% - 40px) / 3) !important;
  max-width: calc((100% - 40px) / 3) !important;
}
@media (max-width: 1024px) {
  .elementor-element-1dbcc05
    .jet-listing-grid__items
    > .jet-listing-grid__item {
    flex: 0 0 calc((100% - 20px) / 2) !important;
    max-width: calc((100% - 20px) / 2) !important;
  }
}
@media (max-width: 767px) {
  .elementor-element-1dbcc05
    .jet-listing-grid__items
    > .jet-listing-grid__item {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* HOME Who We Work With (#05) — jet-tabs control (pill) styling. The widget's
   native control_* style settings (normal/active label colour) do NOT emit CSS on
   a headless flush (doc-test D13, same class as the accordion above), so the tab
   bar renders with JetTabs' default WHITE control background + near-white labels →
   color-contrast 1.11:1, an axe SERIOUS fail (D32). Source = dark tab bar, white
   inactive labels, magenta active label. ALL THREE home jet-tabs (WWWW #05, Programs
   #06, Services #07) share the same dark-theme design, so this targets the jet-tabs
   WIDGET CLASS rather than per-element ids — one rule covers every current + future
   home tab section (avoids the D38 per-id-drift trap). Magenta #ae2bde = 5.65:1 on the
   near-black bar (AA pass, D8 accent-as-text). Written via the editor, not a heredoc (D24). */
.elementor-widget-jet-tabs .jet-tabs__control-wrapper,
.elementor-widget-jet-tabs .jet-tabs__control {
  background-color: #2a2a2a !important;
}
/* Tab CONTENT panel — JetTabs defaults the content wrapper to WHITE; source is dark
   throughout (D53). Use the OPAQUE page bg (#0a0218, not transparent) so that during a
   tab cross-fade the incoming panel fully covers the outgoing one — a transparent panel
   let two panels' text briefly overlap each other's bg → transient axe contrast fails on
   the magenta panel headings (D53c). */
.elementor-widget-jet-tabs .jet-tabs__content-wrapper,
.elementor-widget-jet-tabs .jet-tabs__content {
  background-color: #0a0218 !important;
}
.elementor-widget-jet-tabs .jet-tabs__label-text {
  color: #ffffff !important;
  font-weight: 600;
  text-transform: uppercase;
}
.elementor-widget-jet-tabs .jet-tabs__control.active-tab .jet-tabs__label-text {
  color: #ae2bde !important;
}
.elementor-widget-jet-tabs .jet-tabs__label-icon,
.elementor-widget-jet-tabs .jet-tabs__control .jet-tabs__label-icon i {
  color: #ae2bde !important;
}
/* Mobile pill-stack (cookbook §9 gotcha — mobile_layout='accordion' unreliable):
   stack the pills full-width at ≤767px, matching the source's 375 capture. */
@media (max-width: 767px) {
  .elementor-widget-jet-tabs .jet-tabs__control-wrapper {
    flex-direction: column !important;
  }
  .elementor-widget-jet-tabs .jet-tabs__control {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}

/* WWWW (#05) — native jet-horizontal-timeline (JetElements). Source-exact widget
   (verified Jun-17 from aftershockfam.org DOM, D53): 3 cards visible of 6, magenta
   connecting line + circular nodes, card arrows, scroll-bar nav. The widget's per-item
   color/line settings do NOT emit on a headless flush (D13/D26 class), so the magenta
   accent + dark cards are forced here, scoped to the jet-horizontal-timeline WIDGET
   CLASS (one rule covers all 6 WWWW timelines + dodges per-id drift, D38). Written via
   the editor, not a heredoc (D24). */
.elementor-widget-jet-horizontal-timeline .jet-hor-timeline-line__progress,
.elementor-widget-jet-horizontal-timeline .jet-hor-timeline-line {
  background-color: #ae2bde !important;
}
.elementor-widget-jet-horizontal-timeline .jet-hor-timeline-item__point,
.elementor-widget-jet-horizontal-timeline .jet-hor-timeline-item__point-inner {
  background-color: #ae2bde !important;
  border-color: #ae2bde !important;
}
.elementor-widget-jet-horizontal-timeline .jet-hor-timeline-item__card,
.elementor-widget-jet-horizontal-timeline .jet-hor-timeline-item__card-inner {
  background-color: #2a2a2a !important; /* __card-inner defaults to off-white #f8f8f8 (D53) */
  border-radius: 14px;
}
.elementor-widget-jet-horizontal-timeline .jet-hor-timeline-item__card-arrow {
  border-top-color: #2a2a2a !important;
}
.elementor-widget-jet-horizontal-timeline .jet-hor-timeline-item__card-title {
  color: #ae2bde !important;
  font-weight: 600;
  text-transform: uppercase;
}
.elementor-widget-jet-horizontal-timeline .jet-hor-timeline-item__card-desc {
  color: #ffffff !important;
}
/* Nav arrows + scroll handle in the brand magenta */
.elementor-widget-jet-horizontal-timeline .jet-hor-timeline__arrow,
.elementor-widget-jet-horizontal-timeline .jet-hor-timeline-scroll__handler {
  color: #ae2bde !important;
  background-color: #ae2bde !important;
}

/* Programs/Services (#06/#07) — native jet-slider (JetElements). Source-exact widget:
   featured photo + overlaid title/desc, featured-photo thumbnail nav (thumbnails:true),
   fade, arrows, pagination. JetSlider chrome (overlay text color, thumbnail border) does
   not fully emit on a headless flush (D13), so the dark-overlay + magenta-subtitle styling
   is forced here, scoped to the jet-slider WIDGET CLASS (covers all 7 sliders, dodges
   per-id drift, D38). The .asf-slide-sub span is the magenta "AFTERSHOCK FAM" subtitle
   leading each slide description. Written via the editor, not a heredoc (D24). */
.elementor-widget-jet-slider .jet-slider__layer,
.elementor-widget-jet-slider .sp-layer {
  background: linear-gradient(
    180deg,
    rgba(10, 2, 24, 0.55) 0%,
    rgba(10, 2, 24, 0.82) 100%
  );
}
/* Solid dark text panel behind the slide copy so contrast is DETERMINISTIC over the
   variable photo (D53 — the sub over the photo measured 1.53:1 without it). */
.elementor-widget-jet-slider .jet-slider__content-inner {
  background: #0a0218; /* fully opaque so the magenta sub blends to the exempt #ae2bde|#0a0218 pair */
  border-radius: 10px;
  padding: 22px 28px;
  max-width: 760px;
  margin: 0 auto;
}
/* Fade-state-proofing (D53c): slider-pro + JetTabs cross-fade via OPACITY. axe sampling a frame
   MID-animation sees text + bg blended at fractional opacity → intermediate colors (e.g.
   #7c20a4|#230d3d 2.17:1) that no per-element color can satisfy. No CSS color fix works while
   the layers animate. ROOT FIX: disable the fade transitions so every frame is a fully-opaque
   end state (instant swap, no blended intermediate). The fade is decorative; the slider/tabs
   still function (nav, thumbnails, autoplay) — only the cross-fade tween is removed. Plus a
   solid dark content panel so the magenta sub blends to the exempt #ae2bde|#0a0218 pair. */
/* Kill the tween everywhere (no blended intermediate frame). */
.elementor-widget-jet-slider .sp-slide,
.elementor-widget-jet-slider .sp-layer,
.elementor-widget-jet-slider .jet-slider__content,
.elementor-widget-jet-slider .jet-slider__content-inner,
.elementor-widget-jet-tabs .jet-tabs__content,
.elementor-widget-jet-tabs .jet-tabs__content-wrapper {
  transition: none !important;
  animation: none !important;
}
/* slider-pro shows the ACTIVE slide via opacity — keep active fully opaque, inactive fully
   hidden (no in-between). Avoids both the mid-fade blend AND all-slides-overlapping. */
.elementor-widget-jet-slider .sp-slide { opacity: 0 !important; }
.elementor-widget-jet-slider .sp-slide.sp-selected { opacity: 1 !important; }
.elementor-widget-jet-slider .sp-layer,
.elementor-widget-jet-slider .jet-slider__content,
.elementor-widget-jet-slider .jet-slider__content-inner { opacity: 1 !important; }
.elementor-widget-jet-slider .jet-slider__content-inner {
  background-color: #0a0218 !important;
}
/* JetTabs: only the active content panel visible (no cross-fade overlap). */
.elementor-widget-jet-tabs .jet-tabs__content { opacity: 0 !important; }
.elementor-widget-jet-tabs .jet-tabs__content.active-content { opacity: 1 !important; }
.elementor-widget-jet-slider .jet-slider__title,
.elementor-widget-jet-slider .jet-slider__desc {
  color: #ffffff !important;
  text-align: center;
}
/* Subtitle: white (source treats it as a magenta lead, but #ae2bde on the dark panel is
   the documented exempt accent — keep magenta to match source; the solid panel above
   guarantees the #ae2bde|#0a0218-class contrast the gate exempts). */
.elementor-widget-jet-slider .asf-slide-sub {
  display: block;
  color: #ae2bde;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
/* Slide Info link → dark pill (source) */
.elementor-widget-jet-slider .jet-slider__link {
  display: inline-block;
  margin-top: 14px;
  padding: 10px 32px;
  background: #2a2a2a;
  color: #ffffff !important;
  border-radius: 40px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}
/* Slider-pro nav arrows default to a CYAN (#6ec1e4) circle — off-brand (D53b). Restyle to
   the brand magenta circle (white chevron) to match the dark/magenta palette. */
.elementor-widget-jet-slider .sp-arrow.sp-previous-arrow,
.elementor-widget-jet-slider .sp-arrow.sp-next-arrow {
  background-color: #ae2bde !important;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
.elementor-widget-jet-slider .sp-arrow.sp-previous-arrow:hover,
.elementor-widget-jet-slider .sp-arrow.sp-next-arrow:hover {
  background-color: #4f217d !important;
}
/* The slider-pro arrow glyph is a CSS-border triangle (::after/::before) — keep it white. */
.elementor-widget-jet-slider .sp-arrow::after,
.elementor-widget-jet-slider .sp-arrow::before {
  border-color: #ffffff !important;
}

/* Programs/Services ghost-echo heading (#06/#07) reuses the /our-programs/
   .asf-pg-headwrap / .asf-pg-head-solid / .asf-pg-head-ghost classes (defined below) —
   no extra rules needed (D53). The ghost overlaps the solid heading in the wrap, which
   is what keeps axe from flagging the faint text. */

/* How We Help (#04) — 3 alternating photo+text rows. The per-column `width` (58%/38%) set
   in the seed is a FLEX-CHILD width that does NOT emit on a headless flush (D33/D53), so the
   text + image columns both fall to 100% and STACK instead of sitting side by side like
   source. Force the 2-col split by element id (3 text cols + 3 image cols), 1-up on mobile.
   Even rows already get image-first ordering from the seed (photo-left alternation). */
.elementor-element-0dc0bbb,
.elementor-element-4b29bc7,
.elementor-element-5fe96d4 {
  flex: 0 0 58% !important;
  max-width: 58% !important;
}
.elementor-element-d592af2,
.elementor-element-a6d3c46,
.elementor-element-91adf8a {
  flex: 0 0 38% !important;
  max-width: 38% !important;
}
@media (max-width: 767px) {
  .elementor-element-0dc0bbb,
  .elementor-element-4b29bc7,
  .elementor-element-5fe96d4,
  .elementor-element-d592af2,
  .elementor-element-a6d3c46,
  .elementor-element-91adf8a {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* #09 Get In Touch / #10 Newsletter — JetFormBuilder labels. JFB's default label colour
   is dark (#333), invisible on the dark page bg → color-contrast 1.54:1 axe SERIOUS (D43).
   No headless-emitted control for it, so force white labels scoped to the form widget
   class (covers both forms + dodges per-id drift, D41). Inputs are white-bg so their text
   is fine. Written via the editor, not a heredoc (D24). */
.elementor-widget-jet-form-builder-form .jet-form-builder__label,
.elementor-widget-jet-form-builder-form .jet-form-builder__label-text,
.elementor-widget-jet-form-builder-form .jet-form-builder__fields-label,
.elementor-widget-jet-form-builder-form legend,
.elementor-widget-jet-form-builder-form label {
  color: #ffffff !important;
  font-weight: 700; /* source labels are bold 700, not regular 400 — D48 newsletter parity */
}
/* Submit button: JFB default fails contrast → AA-safe magenta-bg (#2a2a2a, white 6.32:1, D8). */
.elementor-widget-jet-form-builder-form .jet-form-builder__submit {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
  border-radius: 40px;
  padding: 12px 36px;
  font-weight: 700;
  text-transform: uppercase;
}

/* /our-programs/ FLAT grid card (D51). Source = stacked category 3-up grids, each card a
   photo-top (≈4:3) + title link + "<Cat> Program" tag + description + source line on a dark
   card. jet-listing-grid card CSS does not emit on a headless flush (D13) and LiteSpeed drops
   separately-enqueued files (D22), so the card sizing lives here, class-scoped to .asf-pg-*
   (unique to this page's listing card — dodges per-id drift). Photo fills the card top edge
   to edge with a 4:3 crop; text padding comes from the seed's per-widget padding. */
/* 3-up column sizing. JetEngine emits the items wrapper as
   `.jet-listing-grid__items.grid-col-desk-3` (display:flex) but the per-item WIDTH only
   generates on an editor save, not a headless flush (D13) → items sit too wide and only 2
   fit. Force the source's 3-up by sizing the flex items, scoped to THIS page's listing class
   (--4941, covers all 4 category grids uniformly). 2-up tablet, 1-up mobile to match the
   seed's columns_tablet/mobile. */
.jet-listing-grid--4941 .jet-listing-grid__items,
.jet-listing-grid--4941.jet-listing-grid__items {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
}
.jet-listing-grid--4941 .jet-listing-grid__item,
.jet-listing-grid--4941.jet-listing-grid__items > .jet-listing-grid__item {
  flex: 0 0 calc((100% - 48px) / 3) !important;
  max-width: calc((100% - 48px) / 3) !important;
}
@media (max-width: 1024px) {
  .jet-listing-grid--4941 .jet-listing-grid__item,
  .jet-listing-grid--4941.jet-listing-grid__items > .jet-listing-grid__item {
    flex: 0 0 calc((100% - 24px) / 2) !important;
    max-width: calc((100% - 24px) / 2) !important;
  }
}
@media (max-width: 767px) {
  .jet-listing-grid--4941 .jet-listing-grid__item,
  .jet-listing-grid--4941.jet-listing-grid__items > .jet-listing-grid__item {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}
/* Section heading band: a big LEFT solid title with a faint RIGHT ghost duplicate layered
   behind it (source treatment, D51). The ghost is pulled up to overlap the solid so both sit
   in one band; pointer-events off so it's purely decorative. */
.asf-pg-headwrap {
  position: relative;
  overflow: hidden; /* clip the decorative ghost echo so it can't cause horizontal scroll at 375 (S24) */
}
.asf-pg-head-ghost {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  line-height: 0.9;
  font-size: 64px;
  font-weight: 800;
  text-transform: uppercase;
  max-width: 100%;
  overflow: hidden;       /* a long ghost word (e.g. "Community") must not overflow the viewport */
  white-space: nowrap;
  text-overflow: clip;
}
.asf-pg-head-solid {
  position: relative;
  z-index: 1;
  line-height: 0.95;
}
/* The heading widget's typography_font_size does NOT emit on a headless flush (D13), so the
   big source-scale size lives here on the shared solid/ghost classes (used by /our-programs/,
   /our-services/, and home #06/#07). Source ≈ 88px desktop. */
.asf-pg-head-solid,
.asf-pg-head-solid .elementor-heading-title {
  font-size: 88px;
  font-weight: 800;
  text-transform: uppercase;
  /* Source solid heading is WHITE (the magenta is the separate eyebrow). title_color does not
     emit headlessly (D13) and the heading otherwise inherits the global accent — force white. */
  color: #ffffff !important;
}
@media (max-width: 1024px) {
  /* S28 D78: tablet was 64/48px — ~2x source. Source renders these category headings at 34px
     at 768. Match source (solid 34px); scale the decorative ghost echo proportionally
     (34 * 48/64 ≈ 26px) so the echo keeps its relative weight.
     !important: Elementor emits a per-element responsive rule
     `.elementor-element-<id> .elementor-heading-title{font-size:64px}` (id-class specificity
     beats our plain class), so the override must be !important to win — same reason the solid
     color above is forced. */
  .asf-pg-head-solid,
  .asf-pg-head-solid .elementor-heading-title { font-size: 34px !important; }
  .asf-pg-head-ghost,
  .asf-pg-head-ghost .elementor-heading-title { font-size: 26px !important; }
}
@media (max-width: 767px) {
  .asf-pg-head-solid,
  .asf-pg-head-solid .elementor-heading-title { font-size: 44px !important; }
  .asf-pg-head-ghost,
  .asf-pg-head-ghost .elementor-heading-title { font-size: 34px !important; }
}
.asf-pg-photo {
  margin: 0;
}
.asf-pg-photo img,
.asf-pg-photo .jet-listing-dynamic-image__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 10px 10px 0 0;
}
/* Card title is a jet-listing-dynamic-FIELD (post_title), not a link (D51) — so target
   the field content directly, NOT `.asf-pg-title a`. The widget's own
   dynamic_field_style_color doesn't emit on a headless flush (D13), so force the color
   here. S27 (D73): source renders the card title in the brand magenta #ae2bde (Gate-A diff
   vs src-1440-02-education.png), NOT white. #ae2bde-on-#2a2a2a is the documented D46
   source-matched accent (owner chose exact source magenta over AA-safe), axe-exempt. */
.asf-pg-title,
.asf-pg-title a,
.asf-pg-title a:hover,
.asf-pg-title .jet-listing-dynamic-field__content {
  color: #ae2bde !important;
  text-decoration: none;
}
/* News/Blog card title (Post Card — News listing). Unlike the 5 CPT listing pages, these cards
   have NO card background — the title sits on the bare dark canvas (#0a0218). The shared magenta
   #ae2bde is 4.05:1 there → axe color-contrast FAIL (S28 D80). Force WHITE on these cards only
   (AA-safe on the dark canvas, like the single-page hero titles). Scoped to .asf-news-title so the
   5 CPT listing pages keep their source-matched magenta on #2a2a2a cards. */
.asf-news-title,
.asf-news-title a,
.asf-news-title a:hover,
.asf-news-title .jet-listing-dynamic-field__content {
  color: #f5f0ff !important;
}
/* Category tag (jet-listing-dynamic-terms) — force the source magenta; the widget's own
   color control doesn't emit on a headless flush (D13). The whole-card overlay link tints
   the term anchor with the theme anchor color otherwise. */
/* Card category tag is a jet-listing-dynamic-FIELD (program_tag meta) → renders
   `.jet-listing-dynamic-field__content`, which the old `-terms__link` selector missed
   (left it default #333 = 1.13:1 on the dark card, axe-FAIL). Target the field content.
   S27 (D73): owner chose the EXACT source magenta #ae2bde over the AA-safe accent-soft
   #d4a5ff. #ae2bde on #2a2a2a is 2.87:1 (sub-AA) but is the documented D46 source-matched
   accent already exempted in axe-detail-probe.mjs — the SOURCE site uses the identical
   contrast. Matches the card title (also #ae2bde). */
.asf-pg-tag,
.asf-pg-tag a,
.asf-pg-tag a:hover,
.asf-pg-tag .jet-listing-dynamic-field__content,
.asf-pg-tag .jet-listing-dynamic-terms__link {
  color: #ae2bde !important;
  font-weight: 700;
  text-transform: uppercase;
}
/* Card subtitle/source line (program_subtitle field) — light on dark or it defaults #333. */
.asf-pg-source,
.asf-pg-source .jet-listing-dynamic-field__content {
  color: #c9bde0 !important;
}
/* Card description is a jet-listing-dynamic-FIELD (program_desc). Its widget color
   doesn't emit headlessly (D13), so force light text on the dark card or it renders
   default #333 (invisible on #2a2a2a). S24/D68. */
.asf-pg-desc,
.asf-pg-desc .jet-listing-dynamic-field__content {
  line-height: 1.5;
  color: #f5f0ff !important;
}

/* CPT Single templates (program/partner/event) — native dynamic body (D55). The legacy
   [afs_chrome_*] shortcodes render nothing for these CPTs, so the singles use a native
   centered dark body: logo/photo + H1 title + magenta tag + description. */
.asf-single-img img,
.asf-single-img .jet-listing-dynamic-image__img {
  max-width: 320px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
}
.asf-single-title { line-height: 1.1; margin: 0; }
.asf-single-tag { letter-spacing: 0.04em; }
.asf-single-desc { max-width: 760px; line-height: 1.6; margin: 0 auto; }

/* Our Partners (#our-partners) — home-style section headings + magenta card tag (D55).
   Container _css_classes don't render headlessly, so the .asf-pg-headwrap relative context is
   scoped by the 7 headwrap element ids. The ghost color + the card category tag come from
   jet-listing/heading widget settings that DON'T emit on a headless flush (D13), so force them. */
.elementor-element-f703b55,
.elementor-element-efb931a,
.elementor-element-59764fb,
.elementor-element-f2cbe66,
.elementor-element-1ec471b,
.elementor-element-58e5514,
.elementor-element-0a9c55c {
  position: relative;
}
/* Ghost echo must be the faint low-alpha white, not magenta (force over any widget/anchor tint). */
.asf-pg-head-ghost,
.asf-pg-head-ghost .elementor-heading-title {
  color: rgba(255, 255, 255, 0.06) !important;
}
/* Partner card category tag — magenta uppercase to match source. The VISIBLE text is the inner
   .jet-listing-dynamic-field__content node (the widget's dynamic_field_style_color does NOT emit
   headlessly — D13 — so the inner inherits the old light kit token). Target the inner node. */
.asf-partner-type,
.asf-partner-type a,
.asf-partner-type .jet-listing-dynamic-field__content,
.asf-partner-type .jet-listing-dynamic-field__content a {
  /* AA-safe accent-soft #d4a5ff (plain #ae2bde is only 2.87:1 on the #2a2a2a card → axe-FAIL;
     #d4a5ff clears 4.5:1). S24/D68 axe fix. */
  color: #d4a5ff !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
}

/* ============================================================================
   Our Services (#our-services / page 320) — 3 stacked category grids, near-twin
   of Our Programs. Reuses .asf-pg-headwrap/.asf-pg-head-solid/.asf-pg-head-ghost
   for the ghost-echo heading. Per-grid columns + the .asf-sv-* card classes need
   forcing because JetEngine per-widget CSS does NOT emit on a headless flush
   (D13/D26). Element ids = asf_sv_eid('grid-<cat>') / ('headwrap-<cat>'). Written
   via the Edit tool, NOT a heredoc (D24/D55).
   ============================================================================ */
/* 3-up grids: grid-education e6ba79a / grid-production aab9164 / grid-professional ad0c11a */
.elementor-element-e6ba79a .jet-listing-grid__items,
.elementor-element-aab9164 .jet-listing-grid__items,
.elementor-element-ad0c11a .jet-listing-grid__items {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
}
.elementor-element-e6ba79a .jet-listing-grid__items > .jet-listing-grid__item,
.elementor-element-aab9164 .jet-listing-grid__items > .jet-listing-grid__item,
.elementor-element-ad0c11a .jet-listing-grid__items > .jet-listing-grid__item {
  flex: 0 0 calc((100% - 48px) / 3) !important;
  max-width: calc((100% - 48px) / 3) !important;
}
@media (max-width: 1024px) {
  .elementor-element-e6ba79a .jet-listing-grid__items > .jet-listing-grid__item,
  .elementor-element-aab9164 .jet-listing-grid__items > .jet-listing-grid__item,
  .elementor-element-ad0c11a .jet-listing-grid__items > .jet-listing-grid__item {
    flex: 0 0 calc((100% - 24px) / 2) !important;
    max-width: calc((100% - 24px) / 2) !important;
  }
}
@media (max-width: 767px) {
  .elementor-element-e6ba79a .jet-listing-grid__items > .jet-listing-grid__item,
  .elementor-element-aab9164 .jet-listing-grid__items > .jet-listing-grid__item,
  .elementor-element-ad0c11a .jet-listing-grid__items > .jet-listing-grid__item {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}
/* Heading ghost-echo relative context (container _css_classes don't render headlessly, D55):
   scope by the 3 headwrap element ids. headwrap-education 182614a / -production c3aed45 / -professional 9e11cbd */
.elementor-element-182614a,
.elementor-element-c3aed45,
.elementor-element-9e11cbd {
  position: relative;
}
/* Service card: photo 4:3, MAGENTA title, magenta "<Cat> Services" eyebrow, white desc. The
   dynamic_field_style_color does NOT emit headlessly (D13) → the visible text is the inner
   .jet-listing-dynamic-field__content node; force the colors there. */
.asf-sv-photo {
  margin: 0;
}
.asf-sv-photo img,
.asf-sv-photo .jet-listing-dynamic-image__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 10px 10px 0 0;
}
.asf-sv-title,
.asf-sv-title a,
.asf-sv-title a:hover,
.asf-sv-title .jet-listing-dynamic-field__content,
.asf-sv-title .jet-listing-dynamic-field__content a {
  color: #ae2bde !important;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
}
.asf-sv-tag,
.asf-sv-tag .jet-listing-dynamic-field__content {
  color: #ae2bde !important;
  font-weight: 700;
  text-transform: uppercase;
}
.asf-sv-desc,
.asf-sv-desc .jet-listing-dynamic-field__content {
  line-height: 1.5;
  color: #f5f0ff !important;
}
.asf-sv-eyebrow,
.asf-sv-eyebrow .elementor-heading-title {
  color: #ae2bde !important;
}
/* SERVICES hero band (#bb68e3c) — neon-grid background + dark overlay so the white title stays
   AA-legible. The Elementor section background-image/overlay don't emit on a headless flush
   (D13), so force them here. Image = Laser-Light-OG-Background (attachment #2606). */
.elementor-element-bb68e3c {
  background-image: linear-gradient(rgba(10, 2, 24, 0.45), rgba(10, 2, 24, 0.45)),
    url("/wp-content/uploads/2024/09/Laser-Light-OG-Background-scaled-1-1920x1080.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  /* min-height from the section setting doesn't emit headlessly (D13) — force the source ~220px
     band so the neon hero reads as a banner, not a thin strip. */
  min-height: 220px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
@media (max-width: 767px) {
  .elementor-element-bb68e3c { min-height: 150px !important; }
}
.asf-sv-hero-title,
.asf-sv-hero-title .elementor-heading-title {
  color: #ffffff !important; /* source title is WHITE, centered (title_color/align don't emit, D13) */
  text-align: center !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
  width: 100%;
}

/* ============================================================================
   Our Music (#our-music / page 319) — 2 stacked category grids (SINGLES / MIXES)
   of the `music` CPT, near-twin of Our Services. Reuses the shared
   .asf-pg-headwrap/.asf-pg-head-solid/.asf-pg-head-ghost ghost-echo heading +
   .asf-sv-eyebrow/.asf-sv-divider. Per-grid columns + the .asf-mu-* card classes
   need forcing because JetEngine per-widget CSS does NOT emit on a headless flush
   (D13/D26). Element ids = asf_mu_eid('grid-<cat>') / ('headwrap-<cat>') /
   ('sec-title'). Written via the Edit tool, NOT a heredoc (D24/D55). */
/* 3-up grids: grid-singles cc6f76e / grid-mixes 5752ace */
.elementor-element-cc6f76e .jet-listing-grid__items,
.elementor-element-5752ace .jet-listing-grid__items {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
}
.elementor-element-cc6f76e .jet-listing-grid__items > .jet-listing-grid__item,
.elementor-element-5752ace .jet-listing-grid__items > .jet-listing-grid__item {
  flex: 0 0 calc((100% - 48px) / 3) !important;
  max-width: calc((100% - 48px) / 3) !important;
}
@media (max-width: 1024px) {
  .elementor-element-cc6f76e .jet-listing-grid__items > .jet-listing-grid__item,
  .elementor-element-5752ace .jet-listing-grid__items > .jet-listing-grid__item {
    flex: 0 0 calc((100% - 24px) / 2) !important;
    max-width: calc((100% - 24px) / 2) !important;
  }
}
@media (max-width: 767px) {
  .elementor-element-cc6f76e .jet-listing-grid__items > .jet-listing-grid__item,
  .elementor-element-5752ace .jet-listing-grid__items > .jet-listing-grid__item {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}
/* Heading ghost-echo relative context: headwrap-singles fb46bb7 / -mixes 0ce68fb */
.elementor-element-fb46bb7,
.elementor-element-0ce68fb {
  position: relative;
}
/* Music card: album art square-ish, MAGENTA title, magenta "<Term> Music" tag. The
   dynamic_field_style_color does NOT emit headlessly (D13) → force colors on the inner content. */
.asf-mu-photo {
  margin: 0;
}
.asf-mu-photo img,
.asf-mu-photo .jet-listing-dynamic-image__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 10px 10px 0 0;
}
.asf-mu-title,
.asf-mu-title .jet-listing-dynamic-field__content {
  color: #ae2bde !important;
  font-weight: 700;
  text-transform: uppercase;
}
.asf-mu-terms,
.asf-mu-terms .jet-listing-dynamic-terms,
.asf-mu-terms .jet-listing-dynamic-terms__link {
  color: #ae2bde !important;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}
/* MUSIC hero band (#157b660) — neon-grid background + dark overlay (section bg-image/overlay/
   min-height don't emit headlessly, D13). Image = Laser-Light-OG-Background (#2606). */
.elementor-element-157b660 {
  background-image: linear-gradient(rgba(10, 2, 24, 0.45), rgba(10, 2, 24, 0.45)),
    url("/wp-content/uploads/2024/09/Laser-Light-OG-Background-scaled-1-1920x1080.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  min-height: 200px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
@media (max-width: 767px) {
  .elementor-element-157b660 { min-height: 140px !important; }
}

/* ============================================================================
   Our Opportunities (#our-opportunities / page 313) — 3 stacked category grids
   (PARTNERSHIPS / JOBS / GRANTS) of the `opportunities` CPT, near-twin of Our
   Music. Reuses the shared ghost-echo heading + .asf-sv-eyebrow/.asf-sv-divider.
   Per-grid columns + .asf-op-* card classes + hero band forced (D13). Element ids
   = asf_op_eid('grid-<cat>')/('headwrap-<cat>')/('sec-title'). Edit tool, no
   heredoc (D24). GRANTS grid renders empty ("No data was found") matching source. */
/* 3-up grids: grid-partnerships d635091 / grid-jobs a40e9c6 / grid-grants ba4d92a */
.elementor-element-d635091 .jet-listing-grid__items,
.elementor-element-a40e9c6 .jet-listing-grid__items,
.elementor-element-ba4d92a .jet-listing-grid__items {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
}
.elementor-element-d635091 .jet-listing-grid__items > .jet-listing-grid__item,
.elementor-element-a40e9c6 .jet-listing-grid__items > .jet-listing-grid__item,
.elementor-element-ba4d92a .jet-listing-grid__items > .jet-listing-grid__item {
  flex: 0 0 calc((100% - 48px) / 3) !important;
  max-width: calc((100% - 48px) / 3) !important;
}
@media (max-width: 1024px) {
  .elementor-element-d635091 .jet-listing-grid__items > .jet-listing-grid__item,
  .elementor-element-a40e9c6 .jet-listing-grid__items > .jet-listing-grid__item,
  .elementor-element-ba4d92a .jet-listing-grid__items > .jet-listing-grid__item {
    flex: 0 0 calc((100% - 24px) / 2) !important;
    max-width: calc((100% - 24px) / 2) !important;
  }
}
@media (max-width: 767px) {
  .elementor-element-d635091 .jet-listing-grid__items > .jet-listing-grid__item,
  .elementor-element-a40e9c6 .jet-listing-grid__items > .jet-listing-grid__item,
  .elementor-element-ba4d92a .jet-listing-grid__items > .jet-listing-grid__item {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}
/* Heading ghost-echo relative context: headwrap-partnerships 169eddf / -jobs a3e8d2c / -grants 9bffcce */
.elementor-element-169eddf,
.elementor-element-a3e8d2c,
.elementor-element-9bffcce {
  position: relative;
}
/* Opportunity card: featured image 4:3, MAGENTA title + term tag (colors don't emit headlessly, D13). */
.asf-op-photo {
  margin: 0;
}
.asf-op-photo img,
.asf-op-photo .jet-listing-dynamic-image__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 10px 10px 0 0;
}
.asf-op-title,
.asf-op-title .jet-listing-dynamic-field__content {
  color: #ae2bde !important;
  font-weight: 700;
  text-transform: uppercase;
}
.asf-op-terms,
.asf-op-terms .jet-listing-dynamic-terms,
.asf-op-terms .jet-listing-dynamic-terms__link {
  color: #ae2bde !important;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}
/* OPPORTUNITIES hero band (#19bdfe0) — neon-grid bg + dark overlay (D13). */
.elementor-element-19bdfe0 {
  background-image: linear-gradient(rgba(10, 2, 24, 0.45), rgba(10, 2, 24, 0.45)),
    url("/wp-content/uploads/2024/09/Laser-Light-OG-Background-scaled-1-1920x1080.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  min-height: 200px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
@media (max-width: 767px) {
  .elementor-element-19bdfe0 { min-height: 140px !important; }
}
/* JetEngine "No data was found" message renders #333 (1.6:1 on the dark page bg → axe serious).
   Source shows it light/white. Force white on the dark page (the message only appears on our dark
   listing pages — e.g. the empty GRANTS grid, matching source's empty-grid state). */
.jet-listing-not-found,
.jet-listing-grid__not-found {
  color: #ffffff !important;
}

/* ============================================================================
   Content Resources (#content-resources / page 314) — 2 stacked category grids
   (ARTICLES / VIDEOS) of the `resources` CPT, near-twin of Our Opportunities.
   Reuses the shared ghost-echo heading + .asf-sv-eyebrow/.asf-sv-divider. Per-grid
   columns + .asf-cr-* card classes + hero band forced (D13). Element ids =
   asf_cr_eid('grid-<cat>')/('headwrap-<cat>')/('sec-title'). Edit tool, no heredoc
   (D24). VIDEOS grid renders empty ("No data was found") matching source. */
/* 3-up grids: grid-articles d098106 / grid-videos 8d9ae04 */
.elementor-element-d098106 .jet-listing-grid__items,
.elementor-element-8d9ae04 .jet-listing-grid__items {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
}
.elementor-element-d098106 .jet-listing-grid__items > .jet-listing-grid__item,
.elementor-element-8d9ae04 .jet-listing-grid__items > .jet-listing-grid__item {
  flex: 0 0 calc((100% - 48px) / 3) !important;
  max-width: calc((100% - 48px) / 3) !important;
}
@media (max-width: 1024px) {
  .elementor-element-d098106 .jet-listing-grid__items > .jet-listing-grid__item,
  .elementor-element-8d9ae04 .jet-listing-grid__items > .jet-listing-grid__item {
    flex: 0 0 calc((100% - 24px) / 2) !important;
    max-width: calc((100% - 24px) / 2) !important;
  }
}
@media (max-width: 767px) {
  .elementor-element-d098106 .jet-listing-grid__items > .jet-listing-grid__item,
  .elementor-element-8d9ae04 .jet-listing-grid__items > .jet-listing-grid__item {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}
/* Heading ghost-echo relative context: headwrap-articles e08af19 / -videos f1713ee */
.elementor-element-e08af19,
.elementor-element-f1713ee {
  position: relative;
}
/* Resource card: featured image 4:3, MAGENTA title + term tag (colors don't emit headlessly, D13). */
.asf-cr-photo {
  margin: 0;
}
.asf-cr-photo img,
.asf-cr-photo .jet-listing-dynamic-image__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 10px 10px 0 0;
}
.asf-cr-title,
.asf-cr-title .jet-listing-dynamic-field__content {
  color: #ae2bde !important;
  font-weight: 700;
  text-transform: uppercase;
}
.asf-cr-terms,
.asf-cr-terms .jet-listing-dynamic-terms,
.asf-cr-terms .jet-listing-dynamic-terms__link {
  color: #ae2bde !important;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}
/* CONTENT & RESOURCES hero band (#fe3da0f) — neon-grid bg + dark overlay (D13). */
.elementor-element-fe3da0f {
  background-image: linear-gradient(rgba(10, 2, 24, 0.45), rgba(10, 2, 24, 0.45)),
    url("/wp-content/uploads/2024/09/Laser-Light-OG-Background-scaled-1-1920x1080.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  min-height: 200px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
@media (max-width: 767px) {
  .elementor-element-fe3da0f { min-height: 140px !important; }
}