/* Builder Sections ---------------------------------------------------------
 *
 * How a page's sections render inside a builder canvas - the editor's own
 * frame and the preview page both. Kept out of demo.html because two routes
 * need it and a copy in each is a copy that drifts.
 *
 * B2B.css sizes these sections against the window. A canvas is not the
 * window: the editor's frame is whatever width is being edited, and its
 * media queries would key off the browser instead. Everything here is a
 * container query on the frame, so a section answers to the space it is
 * actually given. The live stylesheet is untouched.
 * ------------------------------------------------------------------------ */

/* The canvas. container-type is the whole point of it - it is what the
   queries below resolve against. */
.builder-preview-frame {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    max-width: 100%;
    margin: 0 auto;
    container-type: inline-size;
    container-name: preview;
    transition: width .3s ease, max-width .3s ease;
}

/* The preview page hands the canvas the full width of the window, where it
   is the page rather than something sitting on one - so it drops the card
   the editor gives it. */
.builder-preview-frame.is-page {
    border-radius: 0;
    box-shadow: none;
}

/* Responsive preview -------------------------------------------------
   B2B.css sizes these sections for the live page: fixed pixel widths
   (.dash_cat_blk img is 390px) and fixed heights (.dash_main_img_blk is
   700px), with all the reflow living in viewport media queries. Those
   queries key off the browser window, which stays desktop-width no
   matter how narrow the frame gets - so they never fire in here.

   These overrides are scoped to .builder-preview-frame and driven by
   container queries, so the sections respond to the frame instead. The
   live stylesheet is untouched. */
/* Banner */
.builder-preview-frame .dash_main_img_blk {
    height: auto;
    aspect-ratio: 21 / 9;
    margin-top: 0;
}
.builder-preview-frame .dash_main_img_blk img,
.builder-preview-frame .dash_main_img_blk video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.builder-preview-frame .dash_main_img_txt {
    font-size: clamp(20px, 6.4cqw, 90px);
    line-height: 1.05;
}
.builder-preview-frame .dash_main_img_ttl,
.builder-preview-frame .dash_main_img_ttl_2,
.builder-preview-frame .dash_main_img_ttl_3,
.builder-preview-frame .dash_main_img_ttl_4 {
    font-size: clamp(16px, 5cqw, 70px);
    line-height: 1.1;
}
.builder-preview-frame .dash_main_img_desc {
    width: min(62%, 540px);
    font-size: clamp(10px, 1.8cqw, 25px);
    line-height: 1.35;
}
.builder-preview-frame .dash_main_img_btn button,
.builder-preview-frame .dash_main_img_btn_2 button,
.builder-preview-frame .dash_main_img_btn_3 button,
.builder-preview-frame .dash_main_img_btn_4 button,
.builder-preview-frame .dash_main_img_btn_5 button,
.builder-preview-frame .dash_main_img_btn_6 button,
.builder-preview-frame .dash_main_img_btn_7 button {
    font-size: clamp(9px, 1.15cqw, 16px);
    padding: clamp(5px, .8cqw, 11px) clamp(12px, 2.4cqw, 33px);
}

/* Category / catalog tiles.
   Grid with auto-fit rather than flex: the column count follows the
   space a tile asks for, so the row fills up and then wraps.

   That width is --tile-w, the same property B2B.css puts on the tile
   image, so the number set in the panel means the same thing here as it
   does on the page. Untouched, each falls back to its own default. */
.builder-preview-frame .dash_cat_container {
    margin-top: clamp(28px, 5cqw, 90px);
}
.builder-preview-frame .dash_cat_ttl {
    font-size: clamp(17px, 3.2cqw, 40px);
    margin-bottom: clamp(14px, 2.4cqw, 30px);
}
.builder-preview-frame .dash_cat_list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--tile-w, 190px), 100%), 1fr));
    gap: clamp(10px, 2cqw, 26px);
    padding: 0 clamp(12px, 3cqw, 40px);
    box-sizing: border-box;
}
.builder-preview-frame .dash_cat_blk {
    display: block;
    width: 100%;
    margin: 0;
    min-width: 0;
    align-self: start;
}
.builder-preview-frame .dash_cat_blk img {
    width: 100%;
    display: block;
}

/* Tiles that carry overlay copy are the category cards: square crop
   keeps the text landing in the same place on every one. */
