/* Top of the page on a phone (owner, 23 Oct. 2026): the criteria first, then the results. The eight shared rules
   P1-P8 of docs/design/haut-des-pages-mobile-2026-10-23.md. Phone only, existing tokens only; loaded after
   zz_page_heroes.css and zz_site_header.css on purpose. Page-specific changes stay next to their page. */

@media (max-width: 760px) {
  /* P1. No eyebrow when the H1 already names the page. An eyebrow that completes the title (« Meilleure carte de
     crédit pour » + « Épicerie ») carries `eyebrow--title` and stays. */
  :is(.offers-hero, .programs-hero, .page-hero, .wizard-hero, .usage-hero, .persona-hero, .catalogue-hero,
    .provincial-cards-hero, .provincial-hub-heading, .strategy-finder__hero, .guides-index-header)
    :is(.eyebrow:not(.eyebrow--title), .programs-hero__eyebrow, .provincial-cards-hero__badge) {
    display: none;
  }

  /* P1. The compact-hero rule, extended to the heroes zz_page_heroes.css does not cover. */
  .brand-continuity :is(.programs-hero, .provincial-cards-hero, .page-hero--compact) {
    gap: 12px;
    margin-block: 8px 20px;
    padding: 20px;
  }
  .brand-continuity :is(.provincial-cards-hero, .page-hero--compact, .provincial-hub-heading) h1 {
    margin: 0 0 8px;
    font-size: 1.375rem;
    line-height: 1.15;
  }
  .brand-continuity .page-hero--compact { padding-block: 20px; }
  .brand-continuity .page-hero--compact .page-intro { margin: 0; font-size: .9375rem; line-height: 1.5; }
  .brand-continuity .provincial-hub-heading { margin-block: 8px 12px; }

  /* The questionnaire and the trip finder: at step 1 the title alone; from step 2 the progress bar and the
     question name the screen, so the hero leaves the screen but its H1 stays for screen readers. */
  .wizard-hero .eyebrow,
  .wizard-hero__copy > p,
  .wizard-hero__illustration { display: none; }
  .wizard-page .wizard-hero { padding: .8rem 1rem; }
  .wizard-page .wizard-hero:not(.wizard-hero--step-1) {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
    white-space: nowrap;
  }

  /* P2. The guarantees are one small line (zz_page_heroes.css); never a second copy lower on the page. The « net
     value, fees deducted » guarantee repeats the hero sentence, which now says it: it leaves the phone line. */
  .offers-trust-markers + .offers-trust-markers,
  .offers-trust-markers li.offers-trust-markers__item--net { display: none; }

  /* P3. Breadcrumbs on one line: when the trail is deep, only the direct parent shows (« ‹ Mes points »); the
     navigation keeps its full label. */
  :is(.guide-breadcrumb, .points-breadcrumbs, .provincial-cards-page .breadcrumbs) {
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
  }
  .points-breadcrumbs:has(> a:nth-of-type(3)) > :not(a:last-of-type) { display: none; }
  .points-breadcrumbs:has(> a:nth-of-type(3)) > a:last-of-type::before { content: "‹ " / ""; }

  /* P4. The section tabs: one 44 px row, short labels. */
  .top-picks-section-navigation { grid-template-columns: repeat(3, auto); margin-block: .5rem .75rem; padding: 2px; }
  .top-picks-section-navigation__link { min-height: 44px; padding: 0 .5rem; white-space: nowrap; font-size: .8125rem; }

  /* P7. A decorative figure never comes before the first control. */
  .provincial-cards-hero .jurisdiction-map,
  .wizard-page .wizard-hero__illustration { display: none; }
}

/* P8. The sticky header shortens to about 56 px once the page is scrolled (header_scroll_controller adds
   `is-compact`); the home slogan folds with it. Phone only: the desktop header keeps its height. */
