/* =========================================================================
   active-directory-group-management
   The page's only stylesheet. It imports nothing: everything the layout
   needs is declared here, and the page leans on the globally loaded sheets
   only for what they already give every page — general.css for the shared
   type helpers and buttons, ComplianceStyle.css for the carousel, and the
   droid-icons CDN sheet for the glyphs. The expanded-view pop-up is
   declared here in full.

   Sections: (1) banner, (2) gallery band, (3) the three content bands,
   (4) the closing CTA.
   ========================================================================= */

/* =========================================================================
   1. BANNER
   Two columns: copy on the left, product shot on the right, over a dark
   teal gradient with a faint wave near the bottom. .droid-banner-title and
   .droid-banner-desc from general.css set the type scale; the heading size
   is re-set below so it holds one line as the column narrows.
   ========================================================================= */
.ad-grp-mgmt-banner {
    position: relative;
    z-index: 2;
    overflow: hidden;
    color: #ffffff;
    background-image: linear-gradient(45deg, #0d2c3b, #002125);
}

.ad-grp-mgmt-banner-bg {
    position: absolute;
    top: 67%;
    left: 0;
    width: 100%;
    max-height: 200px;
    overflow: hidden;
    opacity: 0.6;
}

.ad-grp-mgmt-banner-bg-img {
    width: 100%;
}

/* .droid-section-outer-wrapper ships 40px 15px; the banner runs taller. */
.ad-grp-mgmt-banner .ad-grp-mgmt-banner-wrap {
    padding: 50px 0 70px;
}

@media (min-width: 901px) {
    .ad-grp-mgmt-banner .ad-grp-mgmt-banner-wrap {
        padding-top: 110px;
    }
}

.ad-grp-mgmt-banner-wrap > div {
    position: relative;
    z-index: 1;
    display: inline-block;
    vertical-align: middle;
    width: 43%;
    max-width: 600px;
    margin: 20px;
    text-align: left;
}

/* Fluid so the heading holds one line as the column narrows. */
.ad-grp-mgmt-banner .ad-grp-mgmt-banner-title {
    font-size: clamp(22px, 2.15vw, 30px);
    color: #ffffff;
}

.ad-grp-mgmt-banner .ad-grp-mgmt-banner-title .ad-grp-mgmt-highlight {
    color: #99b4ff;
}

.ad-grp-mgmt-banner .ad-grp-mgmt-banner-desc {
    line-height: 1.6em;
    color: #d6e2e7;
}

.ad-grp-mgmt-banner-desc-strong {
    font-family: work-sans-semibold, Arial, Helvetica, sans-serif;
}

.ad-grp-mgmt-banner-img {
    display: block;
    width: 550px;
    max-width: 100%;
    height: auto;
    margin: auto;
}

/* Below the banner's two-column breakpoint the copy is full width, so
   nothing competes with the heading for room and the one-line rule above
   stops applying. Without this the vw term keeps shrinking and the heading
   lands at 8px on a phone. */
@media only screen and (max-width: 698px) {
    .ad-grp-mgmt-banner .ad-grp-mgmt-banner-title {
        font-size: 2.3em;
    }

    .ad-grp-mgmt-banner .ad-grp-mgmt-banner-text {
        width: auto;
    }

    /* Scoped through the wrap because `.ad-grp-mgmt-banner-wrap > div` above
       carries a type selector and would otherwise outrank a bare class. */
    .ad-grp-mgmt-banner-wrap > .ad-grp-mgmt-banner-media,
    .ad-grp-mgmt-banner .ad-grp-mgmt-banner-bg-img {
        display: none;
    }
}

/* =========================================================================
   2. GALLERY CAROUSEL BAND
   ComplianceStyle.css carries the carousel mechanics. It has no rules for
   this page's board wrapper, slide caption or expanded-view pop-up, so
   those are declared here along with the band's own colours.
   ========================================================================= */
.ad-grp-mgmt-gallery-section {
    position: relative;
    overflow-x: hidden;
    background: #EFF8FF;
}

/* .droid-section-outer-wrapper ships 40px of vertical padding. The sibling
   bands run 85px, so the container takes that value and the band matches. */
.ad-grp-mgmt-gallery-section .ad-grp-mgmt-gallery-container {
    padding-top: 85px;
    padding-bottom: 85px;
}

.ad-grp-mgmt-gallery-title {
    color: #1f2c3e;
}

.ad-grp-mgmt-gallery-title .ad-grp-mgmt-highlight {
    color: #0a7ea4;
}

.ad-grp-mgmt-gallery-section .ad-grp-mgmt-gallery-header .ad-grp-mgmt-gallery-desc {
    margin: 20px auto 0;
    max-width: 800px;
    color: #5e5e5e;
}

.ad-grp-mgmt-carousel {
    margin: 30px 0;
    padding: 0 10%;
    text-align: center;
}

.ad-grp-mgmt-carousel .carousel {
    height: 440px !important;
    perspective: 300px;
}

.ad-grp-mgmt-carousel .carousel .carousel-item {
    width: 600px;
    left: 0;
    top: 0;
    opacity: 1 !important;
    cursor: pointer;
    user-select: none;
    /* Head room so the label pill clears the screenshot. */
    padding-top: 38px;
}

.ad-grp-mgmt-carousel .carousel .carousel-item > img {
    border-radius: 10px;
    box-shadow: 0 0 6px 2px #00000053;
    transition: all 0.2s ease-in-out;
}

.ad-grp-mgmt-carousel .carousel .carousel-item > img:hover {
    box-shadow: 0 0 6px 4px #4040409e;
}

/* The caption under each slide, revealed on the active one. */
.ad-grp-mgmt-slide-caption {
    position: absolute;
    left: 0;
    width: 100%;
    font-size: 1.1em;
    visibility: hidden;
    user-select: none;
    color: #1f2c3e;
}

.tooltip .ad-grp-mgmt-slide-caption {
    visibility: visible;
    animation: fadeIn 0.3s ease;
}

.ad-grp-mgmt-slide-caption p {
    margin-top: 10px;
    text-align: center;
    user-select: none;
    font-family: poppins-medium, Arial, sans-serif;
}

/* Each slide is labelled by a pill above its top-right corner.
   ComplianceStyle draws a small grey chip there; this is the rounded
   gradient eyebrow the contact-management page uses. */
.ad-grp-mgmt-gallery-section .carousel-item .expand-view-div {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    top: 0;
    right: 0;
    padding: 4px 12px;
    border-radius: 20px;
    background: linear-gradient(135deg, #4fcffe0f 0%, #008bfe2e 100%);
    border: 1px solid #4299e11a;
    box-shadow: 0 4px 15px rgb(79 172 254 / 20%);
    color: #4b586d;
    font-size: 11.5px;
    font-family: poppins-medium, Arial, Helvetica, sans-serif;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.ad-grp-mgmt-gallery-section .carousel-item .expand-view-div i {
    font-size: 13px;
    line-height: 1;
    color: #1361b5;
}

/* ---------- expanded-view pop-up -----------------------------------------
   Self-contained: none of it comes from ComplianceStyle. The overlay and the
   panel both carry backdrop-filter, so neither may animate opacity - the blur
   would be recomputed every frame over the carousel. */
#ad-grp-mgmt-main-container .ad-grp-mgmt-imgpop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 13;
    background-color: rgb(16 25 34 / 0.9);
    backdrop-filter: blur(5px);
}

/* Holds the page still without hiding its scrollbar: the overlay takes the
   wheel and `contain` stops the scroll chaining through to the page. */
#ad-grp-mgmt-main-container .ad-grp-mgmt-imgpop.is-open {
    display: block;
    overflow: auto;
    overscroll-behavior: contain;
}

/* The Docs gradient plate; its URL is declared in the view (CDN host). */
#ad-grp-mgmt-main-container .ad-grp-mgmt-imgpop::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--img-bg-docs-grad-bg-png);
    background-position: bottom;
    opacity: 0.2;
    filter: blur(10px);
    z-index: 0;
}

