/* Print-derived output layouts. Device adjustments never alter the print grid. */
.composer-item .newsletter-block.kind-photo > .block-image,
.composer-item .newsletter-block.kind-photo .block-media-item img,
.publication-page-item .newsletter-block.kind-photo > .block-image,
.publication-page-item .newsletter-block.kind-photo .block-media-item img,
.web-publication-item .newsletter-block.kind-photo > .block-image,
.web-publication-item .newsletter-block.kind-photo .block-media-item img,
.web-publication-group-item .newsletter-block.kind-photo > .block-image,
.web-publication-group-item .newsletter-block.kind-photo .block-media-item img,
.layout-wrap-media .block-media-item img {
  scale: calc(var(--output-image-scale-x, var(--item-image-scale-x, 1)) * var(--media-image-scale-x, 100) / 100) calc(var(--output-image-scale-y, var(--item-image-scale-y, 1)) * var(--media-image-scale-y, 100) / 100);
}
.block-media-item img,
.in-story-media > img {
  scale: calc(var(--media-image-scale-x, 100) / 100) calc(var(--media-image-scale-y, 100) / 100);
}

.composer-pages.flow-view .composer-page-canvas {
  --output-header-rows: 0;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.composer-pages.flow-view .composer-page-canvas.has-masthead { --output-header-rows: 1; }
.page-composer .composer-pages.flow-view .composer-page-canvas .composer-item {
  grid-column: var(--output-column, 1) / span var(--output-width, 12) !important;
  grid-row: calc(var(--output-row, 1) + var(--output-header-rows)) / span var(--output-row-span, 1) !important;
  order: var(--output-order, 0);
  margin: var(--output-margin-top, 0px) var(--output-margin-right, 0px) var(--output-margin-bottom, 0px) var(--output-margin-left, 0px);
  transform: rotate(var(--output-rotation, 0deg));
}
.composer-pages.web-view .composer-item {
  --output-column: var(--web-column, 1);
  --output-width: var(--web-width, 12);
  --output-row: var(--web-row, 1);
  --output-row-span: var(--web-row-span, 1);
  --output-order: var(--web-order, 0);
  --output-margin-top: var(--web-margin-top, 0px);
  --output-margin-right: var(--web-margin-right, 0px);
  --output-margin-bottom: var(--web-margin-bottom, 0px);
  --output-margin-left: var(--web-margin-left, 0px);
  --output-rotation: var(--web-rotation, 0deg);
  --output-image-scale-x: var(--web-image-scale-x, 1);
  --output-image-scale-y: var(--web-image-scale-y, 1);
}
.composer-pages.tablet-view .composer-item {
  --output-column: var(--tablet-column, 1);
  --output-width: var(--tablet-width, 12);
  --output-row: var(--tablet-row, 1);
  --output-row-span: var(--tablet-row-span, 1);
  --output-order: var(--tablet-order, 0);
  --output-margin-top: var(--tablet-margin-top, 0px);
  --output-margin-right: var(--tablet-margin-right, 0px);
  --output-margin-bottom: var(--tablet-margin-bottom, 0px);
  --output-margin-left: var(--tablet-margin-left, 0px);
  --output-rotation: var(--tablet-rotation, 0deg);
  --output-image-scale-x: var(--tablet-image-scale-x, 1);
  --output-image-scale-y: var(--tablet-image-scale-y, 1);
}
.composer-pages.mobile-view .composer-item {
  --output-column: var(--mobile-column, 1);
  --output-width: var(--mobile-width, 12);
  --output-row: var(--mobile-row, 1);
  --output-row-span: var(--mobile-row-span, 1);
  --output-order: var(--mobile-order, 0);
  --output-margin-top: var(--mobile-margin-top, 0px);
  --output-margin-right: var(--mobile-margin-right, 0px);
  --output-margin-bottom: var(--mobile-margin-bottom, 0px);
  --output-margin-left: var(--mobile-margin-left, 0px);
  --output-rotation: var(--mobile-rotation, 0deg);
  --output-image-scale-x: var(--mobile-image-scale-x, 1);
  --output-image-scale-y: var(--mobile-image-scale-y, 1);
}

@media screen {
  .web-publication-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .web-publication-item {
    grid-column: var(--output-column, 1) / span var(--output-width, 12);
    grid-row: var(--output-row, 1) / span var(--output-row-span, 1);
    order: var(--output-order, 0);
    margin: var(--output-margin-top, 0px) var(--output-margin-right, 0px) var(--output-margin-bottom, 0px) var(--output-margin-left, 0px);
    transform: rotate(var(--output-rotation, 0deg));
  }
}
@media screen and (min-width: 1025px) {
  .web-publication-item {
    --output-column: var(--web-column, 1);
    --output-width: var(--web-width, 12);
    --output-row: var(--web-row, 1);
    --output-row-span: var(--web-row-span, 1);
    --output-order: var(--web-order, 0);
    --output-margin-top: var(--web-margin-top, 0px);
    --output-margin-right: var(--web-margin-right, 0px);
    --output-margin-bottom: var(--web-margin-bottom, 0px);
    --output-margin-left: var(--web-margin-left, 0px);
    --output-rotation: var(--web-rotation, 0deg);
  }
  .web-publication-item,
  .web-publication-item .layout-wrap-media {
    --output-image-scale-x: var(--web-image-scale-x, 1);
    --output-image-scale-y: var(--web-image-scale-y, 1);
  }
}
@media screen and (min-width: 761px) and (max-width: 1024px) {
  .web-publication-item {
    --output-column: var(--tablet-column, 1);
    --output-width: var(--tablet-width, 12);
    --output-row: var(--tablet-row, 1);
    --output-row-span: var(--tablet-row-span, 1);
    --output-order: var(--tablet-order, 0);
    --output-margin-top: var(--tablet-margin-top, 0px);
    --output-margin-right: var(--tablet-margin-right, 0px);
    --output-margin-bottom: var(--tablet-margin-bottom, 0px);
    --output-margin-left: var(--tablet-margin-left, 0px);
    --output-rotation: var(--tablet-rotation, 0deg);
  }
  .web-publication-item,
  .web-publication-item .layout-wrap-media {
    --output-image-scale-x: var(--tablet-image-scale-x, 1);
    --output-image-scale-y: var(--tablet-image-scale-y, 1);
  }
}
@media screen and (max-width: 760px) {
  .web-publication-item {
    --output-column: var(--mobile-column, 1);
    --output-width: var(--mobile-width, 12);
    --output-row: var(--mobile-row, 1);
    --output-row-span: var(--mobile-row-span, 1);
    --output-order: var(--mobile-order, 0);
    --output-margin-top: var(--mobile-margin-top, 0px);
    --output-margin-right: var(--mobile-margin-right, 0px);
    --output-margin-bottom: var(--mobile-margin-bottom, 0px);
    --output-margin-left: var(--mobile-margin-left, 0px);
    --output-rotation: var(--mobile-rotation, 0deg);
  }
  .web-publication-item,
  .web-publication-item .layout-wrap-media {
    --output-image-scale-x: var(--mobile-image-scale-x, 1);
    --output-image-scale-y: var(--mobile-image-scale-y, 1);
  }
  .web-publication-item.mobile-width-half { grid-column: var(--output-column, 1) / span var(--output-width, 6); }
}

/* Grouped print elements remain one proportional composite on every screen. */
@media screen {
  .web-publication-group {
    position: relative;
    min-width: 0;
    grid-column: var(--output-column, 1) / span var(--output-width, 12);
    grid-row: var(--output-row, 1) / span var(--output-row-span, 1);
    order: var(--output-order, 0);
    aspect-ratio: var(--group-aspect, 16 / 9);
    margin: var(--output-margin-top, 0px) var(--output-margin-right, 0px) var(--output-margin-bottom, 0px) var(--output-margin-left, 0px);
    transform: rotate(var(--output-rotation, 0deg));
    container-type: inline-size;
  }
  .web-publication-group-canvas {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(var(--group-columns, 12), minmax(0, 1fr));
    grid-template-rows: repeat(var(--group-rows, 12), minmax(0, 1fr));
    gap: clamp(2px, .3cqw, 5px);
  }
  .web-publication-group-item {
    position: relative;
    min-width: 0;
    min-height: 0;
    grid-column: var(--group-x, 1) / span var(--group-w, 1);
    grid-row: var(--group-y, 1) / span var(--group-h, 1);
    overflow: hidden;
    isolation: isolate;
  }
  .web-publication-group-item > .newsletter-block { width: 100%; height: 100%; min-height: 0; }
  .web-publication-group-item .block-content { height: 100%; padding: clamp(.45rem, 1.4cqw, 1.35rem); overflow: hidden; }
  .web-publication-group-item .newsletter-block h2 { font-size: clamp(.8rem, 3.2cqw, 2.35rem); }
  .web-publication-group-item .block-body { font-size: clamp(.56rem, 1.55cqw, 1rem); line-height: 1.35; }
  .web-publication-group-item.profile-web-hidden { display: none; }
}
@media screen and (min-width: 1025px) {
  .web-publication-group {
    --output-column: var(--web-column, 1); --output-width: var(--web-width, 12);
    --output-row: var(--web-row, 1); --output-row-span: var(--web-row-span, 1);
    --output-order: var(--web-order, 0);
    --output-margin-top: var(--web-margin-top, 0px); --output-margin-right: var(--web-margin-right, 0px);
    --output-margin-bottom: var(--web-margin-bottom, 0px); --output-margin-left: var(--web-margin-left, 0px);
    --output-rotation: var(--web-rotation, 0deg);
  }
  .web-publication-group-item,
  .web-publication-group-item .layout-wrap-media {
    --output-image-scale-x: var(--web-image-scale-x, var(--item-image-scale-x, 1));
    --output-image-scale-y: var(--web-image-scale-y, var(--item-image-scale-y, 1));
  }
}
@media screen and (min-width: 761px) and (max-width: 1024px) {
  .web-publication-group {
    --output-column: var(--tablet-column, 1); --output-width: var(--tablet-width, 12);
    --output-row: var(--tablet-row, 1); --output-row-span: var(--tablet-row-span, 1);
    --output-order: var(--tablet-order, 0);
    --output-margin-top: var(--tablet-margin-top, 0px); --output-margin-right: var(--tablet-margin-right, 0px);
    --output-margin-bottom: var(--tablet-margin-bottom, 0px); --output-margin-left: var(--tablet-margin-left, 0px);
    --output-rotation: var(--tablet-rotation, 0deg);
  }
  .web-publication-group-item,
  .web-publication-group-item .layout-wrap-media {
    --output-image-scale-x: var(--tablet-image-scale-x, var(--item-image-scale-x, 1));
    --output-image-scale-y: var(--tablet-image-scale-y, var(--item-image-scale-y, 1));
  }
}
@media screen and (max-width: 760px) {
  .web-publication-group {
    display: block;
    grid-column: 1 / -1;
    --output-order: var(--mobile-order, 0);
    --output-margin-top: var(--mobile-margin-top, 0px); --output-margin-right: var(--mobile-margin-right, 0px);
    --output-margin-bottom: var(--mobile-margin-bottom, 0px); --output-margin-left: var(--mobile-margin-left, 0px);
    --output-rotation: var(--mobile-rotation, 0deg);
  }
  .web-publication-group-item,
  .web-publication-group-item .layout-wrap-media {
    --output-image-scale-x: var(--mobile-image-scale-x, var(--item-image-scale-x, 1));
    --output-image-scale-y: var(--mobile-image-scale-y, var(--item-image-scale-y, 1));
  }
  .web-publication-group.profile-web-hidden.profile-mobile-visible { display: block; }
  .web-publication-group.profile-mobile-hidden,
  .web-publication-group-item.profile-mobile-hidden { display: none !important; }
}

/* Device previews use the same grouped-composite contract as public output. */
.composer-pages.flow-view .composer-responsive-group {
  position: relative;
  min-width: 0;
  min-height: 0;
  grid-column: var(--output-column, 1) / span var(--output-width, 12);
  grid-row: calc(var(--output-row, 1) + var(--output-header-rows, 0)) / span var(--output-row-span, 1);
  order: var(--output-order, 0);
  aspect-ratio: var(--group-aspect, 16 / 9);
  margin: var(--output-margin-top, 0px) var(--output-margin-right, 0px) var(--output-margin-bottom, 0px) var(--output-margin-left, 0px);
  transform: rotate(var(--output-rotation, 0deg));
  container-type: inline-size;
}
.composer-pages.flow-view .composer-responsive-group-canvas {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--group-columns, 12), minmax(0, 1fr));
  grid-template-rows: repeat(var(--group-rows, 12), minmax(0, 1fr));
  gap: clamp(2px, .3cqw, 5px);
}
.page-composer .composer-pages.flow-view .composer-responsive-group .composer-item {
  position: relative;
  inset: auto;
  min-width: 0;
  min-height: 0;
  grid-column: var(--group-x, 1) / span var(--group-w, 1) !important;
  grid-row: var(--group-y, 1) / span var(--group-h, 1) !important;
  order: 0;
  margin: 0 !important;
  transform: none;
  overflow: hidden;
}
.composer-pages.flow-view .composer-responsive-group .composer-item-preview,
.composer-pages.flow-view .composer-responsive-group .composer-item-preview > .newsletter-block {
  height: 100%;
  min-height: 0;
}
.composer-pages.flow-view .composer-responsive-group .block-content {
  height: 100%;
  padding: clamp(.4rem, 1.35cqw, 1.25rem);
  overflow: hidden;
}
.composer-pages.flow-view .composer-responsive-group .newsletter-block h2 { font-size: clamp(.8rem, 3.1cqw, 2.25rem); }
.composer-pages.flow-view .composer-responsive-group .block-body { font-size: clamp(.54rem, 1.5cqw, 1rem); line-height: 1.35; }

