/*
 * WYSIWYG Utility Stylesheet
 * --------------------------
 * HOW IT WORKS:
 * This stylesheet defines utility classes that consume CSS variables (Design Tokens) 
 * defined in the global 'DesignTokenSettings'. 
 * * NAMING CONVENTION:
 * Use the format: .wysiwyg-{property}-{scale}
 * - {property}: mt (margin-top), mb (margin-bottom), p (padding), w (width), etc.
 * - {scale}: sm (small), md (medium), lg (large), full, half, etc.
 * * EXAMPLE:
 * .wysiwyg-mt-md { margin-top: var(--spacing-md); }
 * * IMPORTANT:
 * Do not hardcode pixel values here. Always map to a variable (var(--variable-name)).
 * This allows the Admin UI to control site-wide design without touching this file.
 */

/* --- Spacing Utilities --- */
.wysiwyg-mt-sm {
    margin-top: var(--spacing-sm);
}

.wysiwyg-mt-md {
    margin-top: var(--spacing-md);
}

.wysiwyg-mt-lg {
    margin-top: var(--spacing-lg);
}

.wysiwyg-mb-sm {
    margin-bottom: var(--spacing-sm);
}

.wysiwyg-mb-md {
    margin-bottom: var(--spacing-md);
}

.wysiwyg-mb-lg {
    margin-bottom: var(--spacing-lg);
}

.wysiwyg-p-sm {
    padding: var(--spacing-sm);
}

.wysiwyg-p-md {
    padding: var(--spacing-md);
}

.wysiwyg-p-lg {
    padding: var(--spacing-lg);
}

/* --- Sizing Utilities --- */
.wysiwyg-w-full {
    width: 100%;
}

.wysiwyg-w-half {
    width: 50%;
}

/* Structural Layout Wrappers (Driven by LayoutHintsLiquidTag) */
.oc-grid {
    display: grid;
    gap: 1.5rem;
}

.oc-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.oc-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.oc-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* A Model B ContentPicker has an adaptive default grid declared later in this
   stylesheet. The compound selectors keep an explicit author-selected layout
   hint authoritative without relying on fragile source-order assumptions. */
.oc-collection.oc-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.oc-collection.oc-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.oc-collection.oc-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.oc-layout-sidebar-right {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
}

.oc-layout-sidebar-left {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 2rem;
}

.oc-layout-full {
    width: 100%;
}

/* A semantic root-detail layout hint. It lets a tokenized item background
   cover a short detail page without an item-ID-scoped Custom CSS fallback. */
.oc-layout-viewport {
    min-height: 100vh;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .oc-grid-2, .oc-grid-3, .oc-grid-4,
    .oc-collection.oc-grid-2, .oc-collection.oc-grid-3, .oc-collection.oc-grid-4,
    .oc-layout-sidebar-right, .oc-layout-sidebar-left {
        grid-template-columns: 1fr;
    }
}

/* --- Media Field Base ---
 * The wrapper is display:block by default (full-width).
 * shadow/rounded/border/align classes switch it to display:table so it
 * shrinks to the image's natural/constrained width.  box-shadow then
 * renders as a tight frame around just the image, never bleeding onto
 * adjacent elements.
 */
.oc-media-field,
.oc-section-media {
    display: block;
    line-height: 0; /* collapse whitespace gap between div and img */
}

    .oc-media-field img,
    .oc-section-media img {
        display: block; /* remove inline baseline gap */
        max-width: 100%;
        height: auto;
    }

/* --- Image Size Utilities ---
 * Applied to the <img> element to control its display size.
 * The Liquid template and editor retain the original Orchard media URL so a
 * temporary ImageSharp resize/cache failure cannot break image display. CSS is
 * the presentation authority for the selected display size.
 *
 * Token classes:  img-sm (200px)  img-md (400px)  img-lg (600px)  img-full (100%)
 */
.img-sm {
    max-width: 200px;
    width: 100%;
    height: auto;
}

.img-md {
    max-width: 400px;
    width: 100%;
    height: auto;
}

