/* ==========================================================================
   DigiMEDSPA - News & Events newsroom (news-v2)
   --------------------------------------------------------------------------
   The two post types "news-and-events" and "events" as one newsroom in the
   new dark design of layouts/new_index.html.erb: the hub (/news-and-events),
   the events view (/events), their category pages and single posts.
   Markup: views/partials/news_v2/.

   Like careers-v2, these pages are built on the blog design system: they also
   load assets/css/blog-v2.css (tokens, hero, buttons, CTA row, prose, widgets,
   end panel, share row) and use its .blg root. This file only adds what the
   newsroom needs on top: the filter row, the text cards with their date and
   icon tiles, the upcoming-event feature, the event details card, the
   "latest" list and the old editor markup found inside event posts.

   Every selector carries an "nwx" class. Like blog-v2.css this prints before
   the layout's inline CSS, so rules that must beat an equal-specificity layout
   rule are prefixed with ".nwx ". Kind colours come from the layout's own
   palette (cyan, and the --i-ok / --i-warn values of new_index).
   Production compresses with Ruby Sass 3.7: no min(), max(), math inside
   clamp(), slash shorthands or space-separated rgb().
   ========================================================================== */


.nwx{
  --n-news:#5FE8DC;
  --n-press:#7CE4BD;
  --n-event:#F5C97B;
}
.nwx .nwx-i{display:inline-block;width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}

/* per-kind accent, read by the tiles, labels and chips below */
.nwx-card--news,.nwx-badge--news,.nwx-chip--news{--acc:var(--n-news);--acc-soft:rgba(95,232,220,.08);--acc-line:rgba(95,232,220,.28)}
.nwx-card--press,.nwx-badge--press,.nwx-chip--press{--acc:var(--n-press);--acc-soft:rgba(124,228,189,.08);--acc-line:rgba(124,228,189,.3)}
.nwx-card--event,.nwx-badge--event,.nwx-chip--event,.nwx-none,.nwx-feature{--acc:var(--n-event);--acc-soft:rgba(245,201,123,.08);--acc-line:rgba(245,201,123,.32)}

/* ==========================================================================
   FILTER ROW - buttons on the hub, links on /events
   ========================================================================== */
.nwx-body{padding-top:clamp(28px,2.8vw,48px)}
.nwx-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin:0 0 clamp(30px,3vw,46px)}
.nwx .nwx-filters{display:flex;flex-wrap:wrap;gap:4px;padding:5px;border-radius:999px;border:1px solid var(--b-line);background:rgba(255,255,255,.03);box-shadow:var(--b-lift)}
.nwx ul.nwx-filters > li{display:flex}
.nwx .nwx-filter{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;margin:0;padding:0 18px;border-radius:999px;border:0;background:none;font-family:var(--b-display);font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1;color:var(--b-mut);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .28s var(--b-ease),color .28s var(--b-ease)}
.nwx .nwx-filter b{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 7px;border-radius:999px;background:rgba(255,255,255,.07);font-size:11.5px;font-weight:700;letter-spacing:0;color:var(--b-slate);transition:background .28s var(--b-ease),color .28s var(--b-ease)}
.nwx .nwx-filter:hover{background:rgba(255,255,255,.055);color:var(--b-white)}
.nwx .nwx-filter[aria-pressed="true"],.nwx .nwx-filter[aria-current]{background:linear-gradient(135deg,#00978B,#00D2C4);color:#04222A;box-shadow:0 8px 22px -8px rgba(0,210,196,.5)}
.nwx .nwx-filter[aria-pressed="true"] b,.nwx .nwx-filter[aria-current] b{background:rgba(4,34,42,.16);color:#04222A}
/* the layout's global :focus-visible sets border-radius:8px and prints after this file */
.nwx .nwx-filter:focus-visible{outline:2px solid var(--b-cyan);outline-offset:2px;border-radius:999px}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.nwx-section{margin:0 0 clamp(40px,4vw,64px)}
.nwx-section[hidden],.nwx-noup[hidden],.nwx-nomatch[hidden]{display:none}
.nwx-section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 20px;margin:0 0 22px}
.nwx .nwx-section-head h2{font-size:clamp(22px,2vw,30px);letter-spacing:-.04em;margin:0}
.nwx .nwx-section-head .alink{margin:0 0 4px}

.nwx-noup{display:flex;align-items:center;gap:12px;margin:0 0 26px;padding:14px 18px;border-radius:16px;border:1px dashed rgba(245,201,123,.32);background:rgba(245,201,123,.045);font-size:14.6px;color:var(--b-mut)}
.nwx .nwx-noup .blg-i{width:18px;height:18px;color:var(--n-event)}
.nwx-nomatch{margin:0 0 clamp(40px,4vw,64px)}

/* ==========================================================================
   CARDS - text only (these posts carry no thumbnails)
   ========================================================================== */
.nwx ul.nwx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.5vw,22px)}
.nwx-grid > li{display:flex;min-width:0}
.nwx-grid > li[hidden]{display:none}

