/*------------------------------------------------------------------
print-etiquetes.css - Impressio ad-hoc d'etiquetes A4
-------------------------------------------------------------------*/

@media print {
  @page {
    size: A4 portrait;
    margin: 5mm;
  }

  html,
  body.page-index.page-etiqueta {
    background: var(--oi-print-page-bg, #ffee00) !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body.page-index.page-etiqueta {
    --oi-print-page-width: 210mm;
    --oi-print-page-height: 297mm;
    --oi-print-page-margin: 5mm;
    --oi-print-page-content-width: calc(var(--oi-print-page-width) - (2 * var(--oi-print-page-margin)));
    --oi-print-page-content-height: calc(var(--oi-print-page-height) - (2 * var(--oi-print-page-margin)));
    --oi-print-gap: 3.0mm;
    --oi-print-card-pad-y: 1.12mm;
    --oi-print-card-pad-left: 1.12mm;
    --oi-print-card-pad-right: 2.24mm;
    --oi-print-title-fs: 5.8mm;
    --oi-print-url-fs: 1.95mm;
    --oi-print-description-fs: 2.25mm;
    --oi-print-copy-lh: 1.05;
    --oi-print-qr-size: 13.5mm;
    --oi-print-page-bg: #ffee00;
    --oi-print-cut-color: #000;
    --oi-print-cut-stroke: 0.2mm;
    --oi-print-cut-len: 4mm;
    --oi-print-cut-offset: 2mm;
    --oi-print-top-breathing: 1.5mm;
    --oi-print-cut-y-nudge: 0mm;
    --oi-print-page-area-height: var(--oi-print-page-content-height);
    --oi-print-cut-gutter: calc(var(--oi-print-cut-len) + var(--oi-print-cut-offset));
    max-width: var(--oi-print-page-content-width);
    margin: 0 auto;
  }

  body.page-index.page-etiqueta #waituk-main-header,
  body.page-index.page-etiqueta #nav-section,
  body.page-index.page-etiqueta .oi-navbar,
  body.page-index.page-etiqueta .oi-nav-menu,
  body.page-index.page-etiqueta .footer,
  body.page-index.page-etiqueta .oi-divider-a,
  body.page-index.page-etiqueta .oi-divider-b {
    display: none !important;
  }

  body.page-index.page-etiqueta .oi-etiqueta-heading,
  body.page-index.page-etiqueta .oi-etiqueta-print-cover {
    display: none !important;
  }

  body.page-index.page-etiqueta .oi-etiqueta-section {
    padding: 0 !important;
    margin: 0 !important;
    background: var(--oi-print-page-bg) !important;
  }

  body.page-index.page-etiqueta .oi-etiqueta-pages {
    width: var(--oi-print-page-content-width);
    margin: 0 auto;
  }

  body.page-index.page-etiqueta .oi-etiqueta-page {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    position: relative;
    overflow: visible;
    background: var(--oi-print-page-bg) !important;
    isolation: isolate;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: var(--oi-print-cut-gutter);
    break-inside: avoid;
    page-break-inside: avoid;
  }

  body.page-index.page-etiqueta .oi-etiqueta-cut-top {
    --oi-print-list-width: calc(100% - (2 * var(--oi-print-cut-gutter)));
    --oi-print-cut-x-mid: calc(var(--oi-print-cut-gutter) + (var(--oi-print-list-width) / 2));
    display: block;
    width: 100%;
    height: calc(var(--oi-print-cut-gutter) + var(--oi-print-top-breathing));
    margin: 0;
    background-repeat: no-repeat;
    background-image:
      linear-gradient(var(--oi-print-cut-color), var(--oi-print-cut-color)),
      linear-gradient(var(--oi-print-cut-color), var(--oi-print-cut-color)),
      linear-gradient(var(--oi-print-cut-color), var(--oi-print-cut-color)),
      linear-gradient(var(--oi-print-cut-color), var(--oi-print-cut-color)),
      linear-gradient(var(--oi-print-cut-color), var(--oi-print-cut-color));
    background-size:
      var(--oi-print-cut-len) var(--oi-print-cut-stroke),
      var(--oi-print-cut-stroke) var(--oi-print-cut-len),
      var(--oi-print-cut-len) var(--oi-print-cut-stroke),
      var(--oi-print-cut-stroke) var(--oi-print-cut-len),
      var(--oi-print-cut-stroke) var(--oi-print-cut-len);
    background-position:
      left 0 top calc(var(--oi-print-top-breathing) + var(--oi-print-cut-len)),
      left calc(var(--oi-print-cut-gutter) - var(--oi-print-cut-offset)) top var(--oi-print-top-breathing),
      right 0 top calc(var(--oi-print-top-breathing) + var(--oi-print-cut-len)),
      right calc(var(--oi-print-cut-gutter) - var(--oi-print-cut-offset)) top var(--oi-print-top-breathing),
      left var(--oi-print-cut-x-mid) top var(--oi-print-top-breathing);
  }

  body.page-index.page-etiqueta .oi-etiqueta-page + .oi-etiqueta-page {
    margin-top: 0 !important;
  }

  body.page-index.page-etiqueta .oi-etiqueta-page + .oi-etiqueta-page .oi-etiqueta-cut-top {
    break-before: page;
    page-break-before: always;
  }

  body.page-index.page-etiqueta .oi-etiqueta-list {
    position: relative;
    --oi-print-list-width: calc(100% - (2 * var(--oi-print-cut-gutter)));

    --oi-print-col-width: calc((var(--oi-print-list-width) - var(--oi-print-gap)) / 2);
    /** --oi-print-card-height: calc(var(--oi-print-col-width) * 570 / 1240); **/
    --oi-print-card-height: 42.5mm;
    --oi-print-cut-y-1: calc(var(--oi-print-card-height)  + calc(var( --oi-print-card-pad-y) * 1.5));
    --oi-print-cut-y-2: calc(var(--oi-print-cut-y-1) + var(--oi-print-card-height) + calc(var( --oi-print-card-pad-y) * 2.5));
    --oi-print-cut-y-3: calc(var(--oi-print-cut-y-2) + var(--oi-print-card-height) + calc(var( --oi-print-card-pad-y) * 3));
    --oi-print-cut-y-4: calc(var(--oi-print-cut-y-3) + var(--oi-print-card-height) + calc(var( --oi-print-card-pad-y) * 2.5));
    --oi-print-cut-x-mid: calc(var(--oi-print-cut-gutter) + (var(--oi-print-list-width) / 2));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--oi-print-gap);
    width: var(--oi-print-list-width);
    margin: 0 auto;
    align-items: start;
  }

  body.page-index.page-etiqueta .oi-etiqueta-list::before,
  body.page-index.page-etiqueta .oi-etiqueta-list::after {
    content: "";
    position: absolute;
    left: calc(-1 * var(--oi-print-cut-gutter));
    right: calc(-1 * var(--oi-print-cut-gutter));
    top: 0;
    bottom: calc(-1 * var(--oi-print-cut-gutter));
    pointer-events: none;
    z-index: 3;
    background-repeat: no-repeat;
  }

  body.page-index.page-etiqueta .oi-etiqueta-list::before {
    background-image:    
      linear-gradient(var(--oi-print-cut-color), var(--oi-print-cut-color)),
      linear-gradient(var(--oi-print-cut-color), var(--oi-print-cut-color)),
      linear-gradient(var(--oi-print-cut-color), var(--oi-print-cut-color)),
      linear-gradient(var(--oi-print-cut-color), var(--oi-print-cut-color)),
      linear-gradient(var(--oi-print-cut-color), var(--oi-print-cut-color)),
      linear-gradient(var(--oi-print-cut-color), var(--oi-print-cut-color)),
      linear-gradient(var(--oi-print-cut-color), var(--oi-print-cut-color)),
      linear-gradient(var(--oi-print-cut-color), var(--oi-print-cut-color));
    background-size:
      var(--oi-print-cut-len) var(--oi-print-cut-stroke),
      var(--oi-print-cut-len) var(--oi-print-cut-stroke),
      var(--oi-print-cut-len) var(--oi-print-cut-stroke),
      var(--oi-print-cut-len) var(--oi-print-cut-stroke),
      var(--oi-print-cut-len) var(--oi-print-cut-stroke),
      var(--oi-print-cut-len) var(--oi-print-cut-stroke),
      var(--oi-print-cut-len) var(--oi-print-cut-stroke),
      var(--oi-print-cut-len) var(--oi-print-cut-stroke);
    background-position:
      left 0 top var(--oi-print-cut-y-1),
      right 0 top var(--oi-print-cut-y-1),
      left 0 top var(--oi-print-cut-y-2),
      right 0 top var(--oi-print-cut-y-2),
      left 0 top var(--oi-print-cut-y-3),
      right 0 top var(--oi-print-cut-y-3),
      left 0 top var(--oi-print-cut-y-4),
      right 0 top var(--oi-print-cut-y-4);

  } 

  body.page-index.page-etiqueta .oi-etiqueta-list::after {
    background-image:
      linear-gradient(var(--oi-print-cut-color), var(--oi-print-cut-color)),
      linear-gradient(var(--oi-print-cut-color), var(--oi-print-cut-color)),
      linear-gradient(var(--oi-print-cut-color), var(--oi-print-cut-color)),
      linear-gradient(var(--oi-print-cut-color), var(--oi-print-cut-color)),
      linear-gradient(var(--oi-print-cut-color), var(--oi-print-cut-color));
    background-size:
      var(--oi-print-cut-len) var(--oi-print-cut-stroke),
      var(--oi-print-cut-stroke) var(--oi-print-cut-len),
      var(--oi-print-cut-len) var(--oi-print-cut-stroke),
      var(--oi-print-cut-stroke) var(--oi-print-cut-len),
      var(--oi-print-cut-stroke) var(--oi-print-cut-len);
    background-position:
      left 0 bottom calc(var(--oi-print-cut-gutter) - var(--oi-print-cut-offset)),
      left calc(var(--oi-print-cut-gutter) - var(--oi-print-cut-offset)) bottom 0,
      right 0 bottom calc(var(--oi-print-cut-gutter) - var(--oi-print-cut-offset)),
      right calc(var(--oi-print-cut-gutter) - var(--oi-print-cut-offset)) bottom 0,
      left var(--oi-print-cut-x-mid) bottom 0;
  }

  body.page-index.page-etiqueta .oi-etiqueta-card {
    grid-template-columns: minmax(0, 542fr) minmax(0, 628fr);
    gap: var(--oi-print-gap);
    padding: var(--oi-print-card-pad-y) var(--oi-print-card-pad-right) var(--oi-print-card-pad-y) var(--oi-print-card-pad-left);
    aspect-ratio: 1240 / 570;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    -webkit-column-break-inside: avoid !important;
    -webkit-region-break-inside: avoid !important;
  }

  body.page-index.page-etiqueta .oi-etiqueta-card__left {
    height: 100%;
    overflow: hidden;
  }

  body.page-index.page-etiqueta .oi-etiqueta-card__left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body.page-index.page-etiqueta .oi-etiqueta-card__right {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0.9mm;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body.page-index.page-etiqueta .oi-etiqueta-card__meta {
    min-height: 0;
    overflow: hidden;
  }

  body.page-index.page-etiqueta .oi-etiqueta-card__title {
    font-size: var(--oi-print-title-fs);
    line-height: 0.88;
    margin-bottom: 0.55mm;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    overflow: hidden;
  }

  body.page-index.page-etiqueta .oi-etiqueta-card__title--long {
    font-size: 5mm;
    line-height: 0.84;
  }

  body.page-index.page-etiqueta .oi-etiqueta-card__title--very-long {
    font-size: 4.35mm;
    line-height: 0.82;
  }

  body.page-index.page-etiqueta .oi-etiqueta-song-url {
    font-size: var(--oi-print-url-fs);
    line-height: 0.95;
    display: block;
    max-height: calc(2 * 0.95em);
    white-space: normal;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  body.page-index.page-etiqueta .oi-etiqueta-song-description {
    font-size: var(--oi-print-description-fs);
    line-height: var(--oi-print-copy-lh);
    font-weight: 200;
    height: var(--oi-print-qr-size);
    max-height: var(--oi-print-qr-size);
    display: block;
    min-height: 0;
    overflow: hidden;
  }

  body.page-index.page-etiqueta .oi-etiqueta-card__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--oi-print-qr-size);
    gap: 1.1mm;
    align-items: start;
    min-height: var(--oi-print-qr-size);
    break-inside: avoid;
    page-break-inside: avoid;
  }

  body.page-index.page-etiqueta .oi-etiqueta-card__spotify {
    min-width: 0;
    margin-top: auto;
  }

  body.page-index.page-etiqueta .oi-etiqueta-code-link {
    display: block;
    width: 100%;
    border: 0;
    padding: 0;
  }

  body.page-index.page-etiqueta .oi-etiqueta-code-link--qr {
    width: var(--oi-print-qr-size);
    justify-self: end;
    align-self: end;
  }

  body.page-index.page-etiqueta .oi-etiqueta-spotify-code {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  body.page-index.page-etiqueta .oi-etiqueta-spotify-barcode {
    width: 100%;
    height: auto;
    min-width: 0;
    display: block;
    object-fit: contain;
  }

  body.page-index.page-etiqueta .oi-etiqueta-youtube-code {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5mm;
  }

  body.page-index.page-etiqueta .oi-etiqueta-youtube-code img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
  }
}