/* ============================================================
 * rosies theme — decorators.css
 * ============================================================
 * Brand decorator system — SITE-WIDE, THEME-OWNED.
 *
 * ARCHITECTURE:
 *   Decorators are brand primitives, not editorial content. They
 *   live as PNG files in /theme/assets/decorators/ (versioned with
 *   the theme, not in the Media Library). Each has a canonical
 *   class name; the class provides BOTH the image AND the size at
 *   each breakpoint. Editors add the class via a row's el_class
 *   and get a consistent, on-brand result — no chance of a random
 *   photo being used where a brand decorator should be.
 *
 *   Decorators are attached via .row-bg (Salient's row background
 *   layer) using !important, so this CSS wins even if the row also
 *   has a bg_image set in the Bakery UI (which shouldn't happen —
 *   but if it does, we win predictably).
 *
 * ENQUEUEING:
 *   Conditionally enqueued by rosies_enqueue_decorators_css() in
 *   includes/functions/enqueue.php — only loads on pages whose
 *   post_content references the string "rtk-decorator-".
 *
 * ADD A NEW DECORATOR:
 *   1. Drop the PNG in /theme/assets/decorators/
 *   2. Copy one preset block below and rename (image + sizes)
 *   3. Editor adds el_class="rtk-decorator-<name>" on the row
 *   Done. No Media Library upload, no shortcode attribute juggling.
 *
 * POSITIONING:
 *   Default position is top-left. Add a positional modifier class
 *   ALONGSIDE the main class if a different corner is needed:
 *     rtk-decorator-tl   (top-left,      default)
 *     rtk-decorator-tr   (top-right)
 *     rtk-decorator-bl   (bottom-left)
 *     rtk-decorator-br   (bottom-right)
 *   Example: el_class="rtk-decorator-motivating rtk-decorator-tr"
 * ============================================================ */


/* ------------------------------------------------------------
 * Base rule — applies to every rtk-decorator-* row
 * ------------------------------------------------------------
 * Overrides Salient's forced background-size:cover and any bg_image
 * that may be set in the shortcode. All rules use !important
 * because Salient writes background properties inline on .row-bg
 * — this is the only reliable way to win.
 *
 * Each specific decorator below sets its --rtk-decorator-img and
 * --rtk-decorator-size (per breakpoint).
 * ------------------------------------------------------------ */
/* Salient's DOM structure inside a .wpb_row:
 *   .wpb_row.rtk-decorator-X    (overflow: visible)
 *     .row-bg-wrap              (overflow: hidden — clips anything inside)
 *       .inner-wrap.row-bg-layer
 *         .row-bg[.using-image]
 *
 * To let decorators DRAPE outside the row (overlap the row above or
 * below), we can't paint them on .row-bg — that gets clipped by
 * .row-bg-wrap. Instead we use a pseudo-element on the .wpb_row
 * itself, which has overflow:visible. The pseudo escapes the row
 * boundary and overlaps the neighboring rows freely.
 *
 * The row must be position:relative so the pseudo can be absolute
 * to it. Salient already gives .wpb_row position:relative, so we
 * just declare our pseudo. */
.wpb_row[class*="rtk-decorator-"] {
  position: relative;
}
.wpb_row[class*="rtk-decorator-"]::before {
  /* IMPORTANT: Salient sets its own .wpb_row::before styles (clearfix
     with display:table). We must force display:block AND use !important
     to win, otherwise the pseudo collapses to 0x0 despite our inset
     offsets. Discovered in v20 diagnostic — do not remove !important. */
  content: "" !important;
  display: block !important;
  position: absolute !important;
  /* Extend the pseudo's box ABOVE and BELOW the row so the background
     image can be positioned anywhere inside — including visually above
     the row (which drapes onto the row above). */
  /* Extend the pseudo BEYOND the row's normal box in all 4 directions.
     .wpb_row is narrower (1245px) than the visible full-width row-bg
     (~1425px) because .row constrains it. Push the pseudo out so it
     covers the viewport width, mirroring how .row-bg extends. Then we
     can use calc(50% - N) to anchor relative to the viewport center. */
  top: var(--rtk-decorator-top-inset, -300px) !important;
  bottom: var(--rtk-decorator-bottom-inset, -300px) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50vw) !important;   /* pseudo’s left edge = viewport left */
  width: 100vw !important;                    /* pseudo spans full viewport */
  height: auto !important;
  background-image: var(--rtk-decorator-img);
  background-repeat: no-repeat;
  background-size: var(--rtk-decorator-size, 240px auto);
  background-position: var(--rtk-decorator-pos, left top);
  pointer-events: none;
  z-index: 1;                       /* above .row-bg (z:0), below column content */
}


/* ------------------------------------------------------------
 * POSITIONAL MODIFIERS — override the default top-left placement
 * ------------------------------------------------------------ */
.rtk-decorator-tl { --rtk-decorator-pos: left top; }
.rtk-decorator-tr { --rtk-decorator-pos: right top; }
.rtk-decorator-bl { --rtk-decorator-pos: left bottom; }
.rtk-decorator-br { --rtk-decorator-pos: right bottom; }


/* ------------------------------------------------------------
 * Motivating — circles-motivating.png
 * ------------------------------------------------------------ */
/* Design intent: decorator's right edge kisses the H1's left edge.
 * The row is full-width (row-bg spans the viewport), so we position
 * the decorator relative to the CONTAINER (which is centered at ~1180px).
 * Formula: left = calc(50% - HALF_CONTAINER + INSET)
 *   where HALF_CONTAINER = 590px (1180/2)
 *   and INSET = distance from container-left where the decorator sits.
 * We want the decorator right edge ~20px shy of the text-column's left
 * padding-3-percent (~35px inside the container).
 * Decorator width 220px → left position at INSET=15 puts right at 235.
 *
 * Responsive: at tablet width (~1024px) Salient collapses the row to
 * single-column, so the text takes full width and the decorator would
 * sit behind it. Hide it below 1025px — mobile users still get plenty
 * of brand character from other rows' decorators, the circular video,
 * and the Rift Soft display type. */
/* Positioning with the pseudo-element (v22):
 * The ::before spans 100vw wide (viewport width), centered at viewport
 * center. Its local coord system:
 *   X: 0 = viewport left edge. calc(50% - Npx) = Npx left of center.
 *      Value that puts decorator's LEFT edge at container-left is
 *      calc(50% - 590px)  (half a 1180px container).
 *      Add offset for inset from container.
 *   Y: pseudo is inset -300px top and bottom, so y=0 = 300px above
 *      the row. To drape N px above row-top, use y = (300 - N).
 *      y=300 sits at row-top; y=240 drapes 60px onto hero above.
 */
.rtk-decorator-motivating {
  --rtk-decorator-img: url("/wp-content/themes/rosies/assets/decorators/circles-motivating.png");
  --rtk-decorator-size: 220px auto;
  --rtk-decorator-pos: calc(50% - 695px) 240px;  /* 60px drape onto hero row */
}
@media (max-width: 1200px) {
  /* Container starts shrinking; ease the calc offset. */
  .rtk-decorator-motivating {
    --rtk-decorator-size: 190px auto;
    --rtk-decorator-pos: calc(50% - 615px) 240px;
  }
}
@media (max-width: 1024px) {
  /* Row collapses to single-column; text would overlap decorator.
     Hide the pseudo-element so text is unobstructed. */
  .wpb_row.rtk-decorator-motivating::before {
    display: none;
  }
}


/* ------------------------------------------------------------
 * Curly heart — curly-line-heart.png
 * ------------------------------------------------------------
 * Placement: a wide horizontal SQUIGGLE-GARLAND running BEHIND all
 * four alumni photos. Natural asset is 4545x570 (~8:1 aspect).
 *
 * Sizing: width 1600px → height renders at ~201px (in the 180-220
 *   target). Sized by width so aspect stays perfect at any breakpoint.
 *
 * X-math: `50%` centers the 1600px image horizontally on the viewport,
 *   which means it also sits centered across the row's 4 photos.
 *   The photos are inside the 1180px container so the squiggle extends
 *   ~210px beyond each edge — acts like decorative overflow.
 *
 * Y-math: pseudo box is inset -300px top. To vertically center the
 *   200px-tall squiggle on the row's midline (photos are ~240px tall
 *   with margin), we want image top-edge somewhere near
 *   (300 + row-half-height - image-half-height). Rough tuning:
 *   y = 300 + 20 = 320. Adjustable if it looks off.
 *
 * Layering: pseudo z-index is 1. Photo columns need z-index >= 2
 *   to sit on top of the garland — handled below.
 *
 * Mobile (≤1024px): photos stack vertically, so a horizontal garland
 *   doesn't make visual sense. Hide the decorator entirely below 1024px. */
