/**
 * Fluid layout from reference viewports: mobile 390px, desktop 1920px.
 * At ref widths scale factors are 1 — parity with constructor/template settings.
 * Sizes scale via gaps/padding + grid 1fr cells; cards stretch in cell (ct-card cqi scales canvas).
 */

/* Block shell: scale padding/offset from blockChrome vars (JSON unchanged) */
.page-section__block {
  padding-top: calc(var(--block-padding-y, 0px) * var(--layout-px-d, 1));
  padding-bottom: calc(var(--block-padding-y, 0px) * var(--layout-px-d, 1));
  padding-left: calc(var(--block-padding-x, 0px) * var(--layout-px-d, 1));
  padding-right: calc(var(--block-padding-x, 0px) * var(--layout-px-d, 1));
  margin-top: calc(var(--block-top-offset, 0px) * var(--layout-px-d, 1));
}

.page-section__block[data-block-flow="grid"] .page-block-scroll-target:not(.page-block-scroll-target--template-cards),
.page-section__block[data-block-flow="grid"] #catalog .catalog__products:not(.page-block-scroll-target--template-cards) {
  gap:
    calc(var(--block-inner-gap-y, var(--block-inner-gap, 16px)) * var(--layout-px-d, 1))
    calc(var(--block-inner-gap, 16px) * var(--layout-px-d, 1));
}

.page-section__block[data-block-flow="row"] .page-block-scroll-target,
.page-section__block[data-block-flow="row"] #catalog .catalog__products,
.page-section__block[data-block-flow="row"] .reviews-strip,
.page-section__block[data-block-flow="row"] .blog-page__grid {
  gap: calc(var(--block-inner-gap, 16px) * var(--layout-px-d, 1));
}

.page-section__block[data-row-scroll="1"][data-row-edge-fade="1"] .page-block-scroll::before,
.page-section__block[data-row-scroll="1"][data-row-edge-fade="1"] .page-block-scroll::after {
  width: calc(var(--row-edge-fade-width, 72px) * var(--layout-px-d, 1));
}

