/* =========================================================
   REGISTRY RESPONSIVE LAYER
   Ajustements transversaux finaux
   ========================================================= */

/* Desktop medium */
@media (max-width:1200px){
  :root{
    --header-offset:116px;
  }
}

/* Tablet */
@media (max-width:980px){
  :root{
    --header-offset:112px;
  }

  main{
    padding-top:calc(var(--header-offset,0px) + 16px);
    padding-bottom:28px;
  }

  .statusPill{
    min-width:160px;
  }

  .registryRibbon{
    width:100%;
  }
}

/* Mobile large */
@media (max-width:760px){
  :root{
    --header-offset:108px;
  }

  main{
    padding-top:calc(var(--header-offset,0px) + 14px);
  }

  .cardSub,
  .browseHint,
  .hero-note,
  .small,
  .mini,
  .hint{
    font-size:12px;
    line-height:1.55;
  }

  .registryCanopy-head,
  .browseMeta,
  .metricsTop,
  .statusBarPremium-head{
    align-items:stretch;
  }

  .registryRibbon,
  .metricsMeta{
    width:100%;
  }
}

/* Mobile */
@media (max-width:640px){
  :root{
    --header-offset:104px;
    --radius:16px;
    --radius-lg:20px;
  }

  html, body{
    overflow-x:hidden;
  }

  main{
    padding-top:calc(var(--header-offset,0px) + 12px);
    padding-bottom:24px;
  }

  .wrap{
    padding-left:12px;
    padding-right:12px;
  }

  .cardTitle{
    font-size:14px;
    letter-spacing:.12em;
  }

  .browseCount,
  .pagerInfo{
    font-size:12px;
  }

  .registryCanopy-title,
  .statusBarPremium-kicker,
  .signalCanon-kicker,
  .sdsLineKicker,
  .paywallKicker{
    letter-spacing:.14em;
  }

  .registryStat-value,
  .statusPill-value{
    font-size:12px;
  }

  .registryCard-title{
    font-size:12px;
  }

  .registryCard-sub{
    font-size:11px;
  }

  .paywallPriceValue{
    font-size:24px;
  }

  .out{
    line-height:1.5;
  }

  canvas{
    max-width:100%;
  }
}

/* Very small devices */
@media (max-width:420px){
  :root{
    --header-offset:100px;
  }

  .wrap{
    padding-left:10px;
    padding-right:10px;
  }

  .hero-title{
    font-size:20px;
  }

  .sdsHeader-title{
    font-size:17px;
  }

  .paywallTitle{
    font-size:18px;
  }

  .sdsBottomBar{
    left:8px;
    right:8px;
    bottom:calc(env(safe-area-inset-bottom) + 8px);
  }

  .sdsBottomBar button{
    min-height:40px;
    padding:8px 10px;
  }
}

/* Landscape mobile tweaks */
@media (max-height:520px) and (orientation:landscape){
  :root{
    --header-offset:92px;
  }

  .hero{
    padding:14px;
  }

  .paywallDialog{
    max-height:calc(100dvh - 8px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    margin:calc(env(safe-area-inset-top) + 4px) auto 4px;
  }

  .paywallHead,
  .paywallBody{
    padding:12px;
  }
}