.rtk-decorator-curly-heart {
  --rtk-decorator-img: url("/wp-content/themes/rosies/assets/decorators/curly-line-heart.png");
  --rtk-decorator-size: 1600px auto;    /* width-based → height ~200px */
  --rtk-decorator-pos: 50% 320px;       /* centered horizontally, y-tuned to row midline */
}
@media (max-width: 1500px) {
  /* Trim squiggle width when it would exceed viewport minus padding. */
  .rtk-decorator-curly-heart {
    --rtk-decorator-size: 1300px auto;  /* height ~163px */
    --rtk-decorator-pos: 50% 335px;
  }
}
@media (max-width: 1200px) {
  .rtk-decorator-curly-heart {
    --rtk-decorator-size: 1100px auto;  /* height ~138px */
    --rtk-decorator-pos: 50% 345px;
  }
}
@media (max-width: 1024px) {
  /* Photos stack vertically — horizontal garland no longer makes sense. */
  .wpb_row.rtk-decorator-curly-heart::before {
    display: none;
  }
}

/* Photos MUST sit on top of the garland pseudo (which has z-index:1). */
.rtk-decorator-curly-heart .wpb_column,
.rtk-decorator-curly-heart .vc_column_container {
  position: relative;
  z-index: 2;
}


/* ------------------------------------------------------------
 * Programs — circles-programs.png
 * ------------------------------------------------------------ */
.rtk-decorator-programs {
  --rtk-decorator-img: url("/wp-content/themes/rosies/assets/decorators/circles-programs.png");
  --rtk-decorator-size: 200px auto;
}
@media (max-width: 1024px) {
  .rtk-decorator-programs { --rtk-decorator-size: 150px auto; }
}
@media (max-width: 640px) {
  .rtk-decorator-programs { --rtk-decorator-size: 100px auto; }
}


/* ------------------------------------------------------------
 * Act II — circles-acteii.png
 * ------------------------------------------------------------ */
.rtk-decorator-acteii {
  --rtk-decorator-img: url("/wp-content/themes/rosies/assets/decorators/circles-acteii.png");
  --rtk-decorator-size: 220px auto;
}
@media (max-width: 1024px) {
  .rtk-decorator-acteii { --rtk-decorator-size: 165px auto; }
}
@media (max-width: 640px) {
  .rtk-decorator-acteii { --rtk-decorator-size: 110px auto; }
}


/* ============================================================
 * CORNER DECORATORS — COLUMN-SCOPED (v30, fixed v31) — SITE-WIDE
 * ============================================================
 * Unlike the row-scoped decorators above (which paint a pseudo on
 * .wpb_row viewport-wide), these paint on .wpb_column::before so
 * they anchor to a CARD corner instead of the row. Used on the Core
 * Programs row (PS Broadway + Acte II cards).
 *
 * IMPORTANT: use ::before, NOT ::after. Salient's own CSS sets
 * `visibility: hidden` on `.vc_column_container::after` as part of
 * its column entrance-animation system. That silently hides any
 * corner decorator we try to attach on ::after (diagnosed v31).
 *
 * Design intent (from prod):
 *   • circles-programs.png drapes off the TOP-LEFT of the PS Broadway
 *     card — mostly outside the card, overlapping ~20% onto its corner.
 *   • circles-acteii.png drapes off the BOTTOM-RIGHT of the Acte II
 *     card — mostly outside the card, overlapping ~20% onto its corner.
 *
 * Usage:
 *   [vc_column_inner el_class="rtk-decorator-programs-corner" ...]
 *   [vc_column_inner el_class="rtk-decorator-acteii-corner" ...]
 *
 * Column must be overflow:visible so the decorator can drape outside.
 * ============================================================ */

/* Base: the anchor for corner decorators is the IMAGE wrapper, not the
   column. That's because the column extends far below the image (H3 +
   paragraph + Learn More CTA), so anchoring to column-bottom lands the
   decorator way below the card. The image wrapper IS the image's own
   bounding box, so a decorator anchored there sits at the image's corner.

   IMPORTANT — SALIENT TYPO WARNING (v33 discovery):
   Salient ships a bug: the wrapper's real class in the DOM is
     .img-with-aniamtion-wrap   ← misspelled "aniamtion"
   NOT the properly-spelled `.image_with_animation_wrap` used in Salient
   docs. We match BOTH so:
     (a) the current typo'd release works today, AND
     (b) if Salient ever fixes the typo, we don't break.
   Selector `[class*="img-with-"][class*="tion-wrap"]` catches both
   "img-with-aniamtion-wrap" and "img-with-animation-wrap" without
   listing every variant. */

/* Make the image wrapper inside a corner-decorator column the positioning
   context, and let the decorator drape outside it. */
/* NOTE: use [class*="-corner"] (substring), NOT [class$="-corner"] (suffix).
   WPBakery appends its own classes (wpb_column, column_container, ...) plus a
   trailing space AFTER any el_class value, so the class attribute never ends
   in "-corner". Confirmed via v34 diagnostic. The pair
   [class*="rtk-decorator-"][class*="-corner"] is specific enough. */
[class*="rtk-decorator-"][class*="-corner"] [class*="img-with-"][class*="tion-wrap"] {
  position: relative !important;
  overflow: visible !important;
}
/* Column and its inner wrappers must also not clip the drape. */
[class*="rtk-decorator-"][class*="-corner"],
[class*="rtk-decorator-"][class*="-corner"] > .vc_column-inner,
[class*="rtk-decorator-"][class*="-corner"] > .wpb_wrapper,
[class*="rtk-decorator-"][class*="-corner"] .wpb_wrapper {
  overflow: visible !important;
}

/* --- Programs cluster: top-left corner of the PS Broadway image --- */
.rtk-decorator-programs-corner [class*="img-with-"][class*="tion-wrap"]::before {
  content: "";
  position: absolute;
  top: -50px;                       /* drape 50px above image top edge */
  left: -60px;                      /* drape 60px left of image left edge */
  width: 260px;
  height: 140px;
  background: url("/wp-content/themes/rosies/assets/decorators/circles-programs.png") no-repeat left top / contain;
  pointer-events: none;
  z-index: 0;                       /* behind image (image sits at z-auto in a stacking context) */
}

/* --- PS Broadway two-circles cluster: top-left corner ---
   Same positioning as programs-corner (top-left drape), different asset
   (SVG from media library, ID 568). Used on /ps-broadway/ for the row
   featuring the PSB photo. */
.rtk-decorator-psb-corner [class*="img-with-"][class*="tion-wrap"]::before {
  content: "";
  position: absolute;
  top: -50px;                       /* drape 50px above image top edge */
  left: -60px;                      /* drape 60px left of image left edge */
  width: 260px;
  height: 140px;
  background: url("/wp-content/uploads/2026/08/TwoCircles_PSBroadway.svg") no-repeat left top / contain;
  pointer-events: none;
  z-index: 0;
}

/* --- Acte II cluster: bottom-right corner of the Acte II image ---
   Uses ::before to avoid Salient's ::after entrance-animation reveal. */
.rtk-decorator-acteii-corner [class*="img-with-"][class*="tion-wrap"]::before {
  content: "";
  position: absolute;
  bottom: -40px;                    /* drape 40px below image bottom edge */
  right: -50px;                     /* drape 50px right of image right edge */
  width: 200px;
  height: 210px;
  background: url("/wp-content/themes/rosies/assets/decorators/circles-acteii.png") no-repeat right bottom / contain;
  pointer-events: none;
  z-index: 0;
}

/* --- Two circles cluster: bottom-right corner (WHO WE ARE / Our Mission photo)
   Same positioning as acteii-corner, different asset (SVG). Purple solid +
   green striped/patterned pair, sits at the bottom-right of the mission photo. */
