/* Mobile-only V1 fixes for Discover density and Attention information hierarchy.
   Layout/presentation only: no content, typography, lifecycle, storage or routing changes. */

@media(max-width:780px){
  /* Discover: use the mobile canvas as a dense two-column browse surface. */
  .discover-page .offer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px 10px;
    align-items:start;
  }

  .discover-page .mock-visual-card,
  .discover-page .fallback-offer-card{
    width:100%;
    max-width:none;
    margin:0;
  }

  .discover-page .mock-visual-card{
    height:auto;
    aspect-ratio:202/330;
  }

  .discover-page .offer-card-mock{
    width:100%;
    height:100%;
  }

  /* Runtime Offer Card mobile geometry is owned by mobile-primary-page-focus.css.
     Keep this layer focused on the grid and surrounding Discover controls. */

  .discover-page .filters{
    scroll-snap-type:x proximity;
    scroll-padding-inline:16px;
    padding-right:20px;
  }

  .discover-page .pill{
    flex:0 0 auto;
    scroll-snap-align:start;
  }

  /* Attention: the top area only carries the page title on mobile. */
  .attention-page .attention-top{
    display:block;
  }

  .attention-page .attention-toolbar{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:8px;
    align-items:stretch;
    height:auto;
    min-height:0;
  }

  .attention-page .mock-tabs{
    width:100%;
    min-width:0;
    overflow:visible;
  }

  /* Mobile Attention uses a compact 2x2 information grid:
     product / action on the first line, instance / date on the second.
     Card artwork and tertiary explanation stay out of the collapsed list. */
  .attention-page .attention-row:not(.history-row){
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) 18px;
    grid-template-areas:
      "product-name action chev"
      "instance time chev";
    gap:5px 12px;
    padding:12px;
    align-items:center;
  }

  .attention-page .attention-row:not(.history-row) .att-product-cell,
  .attention-page .attention-row:not(.history-row) .att-product-copy,
  .attention-page .attention-row:not(.history-row) .att-action-cell{
    display:contents;
  }

  .attention-page .attention-row:not(.history-row) .att-thumb{
    display:none;
  }

  .attention-page .attention-row:not(.history-row) .att-product-copy strong{
    grid-area:product-name;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .attention-page .attention-row:not(.history-row) .att-product-copy small{
    grid-area:instance;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .attention-page .attention-row:not(.history-row) .att-action-cell strong{
    grid-area:action;
    min-width:0;
    max-width:100%;
    justify-self:end;
    text-align:right;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }

  .attention-page .attention-row:not(.history-row) .att-action-cell small{
    display:none;
  }

  .attention-page .attention-row:not(.history-row) .att-time{
    grid-area:time;
    justify-self:end;
    align-self:center;
    margin-left:0;
    text-align:right;
    white-space:nowrap;
  }

  .attention-page .attention-row:not(.history-row) .chev{
    grid-area:chev;
    align-self:center;
    justify-self:end;
  }

  /* History keeps the same hierarchy and uses the final line for time + result. */
  .history-attention-box .attention-row.history-row{
    grid-template-columns:minmax(0,1fr) auto 18px;
    grid-template-areas:
      "product product chev"
      "action action chev"
      "time status chev";
    gap:5px 8px;
    padding:12px;
    align-items:start;
  }

  .history-attention-box .history-status{
    grid-area:status;
    justify-self:end;
    align-self:start;
  }
}

@media(max-width:340px){
  .discover-page .offer-grid{
    grid-template-columns:1fr;
  }

  .discover-page .offer-card.nb-offer-card{
    width:100%;
  }
}