.nwx-card{position:relative;display:flex;flex-direction:column;width:100%;padding:clamp(22px,2vw,28px);border-radius:var(--b-r-xl);border:1px solid var(--b-line);background:var(--b-card);box-shadow:var(--b-lift);color:var(--b-mut);transition:border-color .4s var(--b-ease),transform .4s var(--b-ease),box-shadow .4s var(--b-ease)}
.nwx-card:hover{border-color:var(--acc-line);transform:translateY(-4px);box-shadow:var(--b-lift),0 30px 60px -38px #000}
.nwx-card:focus-within{outline:2px solid var(--b-cyan);outline-offset:3px}
.nwx-card:focus-within:not(:has(:focus-visible)){outline:none}

.nwx-card-top{display:flex;align-items:center;gap:14px;margin:0 0 18px}
/* calendar tile: month band over the day */
.nwx-tile{display:flex;flex-direction:column;width:54px;flex:none;border-radius:14px;overflow:hidden;border:1px solid rgba(245,201,123,.34);background:rgba(245,201,123,.06);text-align:center;font-family:var(--b-display)}
.nwx-tile b{display:block;padding:4px 0 3px;background:rgba(245,201,123,.16);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.2;color:var(--n-event)}
.nwx-tile strong{display:block;padding:6px 0 8px;font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--b-white)}
/* icon tile for news and press releases */
.nwx-badge{display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:14px;border:1px solid var(--acc-line);background:var(--acc-soft);color:var(--acc)}
.nwx .nwx-badge .nwx-i{width:24px;height:24px;stroke-width:1.6}

.nwx-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0}
.nwx-kind{font-family:var(--b-display);font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;line-height:1.3;color:var(--acc)}
.nwx-status{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-family:var(--b-display);font-size:11px;font-weight:650;letter-spacing:.02em;line-height:1.2}
.nwx-status--up{background:var(--n-event);color:#2A1C04}
.nwx-status--past{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:var(--b-slate)}

.nwx h2.nwx-card-title,.nwx h3.nwx-card-title{font-size:clamp(18px,1.4vw,21px);line-height:1.28;letter-spacing:-.03em;margin:0 0 10px}
.nwx-card-title a{color:var(--b-white);transition:color .3s var(--b-ease)}
.nwx-card-title a::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;border-radius:inherit}
.nwx-card:hover .nwx-card-title a{color:var(--acc)}
.nwx-card-title a:focus-visible{outline:none}
.nwx p.nwx-excerpt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 20px;font-size:14.4px;line-height:1.7;color:var(--b-slate)}