#ad-grp-mgmt-main-container .ad-grp-mgmt-imgpop-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#ad-grp-mgmt-main-container .ad-grp-mgmt-imgpop-panel {
    position: relative;
    z-index: 1;
    width: 57%;
    margin-top: 6%;
    padding: 20px;
    border-radius: 10px;
    background: rgb(153 157 163 / 0.25);
    border: 1px solid rgb(255 255 255 / 0.25);
    backdrop-filter: blur(8px);
}

#ad-grp-mgmt-main-container .ad-grp-mgmt-imgpop-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 46px 12px 0;
    text-align: left;
}

/* The tile fill and the title colour are written inline by the script from
   one palette entry, so they never drift apart. Give the title no colour here. */
#ad-grp-mgmt-main-container .ad-grp-mgmt-imgpop-icon {
    width: 42px;
    height: 42px;
    line-height: 42px;
    flex: 0 0 auto;
    text-align: center;
    border-radius: 10px;
    font-size: 1.35em;
    color: #0d2c3b;
}

#ad-grp-mgmt-main-container .ad-grp-mgmt-imgpop-title {
    margin: 0;
    font-size: 1.15em;
    letter-spacing: 0.2px;
    font-family: poppins-medium, Arial, Helvetica, sans-serif;
}

#ad-grp-mgmt-main-container .ad-grp-mgmt-imgpop-desc {
    margin: 4px 0 0;
    color: rgb(255 255 255 / 0.82);
    font-family: work-sans-regular, Arial, Helvetica, sans-serif;
}