.rtk-decorator-two-circles-corner [class*="img-with-"][class*="tion-wrap"]::before {
  content: "";
  position: absolute;
  bottom: -40px;                    /* drape 40px below image bottom edge */
  right: -50px;                     /* drape 50px right of image right edge */
  width: 200px;
  height: 210px;
  background: url("/wp-content/themes/rosies/assets/decorators/core-programs_two-circles.svg") no-repeat right bottom / contain;
  pointer-events: none;
  z-index: 0;
}

/* Tablet: scale down so the drape stays proportional to shrinking cards. */
@media (max-width: 1024px) {
  .rtk-decorator-programs-corner [class*="img-with-"][class*="tion-wrap"]::before,
  .rtk-decorator-psb-corner [class*="img-with-"][class*="tion-wrap"]::before {
    top: -35px;
    left: -40px;
    width: 190px;
    height: 105px;
  }
  .rtk-decorator-acteii-corner [class*="img-with-"][class*="tion-wrap"]::before,
  .rtk-decorator-two-circles-corner [class*="img-with-"][class*="tion-wrap"]::before {
    bottom: -30px;
    right: -35px;
    width: 150px;
    height: 160px;
  }
}

/* Mobile: hide entirely. When columns stack, decorators would either
   overlap text, run off-screen, or lose their visual context. Cards
   look clean on their own. */
@media (max-width: 640px) {
  .rtk-decorator-programs-corner [class*="img-with-"][class*="tion-wrap"]::before,
  .rtk-decorator-psb-corner [class*="img-with-"][class*="tion-wrap"]::before,
  .rtk-decorator-acteii-corner [class*="img-with-"][class*="tion-wrap"]::before,
  .rtk-decorator-two-circles-corner [class*="img-with-"][class*="tion-wrap"]::before {
    display: none;
  }
}

/* ============================================================
 * rtk-callout-with-orange-arrow — site-wide inline callout primitive
 *
 * A stat/callout line where a small orange loop-arrow (Quote_ArrowOrange.svg,
 * ID 277) lays HORIZONTAL to the left of a single-line Verveine cyan heading.
 * Different mental model from .rtk-testimonial-with-orange-arrow:
 *   • That primitive paints the arrow in the GUTTER between two columns
 *     (portrait -> quote), diagonal at 15deg. Anchored to the RIGHT column.
 *   • This primitive paints the arrow INLINE, to the left of a single
 *     text block within its OWN column, lying flat (0deg). Anchored to the
 *     text block's own box via a left padding reservation.
 *
 * Usage: put the class on the [vc_column_text] that holds the H-tag callout:
 *   [vc_column_text el_class="rtk-callout-with-orange-arrow"]
 *   <h3 class="rtk-testimonial-header"><span style="color: #059dd9;">14% are English Language Learners</span></h3>
 *   [/vc_column_text]
 *
 * Also wraps around plain <p> or any single inline callout.
 * Reserves ~110px of left padding for the arrow footprint.
 *
 * Bounce: opts into the shared rtk-bounce-play IntersectionObserver via
 * custom.js. Keyframes below preserve the base horizontal transform.
 * ============================================================ */

.rtk-callout-with-orange-arrow {
  position: relative;
  padding-left: 110px;               /* reserve space for the arrow */
  overflow: visible !important;
}

.rtk-callout-with-orange-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 105px;
  height: 45px;                                  /* matches SVG viewBox 105x45 */
  transform: translateY(-50%);                   /* SVG is drawn horizontal, no rotation */
  transform-origin: 50% 50%;
  background-image: url("/wp-content/themes/rosies/assets/decorators/OrangeArrow_Horizontal.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 3;
}

/* --- Bounce animation (horizontal base) --------------------------------
 * Keyframes MUST preserve the base translateY(-50%) or the arrow jumps to
 * the top-left when the animation kicks off. Small vertical bob 3x. */
@keyframes rtk-callout-arrow-bob {
  0%   { transform: translateY(-50%); }
  25%  { transform: translateY(calc(-50% - 10px)); }
  50%  { transform: translateY(-50%); }
  75%  { transform: translateY(calc(-50% - 5px)); }
  100% { transform: translateY(-50%); }
}

.rtk-callout-with-orange-arrow.rtk-bounce-play::before {
  animation: rtk-callout-arrow-bob 0.9s ease-in-out 3;
}

@media (prefers-reduced-motion: reduce) {
  .rtk-callout-with-orange-arrow.rtk-bounce-play::before {
    animation: none;
  }
}

/* Tablet: shrink arrow footprint and left padding proportionally. */
@media (max-width: 1024px) {
  .rtk-callout-with-orange-arrow {
    padding-left: 95px;
  }
  .rtk-callout-with-orange-arrow::before {
    width: 82px;
    height: 35px;
  }
}

/* Mobile: keep the arrow to the LEFT of the text (inline like desktop),
 * just at a smaller size and a tighter left padding. NO stacking-above:
 * user prefers the arrow-inline visual continuity across breakpoints. */
@media (max-width: 600px) {
  .rtk-callout-with-orange-arrow {
    padding-left: 75px;
  }
  .rtk-callout-with-orange-arrow::before {
    /* top/left/transform inherited from base (top: 50%, left: 0, translateY(-50%)) */
    width: 65px;
    height: 28px;
  }
}


/* ============================================================
 * rtk-callout-with-orange-loop — site-wide inline callout primitive
 *
 * Sibling of .rtk-callout-with-orange-arrow. Same mental model — an
 * arrow sits INLINE, to the left of a single text block within its OWN
 * column, anchored to the text block's own box via a left padding
 * reservation — but this variant uses the PORTRAIT loop arrow
 * (OrangeArrowLoop.svg, viewBox 75x90) instead of the horizontal one.
 *
 * Usage: put the class on the [vc_column_text] that holds the H-tag callout:
 *   [vc_column_text el_class="rtk-callout-with-orange-loop"]
 *   <h3 class="rtk-testimonial-header"><span style="color: #059dd9;">100% of 8th graders accepted into better resourced high schools</span></h3>
 *   [/vc_column_text]
 *
 * Reserves ~90px of left padding for the portrait loop-arrow footprint.
 *
 * Bounce: opts into the shared rtk-bounce-play IntersectionObserver via
 * custom.js (same trigger as the horizontal variant; the observer key is
 * on the SHORTCODE class, not the SVG). Keyframes below preserve the
 * base vertical translate on the arrow.
 * ============================================================ */

.rtk-callout-with-orange-loop {
  position: relative;
  padding-left: 90px;                /* reserve space for the portrait loop */
  overflow: visible !important;
}

.rtk-callout-with-orange-loop::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 60px;
  height: 72px;                                  /* matches SVG viewBox 75x90 ratio */
  transform: translateY(-50%);
  transform-origin: 50% 50%;
  background-image: url("/wp-content/themes/rosies/assets/decorators/OrangeArrowLoop.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 3;
}

/* --- Bounce animation (portrait base) --------------------------------
 * Keyframes MUST preserve the base translateY(-50%) or the arrow jumps
 * to the top-left when the animation kicks off. Small vertical bob 3x. */
@keyframes rtk-callout-loop-bob {
  0%   { transform: translateY(-50%); }
  25%  { transform: translate(0, calc(-50% - 8px)); }
  50%  { transform: translateY(-50%); }
  75%  { transform: translate(0, calc(-50% - 4px)); }
  100% { transform: translateY(-50%); }
}

.rtk-callout-with-orange-loop.rtk-bounce-play::before {
  animation: rtk-callout-loop-bob 0.9s ease-in-out 3;
}

@media (prefers-reduced-motion: reduce) {
  .rtk-callout-with-orange-loop.rtk-bounce-play::before {
    animation: none;
  }
}

/* Tablet: shrink loop footprint and left padding proportionally. */
@media (max-width: 1024px) {
  .rtk-callout-with-orange-loop {
    padding-left: 75px;
  }
  .rtk-callout-with-orange-loop::before {
    width: 50px;
    height: 60px;
  }
}

