/* Overlapping cards ------------------------------------------------------- */

.overlapping-cards {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* Module headline sits heavier than the shared .headline-h2 weight (500). */
.overlapping-cards-headline {
    font-weight: 700;
}

.overlap-card {
    position: relative;
    flex: 1 1 0;
    max-width: 410px;
    z-index: 1;
    cursor: pointer;
    transform-origin: center center;
    transition: transform 0.35s ease, z-index 0s;
    -webkit-tap-highlight-color: transparent;
}

/* Pull each card onto its neighbor so they slightly overlap. */
.overlap-card:not(:first-child) {
    margin-left: -0.75rem;
}

@media (min-width: 1024px) {
    .overlap-card:not(:first-child) {
        margin-left: -1rem;
    }
}

/* Resting stack: the middle card sits on top and the cards to either side
   tuck behind it, so the third card reads as being underneath the second
   until it's activated. */
.overlap-card:nth-child(2) {
    z-index: 3;
}

.overlap-card:nth-child(3) {
    z-index: 2;
}

.overlap-card-inner {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.35s ease;
}

/* Desktop: every card is the same fixed height whatever the copy length. The
   body flexes into the leftover space and clips anything past it — the field's
   192-character limit keeps content inside that space. */
@media (min-width: 768px) {
    .overlap-card-inner {
        height: 450px;
    }
}

/* Expand cue: icon in the bottom-right corner hinting the card opens a
   modal. */

.overlap-card-cue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 32px across keeps the arrow drawn at the same scale it was on its own. */
.overlap-card-cue-icon {
    display: block;
    width: 32px;
    height: auto;
}

/* Active = last hovered (desktop) or first-tapped (touch): grow and rise above.
   On desktop the emphasis persists after the pointer leaves — it only moves when
   another card is hovered. */
.overlap-card.is-active {
    transform: scale(1.07);
    z-index: 30;
}

.overlap-card.is-active .overlap-card-inner {
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
}

.overlap-card:focus-visible {
    outline: none;
}

.overlap-card:focus-visible .overlap-card-inner {
    outline: 3px solid #386fe4; /* ada-light-blue */
    outline-offset: 3px;
}

/* Card bullets / rich text -------------------------------------------------
   Component-specific rich text: body-b4 (14px/22px) sizing, plain disc bullets
   in the inherited text color, and tighter spacing than the shared
   .rich-text-feature. */

.overlap-card-bullets > p {
    font-size: 14px;
    line-height: 22px;
    margin: 0.25rem 0;
}

/* Descendant (not direct-child) selectors so nested lists are styled too —
   Tailwind's preflight strips list-style/margin/padding from every ul/ol, so
   anything these rules miss renders with no marker and no indent. */

.overlap-card-bullets ul,
.overlap-card-bullets ol {
    padding-left: 1.1rem;
    list-style-position: outside;
}

.overlap-card-bullets ul {
    list-style-type: disc;
}

.overlap-card-bullets ul ul {
    list-style-type: circle;
}

.overlap-card-bullets ul ul ul {
    list-style-type: square;
}

.overlap-card-bullets ol {
    list-style-type: decimal;
}

.overlap-card-bullets ol ol {
    list-style-type: lower-alpha;
}

.overlap-card-bullets ol ol ol {
    list-style-type: lower-roman;
}

.overlap-card-bullets li {
    font-size: 14px;
    line-height: 22px;
    padding: 0.125rem 0;
}

/* A nested list hugs its parent item rather than taking the block spacing. */
.overlap-card-bullets li > ul,
.overlap-card-bullets li > ol {
    margin: 0.125rem 0 0;
}

.overlap-card-bullets a {
    color: #00689e; /* dark-blue */
    text-decoration: underline;
}

/* Modal body rich text: same plain bullets, at body-b3 (16px/24px) since the
   modal has more room, plus headings in the site heading font. */

.overlap-modal-body > p {
    font-size: 16px;
    line-height: 24px;
    margin: 0.5rem 0;
}

.overlap-modal-body ul,
.overlap-modal-body ol {
    padding-left: 1.25rem;
    list-style-position: outside;
    margin: 0.5rem 0;
}

.overlap-modal-body ul {
    list-style-type: disc;
}

.overlap-modal-body ul ul {
    list-style-type: circle;
}

.overlap-modal-body ul ul ul {
    list-style-type: square;
}

.overlap-modal-body ol {
    list-style-type: decimal;
}

.overlap-modal-body ol ol {
    list-style-type: lower-alpha;
}

.overlap-modal-body ol ol ol {
    list-style-type: lower-roman;
}

.overlap-modal-body li {
    font-size: 16px;
    line-height: 24px;
    padding: 0.125rem 0;
}

/* A nested list hugs its parent item rather than taking the block spacing. */
.overlap-modal-body li > ul,
.overlap-modal-body li > ol {
    margin: 0.25rem 0 0;
}

.overlap-modal-body a {
    color: #00689e; /* dark-blue */
    text-decoration: underline;
}

.overlap-modal-body > h1,
.overlap-modal-body > h2,
.overlap-modal-body > h3,
.overlap-modal-body > h4,
.overlap-modal-body > h5,
.overlap-modal-body > h6 {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    margin: 1rem 0 0.5rem;
}

/* The body's leading element is the modal's heading, and the grid is top
   aligned — a top margin here would drop it below the image's top edge. */
.overlap-modal-body > :first-child {
    margin-top: 0;
}

.overlap-modal-body > h1,
.overlap-modal-body > h2 {
    font-size: 32px;
    line-height: 48px;
}

.overlap-modal-body > h3 {
    font-size: 20px;
    line-height: 28px;
}

.overlap-modal-body > h4 {
    font-size: 18px;
    line-height: 26px;
}

.overlap-modal-body > h5,
.overlap-modal-body > h6 {
    font-size: 16px;
    line-height: 22px;
}

/* Modal links: plain text links under the image, each with a caret. -------- */

.overlap-modal-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #00689e; /* dark-blue */
    text-decoration: none;
}

.overlap-modal-link:hover,
.overlap-modal-link:focus {
    text-decoration: none;
}

.overlap-modal-link-caret {
    flex-shrink: 0;
    width: 7px;
    height: 12px;
}

/* Modal ------------------------------------------------------------------- */

.overlap-modal {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.overlap-modal.is-open {
    opacity: 1;
}

.overlap-modal-panel {
    transform: translateY(16px);
    transition: transform 0.3s ease;
}

.overlap-modal.is-open .overlap-modal-panel {
    transform: translateY(0);
}

/* Mobile: stack into a single column, dropping the overlap and grow animation.
   The modal is unaffected. */

@media (max-width: 767px) {
    .overlapping-cards {
        flex-direction: column;
        align-items: center;
    }

    .overlap-card {
        flex: 1 1 auto;
        width: 100%;
        max-width: 420px;
        cursor: pointer;
    }

    /* Cancel the horizontal overlap and stack with vertical spacing. */
    .overlap-card:not(:first-child) {
        margin-left: 0;
        margin-top: 1.5rem;
    }

    /* No hover/tap grow on mobile. */
    .overlap-card.is-active {
        transform: none;
        z-index: 1;
    }

    .overlap-card.is-active .overlap-card-inner {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    }
}