/* ==========================================================================
   Pattern: Content V1.1 (theme overrides)
   Two equal cards side by side from 768px: a white content card and the
   image, both with 30px corners. The Forge stylesheet (assets/forge) sizes
   the columns 50/50 at 768px but then pins them to fixed widths and strips
   the content card's side padding at 1440px; those rules are undone here so
   the cards stay equal and padded at every width.
   ========================================================================== */

/* The content card never forces a minimum width, so it can shrink on phones. */
.forge-content-v1-1-content-wrapper {
    min-width: 0;
}

/* Two classes: WordPress prints single-class flex sizing for the blocks'
   "fit" / "fill" settings, which would otherwise win on source order. */
@media (min-width: 768px) {
    .forge-content-v1-1 .forge-content-v1-1-content-wrapper,
    .forge-content-v1-1 .forge-content-v1-1-image {
        /* A 50% basis (border-box, so the content card's padding is inside
           it) keeps both cards the same width; a zero basis would hand the
           padded card its padding on top of an equal share. */
        flex: 1 1 50%;
        width: auto;
        min-width: 0;
    }
}

/* Only the card variant: the alt has no card and no padding of its own. */
@media (min-width: 1440px) {
    .forge-content-v1-1:not(.forge-content-v1-1-alt) .forge-content-v1-1-content-wrapper {
        padding: var(--wp--preset--spacing--xl);
    }
}

/* Phones: tighter card padding. !important because the block's own padding
   is an inline style. */
@media (max-width: 575.98px) {
    .forge-content-v1-1:not(.forge-content-v1-1-alt) .forge-content-v1-1-content-wrapper {
        padding: var(--wp--preset--spacing--md) !important;
    }
}

/* The image fills its card; the content card stretches to match its height. */
.forge-content-v1-1-image {
    display: flex;
}

.forge-content-v1-1-image img {
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: 654 / 640;
    object-fit: cover;
    border-radius: 30px;
}

/* Buttons here are plain pills. */
.forge-content-v1-1 .wp-block-button__link::after {
    content: none;
}

/* Check list: no bullets, the items stacked with a small gap, each item a
   flex row so the icon sits beside the text. These used to come from the
   Forge stylesheet, which this file replaces rather than extends. */
.forge-content-v1-1-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
}

.forge-content-v1-1-list li {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Check list bullets: the theme's circle-check SVG instead of the Phosphor
   glyph. */
.forge-content-v1-1-list li:before {
    display: block;
    line-height: 1;
    position: relative;
    content: url("../../decorations/content-v1-1-circle-check.svg");
    bottom: 0px;
}

/* Contain variant: for illustrations that must not be cropped, the image
   sits whole on the alternate background with a little breathing room. */
.forge-content-v1-1-image--contain img {
    object-fit: contain;
    padding: var(--wp--preset--spacing--md);
    background-color: var(--wp--preset--color--background-alt);
}

/* --- Alternative (patterns/content-v1-1-alt.php) ---------------------------
   Eyebrow, heading and two paragraphs beside a square photo on the grey
   ground, as on the About page. These rules live here rather than in
   assets/forge because this file replaces the Forge one. */
.forge-content-v1-1-alt {
    background-color: #EFEEF2;
}

.forge-content-v1-1-alt .wp-block-heading {
    font-weight: 400;
}

.forge-content-v1-1-alt .label {
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.02em;
}

.forge-content-v1-1-alt .forge-content-v1-1-image img {
    aspect-ratio: 1 / 1;
    border-radius: 12px;
}

/* The alt keeps the arrow on its button, as in the About design. */
.forge-content-v1-1-alt .wp-block-button:not(.has-no-icon) .wp-block-button__link::after {
    content: "";
}