/* Layout parity: grouped desktop and tablet output uses one print-sized canvas
   and scales the complete composition. This preserves line breaks, internal
   gaps, and element proportions instead of recalculating each child fluidly. */
@media screen {
  .web-publication-group,
  .composer-pages.flow-view .composer-responsive-group {
    overflow: hidden;
  }
  .web-publication-group-canvas,
  .composer-pages.flow-view .composer-responsive-group-canvas {
    position: absolute;
    inset: auto;
    top: 0;
    left: 0;
    width: var(--group-logical-width);
    height: var(--group-logical-height);
    grid-template-columns: repeat(var(--group-columns, 12), minmax(0, 1fr));
    grid-template-rows: repeat(var(--group-rows, 12), minmax(0, 1fr));
    gap: 4.8px;
    transform: scale(var(--group-scale, 1));
    transform-origin: top left;
  }
  .web-publication-group-item > .newsletter-block,
  .composer-pages.flow-view .composer-responsive-group .composer-item-preview > .newsletter-block {
    height: 100%;
    margin: 0;
    border-radius: 6px;
    box-shadow: none;
  }
  .web-publication-group-item .block-content,
  .composer-pages.flow-view .composer-responsive-group .block-content {
    height: auto;
    padding: 9.6px;
    overflow: hidden;
  }
  .web-publication-group-item .newsletter-block h2,
  .composer-pages.flow-view .composer-responsive-group .newsletter-block h2 {
    margin-bottom: 3.84px;
    font-size: var(--block-heading-size, 11pt);
  }
  .web-publication-group-item .block-body,
  .composer-pages.flow-view .composer-responsive-group .block-body {
    font-size: var(--block-body-size, 7pt);
    line-height: 1.25;
  }
  .web-publication-group-item .rich-content p,
  .composer-pages.flow-view .composer-responsive-group .rich-content p {
    margin-bottom: min(var(--block-paragraph-spacing, 1rem), 5.28px);
  }
  .web-publication-group-item .block-action,
  .composer-pages.flow-view .composer-responsive-group .block-action {
    margin-top: 3.84px;
    padding: 2.88px 5.76px;
    font-size: 6pt;
  }
  .web-publication-group-item .kind-contact .block-content,
  .composer-pages.flow-view .composer-responsive-group .kind-contact .block-content { padding: 5.76px; }
  .web-publication-group-item .kind-contact .block-body,
  .composer-pages.flow-view .composer-responsive-group .kind-contact .block-body { gap: 5.28px; }
  .web-publication-group-item .kind-contact .block-body > p > a,
  .composer-pages.flow-view .composer-responsive-group .kind-contact .block-body > p > a {
    min-height: 24px;
    grid-template-columns: 19.2px minmax(0, 1fr);
    gap: 4.8px;
    padding: 2.4px 3.84px;
    border-radius: 3.36px;
    white-space: nowrap;
  }
  .web-publication-group-item .kind-contact .block-body > p > a::before,
  .composer-pages.flow-view .composer-responsive-group .kind-contact .block-body > p > a::before {
    width: 17.28px;
    height: 17.28px;
    border-radius: 2.88px;
    font-size: 7pt;
  }
  .composer-pages.flow-view .composer-responsive-group .composer-item-top {
    position: absolute;
    z-index: 11;
    top: 0;
    right: 0;
    left: 0;
    opacity: .82;
  }
  .composer-pages.flow-view .composer-responsive-group .composer-item-preview { inset: 0; }
}