@media (max-width: 767.98px) {
  .site-header:not(.site-header--application) .header-inner { transition: min-height .2s ease; }
  .site-header.is-compact .header-inner,
  .fintech-home .site-header.is-compact .header-inner { min-height: 55px; }
  .site-header.is-compact .brand-lockup__slogan { display: none; }
  :root:has(.site-header.is-compact) { --header-height-compact: 55px; }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .site-header:not(.site-header--application) .header-inner { transition: none; }
}

/* ---- Page items of the same audit (N1-N48), phone only unless said otherwise ------------------------------- */

/* Offers and Points (N1-N4, N20-N33). The tier heading loses its descriptor on a phone (N22); the valuation
   details fold under the cards of a program page (N26); the alerts button follows the offers (N3). */
.programs-tier__heading-short { display: none; }
.programs-valuation__details { margin-top: .25rem; }
.offers-alerts-after { margin: 1rem 0 0; }

@media (max-width: 760px) {
  .programs-tier__band h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
    white-space: nowrap;
  }
  .programs-tier__heading-short { display: block; margin: 0; color: var(--ciq-ink); font-size: var(--type-h2); font-weight: 750; letter-spacing: -.02em; line-height: 1.2; }
  .programs-tier__count { margin-top: 2px; }
  /* P5: the remaining hero links fit one line. */
  .programs-hero__official { flex-wrap: nowrap; gap: var(--space-4); margin-top: 10px; white-space: nowrap; }
  .programs-hero__official .text-link { display: inline-flex; min-height: 44px; align-items: center; }
}

/* Provinces (N36-N47). The eligibility line opens on the full count (N42); « Pourquoi ce classement » follows
   the cards (N46). */
