/* Mobile labels retain the editorial hierarchy without shrinking below 12px.
 * Load after the page/tool styles. Scoped overrides also cover older article CSS.
 * Inputs, body copy, headings, icons and the SVG wordmark are intentionally excluded.
 */
@media screen and (max-width: 767px) {
  body.bn-package1 {
    --label-size: 12px;
  }

  body.bn-package1 :is(
    .eyebrow,
    .side-meta,
    .topic-hint,
    .photo-corner,
    .location-label,
    .photo-caption-chip,
    .reading-list-label,
    .reading-note small,
    .tool-format,
    .editor-portrait figcaption,
    .dp-kicker,
    .dp-card-meta,
    .dp-next-label,
    .dp-photo-note,
    .dp-intro-photo figcaption > span,
    .rp-eyebrow,
    .rp-tool-kind,
    .rp-market-preview span,
    .rp-free-label,
    .site-search-category,
    .gp-hero-label > span:first-child,
    .gp-facts span,
    .gp-route > div > span,
    .gp-day-city,
    .gp-day-meta,
    .gp-stay-index,
    .gp-next-grid > a > span,
    .tool-kicker,
    .tool-step-label,
    .tool-tag,
    .mf-card-meta,
    .mk-free-tag,
    .mk-item-total > span,
    .pl-summary-label,
    .pl-stay-label,
    .pl-day-kind,
    .ww-aff-eyebrow,
    .ww-pilot .city-stop,
    .ww-pilot .tag
  ) {
    font-size: 12px !important;
    line-height: 1.5;
    letter-spacing: .06em;
  }

  body.bn-package1 :is(
    .bn-post-dates,
    .bn-updated-date,
    .bn-p5-updated,
    .dp-breadcrumb,
    .gp-breadcrumb,
    .rp-breadcrumb,
    .tool-breadcrumb,
    .gp-byline > div > a,
    .gp-hero > figcaption,
    .gp-toc > summary,
    .gp-toc nav > a > span,
    .gp-plan-tabs > button > span,
    .gp-panel-summary > span,
    .dp-control-label,
    .dp-results-bar p:last-child,
    .dp-directory-note,
    .cl-preview figcaption,
    .mf-optional,
    .mf-match,
    .mk-progress-area > div > span:last-child,
    .mk-group > legend > span,
    .wc-group-count,
    .pl-day-date,
    .pl-edit-footer > span,
    .footer-brand p,
    .footer-bottom,
    .bn-p5-page.bn-p5-country .bn-p5-body .card p.label
  ) {
    font-size: 12px !important;
    line-height: 1.5;
  }

  /* The existing legacy callout gives its small font !important. */
  body.bn-package1 .bn-pilot-body .ww-planner-invite > p:first-child {
    font-size: 12px !important;
    line-height: 1.5 !important;
    letter-spacing: .06em !important;
  }

  /* Let enlarged labels wrap instead of squeezing their neighbours. */
  body.bn-package1 :is(
    .photo-corner,
    .mf-card-meta,
    .wc-output-heading,
    .mk-output-heading,
    .pl-output-heading
  ) {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  body.bn-package1 :is(
    .location-label,
    .photo-caption-chip,
    .dp-photo-note,
    .tool-tag,
    .tool-format,
    .side-heading > .eyebrow
  ) {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body.bn-package1 .location-label {
    max-width: calc(100% - 32px);
  }

  body.bn-package1 .photo-corner > :last-child {
    flex-shrink: 0;
  }
}

@media screen and (max-width: 600px) {
  body.bn-package1 :is(
    .mk-summary,
    .mk-progress-area > div,
    .mk-result-actions .tool-primary,
    .mk-result-actions .tool-secondary,
    .pl-output-actions button
  ) {
    font-size: 12px !important;
    line-height: 1.5;
  }
}