/* ============================================================================
   CGS - Urgency Banner v1
   A single full-width bar: message on the left, countdown in the middle,
   button on the right. Collapses to a stack on narrow screens AND in narrow
   containers (container queries), because the bar's width is set by whatever
   section/row it is dropped into, not by the viewport.
   Typography reads the POWER theme :root tokens with hard fallbacks, same as
   the careers + quiz modules, so it tracks Theme Settings automatically.
   Theme breakpoints: 1199 / 991 / 767 / 575.
   ============================================================================ */

.cgsi-ub{
  /* colour - overwritten per instance by the module's inline <style> */
  --ub-bar:var(--clr-primary,#763CDB);
  --ub-bar-urgent:#EA27C2;
  --ub-text:#FFFFFF;
  --ub-muted:rgba(255,255,255,.82);
  --ub-rule:rgba(255,255,255,.30);
  --ub-radius:4px;
  --ub-pad-y:22px;
  --ub-pad-x:28px;
  --ub-digit:30px;
  --ub-gap:clamp(16px,2.2vw,32px);

  /* typography - the theme's own tokens, theme defaults as fallback. Headline
     size comes from the theme's pwr-heading-style--hN classes, set in the editor. */
  --ub-ff:var(--ff-base,"Poppins",Arial,sans-serif);
  --ub-fs-sub:var(--fs-h6,16px);

  font-family:var(--ub-ff);
  display:block;
  width:100%;
}

/* the bar itself ---------------------------------------------------------- */
.cgsi-ub__bar{
  position:relative;
  display:flex;
  align-items:center;
  gap:var(--ub-gap);
  width:100%;
  box-sizing:border-box;
  padding:var(--ub-pad-y) var(--ub-pad-x);
  background:var(--ub-bar);
  color:var(--ub-text);
  border-radius:var(--ub-radius);
  transition:background-color .25s ease;
}
.cgsi-ub--shadow .cgsi-ub__bar{box-shadow:0 10px 30px rgba(3,11,27,.22)}
.cgsi-ub[data-state="urgent"] .cgsi-ub__bar{background:var(--ub-bar-urgent)}

/* message ----------------------------------------------------------------- */
.cgsi-ub__msg{flex:1 1 auto;min-width:0}
/* size, weight, line-height and letter-spacing all arrive from the theme's
   pwr-heading-style--hN class; only the bar-specific bits are set here, at a
   specificity that beats the theme's own h1-h6 margins either load order */
.cgsi-ub .cgsi-ub__headline{
  margin:0;
  color:var(--ub-text);
  overflow-wrap:anywhere;
}
.cgsi-ub .cgsi-ub__subline{
  margin:6px 0 0;
  font-family:var(--ff-paragraph,var(--ub-ff));
  font-weight:var(--fw-paragraph,300);
  font-size:var(--ub-fs-sub);
  line-height:var(--lh-paragraph,1.45em);
  color:var(--ub-muted);
  overflow-wrap:anywhere;
}
.cgsi-ub--sub-default{--ub-fs-sub:var(--fs-paragraph,18px)}
.cgsi-ub--sub-small{--ub-fs-sub:var(--fs-h6,16px)}
.cgsi-ub--sub-xsmall{--ub-fs-sub:14px}

/* countdown --------------------------------------------------------------- */
.cgsi-ub__clock{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:12px;
  padding-left:var(--ub-gap);
}
.cgsi-ub--rules .cgsi-ub__clock{border-left:1px solid var(--ub-rule)}
.cgsi-ub__icon{flex:0 0 auto;width:26px;height:26px;color:var(--ub-text);opacity:.95}
.cgsi-ub__clock-body{display:flex;flex-direction:column;align-items:center;gap:4px}

.cgsi-ub__digits{display:flex;align-items:flex-start;gap:6px}
.cgsi-ub__unit{display:flex;flex-direction:column;align-items:center;min-width:2.2ch}
.cgsi-ub__num{
  font-size:var(--ub-digit);
  line-height:1;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  letter-spacing:.5px;
  color:var(--ub-text);
}
.cgsi-ub__lbl{
  margin-top:3px;
  font-size:10px;
  line-height:1;
  font-weight:600;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--ub-muted);
}
.cgsi-ub__sep{
  font-size:calc(var(--ub-digit) * .62);
  line-height:1;
  font-weight:800;
  color:var(--ub-muted);
  transform:translateY(.15em);
}
.cgsi-ub__closes{
  display:block;
  font-size:12px;
  line-height:1.35;
  font-weight:500;
  color:var(--ub-muted);
  text-align:center;
  white-space:nowrap;
}

