/* ==========================================================================
   Column dividers — Grid + Showcase modules
   Self-contained, plain CSS. No build step (yarn / bud / webpack) required.
   Auto-enqueued by:
     • partials/content-mb-grid.blade.php
     • partials/content-mb-showcase.blade.php
   Drop location:  wp-content/themes/vital/public/css/mb-dividers.css
   --------------------------------------------------------------------------
   The colour for each divider is passed in from the editor as a CSS custom
   property, so the same rules work for green, gold, or any other choice.
   ========================================================================== */

/* --------------------------------------------------------------------------
   GRID — vertical hairline down the centre gap, 2-column layouts only.

   Drawn as a background gradient on the .cg-grid container, so it needs no
   extra markup and sits cleanly in the gap between the two columns. The
   modifier class (.mb-grid--col-divider) and the --cg-divider-color custom
   property are only output by the partial when the grid is set to 2 columns
   AND the divider is switched on.

   It is only shown from the `lg` breakpoint (1024px) upward — i.e. exactly
   where the 2-column layout applies. Below that the grid stacks to a single
   column, so no divider is drawn.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .mb-grid--col-divider .cg-grid {
        background-image: linear-gradient(
            to right,
            transparent              calc(50% - 0.5px),
            var(--cg-divider-color, #214B47) calc(50% - 0.5px),
            var(--cg-divider-color, #214B47) calc(50% + 0.5px),
            transparent              calc(50% + 0.5px)
        );
        background-repeat: no-repeat;
    }
}

/* --------------------------------------------------------------------------
   SHOWCASE (icons) — short vertical accent line between columns.

   A real element is inserted between each pair of icon columns by the
   component. Hidden while the icons are stacked (mobile), shown as a short,
   vertically-centred line once they sit in a row (md / 768px upward).
   -------------------------------------------------------------------------- */
.showcase__divider {
    display: none;
}

@media (min-width: 768px) {
    .showcase__icon-section .showcase__divider {
        display: block;
        flex: 0 0 auto;
        align-self: center;
        width: 1px;
        height: 64px;
        margin: 0 12px;
        background-color: var(--showcase-divider-color, #214B47);
    }
}