/* Bootstrap-style row + col-sm-N/12 grid used by manual body content.
 *
 * The legacy gpswox theme provided these via web.min.css, but gpswox_new
 * doesn't load that file for /en/user-manual-ui/ URLs. Without these rules
 * col-sm-5 / col-sm-7 inside a .row have no width constraint and the image
 * displays at its natural intrinsic width instead of 41.667%/58.333% of the
 * row. */
.manual__content .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
    /* These rows are image|text pairs. Centre the columns vertically so a short
     * caption sits beside the middle of a tall screenshot instead of being
     * stranded at the top with a big empty void below it (e.g. the "Managing
     * APN Configurations" block on 41-creating-and-activating-tracker-...). */
    align-items: center;
}

.manual__content .row > [class*="col-sm-"] {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

/* Mobile (<576px): every col stacks full-width */
.manual__content .row > .col-sm-1,
.manual__content .row > .col-sm-2,
.manual__content .row > .col-sm-3,
.manual__content .row > .col-sm-4,
.manual__content .row > .col-sm-5,
.manual__content .row > .col-sm-6,
.manual__content .row > .col-sm-7,
.manual__content .row > .col-sm-8,
.manual__content .row > .col-sm-9,
.manual__content .row > .col-sm-10,
.manual__content .row > .col-sm-11,
.manual__content .row > .col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width: 576px) {
    .manual__content .row > .col-sm-1  { flex: 0 0 8.333333%;  max-width: 8.333333%;  }
    .manual__content .row > .col-sm-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .manual__content .row > .col-sm-3  { flex: 0 0 25%;        max-width: 25%;        }
    .manual__content .row > .col-sm-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .manual__content .row > .col-sm-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .manual__content .row > .col-sm-6  { flex: 0 0 50%;        max-width: 50%;        }
    .manual__content .row > .col-sm-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .manual__content .row > .col-sm-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .manual__content .row > .col-sm-9  { flex: 0 0 75%;        max-width: 75%;        }
    .manual__content .row > .col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .manual__content .row > .col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .manual__content .row > .col-sm-12 { flex: 0 0 100%;       max-width: 100%;       }
}

/* Bare col-sm-* (not inside a .row) inside .manual__content:
 * Without this, those bare cols inherit flex behavior from the column flex
 * parent (.manual__content is display:flex; flex-direction:column) and get
 * stretched vertically. Reset them to plain block elements. */
.manual__content > .col-sm-1,
.manual__content > .col-sm-2,
.manual__content > .col-sm-3,
.manual__content > .col-sm-4,
.manual__content > .col-sm-5,
.manual__content > .col-sm-6,
.manual__content > .col-sm-7,
.manual__content > .col-sm-8,
.manual__content > .col-sm-9,
.manual__content > .col-sm-10,
.manual__content > .col-sm-11,
.manual__content > .col-sm-12 {
    flex: none;
    width: 100%;
    max-width: 100%;
    display: block;
}

/* "Image beside text" body blocks (e.g. the two "Side Panel" sections on
 * /en/user-manual-ui/2-workspace-overview). These were authored as a bare
 * <div class="col-sm-9"> with an inline `float:left` on the image so the
 * following <ol> would wrap to its right. That float no longer works: main.js
 * wraps every body image in an inline-block <a class="manual-fancybox"> for the
 * lightbox, and that anchor establishes its own block-formatting context which
 * traps the float — so the list dropped *below* the image instead of beside it.
 *
 * Lay these blocks out as a flex media object instead: image left, text right,
 * with a real gap. flex-wrap + the 280px text basis let the text drop below the
 * image on narrow viewports rather than getting crushed. Scoped with :has(img)
 * so bare text-only cols are left as plain blocks by the rule above. */
.manual__content > .col-sm-9:has(img) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 35px;
}

/* Image (and its fancybox <a> wrapper) keeps its intrinsic width, never grows. */
.manual__content > .col-sm-9:has(img) > a.manual-fancybox,
.manual__content > .col-sm-9:has(img) > img {
    flex: 0 0 auto;
}

/* Neutralise the inline float / right-padding now that flex owns the layout and
 * supplies the gap (inline float:left is only beaten with !important). */
.manual__content > .col-sm-9:has(img) img {
    float: none !important;
    padding-right: 0 !important;
    margin: 0;
}

/* Text/list takes the remaining width; min-width:0 lets long words wrap. */
.manual__content > .col-sm-9:has(img) > ol,
.manual__content > .col-sm-9:has(img) > ul,
.manual__content > .col-sm-9:has(img) > p {
    flex: 1 1 280px;
    min-width: 0;
    margin-top: 0;
}

/* Mobile (<576px): stack image over text full-width, matching how the .row
 * grid columns collapse above. Side-by-side would crush the text next to the
 * fixed-width image on a phone. */
@media (max-width: 575px) {
    .manual__content > .col-sm-9:has(img) {
        flex-direction: column;
    }
}

/* Make images in body content responsive.
 *
 * Each image has an inline `style="width:Xpx; height:auto"` set in the
 * HTML body (carried over from the dimensions of the original webstage
 * image). Inline styles beat the global `img { width: auto }` rule from
 * style.css, so we don't need to override `width` here — only enforce
 * `max-width:100%` as a guard against viewport-narrower-than-image cases. */
.manual__content img {
    max-width: 100%;
    height: auto;
}

/* Center gallery images themselves, but keep any text/lists inside the
 * mygallery wrapper left-aligned. Some manual pages (e.g. 6-device-management)
 * wrap a <ul> of feature descriptions inside <div class="mygallery">, so we
 * can't blanket-center all content. */
.manual__content .mygallery img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
}

/* Drop empty gallery placeholders. The CMS body for some manual pages (e.g.
 * /en/user-manual-ui/1-getting-started) contains leftover
 * <div class="mygallery"><br />&nbsp;</div> blocks with no real content — they
 * only add a large blank gap between an image and the following text. Match a
 * .mygallery whose sole *element* child is a <br> (the &nbsp; is a text node,
 * which :only-child ignores), so galleries that hold an <img>, <ul>, etc. are
 * left untouched. */
.manual__content .mygallery:has(> br:only-child),
.manual__content .mygallery:empty {
    display: none;
}

/* Collapse the trailing line break a gallery image leaves behind: the image is
 * display:block here, so a <br> right after it just adds an empty line of
 * vertical gap. main.js wraps the <img> in an <a class="manual-fancybox"> for
 * the lightbox, so after that runs the <br> follows the anchor instead — cover
 * both the pre- and post-wrap shapes. */
.manual__content .mygallery img + br,
.manual__content .mygallery a.manual-fancybox + br {
    display: none;
}

/* Click-to-enlarge: main.js wraps every .manual__content img in an
 * <a class="manual-fancybox"> linked to the original/ photobank URL.
 * Show a zoom cursor so users discover the affordance. */
.manual__content a.manual-fancybox {
    display: inline-block;
    cursor: zoom-in;
}