/* Mosaic v2 — storefront grid, instance-agnostic rules.
   Per-instance placement and the row-height minimum are emitted inline by
   MosaicGridRenderer. Rows use grid-auto-rows:minmax(rowHeight,auto): rowHeight
   is a MINIMUM, and a row grows past it to fit taller content (pushing the rows
   below down) instead of clipping or overlapping. */

/* min-width:0 lets grid items shrink instead of overflowing their track, which
   keeps the column widths intact regardless of content. Overflow is VISIBLE by
   default — content is never clipped unless a block opts in via the editor's
   "Обрезать содержимое" toggle (clip:true), which adds .mosaic-block--clip below.
   Vertical content is never clipped either way (the row grows to fit it via
   grid-auto-rows:minmax(...,auto)). */
.mosaic-block {
    min-width: 0;
    box-sizing: border-box;
}

/* Opt-in: crop content (incl. decorative bleed) that overflows the cell
   horizontally. Off by default so dropdowns/tooltips can escape the cell. */
.mosaic-block--clip {
    overflow: hidden;
}

/* Some module roots carry their own OUTER margin (e.g. the slideshow's
   .swiper-viewport has margin:0 0 60px). Inside a grid cell that margin can't do
   anything useful — it only leaks as a gap and misaligns the block, since the
   grid owns spacing (gap + the per-block margin/padding controls). Opting a block
   into the editor's "Убрать внешние отступы" toggle (resetMargin:true, adds
   .mosaic-block--reset-margin) neutralises the direct child's own margin so the
   module sits flush in its cell. Off by default — the module keeps its margin.
   Only the cell's content root is reset; the module's internal layout (margins
   between its own descendants) is untouched. */
.mosaic-block--reset-margin > *:not(.mosaic-block__dbg) {
    margin: 0 !important;
}

/* The block's content root fills the cell — only when the block opts into
   stretching via the editor's "Растягивать содержимое" toggle (stretch:true,
   adds .mosaic-block--stretch). Without it the module keeps its natural size,
   so components that manage their own layout/height (e.g. carousels) aren't
   forced into the fixed cell and broken. */
.mosaic-block--stretch > *:not(.mosaic-block__dbg) {
    width: 100%;
    height: 100%;
}

/* Sliders (swiper) set their own heights via JS — force them to the cell only
   when the block is stretched. */
.mosaic-block--stretch .swiper-container,
.mosaic-block--stretch .swiper-wrapper,
.mosaic-block--stretch .swiper-slide {
    height: 100%;
}

/* Images fill the cell while staying fully visible (contain never crops
   content like slider text); they may letterbox within the cell. Gated behind
   --stretch like the slider rules above: without it the module keeps its natural
   image sizing (e.g. a carousel's .img-responsive max-width:100%), so logos and
   banners aren't upscaled past their native size and the block matches how the
   same module renders outside the grid. */
.mosaic-block--stretch img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Cover fill: crop the image to fill the cell completely instead of letterboxing
   it (the contain rule above). Opt-in via the editor's "Заполнять с обрезкой"
   toggle (fit:cover); only meaningful alongside --stretch, which is what forces
   the image to the cell's height. Higher specificity than the contain rule, so
   it wins regardless of source order. */
.mosaic-block--stretch.mosaic-block--cover img {
    object-fit: cover;
}

/* Vertical alignment of the block within its cell, via grid-item align-self.
   This is the block axis only — the width is untouched (the block stays full
   width; horizontal placement is handled by columns). align-self isn't set by
   the inline placement rule, so there's no specificity fight with its `display`,
   and hidden (display:none) blocks are untouched. Default 'top' = no class =
   implicit stretch (fills the cell height, content at the top). «center»/«bottom»
   shrink the block to its content height and position it. Meaningful only when
   the block isn't stretched. */
.mosaic-block--va-middle { align-self: center; }
.mosaic-block--va-bottom { align-self: end; }

/* Phones: blocks stack full-width and the grid uses auto rows, so let content
   define its own height instead of forcing it to fill a fixed cell. */
@media (max-width: 767px) {
    .mosaic-block--stretch > * { height: auto; }
    .mosaic-block--stretch img { height: auto; }
}

/* Empty block placeholder. */
.mosaic-block--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
    color: #999;
    background-image: repeating-linear-gradient(-45deg, #fff, #fff 13px, #f8f8f8 13px, #f8f8f8 14px);
    background-size: 40px;
}

/* Debug mode — outline each block + a neat corner label (block index · module);
   the box-model colours below show margin/padding. Enabled per layout from the
   editor (adds .mosaic-debug on the container). */
.mosaic-debug .mosaic-block {
    position: relative;
    outline: 2px dashed rgba(37, 99, 235, .6);
    outline-offset: -2px;
}
.mosaic-debug .mosaic-block--empty {
    outline-color: rgba(245, 158, 11, .6);
}
.mosaic-block__dbg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
    max-width: 100%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    font: 11px/1.6 monospace;
    padding: 1px 7px;
    pointer-events: none;
    overflow-wrap: anywhere;
}

/* Box-model colours: the wrapper reveals the grid's MARGIN (orange); the grid's
   own translucent background reveals its PADDING and gaps (green). */
.mosaic-debug-box {
    position: relative;
    overflow: hidden;
    background: rgba(245, 158, 11, .18);
}
.mosaic-grid.mosaic-debug {
    background-color: rgba(34, 197, 94, .18);
}
.mosaic-debug-legend {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 6;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    font: 11px/1.7 monospace;
    padding: 1px 8px;
    pointer-events: none;
}
.mosaic-legend {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin: 0 2px 0 7px;
}
.mosaic-legend--margin { background: rgba(245, 158, 11, .8); }
.mosaic-legend--padding { background: rgba(34, 197, 94, .8); }