/* ------------------------------------------------------------------
 * Info-card — reusable text-card component
 *
 * White rounded panel: title + optional icon top-right, body copy, optional
 * button pinned to the bottom. It is the redesign's text counterpart to the
 * post-card (which leads with an image). A page opts in by giving the element
 * the class `info-card`; a row of them opts in with `info-card-grid`.
 *
 * Two sizes, chosen by which element carries the title:
 *   · Feature card   — title Inter 600 28/36, 48px line icon, body 16/24.
 *     Used where the card IS the section's content (support tools, support
 *     levels, service options).
 *   · Compact card   — title Inter 600 20/28, 46.85px filled navy icon badge,
 *     body 18/24. Used for a grid of shorter entries (support entitlement).
 *   The compact variant is selected by `info-card--compact`.
 *
 * This sheet is intentionally NOT page-scoped — it is glob-loaded site-wide by
 * the overrides loader, so the component is available wherever the class is
 * used. It keys on the theme's #content wrapper (present on every page,
 * language-neutral) only to out-specify the card widgets' own rules, which
 * carry higher class-specificity; the id wins without an !important war.
 *
 * Figma: file teRt2FXM9JffFSebtSTocH, cards 3694-4436 (feature) and 3694-4462
 * (compact). Tokens — card white, radius 24, padding 24; title navy #0b1b45;
 * body navy #0b1b45; icon badge navy fill with a white 24px glyph.
 *
 * Buttons inside a card are the design-system button widget and are styled
 * ONLY by that widget — nothing here touches their fill, border, label or
 * hover.
 * ------------------------------------------------------------------ */

/* -- the card ---------------------------------------------------------- */

#content .info-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #fff;
    border-radius: 24px;
    padding: 24px;
}

/* When the card sits inside a Bootstrap column (the CardsIcon / CardsStandard
 * widgets render it that way), the column is a flex item of `.row` and so
 * already stretches to the tallest sibling — but it is `display: block`, so
 * the card inside it keeps its content height and the row ends up ragged.
 *
 * The column is made a flex column and the card told to grow, rather than
 * giving the card `height: 100%`. Percentage height resolves against the
 * column's content box and ignores the card's OWN margins, so on an instance
 * carrying `mt-7 mt-lg-9` (96px) the card overflowed its column by that much
 * and spilled out of the section — the next section's heading then rendered on
 * top of it. Growing as a flex item accounts for the margin. */
#content .row > [class*="col-"]:has(> .info-card) {
    display: flex;
    flex-direction: column;
}

#content .row > [class*="col-"] > .info-card {
    flex: 1 1 auto;
    height: auto;
}

/* Cards in a grid stretch to a common height so their bottom buttons line up. */
#content .info-card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: stretch;
}

/* Two per row, which is what every grid on the page uses. The 16px subtracted
 * from each basis is half the 32px gap, so two cards plus one gap fill the row
 * exactly. Bootstrap's own col width is not relied on here: these elements
 * carry `.col-lg-6`, but as flex children of this grid their basis has to come
 * from the grid or they all collapse onto one line. */
#content .info-card-grid > .info-card {
    flex: 1 1 calc(50% - 16px);
    max-width: calc(50% - 16px);
    min-width: 0;
}

/* The card widgets render their own Bootstrap `.card` shell inside (and some
 * instances carry a `.bg-secondary` utility). Flatten the INNER shell so the
 * component owns one surface instead of stacking two.
 *
 * Deliberately NOT `.info-card.card` — that selector matches the element that
 * IS the card and would strip the white background and 24px radius the
 * component just set, which is exactly the bug this replaced. */
#content .info-card > .card,
#content .info-card .card-body {
    background: transparent;
    border: 0;
    border-radius: inherit;
    box-shadow: none;
    padding: 0;
}

/* Some instances ship `.bg-secondary`, a Bootstrap utility carrying
 * `!important`, which paints the card pale grey instead of white. It is stored
 * per instance in the page content, so only `!important` can beat it here. */
#content .info-card.bg-secondary,
#content .info-card.card {
    background-color: #fff !important;
    border: 0;
    border-radius: 24px;
    box-shadow: none;
}

/* -- title + icon ------------------------------------------------------ */

#content .info-card__title,
#content .info-card > .card-body > h3:first-of-type,
#content .info-card > h3:first-of-type {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin: 0 0 13px;
    /* !important because a GLOBAL rule sets `h3,h4,h5,h6 { font-family: Kurdis
     * … !important }`. The design gives card titles the Inter text face, not
     * the Kurdis display face, so that global has to be beaten here.
     * Worth knowing: this difference is invisible on any environment where the
     * Kurdis webfont is not loaded, because the global rule then falls back to
     * Inter anyway and the card looks correct for the wrong reason. */
    font-family: Inter, sans-serif !important;
    font-size: 28px;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: 0;
    color: #0b1b45;
}