.img-lg {
    max-width: 600px;
    width: 100%;
    height: auto;
}

.img-full {
    max-width: 100%;
    width: 100%;
    height: auto;
}

/* Image-size tokens are persisted on the editable media wrapper. img-full must
   also expand its child image so the original source fills the layout width. */
.oc-media-field.img-full,
.oc-section-media.img-full {
    max-width: none;
    width: 100%;
}

.oc-media-field.img-full img,
.oc-section-media.img-full img {
    width: 100%;
    max-width: none;
    height: auto;
}

/* --- Block Alignment Utilities ---
 * align-* on media wrappers:
 *   display:table shrinks the wrapper to the image's natural/constrained width.
 *   margin-left/right auto (or 0) then positions it within the parent.
 *   This keeps box-shadow / border-radius as a tight frame around the image
 *   regardless of whether the parent is a flex/grid/block container.
 *
 * NOTE: display:table is intentional — it is the most reliable cross-browser
 * way to shrink-wrap a block element to its content width while remaining a
 * block-level element (so margin:auto centering still works).
 * width:fit-content is an alternative but has older-browser caveats.
 */
.oc-media-field.align-center,
.oc-section-media.align-center {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

.oc-media-field.align-left,
.oc-section-media.align-left {
    display: table;
    margin-left: 0;
    margin-right: auto;
}

.oc-media-field.align-right,
.oc-section-media.align-right {
    display: table;
    margin-left: auto;
    margin-right: 0;
}

/* Generic align-* for non-media elements */
.align-center:not(.oc-media-field):not(.oc-section-media) {
    display: flex;
    justify-content: center;
}

.align-left:not(.oc-media-field):not(.oc-section-media) {
    display: flex;
    justify-content: flex-start;
}

.align-right:not(.oc-media-field):not(.oc-section-media) {
    display: flex;
    justify-content: flex-end;
}

/* --- Shadow / Rounded / Border on media wrappers ---
 *
 * APPROACH: box-shadow on the wrapper div (NOT filter:drop-shadow on the img).
 *
 * WHY NOT filter:drop-shadow on <img>?
 *   CSS filter paints OUTSIDE the element's layout box.  The shadow extends
 *   downward past the image bottom edge and bleeds as a full-width stripe
 *   across the next sibling element (the heading).  box-shadow on the wrapper
 *   is contained within the wrapper's own painted area and never bleeds.
 *
 * WHY display:table on the wrapper?
 *   display:table (like width:fit-content) makes the wrapper shrink-wrap the
 *   image so box-shadow draws a tight frame rather than a full-row shadow.
 *   The align-* rules above already set display:table; these rules also set it
 *   so decoration works even without an explicit align class.
 *
 * WHY overflow:hidden on rounded wrappers?
 *   border-radius on the wrapper clips the img corners only when
 *   overflow:hidden is set; otherwise the img square corners poke out.
 *   overflow:hidden + border-radius on the wrapper replaces the old approach
 *   of forwarding border-radius to the <img> element.
 */

/* Shadow classes — box-shadow on wrapper, wrapper shrinks to image width */
.oc-media-field.shadow-sm,
.oc-section-media.shadow-sm {
    display: table;
    box-shadow: 0 1px 3px rgba(0,0,0,0.20);
}

.oc-media-field.shadow-md,
.oc-section-media.shadow-md {
    display: table;
    box-shadow: 0 4px 8px rgba(0,0,0,0.20);
}

.oc-media-field.shadow-lg,
.oc-section-media.shadow-lg {
    display: table;
    box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}

/* Rounded classes — border-radius on wrapper + overflow:hidden to clip img */
.oc-media-field.rounded,
.oc-section-media.rounded {
    display: table;
    border-radius: var(--border-radius, 8px);
    overflow: hidden;
}

.oc-media-field.rounded-sm,
.oc-section-media.rounded-sm {
    display: table;
    border-radius: 4px;
    overflow: hidden;
}

.oc-media-field.rounded-lg,
.oc-section-media.rounded-lg {
    display: table;
    border-radius: 16px;
    overflow: hidden;
}

.oc-media-field.rounded-full,
.oc-section-media.rounded-full {
    display: table;
    border-radius: 9999px;
    overflow: hidden;
}

/* Border class */
.oc-media-field.border,
.oc-section-media.border {
    display: table;
    border: var(--border-width,1px) solid var(--border-color,#e2e8f0);
}

/* When align-* AND shadow/rounded/border are combined, display:table is
 * already set by the align rule; the margin centering still applies.
 * No extra rules needed — CSS cascade handles it correctly. */

/* --- Layout Utilities --- */
.wysiwyg-flex-row {
    display: flex;
    flex-direction: row;
}

.wysiwyg-flex-col {
    display: flex;
    flex-direction: column;
}

.wysiwyg-text-primary {
    color: var(--primary-color);
}

.wysiwyg-bg-primary {
    background-color: var(--primary-color);
}

.wysiwyg-border-primary {
    border-color: var(--primary-color);
}

/* ── Model B collection cards ────────────────────────────────────────────── */

.oc-collection {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--spacing-md, 1rem);
}

.oc-collection-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.5rem);
    min-width: 0;
}