/* Mobile: keep the loop to the LEFT of the text (inline like desktop),
 * just at a smaller size and a tighter left padding. NO stacking-above:
 * user prefers the arrow-inline visual continuity across breakpoints. */
@media (max-width: 600px) {
  .rtk-callout-with-orange-loop {
    padding-left: 60px;
  }
  .rtk-callout-with-orange-loop::before {
    /* top/left/transform inherited from base (top: 50%, left: 0, translateY(-50%)) */
    width: 40px;
    height: 48px;
  }
  /* NOTE: no keyframes override — the base rtk-callout-loop-bob keyframes
   * work at every breakpoint because the arrow retains translateY(-50%). */
}


/* ------------------------------------------------------------
 * Sunburst — sunburst-cyan.png
 * ------------------------------------------------------------ */
.rtk-decorator-sunburst {
  --rtk-decorator-img: url("/wp-content/themes/rosies/assets/decorators/sunburst-cyan.png");
  --rtk-decorator-size: 320px auto;
}
@media (max-width: 1024px) {
  .rtk-decorator-sunburst { --rtk-decorator-size: 240px auto; }
}
@media (max-width: 640px) {
  .rtk-decorator-sunburst { --rtk-decorator-size: 160px auto; }
}


/* ------------------------------------------------------------
 * Heart — curly-line-heart.png
 * ------------------------------------------------------------ */
.rtk-decorator-heart {
  --rtk-decorator-img: url("/wp-content/themes/rosies/assets/decorators/curly-line-heart.png");
  --rtk-decorator-size: 140px auto;
}
@media (max-width: 1024px) {
  .rtk-decorator-heart { --rtk-decorator-size: 105px auto; }
}
@media (max-width: 640px) {
  .rtk-decorator-heart { --rtk-decorator-size: 70px auto; }
}


/* ------------------------------------------------------------
 * Arrows — arrow-purple-left.png / arrow-purple-right.png
 * ------------------------------------------------------------ */
.rtk-decorator-arrow-left {
  --rtk-decorator-img: url("/wp-content/themes/rosies/assets/decorators/arrow-purple-left.png");
  --rtk-decorator-size: 160px auto;
}
.rtk-decorator-arrow-right {
  --rtk-decorator-img: url("/wp-content/themes/rosies/assets/decorators/arrow-purple-right.png");
  --rtk-decorator-size: 160px auto;
  --rtk-decorator-pos: right top;
}
@media (max-width: 1024px) {
  .rtk-decorator-arrow-left,
  .rtk-decorator-arrow-right { --rtk-decorator-size: 120px auto; }
}
@media (max-width: 640px) {
  .rtk-decorator-arrow-left,
  .rtk-decorator-arrow-right { --rtk-decorator-size: 80px auto; }
}


/* ------------------------------------------------------------
 * UTILITY MODIFIER — hide decorator per breakpoint
 * ------------------------------------------------------------
 * Common on rows where a two-column layout collapses to one column
 * on mobile and the decorator would overlap text.
 *
 * Example: el_class="rtk-decorator-motivating rtk-decorator-hide-sm"
 * ------------------------------------------------------------ */
@media (max-width: 640px) {
  .wpb_row.rtk-decorator-hide-sm::before {
    display: none;
  }
  /* legacy fallback if pseudo isn't in play for some reason */
  .rtk-decorator-hide-sm .row-bg,
  .rtk-decorator-hide-sm .row-bg.using-image,
  .rtk-decorator-hide-sm .row-bg:not(.using-image) {
    background-image: none !important;
  }
}
@media (max-width: 1024px) {
  .rtk-decorator-hide-md .row-bg.using-image,
  .rtk-decorator-hide-md .row-bg:not(.using-image) {
    background-image: none !important;
  }
}


/* ============================================================
 * VIDEO FACADE (.rtk-video-thumb) — SITE-WIDE
 * ============================================================
 * Editor writes: [vc_video link="..." el_class="rtk-video-thumb"]
 *
 * custom.js swaps the WPBakery iframe for a click-to-play button
 * using YouTube's own thumbnail image, with a circle mask and a
 * pure-CSS play triangle. On click, JS injects a fresh iframe
 * pointing at youtube-nocookie.com/embed/<ID>?autoplay=1&rel=0
 * &modestbranding=1&showinfo=0&iv_load_policy=3&playsinline=1.
 *
 * Layers:
 *   .wpb_video_wrapper.rtk-video-thumb      ← outer, gets bg image
 *     > button.rtk-video-facade             ← click target (JS)
 *       > span.rtk-video-facade__play       ← play triangle (CSS)
 *     > iframe (only after click)
 *
 * Works on any page. Load conditionally via
 * rosies_enqueue_conditional_assets() in enqueue.php.
 * ============================================================ */

/* ============================================================
 * PHOTO CIRCLE PRIMITIVE (.rtk-photo-circle) — SITE-WIDE
 * ============================================================
 * Turns any [image_with_animation el_class="rtk-photo-circle"]
 * into a perfect circle with subtle shadow + hover lift.
 * Assumes the source image is square (600x600 for alumni row).
 *
 * The el_class lands on the outer .image_with_animation_wrap;
 * the actual <img> sits inside. We style both.
 * ============================================================ */
.rtk-photo-circle,
.rtk-photo-circle.image_with_animation_wrap,
.image_with_animation_wrap.rtk-photo-circle {
  border-radius: 50% !important;
  overflow: hidden !important;
  aspect-ratio: 1 / 1;
  max-width: 240px;
  margin: 0 auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.rtk-photo-circle:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.rtk-photo-circle img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;   /* belt-and-suspenders in case Salient adds rounding */
}

/* Photo-circle fit patch 01.
 * Salient also places the class directly on <img>. The descendant rule
 * above does not match that markup. Keep the existing square/circle box
 * and fill it with a proportional crop, rather than stretching the photo.
 * Do not override object-position, so intentional focal positions survive.
 */
img.rtk-photo-circle {
  object-fit: cover;
}


/* ============================================================
 * GALA PHOTO WRAP PRIMITIVE (.rtk-gala-photo-wrap) — SITE-WIDE
 * ============================================================
 * Circular photo cropped inside the sunburst-cyan.png frame.
 * Used on the "Passing It On Gala" row, but not homepage-scoped
 * — works anywhere you drop
 *   [image_with_animation el_class="rtk-gala-photo-wrap"]
 *
 * DOM in this Salient build (verified live):
 *   div.hover-wrap-inner
 *     └ img.img-with-animation.rtk-gala-photo-wrap   ← class lands HERE
 *
 * The el_class from image_with_animation is applied directly to
 * the <img>, NOT to an outer wrapper div. That means we can't use
 * a pseudo-element on the class itself — CSS ::before/::after don't
 * render on replaced elements like <img>. So we paint the sunburst
 * on the PARENT (.hover-wrap-inner) using :has() as the structural
 * selector, and style the marked <img> directly for cropping.
 *
 * :has() is supported in every evergreen browser since 2023.
 *
 * Geometry:
 *   • parent .hover-wrap-inner becomes the positioning context
 *   • parent ::before paints the sunburst behind, drapes 14% outside
 *   • <img> is cropped to a 76% inner circle inside the rays
 * ============================================================ */

/* Parent becomes the positioning context + frame carrier.
   :has() is scoped to "parent has a direct child that is the marker". */
.hover-wrap-inner:has(> img.rtk-gala-photo-wrap) {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  overflow: visible !important;   /* let sunburst rays extend past wrapper */
}

/* Salient wraps image_with_animation in an outer wrapper. NOTE: the real
   class name Salient ships is misspelled `.img-with-aniamtion-wrap`
   (not `.image_with_animation_wrap` as its docs suggest). Match both
   spellings defensively so this works today and doesn't break if
   Salient later fixes the typo. */
[class*="img-with-"][class*="tion-wrap"]:has(img.rtk-gala-photo-wrap) {
  overflow: visible !important;
  max-width: 440px;
  margin: 0 auto;
}

/* Sunburst frame — painted on the real div parent, not on the <img>. */
.hover-wrap-inner:has(> img.rtk-gala-photo-wrap)::before {
  content: "";
  position: absolute;
  inset: -14%;                    /* rays drape 14% outside on all sides */
  background: url("/wp-content/themes/rosies/assets/decorators/sunburst-cyan.png") no-repeat center/contain;
  z-index: 0;
  pointer-events: none;
}