.builder-preview-frame .dash_cat_blk:has(.dash_cat_txt_1, .dash_cat_txt_2, .dash_cat_txt_3) img {
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
}

/* Tiles with no overlay are the catalog covers. The blur in B2B.css is
   there to keep overlay copy legible - with no copy on top it only
   softens the artwork, so it comes off.

   cover, not contain: the boxes are the same either way, but contain
   letterboxes any cover whose source ratio is not 3:4, which reads as
   uneven heights. cover fills the box so every card matches. */
.builder-preview-frame .dash_cat_blk:not(:has(.dash_cat_txt_1, .dash_cat_txt_2, .dash_cat_txt_3)) img {
    aspect-ratio: 3 / 4;
    height: auto;
    object-fit: cover;
    object-position: center top;
    filter: none;
}

.builder-preview-frame .dash_cat_txt_1,
.builder-preview-frame .dash_cat_txt_2,
.builder-preview-frame .dash_cat_txt_3 {
    font-size: clamp(13px, 2.4cqw, 33px);
    line-height: 1.12;
}
.builder-preview-frame .dash_cat_ava_txt {
    font-size: clamp(9px, 1.2cqw, 15px);
}
.builder-preview-frame .dash_cat_btn button {
    font-size: clamp(9px, 1.1cqw, 15px);
    padding: clamp(4px, .7cqw, 10px) clamp(10px, 2cqw, 26px);
}

@container preview (max-width: 520px) {
    /* Fixed 280px rather than a ratio, so the hero keeps the same
       height whatever the frame does. A shallower crop than 4:5 also
       takes less off the sides, which matters on slides whose wording
       is baked into the artwork. */
    .builder-preview-frame .dash_main_img_blk {
        aspect-ratio: auto;
        height: 280px;
    }
    .builder-preview-frame .dash_main_img_blk img,
    .builder-preview-frame .dash_main_img_blk video {
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    .builder-preview-frame .dash_main_img_desc {
        width: 82%;
        font-size: 13px;
    }
    /* Paired banner buttons sit side by side at desktop width; they
       need to be free to wrap once the frame is phone-width. */
    .builder-preview-frame .dash_main_img_btn_inline {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    .builder-preview-frame .dash_main_img_btn button,
    .builder-preview-frame .dash_main_img_btn_2 button,
    .builder-preview-frame .dash_main_img_btn_3 button,
    .builder-preview-frame .dash_main_img_btn_4 button,
    .builder-preview-frame .dash_main_img_btn_5 button,
    .builder-preview-frame .dash_main_img_btn_6 button,
    .builder-preview-frame .dash_main_img_btn_7 button {
        font-size: 12px;
        padding: 8px 16px;
    }

    /* One per row, but capped and centred - a card the full width of the
       frame is more slab than tile. */
    .builder-preview-frame .dash_cat_list {
        grid-template-columns: 1fr;
    }
    .builder-preview-frame .dash_cat_blk {
        max-width: 280px;
        margin: 0 auto;
    }

    /* The fluid clamps bottom out at floors derived from desktop, which
       are far too small once a tile is most of the screen. Set them
       outright for the phone band. */
    .builder-preview-frame .dash_cat_ttl {
        font-size: 23px;
        margin-bottom: 18px;
    }
    .builder-preview-frame .dash_cat_txt_1,
    .builder-preview-frame .dash_cat_txt_2,
    .builder-preview-frame .dash_cat_txt_3 {
        font-size: 21px;
    }
    .builder-preview-frame .dash_cat_ava_txt {
        font-size: 12.5px;
    }
    .builder-preview-frame .dash_cat_btn button {
        font-size: 12.5px;
        padding: 7px 18px;
    }
}
/* -------------------------------------------------------------------- */

/* An empty slide, in the builder only. The dot field is the artboard a blank
   section uses, so "nothing here yet" reads the same wherever it turns up,
   and the height keeps the carousel from collapsing to a seam. */
.cms_slide_blank {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34cqw;
    padding: 24px;
    text-align: center;
    font-family: 'nexa_light', sans-serif;
    font-size: clamp(12px, 1.4cqw, 16px);
    letter-spacing: .3px;
    color: #9a9aa6;
    background-color: #fcfcfd;
    background-image: radial-gradient(circle, rgba(20, 20, 30, .075) 1px, transparent 1px);
    background-size: 15px 15px;
}