/* A card title may contain an author-inserted hard break to reserve a consistent
   heading height above the media row. Apply pre-line to the text-bearing link,
   not its formatted heading container, so Liquid indentation remains collapsed. */
.oc-collection-card__title a {
    white-space: pre-line;
}

.oc-collection-card__media {
    display: block;
}

.oc-collection-card__media img {
    display: block;
    width: 100%;
    height: auto;
}

/* Empty media is an authoring affordance, never published-page content. */
body:not(.oc-edit-mode) .oc-media-field--empty {
    display: none !important;
}

/* Empty card media remains visible and selectable only in the in-place editor. */
body.oc-edit-mode .oc-collection-card__media.oc-media-field--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 10rem;
    padding: var(--spacing-md, 1rem);
    border: 1px dashed var(--border-color, #dee2e6);
    background: var(--bg-light-color, #f8f9fa);
    color: var(--text-muted-color, #6c757d);
    text-align: center;
}

.oc-collection-card__media .oc-media-placeholder {
    display: block;
    line-height: 1.4;
}

/* Root content items contain independent block fields. Alignment on the container
   is text alignment, not a flex layout instruction; otherwise the generic
   align-* utility makes Title, Body, and media siblings render in a row. */
.oc-content-item.align-center,
.oc-content-item.align-left,
.oc-content-item.align-right {
    display: block;
}

.oc-content-item.align-center { text-align: center; }
.oc-content-item.align-left { text-align: left; }
.oc-content-item.align-right { text-align: right; }

/* ── B6 universal site composition ─────────────────────────────────────────
 * These selectors are renderer primitives, not content-type or industry-specific
 * templates. A proposed section selects one semantic pattern through its validated
 * LayoutMetadataPart class; DesignTokenCssBuilder binds that page's approved brand
 * namespace to the --oc-composition-* aliases used below.
 */
article.oc-content-item.oc-composition-page {
    --oc-composition-primary: var(--primary-color);
    --oc-composition-secondary: var(--secondary-color);
    --oc-composition-surface: var(--bg-surface-color);
    --oc-composition-contrast: var(--text-color);
    --oc-composition-muted: var(--text-muted-color);
    --oc-composition-display: Georgia, serif;
    --oc-composition-body: system-ui, sans-serif;
    --oc-composition-display-size: clamp(2.5rem, 6vw, 5.5rem);
    --oc-composition-body-size: 1rem;
    --oc-composition-space: 0.5rem;
    --oc-composition-radius: 0.25rem;
    box-sizing: border-box;
    /* Orchard themes commonly place Content inside a narrow Bootstrap-like
       container. B6 composition pages own their canvas, so escape only that
       ancestor's width and center the canvas against the viewport. */
    width: 100vw;
    max-width: 100vw;
    min-height: calc(100vh - 5rem);
    margin: 0 0 0 calc(50% - 50vw);
    padding: clamp(1.25rem, 3vw, 3.5rem);
    background: var(--oc-composition-surface);
    color: var(--oc-composition-contrast);
    font-family: var(--oc-composition-body);
    font-size: var(--oc-composition-body-size);
    line-height: 1.65;
    overflow-x: clip;
}

article.oc-content-item.oc-composition-page > h1 {
    width: min(100%, 76rem);
    margin: 0 auto clamp(1.5rem, 4vw, 4rem);
    color: var(--oc-composition-muted);
    font: 600 clamp(0.72rem, 1vw, 0.9rem)/1.2 var(--oc-composition-body);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

article.oc-content-item.oc-composition-page .oc-sections-container {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 5vw, 6rem);
}

article.oc-content-item.oc-composition-page .oc-section {
    box-sizing: border-box;
    width: 100%;
}

article.oc-content-item.oc-composition-page .oc-section-layout {
    box-sizing: border-box;
    width: min(100%, 76rem);
    margin: 0 auto;
}

/* Structural hints are deliberately expressive for ordinary authoring, but the
   B6 semantic pattern is the layout authority. Do not let a generic sidebar or
   grid class shrink a composition heading into a 300px column. */
article.oc-content-item.oc-composition-page .oc-section-layout.oc-layout-sidebar-left,
article.oc-content-item.oc-composition-page .oc-section-layout.oc-layout-sidebar-right {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
}

article.oc-content-item.oc-composition-page .oc-pattern-hero .oc-section-layout,
article.oc-content-item.oc-composition-page .oc-pattern-editorial .oc-section-layout,
article.oc-content-item.oc-composition-page .oc-pattern-call-to-action .oc-section-layout,
article.oc-content-item.oc-composition-page .oc-pattern-trust-band .oc-section-layout {
    display: block;
}

article.oc-content-item.oc-composition-page .oc-section h2,
article.oc-content-item.oc-composition-page .oc-section h3 {
    margin: 0;
    color: var(--oc-composition-contrast);
    font-family: var(--oc-composition-display);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.035em;
}

article.oc-content-item.oc-composition-page .oc-section h2 {
    font-size: clamp(2.25rem, 5vw, 5.8rem);
}

article.oc-content-item.oc-composition-page .oc-section h3 {
    font-size: clamp(1.7rem, 3vw, 3.1rem);
}

article.oc-content-item.oc-composition-page .oc-section-text {
    margin: 0.9rem 0 0;
    color: var(--oc-composition-primary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.3;
    text-transform: uppercase;
}

article.oc-content-item.oc-composition-page .oc-section-body {
    max-width: 44rem;
    margin-top: 1.35rem;
    color: var(--oc-composition-contrast);
    font-size: clamp(1rem, 1.25vw, 1.2rem);
    /* Long-form copy must remain readable even if a legacy proposal persisted a
       decorative section-level utility (such as an eyebrow treatment). New plans
       are surface-gated server-side; this is the defensive rendering backstop. */
    letter-spacing: normal !important;
    text-transform: none !important;
    word-spacing: normal !important;
}

article.oc-content-item.oc-composition-page .oc-section-body p { margin: 0 0 1rem; }
article.oc-content-item.oc-composition-page .oc-section-body a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
    padding-bottom: 0.2rem;
    color: var(--oc-composition-primary);
    border-bottom: 1px solid currentColor;
    font-weight: 700;
    text-decoration: none;
}
article.oc-content-item.oc-composition-page .oc-section-body a::after { content: "↗"; }

article.oc-content-item.oc-composition-page .oc-pattern-hero {
    padding: clamp(2.5rem, 8vw, 8rem) clamp(1.25rem, 5vw, 6rem);
    border-top: 1px solid color-mix(in srgb, var(--oc-composition-primary) 55%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--oc-composition-primary) 55%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--oc-composition-surface) 90%, white), var(--oc-composition-surface));
}
article.oc-content-item.oc-composition-page .oc-pattern-hero .oc-section-layout { max-width: 86rem; }
article.oc-content-item.oc-composition-page .oc-pattern-hero h2 { max-width: 15ch; }
article.oc-content-item.oc-composition-page .oc-pattern-hero .oc-section-body { max-width: 38rem; }

