/* 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; a fit-cell (content mode crop/cover) clips via its inner
   wrapper — see the autopilot section below. */
.mosaic-block {
    min-width: 0;
    box-sizing: border-box;
}

/* 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 module root's own outer margin so it
   sits flush in its cell. Off by default — the module keeps its margin. We reach the
   module root whether it sits directly in the block (as-is) or inside Mosaic's own
   §6 fit wrapper (crop/cover) — both are the cell's content root, not the module's
   internals (margins between its own descendants are untouched). */
.mosaic-block--reset-margin > *:not(.mosaic-block__dbg),
.mosaic-block--reset-margin > .mosaic-fit__inner > * {
    margin: 0 !important;
}

/* Vertical alignment of the block within a taller cell, via grid-item align-self.
   Width is untouched (columns own horizontal placement). 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.
   Meaningful for as-is content; a fit-cell fills the cell so alignment is moot. */
.mosaic-block--va-middle { align-self: center; }
.mosaic-block--va-bottom { align-self: end; }

/* ========================================================================
   Autopilot Tier-0 (content modes). See docs/features/layout-autopilot.md.
   ======================================================================== */

/* §6 — a fit-cell (crop/cover) must NOT let its content grow the
   grid row: overflow:hidden clips paint but not track-sizing, so a tall image
   would still inflate the auto row ("flying heights" through the back door).
   The inner wrapper takes the content out of flow (position:absolute), so the
   cell height is dictated solely by the track (aspect/fixed/JS), never content.
   min-height:0 lets the grid item shrink below its content box. */
.mosaic-block--fit {
    position: relative;
    min-height: 0;
}
.mosaic-block--fit > .mosaic-fit__inner {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* §7.1 — «Заполнить» (cover) touches ONLY a single dominant first-level image
   (banner markup), never a grid of thumbnails, and never a slider's internals
   (see the boundary note below). Scoped through the §6 wrapper. */
.mosaic-block--cover > .mosaic-fit__inner > img:only-child,
.mosaic-block--cover > .mosaic-fit__inner > a > img:only-child {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mosaic owns the CELL, never a module's internals. A slider (Swiper/Owl/Slick/
   custom theme) manages its own layout and images — reaching in to re-style them
   is theme-specific and unreliable, so we don't. A fit-cell just sizes and clips
   (§6): the module fills its box with its own logic, overflow is cropped. «cover»
   above applies ONLY to a dominant single image the cell truly owns. */

/* Empty block placeholder. */
.mosaic-block--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px;
    border: 1px dashed #d5d9e0;
    border-radius: 6px;
    color: #9aa2ad;
    font-size: 13px;
    text-align: center;
    background: #f5f6f8;
}

/* 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); }