/* call to action ---------------------------------------------------------- */
.cgsi-ub__cta{flex:0 0 auto;padding-left:var(--ub-gap)}
.cgsi-ub--rules .cgsi-ub__cta{border-left:1px solid var(--ub-rule)}
/* the button itself is the theme's pwr-cta component - it keeps the theme's
   colours, type, padding and hover. Only its position in this bar is set here.
   The theme forces content-box on a.pwr-cta_button, so a stacked full-width
   button is made with display:block rather than width:100%. */
.cgsi-ub__cta .pwr-cta{margin:0}
.cgsi-ub__btn:focus-visible{outline:3px solid var(--ub-text);outline-offset:3px}

/* state swapping ---------------------------------------------------------- */
.cgsi-ub__state{display:none}
.cgsi-ub[data-state="open"] .cgsi-ub__state--open,
.cgsi-ub[data-state="urgent"] .cgsi-ub__state--urgent,
.cgsi-ub[data-state="expired"] .cgsi-ub__state--expired{display:block}
/* with no urgent copy written, the open copy keeps showing in the urgent state */
.cgsi-ub[data-state="urgent"] .cgsi-ub__state--open.cgsi-ub__state--fallback,
.cgsi-ub[data-state="urgent"] .cgsi-ub__state--urgent-too{display:block}
.cgsi-ub[data-state="expired"] .cgsi-ub__clock{display:none}
.cgsi-ub[data-state="expired"].cgsi-ub--hide-on-expiry{display:none}
.cgsi-ub[data-state="expired"] .cgsi-ub__cta[data-hide-expired="1"]{display:none}

.cgsi-ub__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------------------------------------------------------------------------
   Narrow CONTAINER - the bar sits in a narrow column on a wide screen. These
   run first where supported; the viewport rules below are the fallback and
   stay in force for older browsers.
   --------------------------------------------------------------------------- */
@supports (container-type:inline-size){
  .cgsi-ub{container-type:inline-size;container-name:cgsiub}

  @container cgsiub (max-width:1080px){
    .cgsi-ub__bar{--ub-gap:20px;--ub-pad-x:22px}
    .cgsi-ub{--ub-digit:26px}
  }
  @container cgsiub (max-width:860px){
    .cgsi-ub__bar{flex-direction:column;align-items:stretch;gap:16px}
    .cgsi-ub__clock,.cgsi-ub__cta{padding-left:0;padding-top:16px;border-left:0 !important}
    .cgsi-ub--rules .cgsi-ub__clock,.cgsi-ub--rules .cgsi-ub__cta{border-top:1px solid var(--ub-rule)}
    .cgsi-ub__clock{justify-content:flex-start}
    .cgsi-ub__clock-body{align-items:flex-start}
    .cgsi-ub__closes{text-align:left;white-space:normal}
    .cgsi-ub__cta .pwr-cta{display:block}
    .cgsi-ub__btn{display:block;text-align:center}
    .cgsi-ub--mob-center .cgsi-ub__bar{align-items:center;text-align:center}
    .cgsi-ub--mob-center .cgsi-ub__clock{justify-content:center}
    .cgsi-ub--mob-center .cgsi-ub__clock-body{align-items:center}
    .cgsi-ub--mob-center .cgsi-ub__closes{text-align:center}
  }
  @container cgsiub (max-width:420px){
    .cgsi-ub{--ub-digit:24px;--ub-pad-x:18px;--ub-pad-y:18px}
    .cgsi-ub__icon{width:22px;height:22px}
  }
}

/* ---------------------------------------------------------------------------
   Narrow VIEWPORT - fallback, and the editor-chosen stack breakpoint. Only one
   stack class is ever on an instance.
   --------------------------------------------------------------------------- */