article.oc-content-item.oc-composition-page .oc-pattern-editorial .oc-section-layout,
article.oc-content-item.oc-composition-page .oc-pattern-contact-details .oc-section-layout {
    max-width: 50rem;
}

article.oc-content-item.oc-composition-page .oc-pattern-split-media-text {
    padding: clamp(2rem, 5vw, 5rem);
    background: color-mix(in srgb, var(--oc-composition-secondary) 8%, var(--oc-composition-surface));
}
article.oc-content-item.oc-composition-page .oc-pattern-split-media-text .oc-section-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 0.7fr);
    gap: clamp(1.5rem, 6vw, 7rem);
    align-items: start;
}
article.oc-content-item.oc-composition-page .oc-pattern-split-media-text h2 { grid-row: span 2; }
article.oc-content-item.oc-composition-page .oc-pattern-split-media-text .oc-section-body { margin-top: 0; }

article.oc-content-item.oc-composition-page .oc-pattern-feature-grid .oc-section-layout,
article.oc-content-item.oc-composition-page .oc-pattern-collection-grid .oc-section-layout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: end;
}
article.oc-content-item.oc-composition-page .oc-pattern-feature-grid h2,
article.oc-content-item.oc-composition-page .oc-pattern-collection-grid h2 { grid-column: 1 / -1; }
article.oc-content-item.oc-composition-page .oc-pattern-feature-grid .oc-section-body,
article.oc-content-item.oc-composition-page .oc-pattern-collection-grid .oc-section-body {
    grid-column: span 2;
    margin: 0;
}
article.oc-content-item.oc-composition-page .oc-pattern-feature-grid .oc-section-text,
article.oc-content-item.oc-composition-page .oc-pattern-collection-grid .oc-section-text { margin: 0; }

