/* Dual Content Cards
   ==========================================================================
   A fixed two-up variant of Custom Content Cards. Two differences drive this
   file:

   1. The cards sit in a narrower column than Custom Content Cards, so the
      artwork never grows to the full half-container width that module allows.
   2. Each card leads with a bold headline followed by a same-size unbolded
      subheadline, in place of the overline Custom Content Cards puts above
      its headline. */


/* Grid width ---------------------------------------------------------------
   Custom Content Cards lets a two-card grid span the whole container, which at
   the 2xl breakpoint puts each image near 740px wide. Capping the grid here is
   what keeps this module's images visibly smaller; the images themselves stay
   fluid inside their column. */

.dual-content-cards-inner {
    max-width: 72rem; /* 1152px */
}


/* Card media ---------------------------------------------------------------
   The transform already emits 3x2, so the natural image height sets the box and
   both cards line up without a fixed aspect ratio. */

.dual-card-media {
    overflow: hidden;
}


/* Card headline + subheadline ----------------------------------------------
   Both lines are headline-h5 sized (28px/36px desktop, 24px/32px below lg) and
   set in Lexend, matching the .headline-h5 utility. They differ only in weight:
   the headline is bold, the subheadline regular, so the pair reads as one bold
   line over one plain line.

   Lexend is requested at 700 in _layouts/default.twig — without that weight in
   the font request the browser would synthesize the bold instead. */

.dual-card-headline,
.dual-card-subheadline {
    font-family: Lexend, sans-serif;
    font-size: 28px;
    line-height: 36px;
}

.dual-card-headline {
    font-weight: 700;
}

.dual-card-subheadline {
    font-weight: 400;
}

@media (max-width: 1023px) {
    .dual-card-headline,
    .dual-card-subheadline {
        font-size: 24px;
        line-height: 32px;
    }
}


/* Card rich text -----------------------------------------------------------
   body-b3 (16px/24px) sizing with plain disc bullets. 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. */

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

.dual-card-body > p:first-child {
    margin-top: 0;
}

.dual-card-body ul,
.dual-card-body ol {
    padding-left: 1.25rem;
    list-style-position: outside;
}

.dual-card-body ul {
    list-style-type: disc;
}

.dual-card-body ul ul {
    list-style-type: circle;
}

.dual-card-body ul ul ul {
    list-style-type: square;
}

.dual-card-body ol {
    list-style-type: decimal;
}

.dual-card-body ol ol {
    list-style-type: lower-alpha;
}

.dual-card-body ol ol ol {
    list-style-type: lower-roman;
}

.dual-card-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. */
.dual-card-body li > ul,
.dual-card-body li > ol {
    margin: 0.125rem 0 0;
}

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

.dual-card-body strong {
    font-weight: 600;
}