/* ============================================================
   STACKED CARD DECK  —  deck-cards.css
   ------------------------------------------------------------
   Shared component. Currently used by:
     /features/elevating-enterprise-support   ("Enterprise-grade capabilities")
     /features/free-internal-ticketing-system ("Common Questions")
   Requires public/js/fa-deck.js (targets [data-fa-deck]).

   Self-contained: it takes its palette and type from whichever page design
   system is present (.fa-* on feature-article pages, .tm-* on ticket-redesign
   pages) and falls back to the brand values, so it can be dropped onto any
   page without dragging a page stylesheet along.

   Prefix .fa-deck-  — NOTE: ".fa-stack" could NOT be used, it is a real
   FontAwesome 5.13 layout utility (display:inline-block; height:2em;
   width:2.5em) and would have broken the container. ".fa-deck" is verified
   free of any FA 5.13 collision.
============================================================ */

.fa-deck {
  /* page tokens first, then the other design system, then the brand literal */
  --deck-blue:       var(--fa-blue,         var(--tm-blue,         var(--et-blue,         var(--sla-blue,         var(--hp-blue,         #0302B0)))));
  --deck-teal:       var(--fa-teal,         var(--tm-teal,         var(--et-teal,         var(--sla-teal,         var(--hp-cyan,         #01A9E0)))));
  --deck-strong:     var(--fa-strong,       var(--tm-strong,       var(--et-strong,       var(--sla-strong,       var(--hp-navy,         #0D1B3E)))));
  --deck-text-mid:   var(--fa-text-mid,     var(--tm-text-mid,     var(--et-text-mid,     var(--sla-text-mid,     var(--hp-text-body,    #4B5568)))));
  --deck-text-light: var(--fa-text-light,   var(--tm-text-light,   var(--et-text-light,   var(--sla-text-light,   var(--hp-text-muted,   #6B7280)))));
  --deck-ease:       var(--fa-ease,         var(--tm-ease,         var(--et-ease,         var(--sla-ease,         var(--hp-ease,         cubic-bezier(.16,1,.3,1))))));
  --deck-ff-head:    var(--fa-ff-head,      var(--tm-ff-head,      var(--et-ff-head,      var(--sla-ff-head,      var(--hp-ff-head,      'Mulish','Segoe UI',system-ui,sans-serif)))));
  --deck-ff-body:    var(--fa-ff-body,      var(--tm-ff-body,      var(--et-ff-body,      var(--sla-ff-body,      var(--hp-ff-body,      'Instrument Sans','Mulish','Segoe UI',sans-serif)))));
  --deck-grad:       var(--fa-grad-primary, var(--tm-grad-primary, var(--et-grad-primary, var(--sla-grad-primary, linear-gradient(95deg,#0302B0 1.34%,#01A9E0 97.22%)))));
}
/* portable: do not rely on the host page having a box-sizing reset */
.fa-deck, .fa-deck *, .fa-deck *::before, .fa-deck *::after { box-sizing: border-box; }

/* ── number-led variants: no icon tile, the number carries the aside.
      --qa        Q&A / FAQ decks
      --numbered  step or lifecycle decks (same treatment, honest name)
      --nomark    no ghost icon, so the copy gets the full card width      ── */
.fa-deck--qa .fa-deck__ico,
.fa-deck--numbered .fa-deck__ico { display: none; }
.fa-deck--qa .fa-deck__num,
.fa-deck--numbered .fa-deck__num { font-size: 60px; }
@media (max-width: 992px) {
  .fa-deck--qa .fa-deck__num,
  .fa-deck--numbered .fa-deck__num { font-size: 46px; }
}
@media (max-width: 720px) {
  .fa-deck--qa .fa-deck__num,
  .fa-deck--numbered .fa-deck__num { font-size: 34px; }
}
.fa-deck--nomark .fa-deck__main { max-width: none; }

/* Bootstrap 4 is loaded site-wide and sets a global
   a:hover { text-decoration: underline } (specificity 0,1,1). That outranks a
   plain .class { text-decoration: none } (0,1,0), so any link inside a card -
   or a card that IS a link - picks up an underline on hover. Match the
   specificity to keep deck cards clean. (feature-article-redesign.css already
   does the same thing for .fa-btn:hover.) */
.fa-deck a,
.fa-deck a:hover,
.fa-deck a:focus { text-decoration: none; }

/* ── deck host section ─────────────────────────────────────
   The stage is position:sticky, and ANY ancestor whose overflow is not
   `visible` silently becomes its scroll container - sticky then never pins,
   the whole (tall) deck block just scrolls past, and the section reads as a
   short stack followed by a huge empty gap. A section that hosts a deck must
   therefore not clip with overflow.

   Some sections do need clipping for decoration (email-redesign.css gives
   .et-benefits two blur blobs that deliberately bleed past its edges, so
   simply removing the clip gives the page a horizontal scrollbar).
   `overflow: clip` is the answer: it clips exactly like hidden AND suppresses
   the overflow contribution, but it does NOT create a scroll container, so a
   sticky descendant still pins. clip-path is NOT a substitute - it clips the
   paint only, and the bleeding element still widens the page.

   Two selectors so this wins on specificity (0,1,1) whatever order the page
   stylesheet and this file happen to load in, without resorting to !important.
   Browsers without overflow:clip (Safari < 16) simply keep the section's own
   overflow:hidden - the deck stops pinning there, but nothing else breaks.

   Add .fa-deck-host to any section that wraps a deck.                      */
.fa-deck-host,
section.fa-deck-host { overflow: clip; }
/* --label: the aside carries a short text label ("Week 1") rather than an
   index, so it needs a readable size, not a display-sized numeral. */
.fa-deck--label .fa-deck__ico { display: none; }
.fa-deck--label .fa-deck__num { font-size: 30px; }
@media (max-width: 992px) { .fa-deck--label .fa-deck__num { font-size: 26px; } }
@media (max-width: 720px) { .fa-deck--label .fa-deck__num { font-size: 22px; } }
.fa-deck {
  --fa-deck-top:    116px;   /* clears the 80px sticky #rat-header */
  --fa-deck-step:    16px;   /* how far each queued card peeks out below */
  --fa-deck-show:       3;   /* how many edges stay visible in the pile */
  --fa-deck-travel:  330px;  /* scroll distance per card */
  --fa-deck-tail:     60px;  /* hold on the final card */
  --fa-deck-h:      380px;   /* card height; fa-deck.js measures and overrides */
  --fa-deck-r:       26px;
  --fa-deck-glow:    18px;   /* hover halo blur radius */
  --fa-deck-pad:     40px;   /* card padding, block */
  --fa-deck-padx:    48px;   /* card padding, inline */
  --fa-n:               9;   /* card count; PHP overrides inline */
  position: relative;
}
/* defensive, mirrors the .fa-check / .fa-table / .fa-link QA fixes above:
   never let a FontAwesome glyph get injected onto these class names */
.fa-deck::before, .fa-deck::after { content: none !important; }

/* ── base: plain vertical list (no JS / no sticky) ─────── */
.fa-deck__stage { position: relative; }
.fa-deck__item  { position: relative; margin-bottom: 22px; }
.fa-deck__item:last-child { margin-bottom: 0; }
/* card 1 highest, card 9 lowest — each card covers the one after it */
.fa-deck__item  { z-index: calc(var(--fa-n) - var(--fa-i)); }

/* ── live: pinned stage with the cards layered inside ──── */
.fa-deck.is-live {
  height: calc(var(--fa-deck-h) + var(--fa-deck-show) * var(--fa-deck-step)
               + (var(--fa-n) - 1) * var(--fa-deck-travel) + var(--fa-deck-tail));
}
.fa-deck.is-live .fa-deck__stage {
  position: sticky;
  top: var(--fa-deck-top);
  height: calc(var(--fa-deck-h) + var(--fa-deck-show) * var(--fa-deck-step));
}
/* Desktop only: sit the deck in the middle of the viewport rather than up
   under the header, so it is not read against a tall band of dead space.
   max() keeps it clear of the header on short windows. Deliberately NOT
   applied below 993px — mobile browsers change 100vh as the URL bar hides,
   which would shift the pin offset mid-scroll. */
@media (min-width: 993px) {
  .fa-deck.is-live .fa-deck__stage {
    top: max(var(--fa-deck-top), calc((100vh - var(--fa-deck-h)
             - var(--fa-deck-show) * var(--fa-deck-step)) / 2));
  }
}
.fa-deck.is-live .fa-deck__item {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--fa-deck-h);
  margin: 0;
  /* bottom-anchored: a queued card's bottom edge is the bit that peeks out, so
     scaling it back must leave that edge exactly where it was put — with the
     default centre origin the peek shrinks as the card recedes */
  transform-origin: center bottom;
  will-change: transform, opacity;
}
.fa-deck.is-live .fa-deck__card { height: 100%; }
/* only the card on show answers the pointer; the pile below is inert */
.fa-deck.is-live .fa-deck__item.is-covered { pointer-events: none; }

/* fa-deck.js switches this on for a single synchronous measurement pass, to
   read each card's NATURAL height. Sticky pinning and the transforms both
   distort what the DOM reports; measuring in the live state returns the pinned
   /transformed box and corrupts the maths. Added and removed within one task,
   so it is never painted. */
.fa-deck.is-measuring { height: auto; }
.fa-deck.is-measuring .fa-deck__stage { position: static; height: auto; }
.fa-deck.is-measuring .fa-deck__item {
  position: relative; height: auto; margin-bottom: 22px;
  transform: none !important; opacity: 1 !important;
}

/* ── hover halo ───────────────────────────────────────────
   A blurred brand gradient (blue left -> teal right) sitting behind the card,
   even on all four sides. It lives on the ITEM rather than the card because
   .fa-deck__card is overflow:hidden (it clips the aura + ghost icon) and would
   crop its own halo; the item box is exactly the card box. The hovered card
   does NOT jump in front of its neighbours — the deck stays rigid. */
.fa-deck__item::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: calc(var(--fa-deck-r) + 2px);
  background: linear-gradient(90deg, var(--deck-blue) 0%, var(--deck-teal) 100%);
  filter: blur(var(--fa-deck-glow));
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--deck-ease);
}
.fa-deck__item:hover:not(.is-covered)::before { opacity: .62; }

/* ── the card ─────────────────────────────────────────── */
.fa-deck__card {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* fills the viewport so the deck reads as a full-screen section rather than
     a small card in a tall empty band; JS takes the natural height from here,
     so a long card can still grow past it */
  min-height: clamp(340px, 46vh, 440px);
  padding: var(--fa-deck-pad) var(--fa-deck-padx);
  border: 1px solid rgba(229, 231, 235, .95);
  border-radius: var(--fa-deck-r);
  background:
    radial-gradient(620px 320px at 92% -14%, rgba(1, 169, 224, .11) 0%, rgba(1, 169, 224, 0) 66%),
    radial-gradient(520px 300px at -6% 112%, rgba(3, 2, 176, .07) 0%, rgba(3, 2, 176, 0) 70%),
    linear-gradient(180deg, #FFFFFF 0%, #FBFCFF 100%);
  /* no resting shadow — the only shadow is the gradient halo on hover */
  /* bottom-anchored: a queued card's bottom edge is the bit that peeks out,
     so shrinking it must leave that edge exactly where it was put */
  transform-origin: center bottom;
  backface-visibility: hidden;
}
/* hairline of brand light along the bottom edge — the edge that shows in the
   pile, so it delineates every queued card */
.fa-deck__card::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(1, 169, 224, 0) 0%,
    rgba(1, 169, 224, .8) 20%,
    rgba(3, 2, 176, .8) 62%,
    rgba(3, 2, 176, 0) 100%);
}

/* soft brand glow bloom — kept off the bottom edge, which is what shows in
   the pile and should stay clean */
.fa-deck__aura {
  position: absolute;
  top: -230px; right: -150px;
  width: 440px; height: 440px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(1, 169, 224, .13) 0%, rgba(1, 169, 224, 0) 70%);
  filter: blur(6px);
}

/* oversized ghost of the card's own icon — fills the right third of the card
   and gives each card its own silhouette instead of dead white space */
.fa-deck__mark {
  position: absolute;
  top: var(--fa-deck-pad);
  bottom: var(--fa-deck-pad);
  right: 62px;
  display: flex;
  align-items: center;
  font-size: 150px; line-height: 1;
  color: rgba(3, 2, 176, .055);
  pointer-events: none;
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
}

/* dimming veil — opacity is driven by fa-deck.js by depth in the pile */
.fa-deck__veil {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, rgba(13, 27, 62, .5) 0%, rgba(13, 27, 62, .26) 100%);
}

/* ── card interior ────────────────────────────────────── */
.fa-deck__grid {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 44px;
  align-items: center;
}
/* leaves the right band of the card clear for .fa-deck__mark */
.fa-deck__main  { max-width: 620px; }
.fa-deck__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }

.fa-deck__ico {
  width: 64px; height: 64px;
  border-radius: 19px;
  background: var(--deck-grad);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 26px rgba(3, 2, 176, .28), inset 0 1px 0 rgba(255, 255, 255, .34);
}
.fa-deck__ico i { color: #fff; font-size: 26px; line-height: 1; }

.fa-deck__index { display: flex; align-items: baseline; gap: 6px; }
.fa-deck__num {
  font-family: var(--deck-ff-head);
  font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -.03em;
  background: var(--deck-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--deck-blue);                 /* fallback where background-clip:text is unsupported */
}
.fa-deck__of {
  font-family: var(--deck-ff-head);
  font-size: 16px; font-weight: 700; color: var(--deck-text-light); letter-spacing: .2px;
}

.fa-deck__title {
  font-family: var(--deck-ff-head);
  font-size: 27px; font-weight: 700; line-height: 1.22; letter-spacing: -.015em;
  color: var(--deck-strong);
  margin: 0 0 14px;
}
.fa-deck__body {
  font-family: var(--deck-ff-body);
  font-size: 17.5px; line-height: 1.66; color: var(--deck-text-mid);
  margin: 0;
}
.fa-deck__body em { font-style: normal; font-weight: 600; color: var(--deck-blue); }

/* ── responsive ───────────────────────────────────────── */
@media (max-width: 1180px) {
  .fa-deck {
    --fa-deck-pad: 36px;
    --fa-deck-padx: 40px;
    --fa-deck-travel: 310px;
  }
  /* not enough width left for the ghost icon — drop it and let the text breathe */
  .fa-deck__mark  { display: none; }
  .fa-deck__main  { max-width: none; }
  .fa-deck__card  { min-height: clamp(330px, 44vh, 420px); }
  .fa-deck__grid  { grid-template-columns: 172px minmax(0, 1fr); gap: 34px; }
  .fa-deck__num   { font-size: 42px; }
}

@media (max-width: 992px) {
  .fa-deck {
    --fa-deck-top:     96px;   /* clears the 64px tablet header */
    --fa-deck-step:    14px;
    --fa-deck-travel: 290px;
    --fa-deck-tail:    50px;
    --fa-deck-pad:     32px;
    --fa-deck-padx:    34px;
    --fa-deck-r:       22px;
    --fa-deck-glow:    15px;
  }
  .fa-deck__card  { min-height: 330px; }   /* fixed px below 993: mobile 100vh shifts as the URL bar hides */
  .fa-deck__grid  { grid-template-columns: 150px minmax(0, 1fr); gap: 28px; }
  .fa-deck__title { font-size: 23px; }
  .fa-deck__body  { font-size: 16.5px; }
  .fa-deck__ico   { width: 56px; height: 56px; border-radius: 17px; }
  .fa-deck__ico i { font-size: 23px; }
  .fa-deck__num   { font-size: 38px; }
  .fa-deck__aura  { width: 360px; height: 360px; top: -190px; right: -120px; }
}

@media (max-width: 720px) {
  .fa-deck {
    --fa-deck-top:     84px;   /* clears the 58px phone header */
    --fa-deck-step:    12px;
    --fa-deck-show:       2;
    --fa-deck-travel: 250px;
    --fa-deck-tail:    40px;
    --fa-deck-pad:     28px;
    --fa-deck-padx:    24px;
    --fa-deck-r:       20px;
    --fa-deck-glow:    12px;
  }
  .fa-deck__card  { min-height: 300px; }
  .fa-deck__grid  { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .fa-deck__aside { flex-direction: row; align-items: center; gap: 16px; }
  .fa-deck__ico   { width: 48px; height: 48px; border-radius: 14px; }
  .fa-deck__ico i { font-size: 20px; }
  .fa-deck__num   { font-size: 30px; }
  .fa-deck__of    { font-size: 14px; }
  .fa-deck__title { font-size: 20px; margin-bottom: 10px; }
  .fa-deck__body  { font-size: 15.8px; line-height: 1.6; }
  .fa-deck__aura  { width: 280px; height: 280px; top: -160px; right: -100px; }
}

/* Reduced motion: the deck is scroll-position LAYOUT, not an autoplaying
   animation, so it stays on — disabling it turned the section into a plain
   one-by-one list for anyone with "Show animations in Windows" switched off.
   fa-deck.js drops the damped glide and lands directly on each position. */
@media (prefers-reduced-motion: reduce) {
  .fa-deck.is-live .fa-deck__item { will-change: auto; }
}