@media (min-width: 769px) {
  /*
   * Desktop (≥769): catalog packs by scaled artboard; all other template tracks 1:1 (--tpl-card-w).
   */
  .catalog__products.page-block-scroll-target--template-cards,
  .page-section__block[data-block-flow="grid"] #catalog .catalog__products.page-block-scroll-target--template-cards {
    --tpl-card-slot-w: calc(var(--tpl-card-w, 360px) * var(--layout-scale-desktop, 1));
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(
      auto-fill,
      minmax(min(100%, var(--tpl-card-slot-w)), max-content)
    ) !important;
    justify-content: start !important;
    align-items: start !important;
  }

  .page-section__block[data-block-flow="grid"] .page-block-scroll-target--template-cards:not(.catalog__products),
  .blog-page__grid.page-block-scroll-target--template-cards,
  .reviews-strip.page-block-scroll-target--template-cards {
    --tpl-card-slot-w: var(--tpl-card-w, 360px);
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(
      auto-fill,
      minmax(min(100%, var(--tpl-card-slot-w)), max-content)
    ) !important;
    justify-content: start !important;
    align-items: start !important;
  }

  /*
   * Shell width: catalog scaled; all other template tracks 1:1 with constructor.
   */
  .page-section__block #catalog .catalog__products.page-block-scroll-target--template-cards > .ct-card {
    width: min(100%, calc(var(--tpl-card-w, 360px) * var(--layout-scale-desktop, 1))) !important;
    min-width: 0 !important;
    max-width: min(100%, calc(var(--tpl-card-w, 360px) * var(--layout-scale-desktop, 1))) !important;
    flex: 0 0 auto !important;
    justify-self: start !important;
  }

  .page-section__block .page-block-scroll-target--template-cards:not(.catalog__products) > .ct-card,
  .page-section__block .cb__container.page-block-scroll-target--template-cards > .ct-card {
    width: var(--tpl-card-w, 360px) !important;
    min-width: var(--tpl-card-w, 360px) !important;
    max-width: var(--tpl-card-w, 360px) !important;
    flex: 0 0 var(--tpl-card-w, 360px) !important;
    justify-self: start !important;
  }

  .catalog__products.page-block-scroll-target--template-cards {
    padding-left: calc(var(--tpl-card-edge-m, 0px) * var(--layout-scale-mobile, 1));
    padding-right: calc(var(--tpl-card-edge-m, 0px) * var(--layout-scale-mobile, 1));
    column-gap: calc(var(--tpl-card-gap-x-m, 3px) * var(--layout-scale-mobile, 1)) !important;
    row-gap: calc(var(--tpl-card-gap-y-m, 6px) * var(--layout-scale-mobile, 1)) !important;
  }

  .page-section__block[data-block-flow="grid"][data-grid-mode="template"]
    .page-block-scroll-target--template-cards:not(.catalog__products) {
    padding-left: 0;
    padding-right: 0;
    column-gap: var(--block-inner-gap, 16px) !important;
    row-gap: var(--block-inner-gap-y, var(--block-inner-gap, 16px)) !important;
  }

  /*
   * Feed blocks: blockLayout gap/padding 1:1 with constructor (same ownership as --tpl-card-w on track).
   */
  .page-section__block[data-block-type="latestArticles"],
  .page-section__block[data-block-type="reviewStrip"],
  .page-section__block[data-block-type="relatedArticles"] {
    padding-top: var(--block-padding-y, 0px);
    padding-bottom: var(--block-padding-y, 0px);
    padding-left: var(--block-padding-x, 0px);
    padding-right: var(--block-padding-x, 0px);
  }

  /* Row tracks: catalog scaled; other template tracks 1:1 (--tpl-card-w). */
  .page-section__block[data-block-flow="row"] #catalog .catalog__products.page-block-scroll-target--template-cards > .ct-card,
  .page-section__block[data-item-sizing="content"] #catalog .catalog__products > .ct-card {
    width: min(100%, calc(var(--ct-card-w, 360) * 1px * var(--layout-scale-desktop))) !important;
    min-width: 0 !important;
    max-width: min(100%, calc(var(--ct-card-w, 360) * 1px * var(--layout-scale-desktop))) !important;
    flex: 0 0 auto !important;
  }

  .page-section__block[data-block-flow="row"] .page-block-scroll-target--template-cards:not(.catalog__products) > .ct-card,
  .page-section__block[data-item-sizing="content"] .page-block-scroll-target--template-cards:not(.catalog__products) > .ct-card {
    width: var(--tpl-card-w, 360px) !important;
    min-width: var(--tpl-card-w, 360px) !important;
    max-width: var(--tpl-card-w, 360px) !important;
    flex: 0 0 var(--tpl-card-w, 360px) !important;
  }

  .page-section__block[data-block-flow="row"] .reviews-strip.page-block-scroll-target--template-cards {
    width: 100%;
    max-width: 100% !important;
  }

  .faq-section__inner {
    max-width: min(100%, calc(var(--faq-inner-ref-w, 960) * 1px * var(--layout-scale-desktop)));
    box-sizing: border-box;
  }

  .footer-builder--bg-centered .footer-builder__inner {
    width: min(100%, calc(var(--ct-card-w, 360) * 1px * var(--layout-scale-desktop)));
  }

  .footer-builder .ct-card {
    width: min(100%, calc(var(--ct-card-w, 360) * 1px * var(--layout-scale-desktop)));
  }

  .page-section__block--menu .navbar__inner {
    padding-left: calc(var(--menu-desktop-padding-x, 0px) * var(--layout-scale-desktop));
    padding-right: calc(var(--menu-desktop-padding-right, 0px) * var(--layout-scale-desktop));
  }

  /* Row-scroll catalog: scaled shell; articles/reviews use unscaled --tpl-card-w block above. */
  .page-section__block[data-row-scroll="1"] .page-block-scroll__viewport .catalog__products.page-block-scroll-target--template-cards > .ct-card {
    width: min(100%, calc(var(--tpl-card-w, 360px) * var(--layout-scale-desktop, 1))) !important;
    min-width: 0 !important;
    max-width: min(100%, calc(var(--tpl-card-w, 360px) * var(--layout-scale-desktop, 1))) !important;
    flex: 0 0 auto !important;
    height: auto !important;
  }

  .page-section__block[data-row-scroll="1"] .page-block-scroll__viewport .blog-page__grid.page-block-scroll-target--template-cards > .ct-card,
  .page-section__block[data-row-scroll="1"] .page-block-scroll__viewport .reviews-strip.page-block-scroll-target--template-cards > .ct-card,
  .page-section__block[data-row-scroll="1"][data-row-scroll-ui="swipe"]:not(:has([data-block-scroll-row])) .blog-page__grid.page-block-scroll-target--template-cards > .ct-card,
  .page-section__block[data-row-scroll="1"][data-row-scroll-ui="swipe"]:not(:has([data-block-scroll-row])) .reviews-strip.page-block-scroll-target--template-cards > .ct-card {
    width: var(--tpl-card-w, 360px) !important;
    min-width: var(--tpl-card-w, 360px) !important;
    max-width: var(--tpl-card-w, 360px) !important;
    flex: 0 0 var(--tpl-card-w, 360px) !important;
    height: auto !important;
  }

  .page-section__block[data-row-scroll="1"][data-row-scroll-ui="swipe"]:not(:has([data-block-scroll-row])) .catalog__products.page-block-scroll-target--template-cards > .ct-card {
    width: min(100%, calc(var(--tpl-card-w, 360px) * var(--layout-scale-desktop, 1))) !important;
    min-width: 0 !important;
    max-width: min(100%, calc(var(--tpl-card-w, 360px) * var(--layout-scale-desktop, 1))) !important;
    flex: 0 0 auto !important;
    height: auto !important;
  }
}

