/*
 * Tahap 21.7 — Public Mobile Contract
 * FINAL viewport authority for <=639px.
 * This stylesheet must never affect tablet/desktop.
 */
@layer project {
  @media (max-width:639px) {
    /* Neutralize legacy broad descendant text rules on icon internals. */
    .home-chain-node [data-anva-public-icon],
    .home-process .home-process-icon [data-anva-public-icon],
    .home-action-card [data-anva-public-icon],
    .home-market-top [data-anva-public-icon]{
      display:inline-grid;
      margin:var(--space-0);
      padding:var(--space-0);
      color:inherit;
      font-size:var(--type-caption);
      font-weight:var(--weight-regular);
      line-height:var(--leading-tight);
    }

    /* Journey becomes a compact flat timeline. */
    .home-chain-card{
      padding:var(--space-0);
      border:var(--space-0);
      border-radius:var(--space-0);
      background:transparent;
      box-shadow:none;
    }
    .home-chain-head{padding-bottom:var(--space-3)}
    .home-chain-visual{
      grid-template-columns:1fr;
      gap:var(--space-0);
      padding:var(--space-2) var(--space-0) var(--space-0);
    }
    .home-chain-visual > i{display:none}
    .home-chain-node{
      position:relative;
      min-height:var(--space-0);
      display:grid;
      grid-template-columns:var(--space-10) minmax(0,1fr);
      grid-template-rows:auto auto;
      column-gap:var(--space-3);
      row-gap:var(--space-1);
      align-items:start;
      padding-block:var(--space-3);
    }
    .home-chain-node:not(:last-of-type)::after{
      content:"";
      position:absolute;
      left:calc(var(--space-10) / 2);
      top:var(--space-10);
      bottom:calc(var(--space-3) * -1);
      width:1px;
      background:var(--color-border);
    }
    .home-chain-node > b{
      position:relative;
      grid-column:1;
      grid-row:1 / span 2;
      align-self:start;
    }
    .home-chain-node > span{
      display:block;
      grid-column:2;
      grid-row:1;
      padding-top:var(--space-1);
      color:var(--color-text);
      font-size:var(--type-label);
      font-weight:var(--weight-semibold);
      line-height:var(--leading-tight);
    }
    .home-chain-node > small{
      display:block;
      grid-column:2;
      grid-row:2;
      max-inline-size:var(--measure-body);
      color:var(--color-text-muted);
      font-size:var(--type-body-sm);
      line-height:var(--leading-compact);
    }

    /* Pelaku Ekosistem: no absolute icon, no title overlap. */
    .home-actor-grid{grid-template-columns:1fr}
    .home-actor-grid article,
    .home-actor-grid article:nth-child(even),
    .home-actor-grid article:not(:nth-child(3n + 1)){
      position:relative;
      min-height:var(--space-0);
      display:grid;
      grid-template-columns:var(--space-10) minmax(0,1fr);
      grid-template-rows:auto auto;
      column-gap:var(--space-3);
      row-gap:var(--space-2);
      align-content:start;
      padding:var(--space-4) var(--space-0);
      border-left:var(--space-0);
      border-bottom:1px solid var(--color-border);
    }
    .home-actor-grid article > .home-process-icon{
      position:static;
      left:auto;
      top:auto;
      grid-column:1;
      grid-row:1 / span 2;
      align-self:start;
    }
    .home-actor-grid article > strong{
      grid-column:2;
      grid-row:1;
      min-width:var(--space-0);
      align-self:center;
      font-size:var(--type-body);
      line-height:var(--leading-tight);
    }
    .home-actor-grid article > p{
      grid-column:2;
      grid-row:2;
      min-width:var(--space-0);
      margin:var(--space-0);
      font-size:var(--type-body-sm);
      line-height:var(--leading-body);
    }

    .home-impact-grid,
    .home-trace-grid,
    .home-trace-page-grid,
    .home-seller-detail-grid,
    .home-seller-hero-card{grid-template-columns:1fr}

    .home-footer-grid{grid-template-columns:1fr}
    .home-footer-grid > div:first-child{grid-column:auto}
  }
}


