/* ===============================
   ✅ Base layout styles
   =============================== */

.min-h-screen {
    font-family: "Anek Bangla", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    min-height: 100vh;
}

.builder-canvas {
    min-height: 60vh;
}

.section-box {
    margin-bottom: 1.5rem;
    border: none !important;
    box-shadow: none !important;
    background: transparent;
}

.row-grid {
    display: grid;
    gap: .75rem;
}

.row-flex {
    display: flex;
    gap: .75rem;
}

.column-box {
    min-height: 40px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border: none !important;
    background: transparent;
}

.column-inner {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.column-inner * {
    max-width: 100%;
    box-sizing: border-box;
}


/* Visitor দের জন্য builder-only UI hide */

[data-builder-ui="1"] {
    display: none !important;
}


/* ===============================
   ✅ DESKTOP: grid from data-cols
   =============================== */

.row-grid[data-cols="1"] {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.row-grid[data-cols="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.row-grid[data-cols="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.row-grid[data-cols="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.row-grid[data-cols="5"] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.row-grid[data-cols="6"] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}


/* ===============================
   ✅ Images (your current sizing)
   =============================== */

.builder-canvas .column-inner img {
    display: block;
    height: auto !important;
    max-width: 80% !important;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}


/* ===============================
   ✅ Slider style
   =============================== */

.builder-slider {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: #020617;
}

.builder-slider-track {
    display: flex;
    transition: transform 0.4s ease;
}

.builder-slide {
    min-width: 100%;
    flex-shrink: 0;
}

.builder-slide img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.builder-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: none;
    background: rgba(15, 23, 42, 0.9);
    color: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.8);
    z-index: 4;
}

.builder-slider-prev {
    left: 8px;
}

.builder-slider-next {
    right: 8px;
}


/* ===============================
   ✅ TYPOGRAPHY
   =============================== */

.builder-canvas .column-inner {
    font-size: 1em;
    line-height: 1.7;
}

.builder-canvas .column-inner h1 {
    font-size: 1.8em;
    line-height: 1.25;
}

.builder-canvas .column-inner h2 {
    font-size: 1.6em;
    line-height: 1.3;
}

.builder-canvas .column-inner h3 {
    font-size: 1.4em;
    line-height: 1.35;
}


/* ===============================
   ✅ LEGACY <font size=""> (Desktop)
   =============================== */

.builder-canvas .column-inner font[size="7"] {
    font-size: 48px;
}

.builder-canvas .column-inner font[size="6"] {
    font-size: 40px;
}

.builder-canvas .column-inner font[size="5"] {
    font-size: 28px;
}

.builder-canvas .column-inner font[size="4"] {
    font-size: 20px;
}

.builder-canvas .column-inner font[size="3"] {
    font-size: 16px;
}

@media (max-width: 768px) {
    .row-flex {
        flex-direction: column;
    }
    .row-grid[data-cols="1"],
    .row-grid[data-cols="2"],
    .row-grid[data-cols="3"] {
        grid-template-columns: 1fr !important;
    }
    .row-grid[data-cols="4"],
    .row-grid[data-cols="5"],
    .row-grid[data-cols="6"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    /* image on mobile (your requirement) */
    .builder-canvas .column-inner img {
        width: 50% !important;
        max-width: 50% !important;
        border-radius: 12px;
    }
    /* text tighten */
    .builder-canvas .column-inner,
    .builder-canvas .column-inner * {
        line-height: 1.5 !important;
    }
    /* Font tag downscale */
    .builder-canvas .column-inner font[size="7"] {
        font-size: 28px !important;
    }
    .builder-canvas .column-inner font[size="6"] {
        font-size: 24px !important;
    }
    .builder-canvas .column-inner font[size="5"] {
        font-size: 18px !important;
    }
    .builder-canvas .column-inner font[size="4"] {
        font-size: 16px !important;
    }
    .builder-canvas .column-inner font[size="3"] {
        font-size: 14px !important;
    }
    /* font-size keywords */
    .builder-canvas .column-inner *[style*="font-size: xxx-large"],
    .builder-canvas .column-inner *[style*="font-size:xxx-large"] {
        font-size: 28px !important;
    }
    .builder-canvas .column-inner *[style*="font-size: xx-large"],
    .builder-canvas .column-inner *[style*="font-size:xx-large"] {
        font-size: 24px !important;
    }
    .builder-canvas .column-inner *[style*="font-size: x-large"],
    .builder-canvas .column-inner *[style*="font-size:x-large"] {
        font-size: 20px !important;
    }
    .builder-canvas .column-inner *[style*="font-size: large"],
    .builder-canvas .column-inner *[style*="font-size:large"] {
        font-size: 18px !important;
    }
    .builder-canvas .column-inner *[style*="font-size: medium"],
    .builder-canvas .column-inner *[style*="font-size:medium"] {
        font-size: 16px !important;
    }
    .builder-canvas .column-inner *[style*="font-size: small"],
    .builder-canvas .column-inner *[style*="font-size:small"] {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    .row-grid {
        grid-template-columns: 1fr !important;
    }
    .builder-canvas .column-inner,
    .builder-canvas .column-inner * {
        line-height: 1.45 !important;
    }
    .builder-canvas .column-inner font[size="7"] {
        font-size: 25px !important;
    }
    .builder-canvas .column-inner font[size="6"] {
        font-size: 22px !important;
    }
    .builder-canvas .column-inner font[size="5"] {
        font-size: 17px !important;
    }
    .builder-canvas .column-inner font[size="4"] {
        font-size: 15px !important;
    }
    .builder-canvas .column-inner font[size="3"] {
        font-size: 13px !important;
    }
    .builder-canvas img,
    .builder-canvas iframe,
    .builder-canvas video {
        border-radius: 10px;
    }
}