/* The <img> itself — crop to 76% circle, sit above the sunburst.
 *
 * Positioning: absolute + inset:0 + margin:auto centers the fixed-size
 * circle in BOTH axes inside its .hover-wrap-inner parent. The earlier
 * `margin: 12% auto` approach only centered horizontally because CSS
 * spec resolves `auto` vertical margin to 0 in normal flow — the image
 * ended up pinned to the top with a ~52px gap at the bottom. */
img.rtk-gala-photo-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  /* Photo at 87% of the wrapper — raised from 76% in patch-04 to fill
     the sunburst frame more tightly. To revert: change 87% → 76%. */
  width: 87%;
  height: 87%;
  aspect-ratio: 1 / 1;
  /* !important defeats Salient's .img-with-aniamtion-wrap .hover-wrap .hover-wrap-inner img.img-with-animation
     (specificity 0,4,1) which explicitly sets margin-bottom: 0 and blocks vertical `auto` centering. */
  margin: auto !important;
  border-radius: 50%;
  object-fit: cover;
}


/* ============================================================
 * SEVEN FRAME-PHOTO WRAP PRIMITIVES — SITE-WIDE
 * ============================================================
 * Same geometry as .rtk-gala-photo-wrap (see above), different frame
 * PNG per variant. Site-wide primitives — drop as el_class on an
 * [image_with_animation] anywhere.
 *
 *   .rtk-orange-frame-photo-wrap        → orange-frame.png          (#f58221)
 *   .rtk-blue-frame-photo-wrap          → blue-frame.png            (#009cd8)
 *   .rtk-green-frame-photo-wrap         → green-frame.png           (#91ca66)
 *   .rtk-greenframe-ed-wrap             → green-frame-ed.png        (#91ca66)
 *   .rtk-purpleparents-frame-photo-wrap → purpleframe_parents.png   (#7a55a3)
 *   .rtk-purpleframealum-wrap           → purpleframe_alum.png      (#7a55a3)
 *   .rtk-purpleframementor-wrap         → purpleframe_mentor.png    (#7a55a3)
 *
 * Structural rules are SHARED via selector lists so all eight
 * frame primitives (gala + seven new) stay in lock-step. Only the
 * ::before background-image URL varies per class.
 * ============================================================ */

/* Shared parent-carrier rule — one selector list for all seven new frames. */
.hover-wrap-inner:has(> img.rtk-orange-frame-photo-wrap),
.hover-wrap-inner:has(> img.rtk-blue-frame-photo-wrap),
.hover-wrap-inner:has(> img.rtk-green-frame-photo-wrap),
.hover-wrap-inner:has(> img.rtk-greenframe-ed-wrap),
.hover-wrap-inner:has(> img.rtk-purpleparents-frame-photo-wrap),
.hover-wrap-inner:has(> img.rtk-purpleframealum-wrap),
.hover-wrap-inner:has(> img.rtk-purpleframementor-wrap) {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  overflow: visible !important;
}

/* Shared Salient outer wrapper — overflow-visible + width cap. */
[class*="img-with-"][class*="tion-wrap"]:has(img.rtk-orange-frame-photo-wrap),
[class*="img-with-"][class*="tion-wrap"]:has(img.rtk-blue-frame-photo-wrap),
[class*="img-with-"][class*="tion-wrap"]:has(img.rtk-green-frame-photo-wrap),
[class*="img-with-"][class*="tion-wrap"]:has(img.rtk-greenframe-ed-wrap),
[class*="img-with-"][class*="tion-wrap"]:has(img.rtk-purpleparents-frame-photo-wrap),
[class*="img-with-"][class*="tion-wrap"]:has(img.rtk-purpleframealum-wrap),
[class*="img-with-"][class*="tion-wrap"]:has(img.rtk-purpleframementor-wrap) {
  overflow: visible !important;
  max-width: 440px;
  margin: 0 auto;
}

/* Shared ::before frame carrier — everything except the URL. */
.hover-wrap-inner:has(> img.rtk-orange-frame-photo-wrap)::before,
.hover-wrap-inner:has(> img.rtk-blue-frame-photo-wrap)::before,
.hover-wrap-inner:has(> img.rtk-green-frame-photo-wrap)::before,
.hover-wrap-inner:has(> img.rtk-greenframe-ed-wrap)::before,
.hover-wrap-inner:has(> img.rtk-purpleparents-frame-photo-wrap)::before,
.hover-wrap-inner:has(> img.rtk-purpleframealum-wrap)::before,
.hover-wrap-inner:has(> img.rtk-purpleframementor-wrap)::before {
  content: "";
  position: absolute;
  inset: -14%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 0;
  pointer-events: none;
}

/* Per-variant asset URL — the only thing that changes.
 *
 * NOTE: PNGs (not SVGs) — the source SVGs shipped as un-styled stroke
 * outlines with variable stroke-width across variants, giving inconsistent
 * ray weight when we baked fills onto them. Rasterized to matching-weight
 * PNGs against a transparent background so all seven frames share the same
 * visual weight and no CSS filter/mask trickery is required.
 *
 * This is the same reason .rtk-gala-photo-wrap uses sunburst-cyan.png.
 */
.hover-wrap-inner:has(> img.rtk-orange-frame-photo-wrap)::before {
  background-image: url("/wp-content/themes/rosies/assets/decorators/orange-frame.png");
}
.hover-wrap-inner:has(> img.rtk-blue-frame-photo-wrap)::before {
  background-image: url("/wp-content/themes/rosies/assets/decorators/blue-frame.png");
}
.hover-wrap-inner:has(> img.rtk-green-frame-photo-wrap)::before {
  background-image: url("/wp-content/themes/rosies/assets/decorators/green-frame.png");
}
.hover-wrap-inner:has(> img.rtk-greenframe-ed-wrap)::before {
  background-image: url("/wp-content/themes/rosies/assets/decorators/green-frame-ed.png");
}
.hover-wrap-inner:has(> img.rtk-purpleparents-frame-photo-wrap)::before {
  background-image: url("/wp-content/themes/rosies/assets/decorators/purpleframe_parents.png");
}
.hover-wrap-inner:has(> img.rtk-purpleframealum-wrap)::before {
  background-image: url("/wp-content/themes/rosies/assets/decorators/purpleframe_alum.png");
}
.hover-wrap-inner:has(> img.rtk-purpleframementor-wrap)::before {
  background-image: url("/wp-content/themes/rosies/assets/decorators/purpleframe_mentor.png");
}

/* Shared <img> cropping — identical to img.rtk-gala-photo-wrap.
 * Photo sits at 87% of the 440px wrapper (~383px) to fill the frame
 * a bit more — raised from 76% in patch-04. To revert: change 87% → 76%. */
img.rtk-orange-frame-photo-wrap,
img.rtk-blue-frame-photo-wrap,
img.rtk-green-frame-photo-wrap,
img.rtk-greenframe-ed-wrap,
img.rtk-purpleparents-frame-photo-wrap,
img.rtk-purpleframealum-wrap,
img.rtk-purpleframementor-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 87%;
  height: 87%;
  aspect-ratio: 1 / 1;
  margin: auto !important;
  border-radius: 50%;
  object-fit: cover;
}


/* NOTE ON !important: Salient's .vc_video-aspect-ratio-169 and
 * .vc_video-el-width-100 classes set width/padding-bottom rules
 * with high specificity, so we override them explicitly. This is
 * the ONE place in this file where !important is unavoidable. */
.rtk-video-thumb.wpb_video_wrapper,
.wpb_video_wrapper.rtk-video-thumb,
.rtk-video-thumb {
  position: relative !important;
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  max-width: 480px !important;
  margin: 0 auto !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background-color: var(--rosies-mint, #DDF0EC);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  /* Animatable properties for the zoom-out reveal (see --playing state).
     Transition duration is intentionally slow so users perceive the
     circle "opening up" into the full video, not a jump-cut. */
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-radius 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    max-width 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    aspect-ratio 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  padding-bottom: 0 !important;   /* Salient's aspect-ratio-169 sets this */
  height: auto !important;
}
.rtk-video-thumb:hover {
  transform: scale(1.02);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.2);
}

