/* ============================================================
   Comparison Table (Dynamic) — layout

   Column count is driven by the data-columns attribute set on
   .orbisk-ctd-header and .orbisk-ctd-body by the table root (PHP:
   ComparisonTableDynamic.php, canvas: comparison-table-dynamic/index.jsx) —
   the root reliably knows its own columnCount directly. Each row always
   renders all 4 of its own cell slots regardless (see
   ComparisonTableDynamicRow.php) — these attribute selectors are what
   decide which of those 4 actually show, rather than the row trying to read
   its parent's real column count itself.

   Column background colour uses the same root-sets-it-once approach, via
   --orbisk-ctd-col-N-bg custom properties (see the "column background
   colour" section below) instead of data-attribute selectors, since colour
   is an arbitrary value rather than one of a handful of known states.
   ============================================================ */

/* Divi's own core CSS makes every module with class .et_flex_module (which
   this module has, alongside .orbisk_comparison_table_dynamic) a
   flex-direction:column flexbox with row-gap: var(--vertical-gap) —
   Divi's theme-wide module spacing — applied automatically between its
   direct children, i.e. between .orbisk-ctd-header and .orbisk-ctd-body
   here. That's the actual source of the visible gap that broke a coloured
   column's background into two disconnected blocks — confirmed directly in
   Divi's compiled CSS, not a row/cell margin issue (zeroing those did
   nothing because the gap was never coming from them). */
.orbisk_comparison_table_dynamic.et_flex_module {
    row-gap: 0 !important;
}