.provincial-eligibility-summary > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-height: 44px; cursor: pointer; list-style: none; }
.provincial-eligibility-summary > summary::-webkit-details-marker { display: none; }
.provincial-eligibility-summary__more { color: var(--color-link); font-size: var(--text-sm); font-weight: 700; }
.provincial-eligibility-summary__more::after { content: ""; display: inline-block; width: .4rem; height: .4rem; margin-left: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.provincial-eligibility-summary[open] .provincial-eligibility-summary__more::after { transform: translateY(1px) rotate(-135deg); }
.provincial-eligibility-summary > p,
.provincial-strategy__why > p { margin: .25rem 0 .5rem; }
.provincial-strategy__why { margin-top: .5rem; }
/* The province hero is a navy band: its eligibility line reads like the intro (no box of its own, aligned with it),
   its fold in the on-dark link colour. */
.brand-continuity .provincial-cards-hero .provincial-eligibility-summary { padding: 0; background: transparent; color: #dae3f3; }
.brand-continuity .provincial-cards-hero .provincial-eligibility-summary__more { color: var(--ciq-link-on-dark); }
.brand-continuity .provincial-cards-hero .provincial-eligibility-summary__more:hover { color: var(--ciq-link-on-dark-hover); }

@media (max-width: 760px) {
  /* Hub: a smaller map (the select covers the small territories); the ranking eyebrow goes. */
  .provincial-hub-map .jurisdiction-map { width: min(100%, 16.5rem); }
  .brand-continuity .provincial-hub-heading { padding: 18px 20px; }
  .provincial-hub-panel__heading .eyebrow { display: none; }
  .provincial-hub-panel__heading { margin-bottom: .5rem; }

  /* Province pages: a one-column hero without its map, the short summary and its fold, then the criteria. */
  .provincial-cards-hero--with-map { display: block; }
  .provincial-cards-hero--detail h1 { margin: 0 0 6px; font-size: 1.375rem; }
  .provincial-cards-hero--detail .page-intro { margin: 0; }
  .brand-continuity .provincial-eligibility-summary { margin: 8px 0 0; font-size: .875rem; }
  .brand-continuity .provincial-strategy__heading { gap: 8px; }
  .brand-continuity .provincial-strategy__heading h2 { margin-bottom: 0; }
  .provincial-ranking-filters__heading h2 { margin: 0 0 .25rem; font-size: 1.125rem; }
  .provincial-strategy__heading .eyebrow { display: none; }
}

/* Best cards, strategy finder, questionnaire (N5-N7, N10-N15, N34-N35). */
@media (max-width: 760px) {
  /* The choice cards of the hero row are shorter on a phone: the icon beside the label, the description on one
     line, smaller padding. */
  .usage-dashboard .usage-v4-grid { grid-template-columns: repeat(7, 10.5rem); grid-auto-columns: 10.5rem; }
  :is(.usage-dashboard, .persona-dashboard) .persona-v4-grid .persona-v4-choice {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: start;
    gap: 2px 8px;
    min-height: 0;
    padding: 8px 10px;
  }
  :is(.usage-dashboard, .persona-dashboard) .persona-v4-grid .persona-v4-choice > .strategy-choice-icon { grid-row: 1; width: 1.5rem; height: 1.5rem; }
  :is(.usage-dashboard, .persona-dashboard) .persona-v4-grid .persona-v4-choice > .strategy-choice-icon svg { width: 1rem; height: 1rem; }
  :is(.usage-dashboard, .persona-dashboard) .persona-v4-grid .persona-v4-choice > strong { grid-row: 1; align-self: center; }
  :is(.usage-dashboard, .persona-dashboard) .persona-v4-grid .persona-v4-choice > span:not(.strategy-choice-icon) {
    grid-column: 1 / -1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.35;
  }
  /* The province link of the hero: short, on one line, in the link colour made for the navy band. */
  .brand-continuity .usage-dashboard__crosslink { margin-top: 4px; }
  .brand-continuity .usage-dashboard .usage-dashboard__intro { margin-bottom: 0; }
  .brand-continuity .usage-dashboard .usage-v4-grid { margin-top: 0; }
  .brand-continuity .usage-dashboard__crosslink .text-link {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: var(--ciq-link-on-dark);
    white-space: nowrap;
  }

  /* Strategy finder: the title alone in the hero; the profile cards are the first thing to choose. */
  .brand-continuity .strategy-finder__hero :is(.page-intro, .strategy-finder__steps) { display: none; }

  /* Questionnaire (N14): the two methods as two 44 px tabs, the manual entry active. */
  .spending-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0 0 .75rem; }
  .spending-method { min-height: 44px; justify-content: center; padding: 4px 8px; text-align: center; }
  .spending-method small,
  .spending-method .wizard-choice-icon { display: none; }
  .spending-method strong { font-size: .8125rem; line-height: 1.2; }
  /* P6: a help paragraph never stands between the question and its answers; it follows them. */
  .wizard-question { display: flex; flex-direction: column; }
  .wizard-question > * { order: 1; }
  .wizard-question > h2 { order: 0; margin-bottom: .75rem; }
  .wizard-question > .question-help { order: 2; margin-top: .75rem; }
}

/* Card sheet and guides (N8-N9, N16-N19). */
.guide-meta--short { display: none; }

@media (max-width: 760px) {
  /* Card sheet (N9): the spending level right under the amount it moves, as one 44 px segmented row; the apply
     button still ends inside the first screen. */
  .card-product-estimate > :is(.card-product-estimate__heading, .card-product-estimate__amount) { order: -2; }
  .card-product-estimate .card-spending-level { order: -1; margin: 0 0 .5rem; }
  .card-dashboard__value .card-spending-level fieldset { padding: 0; background: transparent; }
  .card-dashboard__value .card-spending-level legend { margin-bottom: 4px; }
  .card-dashboard__value .card-spending-level__option { min-height: 44px; padding-block: 2px; line-height: 1.15; }

  /* Guides (N17): the theme anchors as one scrolling row right under the hero. */
  .guides-themes { flex-wrap: nowrap; gap: 0 1rem; margin: 0 0 1rem; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
  .guides-themes::-webkit-scrollbar { display: none; }

  /* Guide article (N18, N19): the photo leaves the phone; the meta line is the short one. */
  .guide-article > .guide-hero { display: none; }
  .guide-meta--full { display: none; }
  .guide-meta--short { display: block; margin: 0 0 6px; }
}