/* ---- PLAYING STATE: zoom-out reveal ----------------------------
 * When custom.js adds .rtk-video-thumb--playing on click, the wrapper
 * morphs from a 480x480 mint circle to a 16:9 rectangle at the column's
 * natural width. The iframe is dropped in with position:absolute inset:0
 * so it grows into place as the wrapper expands.
 * The transition on the base rule (border-radius / max-width /
 * aspect-ratio) is what actually animates — these are the target values. */
.rtk-video-thumb--playing.wpb_video_wrapper,
.wpb_video_wrapper.rtk-video-thumb--playing,
.rtk-video-thumb--playing {
  aspect-ratio: 16 / 9 !important;
  border-radius: 12px !important;   /* soft corners, still on-brand */
  max-width: 640px !important;      /* larger than circle's 480px — grows outward */
  cursor: default !important;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.22);
}
.rtk-video-thumb--playing:hover {
  /* Kill the 1.02 hover scale once playing; it feels jittery. */
  transform: none;
}

/* Salient sometimes wraps the wrapper in vc_general.vc_video-el-width-100
 * (100% wide) or vc_video-el-width-50 etc. Neutralize any wrapper width. */
.rtk-video-thumb.vc_video-el-width-100,
.rtk-video-thumb.vc_video-el-width-75,
.rtk-video-thumb.vc_video-el-width-50,
.rtk-video-thumb.vc_video-el-width-25 {
  width: 100% !important;
  max-width: 480px !important;
}

/* The click-target button injected by custom.js fills the wrapper. */
.rtk-video-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}
.rtk-video-facade:hover,
.rtk-video-facade:focus-visible {
  background-color: rgba(0, 0, 0, 0.12);
  outline: none;
}
.rtk-video-facade:focus-visible {
  box-shadow: inset 0 0 0 4px var(--rosies-cyan-text, #0369A1);
}

/* Play triangle — pure CSS, no image dependency. */
.rtk-video-facade__play {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.92);
  position: relative;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.rtk-video-facade:hover .rtk-video-facade__play {
  transform: scale(1.08);
  background-color: #fff;
}
.rtk-video-facade__play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 18px 0 18px 28px;
  border-color: transparent transparent transparent #059DD9;
}

/* After click — iframe fills the wrapper (which morphs to 16:9 rect).
 * z-index:0 keeps it BEHIND the facade (z:1 by default via stacking
 * context) so the facade can fade out on top during the reveal. */
.rtk-video-thumb--playing iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 0;
}
.rtk-video-thumb .rtk-video-facade {
  z-index: 2;   /* ensure facade sits above the loading iframe */
}

@media (max-width: 768px) {
  .rtk-video-thumb.wpb_video_wrapper,
  .wpb_video_wrapper.rtk-video-thumb {
    max-width: 360px;
  }
  .rtk-video-facade__play {
    width: 72px;
    height: 72px;
  }
  .rtk-video-facade__play::before {
    border-width: 14px 0 14px 22px;
  }
}
@media (max-width: 480px) {
  .rtk-video-thumb.wpb_video_wrapper,
  .wpb_video_wrapper.rtk-video-thumb {
    max-width: 280px;
  }
}


/* ============================================================
 * VIDEO FACADE MODIFIER (.rtk-video-thumb-redyell) — SITE-WIDE
 * ============================================================
 * Rectangular 16:9 variant with a baked-in red-and-yellow
 * hand-drawn frame around the thumbnail. Used alongside the base
 * class — apply BOTH on the same [vc_video] so the JS facade wiring
 * (custom.js) still runs unchanged:
 *
 *   [vc_video link="..." el_class="rtk-video-thumb rtk-video-thumb-redyell"]
 *
 * Overrides vs the base .rtk-video-thumb (which is circular by default):
 *   • aspect-ratio: 16 / 9 (starts rectangular — no morph on click)
 *   • border-radius: 0 (frame edges are baked into the PNG)
 *   • background-image: theme-owned PNG (NOT YouTube's maxresdefault)
 *   • max-width: 640px on desktop (larger than circle's 480px)
 *   • The purple play button (.rtk-video-facade__play) is reused as-is
 *
 * IMPORTANT — defeating the inline background-image:
 * custom.js line 71 sets background-image inline via jQuery .css()
 * pointing at YouTube's hqdefault/maxresdefault. Inline styles beat
 * regular CSS rules. We defeat that by making our background-image
 * !important. Stylesheet !important tie-breaks against inline
 * !important via cascade order (later wins) — our rule loads after
 * the inline style is applied on DOMReady.
 *
 * On click, custom.js still adds .rtk-video-thumb--playing which
 * morphs the wrapper to 16:9. Since we're already 16:9 that morph
 * is a no-op — which is intentional. The iframe swaps in place
 * cleanly.
 * ============================================================ */