/* A collection section may carry its picker before editorial fields in persisted
   JSON. Grid areas retain the semantic reading order and ensure the nested picker
   spans the full composition canvas rather than becoming one narrow outer column. */
article.oc-content-item.oc-composition-page .oc-pattern-collection-grid .oc-section-layout {
    grid-template-areas:
        "eyebrow eyebrow eyebrow"
        "title title title"
        "body body body"
        "collection collection collection";
    align-items: start;
}
article.oc-content-item.oc-composition-page .oc-pattern-collection-grid .oc-section-layout > .oc-section-text { grid-area: eyebrow; }
article.oc-content-item.oc-composition-page .oc-pattern-collection-grid .oc-section-layout > h2 { grid-area: title; }
article.oc-content-item.oc-composition-page .oc-pattern-collection-grid .oc-section-layout > .oc-section-body {
    grid-area: body;
    max-width: 44rem;
    margin-top: 0;
}
article.oc-content-item.oc-composition-page .oc-pattern-collection-grid .oc-section-layout > .oc-collection {
    grid-area: collection;
    width: 100%;
    margin-top: clamp(1.5rem, 3vw, 3rem);
}
article.oc-content-item.oc-composition-page .oc-collection-card__title {
    margin: 0;
    color: var(--oc-composition-contrast);
    font: 600 clamp(1.15rem, 1.8vw, 1.65rem)/1.12 var(--oc-composition-body);
    letter-spacing: -0.02em;
}
article.oc-content-item.oc-composition-page .oc-collection-card__title a {
    color: inherit;
    text-decoration: none;
}
article.oc-content-item.oc-composition-page .oc-collection-card__title a:hover,
article.oc-content-item.oc-composition-page .oc-collection-card__title a:focus-visible {
    color: var(--oc-composition-primary);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}