#ad-grp-mgmt-main-container .ad-grp-mgmt-imgpop-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid rgb(50 50 93 / 0.25);
    box-shadow: rgb(50 50 93 / 0.25) 0 2px 5px -1px, rgb(0 0 0 / 0.3) 0 1px 3px -1px;
}

/* Notched into the panel's top-right corner. */
#ad-grp-mgmt-main-container .ad-grp-mgmt-imgpop-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    padding: 2px 0 0;
    border: 0;
    cursor: pointer;
    text-align: center;
    color: #000000a1;
    font-size: 1.6em;
    line-height: 1;
    background: #ffffffeb;
    border-radius: 0 8px 0 8px;
    z-index: 3;
}

/* Absolute against the panel, not fixed: a fixed arrow only stays with the
   panel because backdrop-filter happens to make it the containing block. */
#ad-grp-mgmt-main-container .ad-grp-mgmt-imgpop-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: 0;
    font-size: 3em;
    line-height: 1;
    color: rgb(255 255 255 / 0.55);
    cursor: pointer;
    z-index: 3;
    transition: color 0.2s ease;
}

#ad-grp-mgmt-main-container .ad-grp-mgmt-imgpop-nav:hover {
    color: rgb(88 202 255);
}

#ad-grp-mgmt-main-container .ad-grp-mgmt-imgpop-prev {
    left: -10%;
}

#ad-grp-mgmt-main-container .ad-grp-mgmt-imgpop-next {
    right: -10%;
}

#ad-grp-mgmt-main-container .ad-grp-mgmt-imgpop-dots {
    text-align: center;
    margin-top: 15px;
    line-height: 0;
}

#ad-grp-mgmt-main-container .ad-grp-mgmt-imgpop-dots button {
    display: inline-block;
    width: 12px;
    height: 8px;
    margin: 0 1px;
    padding: 0;
    border: none;
    border-radius: 2px;
    background: rgb(255 255 255 / 26%);
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.3s linear;
}

#ad-grp-mgmt-main-container .ad-grp-mgmt-imgpop-dots button.is-active {
    background: rgb(255 255 255 / 83%);
}