/* Tahap 21.8 — Mobile editorial flow.
 * Do not force all content into a vertical stack. Use swipe rails where comparison/discovery benefits.
 */
@layer project {
  @media (max-width:639px) {
    .home-hero-copy h1,
    .home-section-head h2,
    .home-subhero h1,
    .home-cta h2,
    .home-impact h2,
    .home-trace-band h2,
    .home-seller-info h1{
      max-inline-size:none;
      width:auto;
      text-wrap:pretty;
      overflow-wrap:normal;
      word-break:normal;
    }

    /* Primary actions: horizontal snap rail. */
    .home-action-grid{
      display:grid;
      grid-template-columns:none;
      grid-auto-flow:column;
      grid-auto-columns:minmax(78vw,19rem);
      gap:var(--space-3);
      overflow-x:auto;
      overflow-y:hidden;
      padding-block:var(--space-1) var(--space-3);
      scroll-snap-type:x mandatory;
      scroll-padding-inline:var(--space-1);
      overscroll-behavior-inline:contain;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      border-top:0;
    }
    .home-action-grid::-webkit-scrollbar{display:none}
    .home-action-card{
      min-height:calc(var(--space-20) + var(--space-10));
      grid-template-columns:var(--space-10) minmax(0,1fr) auto;
      scroll-snap-align:start;
      border:1px solid var(--color-border);
      border-radius:var(--radius-lg);
      padding:var(--space-4);
      background:var(--color-surface);
    }
    .home-action-card:last-child{scroll-snap-align:end}

    /* Marketplace uses a second, visually different rail; Bank Sampah and actors stay list-like. */
    .home-market-grid,
    .home-market-page{
      display:grid;
      grid-template-columns:none;
      grid-auto-flow:column;
      grid-auto-columns:minmax(82vw,20rem);
      gap:var(--space-3);
      overflow-x:auto;
      overflow-y:hidden;
      padding-bottom:var(--space-3);
      scroll-snap-type:x mandatory;
      scroll-padding-inline:var(--space-1);
      overscroll-behavior-inline:contain;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
    }
    .home-market-grid::-webkit-scrollbar,
    .home-market-page::-webkit-scrollbar{display:none}
    .home-market-card{scroll-snap-align:start}
    .home-market-card:last-child{scroll-snap-align:end}

    /* Persistent bottom nav owns its own compositor layer and never participates in content transition. */
    .home-bottom-nav[data-persistent-public-nav="stage21.8"]{
      transform:translateZ(0);
      backface-visibility:hidden;
      contain:layout style;
      isolation:isolate;
    }
  }
}


/* Tahap 21.9 — Public copy layout contract.
 * Compact viewports give headings the full content column and avoid artificial text balancing.
 */
@layer project {
  @media (max-width:639px) {
    .home-section-head{
      grid-template-columns:1fr;
      align-items:start;
      gap:var(--space-3);
    }
    .home-section-head > div:first-child,
    .home-subhero-inner > div:first-child{
      min-width:var(--space-0);
      max-inline-size:none;
    }
    .home-hero-copy h1,
    .home-section-head h2,
    .home-subhero h1,
    .home-cta h2,
    .home-impact h2,
    .home-trace-band h2,
    .home-seller-info h1{
      max-inline-size:none;
      width:auto;
      text-wrap:wrap;
      overflow-wrap:normal;
      word-break:normal;
      hyphens:none;
    }
    .home-section-head p,
    .home-subhero p,
    .home-impact p,
    .home-trace-band p{
      max-inline-size:var(--measure-body);
    }
    .home-section-head .home-text-link{
      justify-self:start;
      align-self:start;
    }
  }
}