/* ---------------------------------------------------------------------------
   Custom block columns — per-column cards, icons, headings, links, dividers,
   column widths and vertical alignment for the 2 / 3 column custom blocks.

   Emitted once per page by render_custom_layout_block() the first time a block
   uses any of these options, so pages without them load nothing extra. Values
   arrive as CSS custom properties set inline on the grid (block-wide) and on a
   column (per-column override). A property whose variable is unset computes to
   its initial/inherited value, so a declaration below is harmless until the
   editor fills the matching field — except border-width, whose initial value
   is "medium", hence the explicit 0 fallback.
--------------------------------------------------------------------------- */

/* Cards ------------------------------------------------------------------- */
.custom-block-section .custom-block-grid.custom-block-grid--cards .custom-block-col {
    box-sizing: border-box;
    background: var(--cb-col-bg);
    padding: var(--cb-col-padding);
    border-width: var(--cb-col-border-width, 0);
    border-style: var(--cb-col-border-style, solid);
    border-color: var(--cb-col-border-color, currentColor);
    border-radius: var(--cb-col-radius);
    box-shadow: var(--cb-col-shadow);
    text-align: var(--cb-col-text-align);
    color: var(--cb-col-text-color);
}

.custom-block-section .custom-block-grid--hover-lift .custom-block-col,
.custom-block-section .custom-block-grid--hover-shadow .custom-block-col {
    transition: transform .2s ease, box-shadow .2s ease;
}
.custom-block-section .custom-block-grid--hover-lift .custom-block-col:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(15, 23, 42, .14);
}
.custom-block-section .custom-block-grid--hover-shadow .custom-block-col:hover {
    box-shadow: 0 14px 32px rgba(15, 23, 42, .14);
}

/* Vertical alignment (equal-height cards use "stretch") ------------------- */
.custom-block-section .custom-block-grid.custom-block-grid--valign-start   { align-items: start; }
.custom-block-section .custom-block-grid.custom-block-grid--valign-center  { align-items: center; }
.custom-block-section .custom-block-grid.custom-block-grid--valign-end     { align-items: end; }
.custom-block-section .custom-block-grid.custom-block-grid--valign-stretch { align-items: stretch; }

/* Column widths — desktop only; the theme's own breakpoints still collapse
   the grid to two columns and then one on smaller screens. ------------------ */
@media (min-width: 641px) {
    .custom-block-section .custom-block-grid--2.custom-block-grid--widths {
        grid-template-columns: var(--cb-cols);
    }
}
@media (min-width: 901px) {
    .custom-block-section .custom-block-grid--3.custom-block-grid--widths {
        grid-template-columns: var(--cb-cols);
    }
}

/* Dividers — a rule drawn in the middle of the gap between columns -------- */
.custom-block-section .custom-block-grid--dividers .custom-block-col {
    position: relative;
}
.custom-block-section .custom-block-grid--dividers .custom-block-col + .custom-block-col::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--cb-gap, 2rem) / -2);
    border-left: 1px solid var(--cb-divider-color, rgba(0, 0, 0, .12));
    pointer-events: none;
}
@media (max-width: 900px) {
    .custom-block-section .custom-block-grid--3.custom-block-grid--dividers .custom-block-col::before { display: none; }
}
@media (max-width: 640px) {
    .custom-block-section .custom-block-grid--dividers .custom-block-col::before { display: none; }
}

/* Icons, headings and links ------------------------------------------------ */
.custom-block-section .custom-block-col--rich .custom-block-col-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 1rem;
    line-height: 0;
    color: var(--cb-icon-color);
}
.custom-block-section .custom-block-col--rich .custom-block-col-icon svg,
.custom-block-section .custom-block-col--rich .custom-block-col-icon img {
    display: block;
    width: var(--cb-icon-size, 48px);
    height: var(--cb-icon-size, 48px);
}
.custom-block-section .custom-block-col--rich .custom-block-col-icon img { object-fit: contain; }

.custom-block-section .custom-block-grid--icon-circle .custom-block-col-icon,
.custom-block-section .custom-block-grid--icon-rounded .custom-block-col-icon,
.custom-block-section .custom-block-grid--icon-square .custom-block-col-icon {
    background: var(--cb-icon-bg, rgba(0, 0, 0, .06));
    padding: calc(var(--cb-icon-size, 48px) * .33);
}
.custom-block-section .custom-block-grid--icon-circle  .custom-block-col-icon { border-radius: 50%; }
.custom-block-section .custom-block-grid--icon-rounded .custom-block-col-icon { border-radius: 22%; }

.custom-block-section .custom-block-grid--icon-left .custom-block-col--rich {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.custom-block-section .custom-block-grid--icon-left .custom-block-col--rich .custom-block-col-icon { margin: 0; flex: 0 0 auto; }
.custom-block-section .custom-block-grid--icon-left .custom-block-col--rich .custom-block-col-body { flex: 1 1 auto; min-width: 0; }

.custom-block-section .custom-block-col-heading {
    margin: 0 0 .6rem;
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--cb-heading-color);
}
.custom-block-section .custom-block-col-body > :first-child,
.custom-block-section .custom-block-col-content > :first-child { margin-top: 0; }
.custom-block-section .custom-block-col-body > :last-child,
.custom-block-section .custom-block-col-content > :last-child { margin-bottom: 0; }

.custom-block-section .custom-block-col-link {
    display: inline-block;
    margin-top: 1rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--cb-icon-color);
}
.custom-block-section .custom-block-col-link::after { content: '\2192'; margin-left: .35em; }
.custom-block-section .custom-block-col-link:hover { text-decoration: underline; }