/**
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade this module to newer
 * versions in the future.
 *
 * @category  Magento Module
 * @package   FutureBit\PageBuilderGrid
 * @copyright 2026 FutureBit Technologies GmbH
 * @license   LICENSE.md
 */

:root,
.futurebit-grid {
    --fb-grid-gap-mobile: 16px;
    --fb-grid-gap-desktop: 24px;
}

/* Base Grid Container */
.futurebit-grid {
    display: grid;
    width: 100%;
    box-sizing: border-box;
    gap: var(--fb-grid-gap-mobile, 16px);
}

@media (min-width: 768px) {
    .futurebit-grid {
        gap: var(--fb-grid-gap-desktop, 24px);
    }
}

/* Explicit data-grid-gap attribute mappings */
.futurebit-grid[data-grid-gap-mobile="0px"] { --fb-grid-gap-mobile: 0px; }
.futurebit-grid[data-grid-gap-mobile="4px"] { --fb-grid-gap-mobile: 4px; }
.futurebit-grid[data-grid-gap-mobile="8px"] { --fb-grid-gap-mobile: 8px; }
.futurebit-grid[data-grid-gap-mobile="12px"] { --fb-grid-gap-mobile: 12px; }
.futurebit-grid[data-grid-gap-mobile="16px"] { --fb-grid-gap-mobile: 16px; }
.futurebit-grid[data-grid-gap-mobile="20px"] { --fb-grid-gap-mobile: 20px; }
.futurebit-grid[data-grid-gap-mobile="24px"] { --fb-grid-gap-mobile: 24px; }
.futurebit-grid[data-grid-gap-mobile="32px"] { --fb-grid-gap-mobile: 32px; }

.futurebit-grid[data-grid-gap-desktop="0px"] { --fb-grid-gap-desktop: 0px; }
.futurebit-grid[data-grid-gap-desktop="8px"] { --fb-grid-gap-desktop: 8px; }
.futurebit-grid[data-grid-gap-desktop="16px"] { --fb-grid-gap-desktop: 16px; }
.futurebit-grid[data-grid-gap-desktop="20px"] { --fb-grid-gap-desktop: 20px; }
.futurebit-grid[data-grid-gap-desktop="24px"] { --fb-grid-gap-desktop: 24px; }
.futurebit-grid[data-grid-gap-desktop="32px"] { --fb-grid-gap-desktop: 32px; }
.futurebit-grid[data-grid-gap-desktop="40px"] { --fb-grid-gap-desktop: 40px; }
.futurebit-grid[data-grid-gap-desktop="48px"] { --fb-grid-gap-desktop: 48px; }
.futurebit-grid[data-grid-gap-desktop="64px"] { --fb-grid-gap-desktop: 64px; }

/* Grid Columns: Mobile (< 768px) */
.futurebit-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.futurebit-grid[data-grid-cols-mobile="1"] { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.futurebit-grid[data-grid-cols-mobile="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.futurebit-grid[data-grid-cols-mobile="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.futurebit-grid[data-grid-cols-mobile="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.futurebit-grid[data-grid-cols-mobile="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Grid Columns: Tablet (768px – 1023px) */
@media (min-width: 768px) {
    .futurebit-grid[data-grid-cols-tablet="1"] { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .futurebit-grid[data-grid-cols-tablet="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .futurebit-grid[data-grid-cols-tablet="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .futurebit-grid[data-grid-cols-tablet="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .futurebit-grid[data-grid-cols-tablet="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Grid Columns: Desktop (1024px – 1279px) */
@media (min-width: 1024px) {
    .futurebit-grid[data-grid-cols-desktop="1"] { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .futurebit-grid[data-grid-cols-desktop="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .futurebit-grid[data-grid-cols-desktop="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .futurebit-grid[data-grid-cols-desktop="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .futurebit-grid[data-grid-cols-desktop="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .futurebit-grid[data-grid-cols-desktop="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .futurebit-grid[data-grid-cols-desktop="8"] { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .futurebit-grid[data-grid-cols-desktop="12"] { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* Grid Columns: Large Desktop (>= 1280px) */
@media (min-width: 1280px) {
    .futurebit-grid[data-grid-cols-large="1"] { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .futurebit-grid[data-grid-cols-large="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .futurebit-grid[data-grid-cols-large="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .futurebit-grid[data-grid-cols-large="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .futurebit-grid[data-grid-cols-large="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .futurebit-grid[data-grid-cols-large="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .futurebit-grid[data-grid-cols-large="8"] { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .futurebit-grid[data-grid-cols-large="12"] { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* Align items */
.futurebit-grid[data-align-items="stretch"] { align-items: stretch; }
.futurebit-grid[data-align-items="start"] { align-items: start; }
.futurebit-grid[data-align-items="center"] { align-items: center; }
.futurebit-grid[data-align-items="end"] { align-items: end; }

/* Grid Column Base */
.futurebit-grid-column {
    min-width: 0;
    box-sizing: border-box;
}

/* Column Spans: Mobile */
.futurebit-grid-column[data-col-span-mobile="1"] { grid-column: span 1 / span 1; }
.futurebit-grid-column[data-col-span-mobile="2"] { grid-column: span 2 / span 2; }
.futurebit-grid-column[data-col-span-mobile="3"] { grid-column: span 3 / span 3; }
.futurebit-grid-column[data-col-span-mobile="full"] { grid-column: 1 / -1; }

/* Column Spans: Tablet */
@media (min-width: 768px) {
    .futurebit-grid-column[data-col-span-tablet="1"] { grid-column: span 1 / span 1; }
    .futurebit-grid-column[data-col-span-tablet="2"] { grid-column: span 2 / span 2; }
    .futurebit-grid-column[data-col-span-tablet="3"] { grid-column: span 3 / span 3; }
    .futurebit-grid-column[data-col-span-tablet="4"] { grid-column: span 4 / span 4; }
    .futurebit-grid-column[data-col-span-tablet="full"] { grid-column: 1 / -1; }
}

/* Column Spans: Desktop */
@media (min-width: 1024px) {
    .futurebit-grid-column[data-col-span-desktop="1"] { grid-column: span 1 / span 1; }
    .futurebit-grid-column[data-col-span-desktop="2"] { grid-column: span 2 / span 2; }
    .futurebit-grid-column[data-col-span-desktop="3"] { grid-column: span 3 / span 3; }
    .futurebit-grid-column[data-col-span-desktop="4"] { grid-column: span 4 / span 4; }
    .futurebit-grid-column[data-col-span-desktop="6"] { grid-column: span 6 / span 6; }
    .futurebit-grid-column[data-col-span-desktop="full"] { grid-column: 1 / -1; }
}

/* Column Align Self */
.futurebit-grid-column[data-align-self="start"] { align-self: start; }
.futurebit-grid-column[data-align-self="center"] { align-self: center; }
.futurebit-grid-column[data-align-self="end"] { align-self: end; }
.futurebit-grid-column[data-align-self="stretch"] { align-self: stretch; }