/* ===========================================================================
   Block: dev-pricing — dynamic tariff grid
   Cells are placed with CSS variables set inline by the renderer:
     --dc  desktop column      --dr  desktop row (1-8, shared across cards)
     --mr  (legacy mobile row — no longer used for layout)
   Rows 1-8 per card keep name/features/timeline/desc/strike/price/currency/CTA
   aligned across cards in the same row.

   Mobile + tablet (< 1024px): cards sit in ONE row and scroll horizontally
   (swipe) with scroll-snap. Desktop (>= 1024px): normal fluid N-column grid.
   =========================================================================== */

.voctos-dev-pricing .dp-grid {
    display: grid;
    /* mobile/tablet: fixed-width columns → the row overflows → horizontal swipe */
    grid-template-columns: repeat(var(--cols, 3), clamp(272px, 80vw, 350px));
    grid-auto-rows: auto;
    column-gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 4px;
    padding-bottom: 10px;   /* breathing room for the scrollbar */
    scrollbar-width: thin;
}

/* cells + background use the column layout at every width */
.voctos-dev-pricing .dp-cell {
    grid-column: var(--dc);
    grid-row: var(--dr);
    min-width: 0;
}
.voctos-dev-pricing .dp-bg {
    grid-column: var(--dc);
    grid-row: 1 / 9;
    scroll-snap-align: start;   /* one snap point per card */
}
/* legacy mobile spacer no longer used */
.voctos-dev-pricing .dp-mgap { display: none; }

/* slim, subtle scrollbar on the swipe row */
.voctos-dev-pricing .dp-grid::-webkit-scrollbar { height: 6px; }
.voctos-dev-pricing .dp-grid::-webkit-scrollbar-thumb {
    background: rgba(13, 23, 45, .22);
    border-radius: 9999px;
}

/* desktop: N equal columns, no horizontal scroll */
@media (min-width: 1024px) {
    .voctos-dev-pricing .dp-grid {
        grid-template-columns: repeat(var(--cols, 3), 1fr);
        column-gap: 36px;
        overflow: visible;
        scroll-snap-type: none;
        padding-bottom: 0;
    }
    /* 2-card rows: cap width and center */
    .voctos-dev-pricing .dp-grid--2col {
        max-width: 1172px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Old (strikethrough) price — thick red line (same weight as before) through
   the middle of the text only (sized to content, not the full cell width). */
.voctos-dev-pricing .dp-strike {
    display: inline-block;
    position: relative;
    line-height: 1.2;
}
.voctos-dev-pricing .dp-strike::before {
    content: '';
    position: absolute;
    left: -5px;
    right: -5px;
    top: 50%;
    height: 4px;
    background: #EF4444;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Features list */
.voctos-dev-pricing .dp-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* 2-col: column-count fills left column first, then right */
.voctos-dev-pricing .dp-features--2col {
    column-count: 2;
    column-gap: 6px;
    display: block;
}
.voctos-dev-pricing .dp-features--2col li {
    break-inside: avoid;
    margin-bottom: 12px;
}