.rtk-video-thumb.rtk-video-thumb-redyell,
.rtk-video-thumb-redyell.wpb_video_wrapper,
.wpb_video_wrapper.rtk-video-thumb-redyell,
.rtk-video-thumb-redyell {
  aspect-ratio: 16 / 9 !important;
  border-radius: 0 !important;
  max-width: 640px !important;
  /* Frame is baked into the PNG — no drop-shadow, so the sketchy
     edges read as intentional artwork rather than a clipped photo. */
  box-shadow: none !important;
  background-color: transparent;
  /* Defeat custom.js's inline background-image (YouTube auto-thumb).
     Uses the theme-owned decorator PNG shipped alongside the base
     frame primitives. Path is relative to this CSS file's location
     at wp-content/themes/rosies/assets/css/. */
  background-image: url("../decorators/alums-tony-doug-anthony-925.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Playing state — wrapper is already 16:9, but the base primitive's
 * --playing rule morphs max-width to 640px (matching us) and softens
 * border-radius to 12px. We want to keep radius: 0 so the frame
 * edges stay flush; override the softening. Everything else
 * (iframe positioning, facade removal) is handled by shared rules. */
.rtk-video-thumb-redyell.rtk-video-thumb--playing,
.rtk-video-thumb--playing.rtk-video-thumb-redyell {
  border-radius: 0 !important;
  /* Once the iframe is in place the baked-in frame is hidden behind
     the video, so no need to preserve background-image. Leave it be
     — the iframe with inset:0 covers it. */
}

@media (max-width: 768px) {
  .rtk-video-thumb.rtk-video-thumb-redyell,
  .rtk-video-thumb-redyell.wpb_video_wrapper,
  .wpb_video_wrapper.rtk-video-thumb-redyell {
    max-width: 480px !important;
  }
}
@media (max-width: 480px) {
  .rtk-video-thumb.rtk-video-thumb-redyell,
  .rtk-video-thumb-redyell.wpb_video_wrapper,
  .wpb_video_wrapper.rtk-video-thumb-redyell {
    max-width: 340px !important;
  }
}


/* ============================================================
 * SEE-THROUGH RING PLAY BUTTON — rectangular variants only
 * ============================================================
 * The homepage's circular .rtk-video-thumb button uses a
 * 92%-opaque white filled circle behind the purple triangle.
 * On the rectangular alumni variants, that filled circle covers
 * too much of the video thumbnail. This block replaces the fill
 * with a thin white outline ring on the three rectangular
 * variants only, so the thumbnail shows through.
 *
 * Homepage circular button is UNAFFECTED — selectors below
 * require one of the rectangular modifier classes.
 * ============================================================ */
.rtk-video-thumb-redyell .rtk-video-facade__play,
.rtk-video-thumb-zach-karen .rtk-video-facade__play,
.rtk-video-thumb-lauren-cutout .rtk-video-facade__play,
.rtk-video-thumb-home-rect .rtk-video-facade__play,
.rtk-video-thumb-viola .rtk-video-facade__play,
.rtk-video-thumb-heredia .rtk-video-facade__play {
  background-color: transparent !important;
  border: 3px solid rgba(255, 255, 255, 0.9) !important;
  width: 90px !important;
  height: 90px !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35) !important;
}
.rtk-video-thumb-redyell .rtk-video-facade:hover .rtk-video-facade__play,
.rtk-video-thumb-zach-karen .rtk-video-facade:hover .rtk-video-facade__play,
.rtk-video-thumb-lauren-cutout .rtk-video-facade:hover .rtk-video-facade__play,
.rtk-video-thumb-home-rect .rtk-video-facade:hover .rtk-video-facade__play,
.rtk-video-thumb-viola .rtk-video-facade:hover .rtk-video-facade__play,
.rtk-video-thumb-heredia .rtk-video-facade:hover .rtk-video-facade__play {
  background-color: transparent !important;
  border-color: #fff !important;
}


/* ============================================================
 * VIDEO FACADE MODIFIER (.rtk-video-thumb-zach-karen) — SITE-WIDE
 * ============================================================
 * Rectangular 16:9 variant with a soft-rounded-corner + subtle-
 * drop-shadow treatment baked into the PNG. Same modifier pattern
 * as .rtk-video-thumb-redyell — apply BOTH classes together:
 *
 *   [vc_video link="..." el_class="rtk-video-thumb rtk-video-thumb-zach-karen"]
 *
 * Since the artwork edges (rounded corners + shadow) are inside
 * the PNG, we use `cover` sizing and no border-radius on the
 * wrapper — the PNG fills the wrapper edge-to-edge and the round
 * corners come from the artwork itself.
 * ============================================================ */
.rtk-video-thumb.rtk-video-thumb-zach-karen,
.rtk-video-thumb-zach-karen.wpb_video_wrapper,
.wpb_video_wrapper.rtk-video-thumb-zach-karen,
.rtk-video-thumb-zach-karen {
  aspect-ratio: 16 / 9 !important;
  border-radius: 0 !important;
  max-width: 640px !important;
  box-shadow: none !important;
  background-color: transparent;
  background-image: url("../decorators/alumni-karen-zach.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.rtk-video-thumb-zach-karen.rtk-video-thumb--playing,
.rtk-video-thumb--playing.rtk-video-thumb-zach-karen {
  border-radius: 0 !important;
}
@media (max-width: 768px) {
  .rtk-video-thumb.rtk-video-thumb-zach-karen,
  .rtk-video-thumb-zach-karen.wpb_video_wrapper,
  .wpb_video_wrapper.rtk-video-thumb-zach-karen {
    max-width: 480px !important;
  }
}
@media (max-width: 480px) {
  .rtk-video-thumb.rtk-video-thumb-zach-karen,
  .rtk-video-thumb-zach-karen.wpb_video_wrapper,
  .wpb_video_wrapper.rtk-video-thumb-zach-karen {
    max-width: 340px !important;
  }
}


/* ============================================================
 * VIDEO FACADE MODIFIER (.rtk-video-thumb-lauren-cutout) — SITE-WIDE
 * ============================================================
 * Rectangular 16:9 wrapper containing a CIRCLE cutout artwork
 * (Lauren mid-jump) with purple sunburst ray decorations that
 * extend beyond the circle's radius into the 16:9 canvas. The
 * PNG has TRANSPARENT regions outside the circle+rays.
 *
 * Two differences vs the redyell / zach-karen siblings:
 *   1. `background-size: contain` (not cover) — the sunburst rays
 *      need to stay unclipped. Native artwork is 925×514 which is
 *      ~16:9, so contain effectively fills the wrapper with just
 *      a hairline of row-bg on ultra-wide viewports — acceptable.
 *   2. `background-color: transparent` — the row background
 *      shows through the PNG's transparent margins. Designed for
 *      a WHITE row bg; on a colored row the margins will pick up
 *      that color.
 *
 * Apply BOTH classes together:
 *
 *   [vc_video link="..." el_class="rtk-video-thumb rtk-video-thumb-lauren-cutout"]
 *
 * Place inside a row with a white background so the transparent
 * canvas margins read as clean white space around the circle+rays.
 * ============================================================ */
.rtk-video-thumb.rtk-video-thumb-lauren-cutout,
.rtk-video-thumb-lauren-cutout.wpb_video_wrapper,
.wpb_video_wrapper.rtk-video-thumb-lauren-cutout,
.rtk-video-thumb-lauren-cutout {
  aspect-ratio: 16 / 9 !important;
  border-radius: 0 !important;
  max-width: 640px !important;
  box-shadow: none !important;
  background-color: transparent !important;
  background-image: url("../decorators/lauren-circle-925.png") !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.rtk-video-thumb-lauren-cutout.rtk-video-thumb--playing,
.rtk-video-thumb--playing.rtk-video-thumb-lauren-cutout {
  border-radius: 0 !important;
}
@media (max-width: 768px) {
  .rtk-video-thumb.rtk-video-thumb-lauren-cutout,
  .rtk-video-thumb-lauren-cutout.wpb_video_wrapper,
  .wpb_video_wrapper.rtk-video-thumb-lauren-cutout {
    max-width: 480px !important;
  }
}
@media (max-width: 480px) {
  .rtk-video-thumb.rtk-video-thumb-lauren-cutout,
  .rtk-video-thumb-lauren-cutout.wpb_video_wrapper,
  .wpb_video_wrapper.rtk-video-thumb-lauren-cutout {
    max-width: 340px !important;
  }
}


/* ============================================================
 * VIDEO FACADE MODIFIER (.rtk-video-thumb-home-rect) — SITE-WIDE
 * ============================================================
 * Homepage "Who We Are" video variant, structured identically
 * to .rtk-video-thumb-lauren-cutout: 16:9 rectangle wrapper,
 * theme-owned PNG with transparent canvas, contain sizing,
 * WHITE row bg required. Inherits see-through ring play button
 * from the block above.
 *
 * Usage:
 *   [vc_video link="https://www.youtube.com/watch?v=g6FhSQwdQZY" el_class="rtk-video-thumb rtk-video-thumb-home-rect"]
 * ============================================================ */
.rtk-video-thumb.rtk-video-thumb-home-rect,
.rtk-video-thumb-home-rect.wpb_video_wrapper,
.wpb_video_wrapper.rtk-video-thumb-home-rect,
.rtk-video-thumb-home-rect {
  aspect-ratio: 16 / 9 !important;
  max-width: 640px !important;
  border-radius: 0 !important;
  background-image: url("../decorators/rtk-home-video-thumb-new.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
.rtk-video-thumb-home-rect.rtk-video-thumb--playing,
.rtk-video-thumb--playing.rtk-video-thumb-home-rect {
  border-radius: 0 !important;
}
@media (max-width: 768px) {
  .rtk-video-thumb.rtk-video-thumb-home-rect,
  .rtk-video-thumb-home-rect.wpb_video_wrapper,
  .wpb_video_wrapper.rtk-video-thumb-home-rect {
    max-width: 480px !important;
  }
}
@media (max-width: 480px) {
  .rtk-video-thumb.rtk-video-thumb-home-rect,
  .rtk-video-thumb-home-rect.wpb_video_wrapper,
  .wpb_video_wrapper.rtk-video-thumb-home-rect {
    max-width: 340px !important;
  }
}


/* ============================================================
 * TESTIMONIAL HEADER ARROWS (.rtk-testimonial-header) — SITE-WIDE
 * ============================================================
 * Editor writes any heading with class="rtk-testimonial-header"
 * (Bakery: put it in the Custom Class field of a Text/Heading
 * element; raw HTML: <h2 class="rtk-testimonial-header">…</h2>).
 *
 * Result: hand-drawn purple arrows flank the heading text, mirroring
 * the "Sharing Experiences" section on the live BlueHost site.
 *
 * Works on any page. Loaded conditionally by
 * rosies_enqueue_conditional_assets() when content contains the class.
 * ============================================================ */

/* NOTE: The purple arrow decorators (::before / ::after) that used
   to flank this heading were removed. The same arrow assets
   (arrow-purple-left.png / arrow-purple-right.png) are now used as
   the actual carousel prev/next buttons in typography.css. Keeping
   both would duplicate the arrow visually on the same section. */


/* ============================================================
 * VIDEO FACADE MODIFIER (.rtk-video-thumb-viola) — SITE-WIDE
 * ============================================================
 * /parents/ page — Viola family testimonial video variant.
 * Same rectangular pattern as .rtk-video-thumb-zach-karen:
 * 16:9 wrapper, cover sizing, photo-only PNG (no baked frame).
 *
 *   [vc_video link="..." el_class="rtk-video-thumb rtk-video-thumb-viola"]
 * ============================================================ */
.rtk-video-thumb.rtk-video-thumb-viola,
.rtk-video-thumb-viola.wpb_video_wrapper,
.wpb_video_wrapper.rtk-video-thumb-viola,
.rtk-video-thumb-viola {
  aspect-ratio: 16 / 9 !important;
  border-radius: 0 !important;
  max-width: 640px !important;
  box-shadow: none !important;
  background-color: transparent;
  background-image: url("../decorators/viola-video-thumb.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.rtk-video-thumb-viola.rtk-video-thumb--playing,
.rtk-video-thumb--playing.rtk-video-thumb-viola {
  border-radius: 0 !important;
}
@media (max-width: 768px) {
  .rtk-video-thumb.rtk-video-thumb-viola,
  .rtk-video-thumb-viola.wpb_video_wrapper,
  .wpb_video_wrapper.rtk-video-thumb-viola {
    max-width: 480px !important;
  }
}
@media (max-width: 480px) {
  .rtk-video-thumb.rtk-video-thumb-viola,
  .rtk-video-thumb-viola.wpb_video_wrapper,
  .wpb_video_wrapper.rtk-video-thumb-viola {
    max-width: 340px !important;
  }
}


/* ============================================================
 * VIDEO FACADE MODIFIER (.rtk-video-thumb-heredia) — SITE-WIDE
 * ============================================================
 * /parents/ page — Heredia family testimonial video variant.
 * Same rectangular pattern as .rtk-video-thumb-zach-karen:
 * 16:9 wrapper, cover sizing, photo-only PNG (no baked frame).
 *
 *   [vc_video link="..." el_class="rtk-video-thumb rtk-video-thumb-heredia"]
 * ============================================================ */
.rtk-video-thumb.rtk-video-thumb-heredia,
.rtk-video-thumb-heredia.wpb_video_wrapper,
.wpb_video_wrapper.rtk-video-thumb-heredia,
.rtk-video-thumb-heredia {
  aspect-ratio: 16 / 9 !important;
  border-radius: 0 !important;
  max-width: 640px !important;
  box-shadow: none !important;
  background-color: transparent;
  background-image: url("../decorators/heredia-video-thumb.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.rtk-video-thumb-heredia.rtk-video-thumb--playing,
.rtk-video-thumb--playing.rtk-video-thumb-heredia {
  border-radius: 0 !important;
}
@media (max-width: 768px) {
  .rtk-video-thumb.rtk-video-thumb-heredia,
  .rtk-video-thumb-heredia.wpb_video_wrapper,
  .wpb_video_wrapper.rtk-video-thumb-heredia {
    max-width: 480px !important;
  }
}
@media (max-width: 480px) {
  .rtk-video-thumb.rtk-video-thumb-heredia,
  .rtk-video-thumb-heredia.wpb_video_wrapper,
  .wpb_video_wrapper.rtk-video-thumb-heredia {
    max-width: 340px !important;
  }
}


/* ============================================================
 * SALIENT LIGHTBOX PLAY BUTTON — SITE-WIDE VISUAL OVERRIDE (v3)
 * ============================================================
 * Retargets every Salient [nectar_video_lightbox] play button to
 * match the homepage .rtk-video-facade__play primitive EXACTLY:
 *
 *   HOMEPAGE REFERENCE (measured live):
 *     .rtk-video-facade__play
 *       - 90×90 (72 on tablet/phone)
 *       - background: transparent  ← SEE-THROUGH, poster visible
 *       - border: 3px solid rgba(255,255,255,0.9)  ← white RING
 *       - border-radius: 50%
 *       - box-shadow: 0 3px 12px rgba(0,0,0,0.35)
 *       - ::before = turquoise triangle (18×28 border trick, #059DD9)
 *
 * SPECIFICITY: matches Salient's own selector shape
 *   (body.material .nectar-video-box[data-color] .nectar_video_lightbox
 *   .play_button_2) to beat every accent-color rule in
 *   salient-dynamic-styles.css.
 *
 * HOVER: scale the parent <a> so ring + triangle scale together
 *   (no off-center jump).
 * ============================================================ */

/* Base sizing on the <a> — transparent (no filled circle). */
body.material .nectar-video-box[data-color] .nectar_video_lightbox.play_button_2,
.nectar-video-box[data-color] .nectar_video_lightbox.play_button_2,
.nectar-video-box .play_button_2 {
  width: 90px !important;
  height: 90px !important;
  margin-top: -45px !important;
  margin-left: -45px !important;
  border-radius: 50% !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 3px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35) !important;
  outline: none !important;
  overflow: visible !important;
  transition: transform 0.2s ease-out, border-color 0.2s ease-out !important;
}

/* KILL Salient's ::before disc (this is where the navy/white was
   getting painted). We need the button interior see-through so the
   video poster shows through the ring. */
body.material .nectar-video-box[data-color] .nectar_video_lightbox.play_button_2::before,
.nectar-video-box[data-color] .nectar_video_lightbox.play_button_2::before,
.nectar-video-box .play_button_2::before {
  content: none !important;
  display: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Hide Salient's SVG glyph and neutralize inner spans. */
.nectar-video-box .play_button_2 span,
.nectar-video-box .play_button_2 .play,
.nectar-video-box .play_button_2 .inner-wrap.inner {
  background: transparent !important;
  border: 0 !important;
}
.nectar-video-box .play_button_2 svg {
  display: none !important;
}

/* TURQUOISE TRIANGLE via ::after — matches homepage geometry. */
.nectar-video-box .play_button_2::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 54% !important; /* +4% visual balance (matches homepage) */
  transform: translate(-50%, -50%) !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
  border-width: 18px 0 18px 28px !important;
  border-color: transparent transparent transparent #059DD9 !important;
  pointer-events: none !important;
  z-index: 2 !important;
  transition: none !important;
}

/* HOVER — scale the <a> so ring + triangle scale together. */
.nectar-video-box .play_button_2:hover,
.nectar-video-box .play_button_2:focus-visible {
  transform: scale(1.08) !important;
  border-color: #ffffff !important;
}

/* Focus ring for keyboard users. */
.nectar-video-box .play_button_2:focus-visible {
  outline: 3px solid var(--rosies-cyan-text, #0369A1) !important;
  outline-offset: 3px !important;
}

/* Kill Salient's zoom_button dark-overlay ::after remnant. */
body .nectar-video-box[data-hover="zoom_button"] .play_button_2::after {
  background-color: transparent !important;
}

/* Responsive: 72px on tablet+phone, same as homepage. */
@media (max-width: 768px) {
  body.material .nectar-video-box[data-color] .nectar_video_lightbox.play_button_2,
  .nectar-video-box[data-color] .nectar_video_lightbox.play_button_2,
  .nectar-video-box .play_button_2 {
    width: 72px !important;
    height: 72px !important;
    margin-top: -36px !important;
    margin-left: -36px !important;
    border-width: 2px !important;
  }
  .nectar-video-box .play_button_2::after {
    border-width: 14px 0 14px 22px !important;
  }
}

/* Photo-row centering patch 01.
 * Center the stacked, centered-content photo columns themselves, including
 * columns capped by Salient's native Phone Max Width setting. Preserve
 * native image alignment, column widths, padding and vertical spacing.
 * The row hook is reusable; no homepage ID or image filename is required.
 */
@media (max-width: 999px) {
  .rtk-decorator-curly-heart > .row_col_wrap_12 >
    .wpb_column.centered-text:has(.rtk-photo-circle) {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Photo-row centering patch 02.
 * Salient's independent tablet band is 691–999px. Its default grid expands
 * the fifth-width desktop columns to 100% here. Keep the four photo columns
 * in two equal columns without changing desktop, phone, image alignment,
 * the existing circle crop, or the orange-heart decorator.
 * Scoped to photo-bearing columns in this reusable row, not a page ID.
 */
@media (min-width: 691px) and (max-width: 999px) {
  .rtk-decorator-curly-heart > .row_col_wrap_12 >
    .wpb_column.centered-text:has(.rtk-photo-circle) {
    width: 50% !important;
  }
}