/* Narrow output favors readable stacked cards. The DOM order follows the
   print reading order supplied by ResponsiveLayoutUnitView.member_views. */
@media screen and (max-width: 760px) {
  .web-publication-group {
    aspect-ratio: auto;
    overflow: visible;
  }
  .web-publication-group-canvas {
    position: static;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transform: none;
  }
  .web-publication-group-item {
    display: block;
    grid-column: auto !important;
    grid-row: auto !important;
    overflow: visible;
  }
  .web-publication-group-item > .newsletter-block,
  .web-publication-group-item .block-content { height: auto; overflow: visible; }
  .web-publication-group-item .block-content { padding: clamp(1.35rem, 3vw, 2.35rem); }
  .web-publication-group-item .newsletter-block h2 { font-size: var(--block-heading-size, clamp(1.65rem, 3vw, 2.6rem)); }
  .web-publication-group-item .block-body { font-size: var(--block-body-size, inherit); }
}

.composer-pages.mobile-view .composer-responsive-group {
  aspect-ratio: auto;
  overflow: visible;
}
.composer-pages.mobile-view .composer-responsive-group-canvas {
  position: static;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: none;
}
.page-composer .composer-pages.mobile-view .composer-responsive-group .composer-item {
  display: block;
  min-height: 100px;
  grid-column: auto !important;
  grid-row: auto !important;
  overflow: hidden;
}
.composer-pages.mobile-view .composer-responsive-group .composer-item-top { position: relative; opacity: 1; }
.composer-pages.mobile-view .composer-responsive-group .composer-item-preview { position: relative; inset: auto; min-height: 100px; }
.composer-pages.mobile-view .composer-responsive-group .composer-item-preview > .newsletter-block,
.composer-pages.mobile-view .composer-responsive-group .block-content { height: auto; }