@media (max-width:1199px){
  .cgsi-ub{--ub-digit:27px}
  .cgsi-ub__bar{--ub-gap:20px;--ub-pad-x:24px}
  .cgsi-ub--stack-1199 .cgsi-ub__bar{flex-direction:column;align-items:stretch;gap:16px}
  .cgsi-ub--stack-1199 .cgsi-ub__clock,.cgsi-ub--stack-1199 .cgsi-ub__cta{padding-left:0;padding-top:16px;border-left:0 !important}
  .cgsi-ub--stack-1199.cgsi-ub--rules .cgsi-ub__clock,.cgsi-ub--stack-1199.cgsi-ub--rules .cgsi-ub__cta{border-top:1px solid var(--ub-rule)}
  .cgsi-ub--stack-1199 .cgsi-ub__clock-body{align-items:flex-start}
  .cgsi-ub--stack-1199 .cgsi-ub__closes{text-align:left;white-space:normal}
  .cgsi-ub--stack-1199 .cgsi-ub__cta .pwr-cta{display:block}
    .cgsi-ub__btn{display:block;text-align:center}
}
@media (max-width:991px){
  .cgsi-ub--stack-991 .cgsi-ub__bar{flex-direction:column;align-items:stretch;gap:16px}
  .cgsi-ub--stack-991 .cgsi-ub__clock,.cgsi-ub--stack-991 .cgsi-ub__cta{padding-left:0;padding-top:16px;border-left:0 !important}
  .cgsi-ub--stack-991.cgsi-ub--rules .cgsi-ub__clock,.cgsi-ub--stack-991.cgsi-ub--rules .cgsi-ub__cta{border-top:1px solid var(--ub-rule)}
  .cgsi-ub--stack-991 .cgsi-ub__clock-body{align-items:flex-start}
  .cgsi-ub--stack-991 .cgsi-ub__closes{text-align:left;white-space:normal}
  .cgsi-ub--stack-991 .cgsi-ub__cta .pwr-cta{display:block}
    .cgsi-ub__btn{display:block;text-align:center}
}
@media (max-width:767px){
  .cgsi-ub--stack-767 .cgsi-ub__bar{flex-direction:column;align-items:stretch;gap:16px}
  .cgsi-ub--stack-767 .cgsi-ub__clock,.cgsi-ub--stack-767 .cgsi-ub__cta{padding-left:0;padding-top:16px;border-left:0 !important}
  .cgsi-ub--stack-767.cgsi-ub--rules .cgsi-ub__clock,.cgsi-ub--stack-767.cgsi-ub--rules .cgsi-ub__cta{border-top:1px solid var(--ub-rule)}
  .cgsi-ub--stack-767 .cgsi-ub__clock-body{align-items:flex-start}
  .cgsi-ub--stack-767 .cgsi-ub__closes{text-align:left;white-space:normal}
  .cgsi-ub--stack-767 .cgsi-ub__cta .pwr-cta{display:block}
    .cgsi-ub__btn{display:block;text-align:center}
}
@media (max-width:575px){
  .cgsi-ub{--ub-digit:24px;--ub-pad-x:18px;--ub-pad-y:18px}
  .cgsi-ub__icon{width:22px;height:22px}
  .cgsi-ub--stack-575 .cgsi-ub__bar{flex-direction:column;align-items:stretch;gap:16px}
  .cgsi-ub--stack-575 .cgsi-ub__clock,.cgsi-ub--stack-575 .cgsi-ub__cta{padding-left:0;padding-top:16px;border-left:0 !important}
  .cgsi-ub--stack-575.cgsi-ub--rules .cgsi-ub__clock,.cgsi-ub--stack-575.cgsi-ub--rules .cgsi-ub__cta{border-top:1px solid var(--ub-rule)}
  .cgsi-ub--stack-575 .cgsi-ub__clock-body{align-items:flex-start}
  .cgsi-ub--stack-575 .cgsi-ub__closes{text-align:left;white-space:normal}
  .cgsi-ub--stack-575 .cgsi-ub__cta .pwr-cta{display:block}
    .cgsi-ub__btn{display:block;text-align:center}
  .cgsi-ub--mob-center .cgsi-ub__bar{align-items:center;text-align:center}
  .cgsi-ub--mob-center .cgsi-ub__clock{justify-content:center}
  .cgsi-ub--mob-center .cgsi-ub__clock-body{align-items:center}
  .cgsi-ub--mob-center .cgsi-ub__closes{text-align:center}
}

@media (prefers-reduced-motion:reduce){
  .cgsi-ub__bar,.cgsi-ub__btn{transition:none}
}