@media only screen and (max-width: 1000px) {
    #ad-grp-mgmt-main-container .ad-grp-mgmt-imgpop-panel {
        width: 92%;
        margin-top: 12%;
    }

    #ad-grp-mgmt-main-container .ad-grp-mgmt-imgpop-prev {
        left: 4px;
    }

    #ad-grp-mgmt-main-container .ad-grp-mgmt-imgpop-next {
        right: 4px;
    }

    #ad-grp-mgmt-main-container .ad-grp-mgmt-imgpop-nav {
        font-size: 2em;
    }
}

@media only screen and (max-width: 1000px) {
    .ad-grp-mgmt-carousel {
        padding: 0 15%;
    }
}

@media only screen and (max-width: 768px) {
    .ad-grp-mgmt-carousel {
        padding: 0 15%;
    }

    /* ComplianceStyle uses `width: unset` at this width, which lets the item
       fall back to Materialize's 100% — fine for one-slide mode, but in the
       fan the centre slide then covers its neighbours completely. A real
       width keeps them peeking out. */
    .ad-grp-mgmt-carousel .carousel .carousel-item {
        width: 78%;
        left: 0;
        top: auto;
        cursor: default;
        padding-top: 0;
    }

    /* The track only needs the image plus its caption down here. */
    .ad-grp-mgmt-carousel .carousel {
        height: 320px !important;
    }

    .ad-grp-mgmt-slide-caption {
        padding: 0 12px;
        box-sizing: border-box;
    }
}

@media only screen and (max-width: 620px) {
    /* One slide at a time here, so the 15% gutter is wasted width — at 390px
       it left the screenshot 252px wide. A 5% gutter gives it 324px. */
    .ad-grp-mgmt-carousel {
        padding: 0 5%;
    }

    /* Sized to the image plus its two-line caption (275px measured across all
       seven slides). The inherited height left ~145px of empty band below. */
    .ad-grp-mgmt-carousel .carousel {
        height: 290px !important;
    }

    /* One-slide fullWidth mode: the slide spans the track. */
    .ad-grp-mgmt-carousel .carousel .carousel-item {
        width: 100%;
    }
}

/* =========================================================================
   3. CONTENT BANDS — LIFECYCLE, PROPERTIES, MEMBERSHIP
   The three bands share one shape: a centred intro over a feature-point
   column set beside an illustration, the points split by hairline rules.
   Only the background and the accents differ, so the shape is declared once
   and each band adds its own palette.
   ========================================================================= */
.ad-grp-mgmt-band {
    position: relative;
    padding: 85px 15px;
    text-align: center;
}

.ad-grp-mgmt-band-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.ad-grp-mgmt-lifecycle-section {
    background-color: #0e1e3f;
}

.ad-grp-mgmt-props-section {
    background-color: #E6F3FF;
}

.ad-grp-mgmt-membership-section {
    background-color: #043251;
}

/* ---- band intro ---- */
.ad-grp-mgmt-band-intro {
    position: relative;
    margin: 0 auto;
}

.ad-grp-mgmt-band-intro-text {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 10px;
    text-align: left;
}

.ad-grp-mgmt-band-title {
    display: flex;
    justify-content: center;
    margin-inline: auto;
    margin-bottom: 15px;
    max-width: 860px;
    text-align: center;
    letter-spacing: 0.3px;
    font-family: poppins-regular, Arial, Helvetica, sans-serif;
}

.ad-grp-mgmt-lifecycle-intro .ad-grp-mgmt-band-title,
.ad-grp-mgmt-membership-intro .ad-grp-mgmt-band-title {
    color: #f4f9ff;
}

.ad-grp-mgmt-props-intro .ad-grp-mgmt-band-title {
    color: #1f2c3e;
}

.ad-grp-mgmt-lifecycle-intro .ad-grp-mgmt-highlight,
.ad-grp-mgmt-membership-intro .ad-grp-mgmt-highlight {
    color: #58caff;
}

