/* Compact layouts follow the actual profile/card width, keeping source order. */
.pdm .pdm-atomic {
  display:inline-block;
  white-space:nowrap;
  word-break:keep-all;
  overflow-wrap:normal;
  font:inherit;
}

@container (max-width:560px) {
  .pdm .pdm-canvas {
    --qsp-fit-value:clamp(16px,calc(10px + 3cqi),var(--pdm-mobile-value,16px));
    --qsp-fit-label:clamp(13px,calc(10px + 1cqi),var(--pdm-mobile-label,13px));
    --qsp-fit-pad:clamp(5px,2cqi,9px);
    --qsp-fit-gap:var(--pdm-mobile-gap,6px);
    --qsp-fit-columns:var(--pdm-mobile-title-cols,3);
    --qsp-fit-content:calc(var(--qsp-fit-value) * 4.1 + var(--qsp-fit-pad) * 2 + 2px);
    --qsp-fit-track:max(var(--qsp-fit-content),calc((100% - (var(--qsp-fit-columns) - 1) * var(--qsp-fit-gap)) / var(--qsp-fit-columns)));
  }
  .pdm.pdm-body .pdm-canvas {
    --qsp-fit-columns:var(--pdm-mobile-body-cols,2);
    --qsp-fit-content:calc(var(--qsp-fit-value) * 7 + var(--qsp-fit-pad) * 2 + 2px);
  }
  .pdm.pdm-title .pdm-canvas>.pdm-layout-root,
  .pdm.pdm-body .pdm-canvas>.pdm-layout-root {
    display:grid!important;
    grid-template-areas:none!important;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--qsp-fit-track)),1fr))!important;
    grid-auto-flow:row!important;
    align-items:stretch;
    gap:var(--qsp-fit-gap)!important;
    padding:clamp(6px,2cqi,12px)!important;
    min-width:0;
    height:auto!important;
  }
  /* The A/B/C/D desktop compositions must not create separate compact grids. */
  .pdm.pdm-reference .pdm-canvas>.pdm-layout-root>.pdm-r-zone,
  .pdm .pdm-canvas .pdm-layout-group:not(.pdm-layout-root):not([aria-hidden="true"]) {
    display:contents!important;
  }
  .pdm.pdm-title .pdm-canvas .pdm-layout-root .pdm-field,
  .pdm.pdm-body .pdm-canvas .pdm-layout-root .pdm-field {
    display:block!important;
    grid-column:auto!important;
    grid-row:auto!important;
    align-self:stretch;
    min-width:0;
    width:auto;
    min-height:0!important;
    height:auto!important;
    padding:var(--qsp-fit-pad)!important;
    text-align:start;
  }
  .pdm.pdm-reference .pdm-canvas .pdm-layout-root .pdm-field {
    border:1px solid var(--pdm-border);
    border-radius:7px;
    background:var(--pdm-panel);
    box-shadow:none;
  }
  .pdm.pdm-reference .pdm-canvas .pdm-layout-root .pdm-field>.profile-value {color:var(--pdm-text)!important;}
  .pdm.pdm-reference .pdm-canvas .pdm-layout-root .pdm-field>.profile-label {color:var(--pdm-muted)!important;}
  .pdm.pdm-title .pdm-canvas .pdm-layout-root .pdm-field>.profile-label,
  .pdm.pdm-body .pdm-canvas .pdm-layout-root .pdm-field>.profile-label {
    display:block;
    width:auto;
    min-width:0;
    margin:0 0 4px;
    font-size:var(--qsp-fit-label)!important;
    line-height:1.45;
    white-space:normal;
    word-break:normal;
    overflow-wrap:anywhere;
  }
  .pdm.pdm-title .pdm-canvas .pdm-layout-root .pdm-field>.profile-value,
  .pdm.pdm-body .pdm-canvas .pdm-layout-root .pdm-field>.profile-value {
    display:block;
    min-width:0;
    width:auto;
    font-size:var(--qsp-fit-value)!important;
    line-height:1.5!important;
    white-space:normal;
    word-break:normal;
    overflow-wrap:anywhere;
    max-height:none;
    overflow:visible;
  }
  .pdm.pdm-title .pdm-canvas .pdm-layout-root :is(.pdm-mobile-wide,.profile-nickname,.profile-price,.profile-contact-code),
  .pdm.pdm-body .pdm-canvas .pdm-layout-root :is(.pdm-mobile-wide,.profile-description,.profile-other),
  .pdm.pdm-reference .pdm-canvas .pdm-layout-root .pdm-r-media {
    grid-column:1/-1!important;
  }
  .pdm.pdm-title .pdm-canvas .pdm-layout-root .profile-nickname {
    background:transparent;
    border:0;
  }
  .pdm.pdm-title .pdm-canvas .pdm-layout-root .profile-nickname>.profile-value {
    font-size:calc(var(--qsp-fit-value) + 4px)!important;
  }
  .pdm .pdm-canvas .pdm-layout-root .pdm-atomic {
    white-space:nowrap!important;
    overflow-wrap:normal!important;
    word-break:keep-all!important;
  }
}

@container (max-width:330px) {
  .pdm.pdm-title .pdm-canvas { --qsp-fit-columns:2; }
}

/* A readable one-column fallback for browsers without container queries. */
@supports not (container-type:inline-size) {
  @media (max-width:600px) {
    .pdm .pdm-canvas>.pdm-layout-root {display:grid!important;grid-template-areas:none!important;grid-template-columns:minmax(0,1fr)!important;}
    .pdm.pdm-reference .pdm-r-zone {display:contents!important;}
    .pdm .pdm-canvas .pdm-field {grid-column:1/-1!important;min-width:0;height:auto;}
  }
}