@media (max-width: 768px) {
  .page-section__block {
    padding-top: calc(var(--block-padding-y, 0px) * var(--layout-px-m, 1));
    padding-bottom: calc(var(--block-padding-y, 0px) * var(--layout-px-m, 1));
    padding-left: calc(var(--block-padding-x, 0px) * var(--layout-px-m, 1));
    padding-right: calc(var(--block-padding-x, 0px) * var(--layout-px-m, 1));
    margin-top: calc(var(--block-top-offset, 0px) * var(--layout-px-m, 1));
  }

  .page-section__block[data-block-flow="grid"] .page-block-scroll-target:not(.page-block-scroll-target--template-cards),
  .page-section__block[data-block-flow="grid"] #catalog .catalog__products:not(.page-block-scroll-target--template-cards) {
    gap:
      calc(var(--block-inner-gap-y, var(--block-inner-gap, 16px)) * var(--layout-px-m, 1))
      calc(var(--block-inner-gap, 16px) * var(--layout-px-m, 1));
  }

  .page-section__block[data-block-flow="row"] .page-block-scroll-target,
  .page-section__block[data-block-flow="row"] #catalog .catalog__products,
  .page-section__block[data-block-flow="row"] .reviews-strip,
  .page-section__block[data-block-flow="row"] .blog-page__grid {
    gap: calc(var(--block-inner-gap, 16px) * var(--layout-px-m, 1));
  }

  /*
   * productGrid catalog: full viewport track, 6px screen edge, N equal fr columns — cards stretch (cqi scale).
   * gridColsMobile from --block-grid-cols-mobile on track (constructor → buildTemplateTrackChrome).
   */
  .page-section__block--productGrid .catalog__products.page-block-scroll-target--template-cards {
    --block-grid-cols-mobile-effective: max(1, var(--block-grid-cols-mobile, 2));
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: calc(var(--tpl-card-edge-m, 6px) * var(--layout-scale-mobile, 1)) !important;
    padding-right: calc(var(--tpl-card-edge-m, 6px) * var(--layout-scale-mobile, 1)) !important;
    grid-template-columns: repeat(
      var(--block-grid-cols-mobile-effective),
      minmax(0, 1fr)
    ) !important;
    justify-items: stretch !important;
    column-gap: calc(var(--tpl-card-gap-x-m, 3px) * var(--layout-scale-mobile, 1)) !important;
    row-gap: calc(var(--tpl-card-gap-y-m, 6px) * var(--layout-scale-mobile, 1)) !important;
  }

  .page-section__block--productGrid .catalog__products.page-block-scroll-target--template-cards > .ct-card {
    --ct-mobile-slot-w: 100%;
    --ct-mobile-scale: max(0.0001, 100cqi / (var(--ct-card-mw, var(--ct-card-w, 360)) * 1px));
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    flex: none !important;
    flex-basis: auto !important;
    aspect-ratio: var(--ct-card-mw, var(--ct-card-w, 360)) / var(--ct-card-mh, var(--ct-card-h, 560)) !important;
  }

  /*
   * Template GRID on mobile (non-catalog): column count from blockLayout.gridColsMobile.
   * Row / row-scroll tracks (latestArticles carousel, etc.) keep flex + artboard width — not this grid packing.
   */
  /* reviewStrip: mobile horizontal swipe — style.css (not gridColsMobile packing) */
  .page-section__block[data-block-flow="grid"][data-grid-mode="template"]:not([data-row-scroll="1"]) .blog-page__grid.page-block-scroll-target--template-cards:not([data-mobile-grid-cols="1"]),
  .page-section__block[data-block-flow="grid"][data-grid-mode="template"]:not([data-row-scroll="1"]) .page-block-scroll-target--template-cards:not(.catalog__products):not(.blog-page__grid):not(.reviews-strip):not(.cb__gallery-grid--template-trigger) {
    --block-grid-cols-mobile-effective: max(1, var(--block-grid-cols-mobile, 2));
    --ct-mobile-slot-w: min(
      calc(var(--tpl-card-mw, var(--tpl-card-w, 360px)) * var(--layout-scale-mobile, 1)),
      calc(
        (
          100%
          - var(--block-inner-gap, 16px) * var(--layout-px-m, 1)
            * (var(--block-grid-cols-mobile-effective) - 1)
        ) / var(--block-grid-cols-mobile-effective)
      )
    );
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
    grid-template-columns: repeat(
      var(--block-grid-cols-mobile-effective),
      minmax(0, var(--ct-mobile-slot-w))
    ) !important;
    /* justify-content / justify-items: style.css data-items-align-mobile */
    column-gap: calc(var(--block-inner-gap, 16px) * var(--layout-px-m, 1)) !important;
    row-gap: calc(var(--block-inner-gap-y, var(--block-inner-gap, 16px)) * var(--layout-px-m, 1)) !important;
  }

  /* Outer box must not exceed mobile artboard slot — canvas scales to 100cqi (see card-swipe QA). */
  .page-section__block[data-block-flow="grid"][data-grid-mode="template"]:not([data-row-scroll="1"]) .blog-page__grid.page-block-scroll-target--template-cards > .ct-card,
  .page-section__block[data-block-flow="grid"][data-grid-mode="template"]:not([data-row-scroll="1"])
    .page-block-scroll-target--template-cards:not(.catalog__products):not(.blog-page__grid):not(.reviews-strip):not(.cb__gallery-grid--template-trigger) > .ct-card {
    /* Track columns are already capped by --ct-mobile-slot-w; fill the cell so column-gap = visual gap. */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    flex-basis: auto !important;
    /* justify-self: style.css data-items-align-mobile */
  }

  .page-section__block[data-block-flow="row"]:not([data-row-scroll="1"]) .reviews-strip.page-block-scroll-target--template-cards,
  .page-section__block[data-block-flow="row"]:not([data-row-scroll="1"]) .blog-page__grid.page-block-scroll-target--template-cards,
  .page-section__block[data-row-scroll="1"][data-row-scroll-ui="swipe"]:not(:has([data-block-scroll-row])) .reviews-strip.page-block-scroll-target--template-cards,
  .page-section__block[data-row-scroll="1"][data-row-scroll-ui="swipe"]:not(:has([data-block-scroll-row])) .blog-page__grid.page-block-scroll-target--template-cards {
    padding-left: 0 !important;
    padding-right: 0 !important;
    column-gap: calc(var(--block-inner-gap, 16px) * var(--layout-px-m, 1)) !important;
    row-gap: calc(var(--block-inner-gap-y, var(--block-inner-gap, 16px)) * var(--layout-px-m, 1)) !important;
    scroll-padding-inline: calc(var(--block-padding-x, 0px) * var(--layout-px-m, 1));
  }

  /*
   * Gallery template trigger: one card opens block lightbox — mobile artboard slot
   * without requiring blockLayout.flow=grid (gallery is excluded from generic template grids).
   */
  .cb__gallery-grid.page-block-scroll-target--template-cards.cb__gallery-grid--template-trigger {
    --block-grid-cols-mobile-effective: 1;
    --ct-mobile-slot-w: min(
      calc(var(--tpl-card-mw, var(--tpl-card-w, 360px)) * var(--layout-scale-mobile, 1)),
      calc(
        100vw - 2 * var(--section-content-px-mobile, var(--section-content-px-base, var(--container-padding, 16px)))
      )
    );
    display: flex !important;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .cb__gallery-grid--template-trigger > .ct-card {
    width: var(--ct-mobile-slot-w) !important;
    max-width: var(--ct-mobile-slot-w) !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    aspect-ratio: var(--ct-card-mw, var(--ct-card-w, 360)) / var(--ct-card-mh, var(--ct-card-h, 560)) !important;
  }

  .page-section__block[data-items-align-mobile="center"]:not([data-row-scroll="1"])
    .cb__gallery-grid.page-block-scroll-target--template-cards.cb__gallery-grid--template-trigger {
    justify-content: center !important;
  }

  .page-section__block[data-items-align-mobile="right"]:not([data-row-scroll="1"])
    .cb__gallery-grid.page-block-scroll-target--template-cards.cb__gallery-grid--template-trigger {
    justify-content: flex-end !important;
  }

  .page-section__block[data-block-flow="row"][data-block-type="latestArticles"] .blog-page__grid > .blog-page__card,
  .page-section__block[data-block-flow="row"][data-block-type="relatedArticles"] .blog-page__grid > .blog-page__card {
    width: min(100%, calc(300px * var(--layout-scale-mobile))) !important;
    min-width: min(100%, calc(300px * var(--layout-scale-mobile))) !important;
    max-width: calc(300px * var(--layout-scale-mobile)) !important;
    flex: 0 0 min(100%, calc(300px * var(--layout-scale-mobile))) !important;
  }

  .ct-card {
    --ct-mobile-vw-slot: min(
      calc(var(--ct-card-mw, var(--ct-card-w, 360)) * 1px * var(--layout-scale-mobile)),
      calc(
        (100vw - 2 * var(--section-content-px-mobile, var(--section-content-px-base, var(--container-padding))))
        * var(--layout-scale-mobile)
      )
    );
  }

  .faq-section__inner {
    max-width: min(100%, calc(var(--faq-inner-ref-w, 960) * 1px * var(--layout-scale-mobile)));
    padding-left: calc(var(--container-padding) * var(--layout-scale-mobile));
    padding-right: calc(var(--container-padding) * var(--layout-scale-mobile));
    box-sizing: border-box;
  }

  .page-section__block[data-block-type="faqAccordion"] .faq-section__inner {
    padding-left: 0;
    padding-right: 0;
  }

  .footer-builder[data-shell-mobile-bg='centered'] .footer-builder__inner {
    width: min(100%, calc(var(--ct-card-mw, var(--ct-card-w, 360)) * 1px * var(--layout-scale-mobile)));
  }

  .page-section__block--menu > .navbar-wrap {
    height: calc(var(--menu-mobile-height, 70px) * var(--layout-scale-mobile));
    min-height: calc(var(--menu-mobile-height, 70px) * var(--layout-scale-mobile));
  }

  .page-section__block--menu .navbar__inner {
    padding-left: calc(var(--menu-mobile-padding-x, 24px) * var(--layout-scale-mobile));
    padding-right: calc(var(--menu-mobile-padding-right, 34px) * var(--layout-scale-mobile));
  }

  .page-section__block--menu .navbar__logo img,
  .page-section__block--menu .navbar__logo svg {
    max-height: calc(var(--menu-mobile-logo-size, 28px) * var(--layout-scale-mobile));
    max-width: calc(var(--menu-mobile-logo-size, 28px) * var(--layout-scale-mobile));
  }

  /* Панель меню: только масштаб padding; ширина/радиус — в style.css (fullscreen, radius 0) */
  .page-section__block--menu .navbar__panel {
    padding: calc(var(--menu-mobile-panel-padding, 24px) * var(--layout-scale-mobile));
    padding-bottom: max(
      calc(var(--menu-mobile-panel-padding, 24px) * var(--layout-scale-mobile)),
      env(safe-area-inset-bottom, 0px)
    );
  }
}