/* ============================================================
   Jelly Roll Social Club — Treatment / Services section
   Standalone section plugin.
   ------------------------------------------------------------
   Everything is scoped under #jrt-menu (and the #jrt-* ids) so this
   can drop into ANY page without restyling the host theme, and so it
   can coexist on the same site as the homepage plugin, which uses the
   un-prefixed #menu / #cat-col / #svc-col / #detail-col ids.
   ============================================================ */

#jrt-menu{
  --cream:#F8F1E1;        /* section background          */
  --navy:#333A8F;         /* primary text / links        */
  --navy-deep:#23305C;    /* darker navy (borders)       */
  --coral:#F06278;        /* CTA button                  */
  --line:#C9BB9C;         /* detail-panel divider        */
}

/* Scoped reset. Deliberately NOT global (no bare `*` or `img` selectors):
   this plugin renders one section inside somebody else's page, so it must
   not restyle their elements. */
#jrt-menu,#jrt-menu *{box-sizing:border-box;}
#jrt-menu img{display:block;max-width:100%;}
#jrt-menu a{text-decoration:none;}

/* ------------------------------------------------------------
   STICKY-COLUMN FIX for WordPress/Elementor hosts.
   On desktop the service list + detail panel pin with position:sticky.
   Many themes (and Elementor's own theme-*.css) set overflow-x:hidden on
   html/body — notably the MOBILE-ONLY rule
   `[data-elementor-device-mode*="mobile"] body{overflow-x:hidden}` — which
   silently disables position:sticky for every descendant.
   overflow-x:clip still prevents horizontal scrolling but, unlike hidden,
   does NOT make the element a scroll container, so sticky keeps working.
   Browsers with no `clip` support drop the declaration and keep the host's
   own value, so this can only ever be a no-op there.
   ------------------------------------------------------------ */
html,body,
[data-elementor-device-mode*="mobile"] body,
html.vc_mobile,html.vc_mobile body{
  overflow-x:clip !important;
  overflow-y:visible !important;
}

@keyframes jrt-fade-up{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}

/* CTAs press "down" on hover */
#jrt-menu .jr-press{transition:transform .15s ease, box-shadow .15s ease;}
#jrt-menu .jr-press:hover{transform:translateY(3px);box-shadow:0 3px 0 var(--navy) !important;}

#jrt-menu .svc-badge img{transition:transform .25s ease;}
#jrt-menu .svc-row:hover .svc-badge img{transform:scale(1.12) rotate(-6deg);}

@media (prefers-reduced-motion: reduce){
  #jrt-menu [style*="animation"]{animation:none !important;}
}

/* ------------------------------------------------------------
   RESPONSIVE (desktop layout is untouched at 961px+)
   ------------------------------------------------------------ */
@media (max-width:960px){
  /* stack the fixed 3-column grid */
  #jrt-grid{grid-template-columns:1fr !important;}
  #jrt-grid > div{border-right:none !important;}

  /* standardized horizontal gutter */
  #jrt-svc-col{padding:clamp(16px,3vw,24px) clamp(22px,4vw,44px) 0 !important;}
  #jrt-detail-col{padding:clamp(20px,4vw,28px) clamp(22px,4vw,44px) 0 !important;}

  /* ---- categories: desktop's tall stacked cards (title + tagline +
     chevron) become a horizontally-scrolling tab bar once the grid is a
     single column — a native "segmented control" feel instead of a
     second wall of vertical text above the services list. ---- */
  #jrt-cat-col{
    display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;
    gap:10px !important;overflow-x:auto !important;overflow-y:hidden !important;
    padding:clamp(16px,3vw,20px) clamp(22px,4vw,44px) !important;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  #jrt-cat-col::-webkit-scrollbar{display:none;}
  #jrt-menu .cat-card{
    flex:0 0 auto !important;scroll-snap-align:start;
    padding:10px 18px !important;white-space:nowrap;
  }
  #jrt-menu .cat-tagline,#jrt-menu .cat-chevron{display:none !important;}
  #jrt-menu .cat-title{font-size:12.5px !important;}

  #jrt-grid{padding-top:0 !important;padding-bottom:0 !important;}

  /* ---- the sticky service list + detail panel (with its left-border
     divider) are a desktop device — both pin beside the usually-taller
     category rail. Once the grid stacks to one column there's no taller
     neighbour to stick beside, so drop it. ---- */
  #jrt-svc-col,#jrt-detail-col{position:static !important;}
  #jrt-menu .detail-inner{border-left:none !important;padding-left:0 !important;}

  /* ---- decorative clipper hand: below this breakpoint the layout collapses
     to a single column with a horizontally-scrolling tab bar at the top, so
     there is no side gutter for it anymore. Instead of hiding it, shrink it
     and let it sit in the clear band opened up by the padding-top above. ---- */
  #jrt-clipper{width:clamp(120px,32vw,168px) !important;top:16px !important;}
}

@media (max-width:600px){
  /* flat 20px gutter on phones (overrides the tablet clamp above).
     Prefixed `html body` to out-rank any theme/builder CSS that happens to
     load after this stylesheet. */
  html body #jrt-cat-col{padding-left:20px !important;padding-right:20px !important;}
  html body #jrt-svc-col{padding-left:20px !important;padding-right:20px !important;}
  html body #jrt-detail-col{padding-left:20px !important;padding-right:20px !important;}
  html body #jrt-grid{padding-bottom:0 !important;}
}