article.oc-content-item.oc-composition-page .oc-collection-card__summary,
article.oc-content-item.oc-composition-page .oc-collection-card__html {
    margin: 0;
    color: var(--oc-composition-muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

article.oc-content-item.oc-composition-page .oc-pattern-trust-band {
    padding: clamp(1.5rem, 4vw, 3rem);
    background: var(--oc-composition-contrast);
    color: var(--oc-composition-surface);
}
article.oc-content-item.oc-composition-page .oc-pattern-trust-band h2,
article.oc-content-item.oc-composition-page .oc-pattern-trust-band h3,
article.oc-content-item.oc-composition-page .oc-pattern-trust-band .oc-section-body { color: var(--oc-composition-surface); }
article.oc-content-item.oc-composition-page .oc-pattern-trust-band .oc-section-text { color: var(--oc-composition-primary); }

article.oc-content-item.oc-composition-page .oc-pattern-call-to-action {
    padding: clamp(2.25rem, 6vw, 6rem);
    background: var(--oc-composition-primary);
    color: var(--oc-composition-surface);
    text-align: center;
}
article.oc-content-item.oc-composition-page .oc-pattern-call-to-action .oc-section-layout { max-width: 52rem; }
article.oc-content-item.oc-composition-page .oc-pattern-call-to-action h2,
article.oc-content-item.oc-composition-page .oc-pattern-call-to-action h3,
article.oc-content-item.oc-composition-page .oc-pattern-call-to-action .oc-section-body,
article.oc-content-item.oc-composition-page .oc-pattern-call-to-action .oc-section-text { color: var(--oc-composition-surface); }
article.oc-content-item.oc-composition-page .oc-pattern-call-to-action .oc-section-body { margin-right: auto; margin-left: auto; }
article.oc-content-item.oc-composition-page .oc-pattern-call-to-action .oc-section-body a {
    padding: 0.75rem 1rem;
    color: var(--oc-composition-primary);
    background: var(--oc-composition-surface);
    border: 0;
}

article.oc-content-item.oc-composition-page .oc-container-narrow { max-width: 42rem; }
article.oc-content-item.oc-composition-page .oc-container-standard { max-width: 64rem; }
article.oc-content-item.oc-composition-page .oc-container-wide { max-width: 86rem; }
article.oc-content-item.oc-composition-page .oc-density-compact { gap: 0.5rem; }
article.oc-content-item.oc-composition-page .oc-density-regular { gap: 1.25rem; }
article.oc-content-item.oc-composition-page .oc-density-generous { gap: 2.5rem; }
article.oc-content-item.oc-composition-page .oc-align-center { text-align: center; }
article.oc-content-item.oc-composition-page .oc-align-center .oc-section-body { margin-right: auto; margin-left: auto; }
article.oc-content-item.oc-composition-page .oc-align-end { text-align: right; }
article.oc-content-item.oc-composition-page .oc-align-end .oc-section-body { margin-left: auto; }

@media (max-width: 720px) {
    article.oc-content-item.oc-composition-page { padding: 1rem; }
    article.oc-content-item.oc-composition-page .oc-pattern-hero,
    article.oc-content-item.oc-composition-page .oc-pattern-split-media-text,
    article.oc-content-item.oc-composition-page .oc-pattern-call-to-action { padding: 2rem 1.25rem; }
    article.oc-content-item.oc-composition-page .oc-pattern-split-media-text .oc-section-layout,
    article.oc-content-item.oc-composition-page .oc-pattern-feature-grid .oc-section-layout,
    article.oc-content-item.oc-composition-page .oc-pattern-collection-grid .oc-section-layout { display: block; }
    article.oc-content-item.oc-composition-page .oc-pattern-split-media-text h2,
    article.oc-content-item.oc-composition-page .oc-pattern-feature-grid h2,
    article.oc-content-item.oc-composition-page .oc-pattern-collection-grid h2 { margin-bottom: 1.5rem; }
    article.oc-content-item.oc-composition-page .oc-pattern-split-media-text .oc-section-body,
    article.oc-content-item.oc-composition-page .oc-pattern-feature-grid .oc-section-body,
    article.oc-content-item.oc-composition-page .oc-pattern-collection-grid .oc-section-body { margin-top: 1rem; }
}