/* PartnersCarousel (Shared.Ui/Marketing, 2026-10-06) - the "Our Partners" carousel in the portal and the
   CRM's previews. It fills whatever box the host gives it. The look is the portal's Bootstrap carousel as it
   was (title, caption, Learn More, dots, arrows), without Bootstrap. */
/* A size container (2026-10-09), so its controls below can scale with the box it is given (cqh = 1% of its height). */
.pc { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: .75rem; background: #19223b; font-family: inherit;
      container-type: size; }
.pc-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; background-position: center; background-color: #19223b; pointer-events: none; }
.pc-slide.on { opacity: 1; pointer-events: auto; }
/* "Fill" slides (Cover) - THE WHOLE PICTURE, NEVER CROPPED (Steven, 2026-10-09: the carousel squeezed on a smaller
   screen cut the top and bottom off a slide whose words are in its picture). The picture is shown whole, in the middle,
   and a soft blurred copy of it fills the box behind, so a box the wrong shape looks meant rather than letterboxed. Both
   are the slide's own background-image (inherited), drawn by ::before and ::after; the slide's own is hidden (size 0). */
.pc-cover { background-size: 0 0; isolation: isolate; }
.pc-cover::before, .pc-cover::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: inherit;
                                      background-position: center; background-repeat: no-repeat; }
.pc-cover::before { background-size: cover; filter: blur(1.25rem) brightness(.9); transform: scale(1.15); }
.pc-cover::after { background-size: contain; }
.pc-contain { background-size: contain; background-repeat: no-repeat; }
.pc-wash { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }

/* The slide's words, bottom left, clear of a Learn More placed beneath them. */
.pc-cap { position: absolute; left: 3rem; right: 3rem; bottom: 3.75rem; color: #fff; text-align: left; }
.pc-cap-h { font-size: 1.25rem; font-weight: 500; margin-bottom: .25rem; }
.pc-cap-p { font-size: .875rem; }
@media (max-width: 767.98px) { .pc-cap { display: none; } }

.pc-learn { position: absolute; z-index: 3; display: inline-block; padding: .25rem .6rem; border-radius: .25rem;
            background: #f8f9fa; color: #212529; font-size: .875rem; font-weight: 400; text-decoration: none; white-space: nowrap; }
a.pc-learn:hover { background: #e2e6ea; color: #212529; }

/* The title, and the pill that keeps it readable on a busy picture. */
.pc-title { position: absolute; z-index: 4; font-size: 1.5rem; font-weight: 500; line-height: 1.2; white-space: nowrap; pointer-events: none; }
.pc-pill-none { color: #fff; text-shadow: 2px 2px .375rem rgba(0, 0, 0, .7); }
.pc-pill-light { color: #08203d; background: #fff; padding: .2rem .8rem; border-radius: 62.4375rem; box-shadow: 0 2px .5rem rgba(0, 0, 0, .25); }
.pc-pill-dark { color: #fff; background: #08203d; padding: .2rem .8rem; border-radius: 62.4375rem; box-shadow: 0 2px .5rem rgba(0, 0, 0, .25); }

/* Arrows: a strip down each side, as Bootstrap's were. */
.pc-arrow { position: absolute; z-index: 5; top: 0; bottom: 0; width: 12%; min-width: 2.25rem; border: 0; background: none; padding: 0;
            color: #fff; font-size: 2.2rem; line-height: 1; opacity: .6; cursor: pointer; transition: opacity .15s; }
.pc-arrow:hover, .pc-arrow:focus-visible { opacity: 1; }
.pc-prev { left: 0; }
.pc-next { right: 0; }

.pc-dots { position: absolute; z-index: 5; display: flex; gap: .4375rem; }
.pc-dots button { width: .5625rem; height: .5625rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .45);
                  padding: 0; cursor: pointer; transition: background .2s; }
.pc-dots button.on { background: #fff; }

/* Each shown only while the mouse is over the carousel (or a key has moved into it), when the settings say
   so - arrows, dots, title and Learn More separately. A touch screen has no hover, so there they always show. */
.pc-hover-arrows .pc-arrow, .pc-hover-dots .pc-dots, .pc-hover-title .pc-title, .pc-hover-learn .pc-learn { opacity: 0; transition: opacity .2s; }
/* KEYBOARD focus shows them too (:focus-visible) - but not a mouse click, which leaves focus on the arrow or dot it
   clicked and kept them showing after the mouse had gone (Steven, 2026-10-06). */
.pc-hover-arrows:hover .pc-arrow, .pc-hover-arrows:has(:focus-visible) .pc-arrow { opacity: .6; }
.pc-hover-arrows:hover .pc-arrow:hover { opacity: 1; }
.pc-hover-dots:hover .pc-dots, .pc-hover-dots:has(:focus-visible) .pc-dots,
.pc-hover-title:hover .pc-title, .pc-hover-title:has(:focus-visible) .pc-title,
.pc-hover-learn:hover .pc-learn, .pc-hover-learn:has(:focus-visible) .pc-learn { opacity: 1; }
@media (hover: none) { .pc-hover-arrows .pc-arrow, .pc-hover-dots .pc-dots, .pc-hover-title .pc-title, .pc-hover-learn .pc-learn { opacity: 1; } }

/* THE CONTROLS SCALE WITH THE CAROUSEL (Steven, 2026-10-09: "size of buttons etc on carousel aren't affected"): each a
   share of the box's height, never bigger than it always was and never too small to read or hit. */
.pc-learn { font-size: clamp(.7rem, 6cqh, .875rem); }
.pc-title { font-size: clamp(1rem, 9cqh, 1.5rem); }
.pc-arrow { font-size: clamp(1.4rem, 13cqh, 2.2rem); }
.pc-cap-h { font-size: clamp(.95rem, 7cqh, 1.25rem); }
.pc-cap-p { font-size: clamp(.75rem, 5cqh, .875rem); }
.pc-dots button { width: clamp(.4rem, 3.2cqh, .5625rem); height: clamp(.4rem, 3.2cqh, .5625rem); }