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