.nwx-card-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid var(--b-line-2)}
.nwx ul.nwx-facts{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:13.2px;line-height:1.45;color:var(--b-dim)}
.nwx-facts li{display:flex;align-items:flex-start;gap:8px;min-width:0}
.nwx .nwx-facts .blg-i,.nwx .nwx-facts .nwx-i{width:15px;height:15px;margin-top:1px;color:var(--b-cyl)}
.nwx-go{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;border:1px solid var(--b-edge);background:rgba(0,210,196,.08);color:var(--b-cyl);transition:background .3s var(--b-ease),color .3s var(--b-ease),transform .35s var(--b-ease)}
.nwx .nwx-go .nwx-i{width:15px;height:15px;stroke-width:2.4}
.nwx-card:hover .nwx-go{background:linear-gradient(135deg,#00978B,#00D2C4);color:#04222A;transform:translateX(3px)}

/* ==========================================================================
   UPCOMING EVENT FEATURE
   ========================================================================== */
.nwx ul.nwx-features{display:grid;gap:18px}
.nwx-feature{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr);gap:clamp(20px,2.6vw,40px);align-items:center;padding:clamp(22px,2.4vw,34px);border-radius:var(--b-r-xl);border:1px solid var(--acc-line);background:linear-gradient(168deg,rgba(245,201,123,.09),rgba(255,255,255,.012) 60%);box-shadow:var(--b-lift),0 40px 90px -56px #000}
.nwx-bigdate{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 10px;border-radius:20px;border:1px solid rgba(245,201,123,.34);background:rgba(3,16,26,.45);text-align:center;font-family:var(--b-display)}
.nwx-bigdate b{font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--n-event)}
.nwx-bigdate strong{margin:4px 0 2px;font-size:40px;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--b-white)}
.nwx-bigdate small{font-size:13px;font-weight:600;color:var(--b-slate)}
.nwx-feature-body{min-width:0}
.nwx-feature-body .nwx-kicker{margin:0 0 12px}
.nwx h3.nwx-feature-title{font-size:clamp(21px,2vw,29px);line-height:1.2;letter-spacing:-.035em;margin:0 0 12px}
.nwx-feature-title a{color:var(--b-white);transition:color .3s var(--b-ease)}
.nwx-feature-title a:hover{color:var(--n-event)}
.nwx-feature .nwx-facts{flex-direction:row;flex-wrap:wrap;gap:6px 20px;margin:0 0 12px;font-size:14px}
.nwx-feature p.nwx-excerpt{margin:0;-webkit-line-clamp:2}
.nwx-feature .blg-cta{margin-top:22px}

/* /events with nothing scheduled */
.nwx-none{display:flex;align-items:center;gap:18px 22px;padding:clamp(22px,2.4vw,34px);border-radius:var(--b-r-xl);border:1px dashed var(--acc-line);background:rgba(245,201,123,.04)}
.nwx-none p{margin:0;font-size:15px;line-height:1.65;color:var(--b-slate)}
.nwx .nwx-none p.nwx-none-title{margin:0 0 4px;font-family:var(--b-display);font-size:clamp(18px,1.5vw,21px);font-weight:650;letter-spacing:-.025em;color:var(--b-white)}

/* ==========================================================================
   SINGLE POST
   ========================================================================== */
.nwx--post .blg-post-head .blg-chips{align-items:center}
.nwx .nwx-chip .nwx-i{width:13px;height:13px;stroke-width:2}
.nwx .nwx-chip{border-color:var(--acc-line);background:var(--acc-soft);color:var(--acc)}
.nwx a.nwx-chip:hover{border-color:var(--acc);color:var(--b-white)}
.nwx ul.nwx-meta{font-size:14px;margin:0}
.nwx .nwx-meta .nwx-i{width:14px;height:14px;color:var(--b-cyl);opacity:.85}
.nwx--post .blg-post-head .blg-cta{margin-top:28px}

.nwx .nwx-note{display:flex;align-items:center;gap:10px;margin:0 0 28px;padding:13px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035);font-size:14.6px;line-height:1.5;color:var(--b-mut)}
.nwx .nwx-note .blg-i{width:18px;height:18px;color:var(--n-event)}

/* event details card in the aside - the icon sits inside the <dt>, on the
   same 22px column the <dd> is indented by */
.nwx-details dl{display:grid;gap:14px;margin:0}
.nwx-details dl div{display:grid;grid-template-columns:22px minmax(0,1fr);gap:4px 10px}
.nwx-details dt{grid-column:span 2;display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:10px;align-items:center;font-family:var(--b-display);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--b-dim)}
.nwx-details dd{grid-column:2;margin:0;font-size:14.4px;line-height:1.5;color:var(--b-ink)}
.nwx .nwx-details dt .blg-i,.nwx .nwx-details dt .nwx-i{width:18px;height:18px;color:var(--b-cyl)}
.nwx .nwx-details .btn{width:100%;margin-top:22px}

/* "Latest from the newsroom" in the aside */
.nwx ul.nwx-mini{display:grid;gap:4px;margin:0 0 14px}
.nwx-mini a{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center;padding:8px;margin:0 -8px;border-radius:14px;transition:background .25s var(--b-ease)}
.nwx-mini a:hover{background:rgba(255,255,255,.04)}
.nwx-mini b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--b-display);font-size:14.2px;font-weight:650;letter-spacing:-.02em;line-height:1.35;color:var(--b-ink);transition:color .25s var(--b-ease)}
.nwx-mini a:hover b{color:var(--b-cyl)}
.nwx-mini small{display:block;margin-top:4px;font-size:12px;line-height:1.4;color:var(--b-dim)}
.nwx .nwx-tile--sm{width:44px;border-radius:11px}
.nwx .nwx-tile--sm b{padding:3px 0 2px;font-size:9px}
.nwx .nwx-tile--sm strong{padding:4px 0 6px;font-size:17px}
.nwx .nwx-badge--sm{width:44px;height:44px;border-radius:11px}
.nwx .nwx-badge--sm .nwx-i{width:20px;height:20px}