.ad-grp-mgmt-props-intro .ad-grp-mgmt-highlight {
    color: #0a7ea4;
}

.ad-grp-mgmt-band-lead {
    font-size: 1.1em;
    line-height: 1.6;
    text-align: center;
}

.ad-grp-mgmt-lifecycle-intro .ad-grp-mgmt-band-lead,
.ad-grp-mgmt-membership-intro .ad-grp-mgmt-band-lead {
    color: #d6e2e7;
}

.ad-grp-mgmt-props-intro .ad-grp-mgmt-band-lead {
    color: #5e5e5e;
}

/* ---- content row ---- */
.ad-grp-mgmt-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin: 30px auto 0;
    max-width: 1400px;
    text-align: left;
}

.ad-grp-mgmt-row-reverse {
    flex-direction: row-reverse;
}

.ad-grp-mgmt-lifecycle-row {
    margin-top: 44px;
}

.ad-grp-mgmt-row-text {
    max-width: 46%;
}

.ad-grp-mgmt-row-media {
    width: 48%;
    max-width: 50%;
}

.ad-grp-mgmt-row-img {
    display: block;
    margin-inline: auto;
    width: 100%;
    max-width: 550px;
    height: auto;
}

/* The illustration and a four-point column stop fitting side by side well
   before the column itself runs out of room. */
@media only screen and (max-width: 1023.98px) {
    .ad-grp-mgmt-row,
    .ad-grp-mgmt-row-reverse {
        flex-direction: column;
    }

    .ad-grp-mgmt-row-text {
        max-width: 100%;
    }

    .ad-grp-mgmt-row-media {
        width: 100%;
        max-width: 100%;
    }
}

/* ---- feature points ---- */
.ad-grp-mgmt-point {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
    text-align: left;
}

/* Every point is followed by a hairline except the last one, which closes
   the column and needs no gap under it. */
.ad-grp-mgmt-point:last-child {
    margin-bottom: 0;
}

.ad-grp-mgmt-point-icon i {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    font-size: 20px;
}

.ad-grp-mgmt-point-title {
    display: flex;
    font-size: 16px;
    margin-bottom: 8px;
    letter-spacing: 0.25px;
    text-align: left;
}

.ad-grp-mgmt-point-text {
    margin-top: 14px;
    line-height: 1.6;
    text-align: left;
}

.ad-grp-mgmt-hr {
    width: 100%;
    height: 1px;
    margin-bottom: 18px;
}

/* ---- band palettes ---- */
.ad-grp-mgmt-lifecycle-point .ad-grp-mgmt-point-icon i,
.ad-grp-mgmt-membership-point .ad-grp-mgmt-point-icon i {
    background-color: #ffffff14;
}

.ad-grp-mgmt-props-point .ad-grp-mgmt-point-icon i {
    background-color: #0d2b450f;
}

.ad-grp-mgmt-lifecycle-point .ad-grp-mgmt-point-text,
.ad-grp-mgmt-membership-point .ad-grp-mgmt-point-text {
    color: #d6e2e7;
}

.ad-grp-mgmt-props-point .ad-grp-mgmt-point-text {
    color: #5e5e5e;
}

.ad-grp-mgmt-lifecycle-hr,
.ad-grp-mgmt-membership-hr {
    background-color: #ffffff1a;
}

.ad-grp-mgmt-props-hr {
    background-color: #0d2b451a;
}

/* ---- per-point accent, carried by the icon and its heading together ---- */
.ad-grp-mgmt-point-sky .ad-grp-mgmt-point-icon i,
.ad-grp-mgmt-point-sky .ad-grp-mgmt-point-title {
    color: #58caff;
}

.ad-grp-mgmt-point-violet .ad-grp-mgmt-point-icon i,
.ad-grp-mgmt-point-violet .ad-grp-mgmt-point-title {
    color: #c4b5fd;
}