/* The icon is pinned to the card's top-right corner rather than laid out in
 * flow with the title: the title runs through wpautop, so icon and text would
 * otherwise share one <p> and no alignment between them would hold.
 *
 * It is drawn as a pseudo-element from a `info-card--icon-<name>` modifier the
 * page writes onto the instance; the page sheet supplies the glyph. Keeping
 * the artwork in CSS means the relative URL resolves against the stylesheet
 * and stays valid on any environment, and the page content carries no path. */
#content .info-card {
    position: relative;
}

#content .info-card[class*="info-card--icon-"]::after {
    content: "";
    position: absolute;
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* The compact card sets its glyph inside a filled navy disc — a smaller box,
 * a 24px glyph, and the disc supplied here rather than by the artwork. */
#content .info-card--compact[class*="info-card--icon-"]::after {
    width: 46.85px;
    height: 46.85px;
    border-radius: 50%;
    background-color: #0b1b45;
    background-size: 24px 24px;
}

/* An instance carrying a design icon must not also render the widget's own
 * stacked FontAwesome badge. */
#content .info-card[class*="info-card--icon-"] > .card-top-icon {
    display: none;
}

/* Keep the title clear of the pinned icon. */
#content .info-card__title,
#content .info-card > .card-body > h3:first-of-type,
#content .info-card > h3:first-of-type {
    padding-right: 64px;
}

/* -- body -------------------------------------------------------------- */

#content .info-card__body,
#content .info-card p,
#content .info-card li {
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #0b1b45;
}

/* Question/answer runs inside a card: the bold lead-in is a heavier, slightly
 * larger line, matching the design's 18/25 bold. */
#content .info-card__body strong,
#content .info-card p strong {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 700;
    line-height: 25px;
    color: #0b1b45;
}

/* The stored copy is one text block per card, so wpautop wraps each question
 * and each answer in its own <p>. The theme's default paragraph margin then
 * doubles the gap the design asks for between a question and its answer. */
#content .info-card p {
    margin-bottom: 10px;
}

#content .info-card__body p:last-child,
#content .info-card p:last-child {
    margin-bottom: 0;
}

/* Push the button to the bottom edge so cards of different copy lengths still
 * line their CTAs up. */
#content .info-card .product-buttons-group {
    margin-top: auto;
    padding-top: 24px;
}

/* -- adapter: the CardsIcon / CardsStandard widgets -------------------- */

/* Those widgets render their icon as a stacked FontAwesome badge that is a
 * direct child of the card, sitting top-centre on a filled tech-blue disc.
 * The design shows a plain navy line icon in the top-right corner instead, so
 * the disc is removed and the glyph re-anchored. */
#content .info-card > .card-top-icon {
    position: absolute;
    top: 24px;
    right: 24px;
    left: auto;
    margin: 0;
    width: 48px;
    height: 48px;
    background: transparent !important;
    color: #0b1b45 !important;
}

/* The filled circle behind the glyph is a separate stacked layer. */
#content .info-card > .card-top-icon .fa-circle {
    display: none;
}

#content .info-card > .card-top-icon .fa-stack-1x {
    font-size: 40px;
    line-height: 48px;
    color: #0b1b45 !important;
}

/* The widget's title is an h3 inside .card-body; give it the component's
 * title treatment and keep it clear of the pinned icon. */
#content .info-card > .card-body > h3:first-child {
    margin: 0 0 13px;
    padding-right: 64px;
    font-family: Inter, sans-serif !important;
    font-size: 28px;
    font-weight: 600;
    line-height: 36px;
    color: #0b1b45;
}

/* The design separates the sub-headings with space, not a rule. */
#content .info-card .card-body > hr {
    display: none;
}

/* The widget also prefixes each sub-heading with a small stacked
 * bronze/silver/gold badge. The design has no icon on those lines — and here
 * the badge renders as a bare disc anyway, because the stacked glyph it is
 * built from is not part of this card's icon set. Hidden rather than
 * restyled, since the design does not show it at all. */
#content .info-card .card-body .fa-stack:not(.card-top-icon) {
    display: none;
}

/* The widget lays the card out as a plain block; the component needs a column
 * so the button can be pushed to the bottom edge. */
#content .info-card > .card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
}

/* -- compact variant --------------------------------------------------- */

#content .info-card--compact .info-card__title {
    font-size: 20px;
    line-height: 28px;
}

#content .info-card--compact .info-card__body,
#content .info-card--compact p {
    font-size: 18px;
    line-height: 24px;
}

/* Filled navy disc with a white glyph — the compact card's icon treatment. */
/* -- below the desktop grid ------------------------------------------- */

@media (max-width: 991px) {
    #content .info-card-grid {
        gap: 24px;
    }

    /* max-width has to be released too, not just flex-basis — the desktop rule
       caps each card at calc(50% - 16px), which would otherwise keep two
       cards on a line at ~165px wide on a phone. */
    #content .info-card-grid > .info-card {
        flex: 1 1 100%;
        max-width: 100%;
    }

    #content .info-card__title,
    #content .info-card > .card-body > h3:first-of-type,
    #content .info-card > h3:first-of-type {
        font-size: 24px;
        line-height: 32px;
    }
}