/* Event bodies were written for the old Bootstrap layout: a "Register Now"
   .themebtn inside .buttons-group, a .media phone block, .w-100 banner images.
   Restyle them in the new design (blog-v2 already hides .d-none in the prose). */
.nwx .blg-prose .buttons-group{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin:1.8em 0 0}
.nwx .blg-prose .appointment_dropdown{display:inline-flex}
.nwx .blg-prose a.themebtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;background:linear-gradient(135deg,#00978B,#00D2C4);font-family:var(--b-display);font-size:14.5px;font-weight:600;letter-spacing:-.012em;line-height:1;color:#04222A;text-decoration:none;white-space:nowrap;box-shadow:0 8px 26px -6px rgba(0,210,196,.45),inset 0 1px 0 rgba(255,255,255,.32);transition:transform .35s cubic-bezier(.34,1.4,.42,1),box-shadow .35s var(--b-ease)}
.nwx .blg-prose a.themebtn:hover{transform:translateY(-2px);color:#04222A;box-shadow:0 18px 42px -8px rgba(0,210,196,.55),inset 0 1px 0 rgba(255,255,255,.32)}
.nwx .blg-prose .media{display:flex;align-items:center;gap:12px}
.nwx .blg-prose .media-left{flex:none}
.nwx .blg-prose .media-left img{display:block;width:36px;margin:0;border-radius:0}
.nwx .blg-prose .media-body a{font-family:var(--b-display);font-size:16px;font-weight:650;color:var(--b-white);text-decoration:none}
.nwx .blg-prose .media-body p{margin:0;font-size:12.5px;line-height:1.4;color:var(--b-slate)}
.nwx .blg-prose .w-100{width:100%}
.nwx .blg-prose div.mb-3 > a > img,.nwx .blg-prose div.mb-3 > img{margin:0}
.nwx .blg-prose li > br:last-child{display:none}

/* ==========================================================================
   SEARCH (partials/news_v2/_search) - the blog sidebar search box
   (.blg-search-form, blog-v2.css); here it gets its place at the end of the
   filter row, and a "clear" link inside the field on results pages.
   ========================================================================== */
.nwx-bar .nwx-search{flex:0 1 360px;min-width:240px}
.nwx .nwx-search--filled input{padding-right:94px}
.nwx-search-clear{position:absolute;top:8px;right:50px;bottom:8px;width:36px;display:grid;place-items:center;border-radius:50%;color:var(--b-slate);transition:color .25s var(--b-ease),background .25s var(--b-ease)}
.nwx-search-clear:hover{color:var(--b-white);background:rgba(255,255,255,.07)}
.nwx .nwx-search-clear svg{width:16px;height:16px}
.nwx .nwx-search-clear:focus-visible{outline:2px solid var(--b-cyan);outline-offset:2px;border-radius:50%}
.nwx .nwx-nomatch p:not(.warning){margin:0;font-size:15px;color:var(--b-slate)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  .nwx ul.nwx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .nwx ul.nwx-grid{grid-template-columns:minmax(0,1fr)}
  .nwx-feature{grid-template-columns:minmax(0,1fr)}
  .nwx-bigdate{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:10px;padding:12px 16px}
  .nwx-bigdate strong{margin:0;font-size:28px}
}
@media (max-width:640px){
  .nwx-bar .nwx-search,.nwx-bar > nav{flex:1 1 100%;min-width:0}
  .nwx .nwx-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;border-radius:22px}
  .nwx ul.nwx-filters > li{display:block}
  .nwx .nwx-filter{width:100%;padding:0 12px}
  .nwx .nwx-filter:focus-visible{border-radius:999px}
  .nwx-none{flex-direction:column;align-items:flex-start}
}
@media (max-width:520px){
  .nwx-card{padding:20px}
  .nwx-feature .blg-cta .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .nwx-card,.nwx-go,.nwx .nwx-filter,.nwx .blg-prose a.themebtn{transition:none}
  .nwx-card:hover,.nwx-card:hover .nwx-go,.nwx .blg-prose a.themebtn:hover{transform:none}
}