.orbisk_comparison_table_dynamic .orbisk-ctd-header,
.orbisk_comparison_table_dynamic .orbisk-ctd-body {
    width: 960px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* align-items must NOT be "center" here — that overrides CSS Grid's default
   "stretch", so a column whose cell has less content than its neighbours
   (e.g. a plain "-" next to a column with a CTA button, which makes that
   row taller) would get vertically centered inside the taller row instead
   of filling it, leaving unstyled white space above/below that shorter
   column's own coloured box. Leaving align-items unset (stretch) makes
   every column's box always fill the full row height; text/icon content
   inside each box still centers via the separate inner flex rule below. */
.orbisk_comparison_table_dynamic .orbisk-ctd-header,
.orbisk_comparison_table_dynamic_row .orbisk-ctd-row {
    display: grid;
    column-gap: 10px;
}

.orbisk_comparison_table_dynamic .orbisk-ctd-header[data-columns="1"] { grid-template-columns: 1fr 1fr; }
.orbisk_comparison_table_dynamic .orbisk-ctd-header[data-columns="2"] { grid-template-columns: 1fr 1fr 1fr; }
.orbisk_comparison_table_dynamic .orbisk-ctd-header[data-columns="3"] { grid-template-columns: 1fr 1fr 1fr 1fr; }
.orbisk_comparison_table_dynamic .orbisk-ctd-header[data-columns="4"] { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }

.orbisk-ctd-body[data-columns="1"] .orbisk-ctd-row { grid-template-columns: 1fr 1fr; }
.orbisk-ctd-body[data-columns="2"] .orbisk-ctd-row { grid-template-columns: 1fr 1fr 1fr; }
.orbisk-ctd-body[data-columns="3"] .orbisk-ctd-row { grid-template-columns: 1fr 1fr 1fr 1fr; }
.orbisk-ctd-body[data-columns="4"] .orbisk-ctd-row { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }

/* ============================================================
   Comparison Table (Dynamic) — header row
   ============================================================ */

.orbisk_comparison_table_dynamic .orbisk-ctd-col-label,
.orbisk_comparison_table_dynamic .orbisk-ctd-col {
    padding: 24px 0;
}

.orbisk_comparison_table_dynamic .orbisk-ctd-col,
.orbisk_comparison_table_dynamic_row .orbisk-ctd-cell:not(.orbisk-ctd-cell-label) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.orbisk_comparison_table_dynamic .orbisk-ctd-col-header {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: #666666;
}

/* ============================================================
   Comparison Table (Dynamic) — column background colour

   --orbisk-ctd-col-N-bg is set once by the table root (either on
   .orbisk-ctd-header directly, or on .orbisk-ctd-body and inherited down
   through every row's .orbisk-ctd-cell-N) — no cross-module read needed.
   Padding moved from .orbisk-ctd-header/.orbisk-ctd-row onto the individual
   col/cell boxes above and below (ComparisonTableDynamicRow.php's cells)
   specifically so a coloured column's background fills that space too,
   instead of leaving a plain gap between the header and each row.

   Rounded corners only apply at the very top (header) and very bottom
   (last row) of a coloured column, not on every individual row's box —
   otherwise a coloured column would look like a stack of separately
   rounded pills instead of one continuous stripe.
   ============================================================ */

.orbisk-ctd-col-1, .orbisk-ctd-cell-1 { background-color: var(--orbisk-ctd-col-1-bg, transparent); }
.orbisk-ctd-col-2, .orbisk-ctd-cell-2 { background-color: var(--orbisk-ctd-col-2-bg, transparent); }
.orbisk-ctd-col-3, .orbisk-ctd-cell-3 { background-color: var(--orbisk-ctd-col-3-bg, transparent); }
.orbisk-ctd-col-4, .orbisk-ctd-cell-4 { background-color: var(--orbisk-ctd-col-4-bg, transparent); }

.orbisk_comparison_table_dynamic .orbisk-ctd-col {
    border-radius: 8px 8px 0 0;
}

.orbisk-ctd-body > .orbisk_comparison_table_dynamic_row:last-child .orbisk-ctd-cell-1,
.orbisk-ctd-body > .orbisk_comparison_table_dynamic_row:last-child .orbisk-ctd-cell-2,
.orbisk-ctd-body > .orbisk_comparison_table_dynamic_row:last-child .orbisk-ctd-cell-3,
.orbisk-ctd-body > .orbisk_comparison_table_dynamic_row:last-child .orbisk-ctd-cell-4 {
    border-radius: 0 0 8px 8px;
}

/* ============================================================
   Comparison Table (Dynamic) Row
   ============================================================ */

.orbisk_comparison_table_dynamic_row {
    /* Both directions, not just bottom — Divi's default .et_pb_module
       spacing includes top margin too, which otherwise leaves a visible
       gap between the header and the first row (or between rows), making
       a coloured column's background look "disconnected" instead of one
       continuous stripe. */
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    width: 100%;
}

.orbisk_comparison_table_dynamic_row .orbisk-ctd-row {
    border-bottom: 1px solid #66666633;
}

/* No divider under the last row (or the only row, for which :last-child
   also trivially matches). */
.orbisk-ctd-body > .orbisk_comparison_table_dynamic_row:last-child .orbisk-ctd-row {
    border-bottom: none;
}

/* Padding lives on the cell, not .orbisk-ctd-row itself, so a coloured
   column's background (above) fills the full row height with no gap. */
.orbisk_comparison_table_dynamic_row .orbisk-ctd-cell {
    padding: 20px 0;
}

/* Per-column CTA button — plain <a>, direct text+URL attrs on the row
   (ComparisonTableDynamicRow.php), not a nested module. Same visual style as
   the nav menu's CTA button (.orbisk-nav-cta in nav-menu.css) for
   consistency across the site; colours are per-cell custom properties set
   directly on the button itself (ComparisonTableDynamicRow.php), same
   --orbisk-ctd-cta-* var technique as nav-menu's --orbisk-nav-cta-* vars. */
.orbisk-ctd-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    background-color: var(--orbisk-ctd-cta-bg, #B5E37C);
    color: var(--orbisk-ctd-cta-text, #13382A);
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 150%;
    padding: 8px 16px;
    border-radius: 12px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.orbisk-ctd-cta-button:hover {
    background-color: var(--orbisk-ctd-cta-hover-bg, #BDE689);
    color: var(--orbisk-ctd-cta-hover-text, #13382A);
}

/* The label cell doesn't get the inner flex-centering rule the data
   cells/columns get above (it's excluded via :not(.orbisk-ctd-cell-label)),
   so now that the outer grid uses stretch instead of center (see above),
   it needs its own vertical centering or "Feature name" would sit at the
   top of the row instead of centered. */
.orbisk_comparison_table_dynamic_row .orbisk-ctd-cell-label {
    display: flex;
    align-items: center;
}

.orbisk_comparison_table_dynamic_row .orbisk-ctd-cell-label,
.orbisk_comparison_table_dynamic_row .orbisk-ctd-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #13382A;
    padding-right: 24px;
}

.orbisk_comparison_table_dynamic_row .orbisk-ctd-cell-content {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: #13382A;
}

/* ============================================================
   Comparison Table (Dynamic) — check icon (matches comparison-table.css)
   ============================================================ */

.orbisk-ctd-check {
    display: inline-flex;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #B5E37C;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8l3.5 3.5L13 5' stroke='%23004737' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: center;
}

/* ============================================================
   Comparison Table (Dynamic) — dash icon
   ============================================================ */

.orbisk-ctd-dash {
    display: inline-block;
    width: 18px;
    height: 1.5px;
    background-color: #13382A;
    flex-shrink: 0;
}

/* ============================================================
   Responsive — mobile
   ============================================================ */

/* Below 1024px, the table stops reflowing its columns and instead scrolls
   horizontally as one unit, at its full (desktop-proportioned) width.

   Why: header and each row are separate CSS Grid instances (a row lives in
   its own module, sibling to the header, not nested inside one shared
   grid) that must end up pixel-identical for the columns to line up. The
   previous approach gave each one its own percentage-based
   grid-template-columns override at the mobile breakpoint — two
   independently-computed grids that are supposed to match exactly are
   inherently fragile, and any tiny difference between them (subpixel
   rounding, differing available width) showed up as columns visibly
   drifting out of alignment between the header and the rows, especially
   once a background colour made the misalignment obvious.

   Scrolling at a single fixed set of proportions removes the second
   computation entirely — header and every row always use the exact same
   grid-template-columns as desktop, at every viewport width, so there is
   nothing left to drift apart. overflow-x lives on the module root
   (.orbisk_comparison_table_dynamic) rather than on the header/body
   individually so scrolling one scrolls both together, in sync — they'd
   drift apart on scroll too if each had its own independent scrollbar. */
@media (max-width: 1024px) {
    .orbisk_comparison_table_dynamic {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .orbisk_comparison_table_dynamic .orbisk-ctd-header,
    .orbisk_comparison_table_dynamic .orbisk-ctd-body {
        width: max-content;
        min-width: 700px;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    .orbisk_comparison_table_dynamic_row .orbisk-ctd-cell-label,
    .orbisk_comparison_table_dynamic_row .orbisk-ctd-label,
    .orbisk_comparison_table_dynamic_row .orbisk-ctd-cell-content,
    .orbisk_comparison_table_dynamic .orbisk-ctd-col-header {
        font-size: 12px;
        font-weight: 400;
    }

    .orbisk_comparison_table_dynamic_row .orbisk-ctd-cell-label {
        padding-right: 12px;
    }
}

/* ============================================================
   Hide cells beyond the table's real column count.

   MUST stay last in this file: it previously sat earlier, and the
   `.orbisk-ctd-cell:not(.orbisk-ctd-cell-label) { display: flex; ... }`
   rule further down had equal specificity and a later source position, so
   it silently won and undid the hiding — cells 3/4 stayed visible even
   after their column header was cleared. !important as a second guard so
   a future rule added anywhere else in this file can't repeat that. Each
   cell's own CTA button is inside the cell div, so hiding the cell already
   hides its button too — no separate CTA rule needed.
   ============================================================ */

.orbisk-ctd-body[data-columns="1"] .orbisk-ctd-cell-2,
.orbisk-ctd-body[data-columns="1"] .orbisk-ctd-cell-3,
.orbisk-ctd-body[data-columns="1"] .orbisk-ctd-cell-4,
.orbisk-ctd-body[data-columns="2"] .orbisk-ctd-cell-3,
.orbisk-ctd-body[data-columns="2"] .orbisk-ctd-cell-4,
.orbisk-ctd-body[data-columns="3"] .orbisk-ctd-cell-4 {
    display: none !important;
}