/*
 * Tahap 21.7 — Public Tablet Contract
 * FINAL viewport authority for 640–959px.
 * This stylesheet must never affect desktop.
 */
@layer project {
  @media (min-width:640px) and (max-width:959px) {
    /* 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);
    }

    /* Tablet is not compressed desktop. */
    .home-hero-grid{
      grid-template-columns:1fr;
      gap:var(--layout-space-section);
      align-items:start;
    }
    .home-hero-copy{max-inline-size:var(--measure-wide)}

    /* Material journey: full-width five-node composition. */
    .home-chain-card{
      width:100%;
      min-width:var(--space-0);
      box-shadow:none;
    }
    .home-chain-visual{
      position:relative;
      grid-template-columns:repeat(5,minmax(0,1fr));
      align-items:start;
      justify-content:stretch;
      gap:var(--space-0);
      padding-block:var(--space-5);
    }
    .home-chain-visual::before{
      content:"";
      position:absolute;
      z-index:0;
      top:calc(var(--space-5) + (var(--space-10) / 2));
      left:10%;
      right:10%;
      height:1px;
      background:var(--color-border);
    }
    .home-chain-visual > i{display:none}
    .home-chain-node{
      position:relative;
      z-index:1;
      justify-items:center;
      align-content:start;
      gap:var(--space-2);
      padding-inline:var(--space-2);
      text-align:center;
    }
    .home-chain-node > b{position:relative;z-index:1}
    .home-chain-node > span{
      display:block;
      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;
      max-inline-size:var(--measure-body);
      color:var(--color-text-muted);
      font-size:var(--type-caption);
      line-height:var(--leading-compact);
    }

    /* Pelaku Ekosistem: icon owns column 1, copy owns column 2. */
    .home-actor-grid{
      grid-template-columns:repeat(2,minmax(0,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);
      border-left:var(--space-0);
      border-bottom:1px solid var(--color-border);
    }
    .home-actor-grid article:nth-child(even){border-left: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);
    }

    /* Tablet-safe secondary compositions. */
    .home-impact-grid,
    .home-trace-grid,
    .home-trace-page-grid,
    .home-seller-detail-grid{
      grid-template-columns:1fr;
      gap:var(--layout-space-section);
    }
    .home-seller-side{
      border-left:var(--space-0);
      padding-left:var(--space-0);
      border-top:1px solid var(--color-border);
      padding-top:var(--space-5);
    }
    .home-footer-grid{
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:var(--layout-space-group);
    }
    .home-footer-grid > div:first-child{grid-column:1 / -1}
    .home-cta-inner{grid-template-columns:1fr;gap:var(--layout-space-group)}
    .home-cta-inner > div:last-child{justify-content:flex-start}
  }
}


/* Tahap 21.8 — Tablet editorial flow.
 * Headings use the available viewport. Horizontal swipe is deliberate, not universal.
 */
@layer project {
  @media (min-width:640px) and (max-width:959px) {
    .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;
    }

    /* Action discovery is a swipe rail on tablet; content/data grids remain grids. */
    .home-action-grid{
      display:grid;
      grid-template-columns:none;
      grid-auto-flow:column;
      grid-auto-columns:minmax(16rem,38vw);
      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:var(--space-20);
      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}
  }
}


/* Tahap 21.9 — Public copy layout contract.
 * Compact viewports give headings the full content column and avoid artificial text balancing.
 */
@layer project {
  @media (min-width:640px) and (max-width:959px) {
    .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;
    }
  }
}