.ad-grp-mgmt-point-amber .ad-grp-mgmt-point-icon i,
.ad-grp-mgmt-point-amber .ad-grp-mgmt-point-title {
    color: #fcd34d;
}

.ad-grp-mgmt-point-mint .ad-grp-mgmt-point-icon i,
.ad-grp-mgmt-point-mint .ad-grp-mgmt-point-title {
    color: #2feeb9;
}

.ad-grp-mgmt-point-teal .ad-grp-mgmt-point-icon i,
.ad-grp-mgmt-point-teal .ad-grp-mgmt-point-title {
    color: #0b5f74;
}

.ad-grp-mgmt-point-blue .ad-grp-mgmt-point-icon i,
.ad-grp-mgmt-point-blue .ad-grp-mgmt-point-title {
    color: #1361b5;
}

.ad-grp-mgmt-point-navy .ad-grp-mgmt-point-icon i,
.ad-grp-mgmt-point-navy .ad-grp-mgmt-point-title {
    color: #0a3d6e;
}

/* =========================================================================
   4. CTA BAND
   Matches the closing card on /active-directory-reminder-and-follow-up-tool:
   a lavender gradient card with a white rim and soft shadow on a white band,
   the copy left-aligned with the Download button and its follow-up line
   stacked under the heading. That page's illustration column is left out;
   there is no group management artwork for it.
   ========================================================================= */
.ad-grp-mgmt-cta {
    position: relative;
    overflow: hidden;
    padding: 64px 30px;
    background: #ffffff;
}

.ad-grp-mgmt-cta-card {
    position: relative;
    z-index: 3;
    max-width: 1100px;
    margin: 0 auto;
    padding: 52px 54px;
    /* border: 4px solid #ffffff; */
    border-radius: 20px;
    text-align: left;
    color: #14253d;
    background: linear-gradient(135deg, #00153a 0%, #0c0045 50%, #005247 100%);
    /* box-shadow: rgb(144 144 144 / 35%) 0px 2px 13px 2px; */
}

.ad-grp-mgmt-cta-title {
    display: flex;
    justify-content: flex-start;
    font-size: 2.2em;
    text-align: center;
    margin: auto;
    color: #ffffff;
    max-width: 816px;
    font-family: poppins-regular, Arial, Helvetica, sans-serif;

}

.ad-grp-mgmt-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
}

/* general.css gives .download-btn its gradient and padding but leaves it
   inline-block, so the icon and the label need pairing up. */
.ad-grp-mgmt-cta-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 0;
    text-decoration: none;
}

/* The class sits on the <a> itself, so general.css's a:hover { color: inherit }
   would pull in the card's dark text colour; keep the label white and leave
   the 0.9 opacity fade from .download-btn:hover, as on other solution pages. */
.ad-grp-mgmt-cta-download:hover,
.ad-grp-mgmt-cta-download:focus-visible {
    color: #ffffff;
}

.ad-grp-mgmt-cta-demo p {
    margin: 0;
    font-size: 13px;
    font-family: work-sans-regular, Arial, Helvetica, sans-serif;
    color: #ffffffe0;
}

/* The demo stays a LINK rather than a second button, underlined with a soft
   rule as on the reference card. */
.ad-grp-mgmt-cta-demo a.interlinking {
    margin-left: 4px;
    color: #c7e2ff;
    font-family: poppins-medium, Arial, Helvetica, sans-serif;
    text-decoration: none;
    border-bottom: 1px solid rgb(216 235 255 / 40%);
}

/* Stacked and centred on small screens, as the reference card does. */
@media only screen and (max-width: 768px) {
    .ad-grp-mgmt-cta-card {
        padding: 36px 24px;
        text-align: center;
    }

    .ad-grp-mgmt-cta-title {
        justify-content: center;
        font-size: 21px;
        text-align: center;
    }

    .ad-grp-mgmt-cta-actions {
        align-items: center;
        gap: 16px;
    }
}