/* ==========================================================================
   Downloads  (/support/downloads/)

   The first Support child, built like University Program. Shared: the page
   banner, the .pf-cap blocks and .pf-related (product-family.css), the hub's
   .band (company.css), the FAQ. Page-local:
     .dl-tag         "Portal account needed" under each portal block (the
                     hub's docs-card meta, as one tag)

   Band rhythm is the homepage's: 48 / 64 / 80. Bands alternate white and
   --ps-color-neutral-2-100. No two adjacent bands share a tint:

     §1  banner          white          §5  get into the portal  neutral-2-100
     §2/3 the portal     neutral-2-100  §6  FAQ                  white
     §4  access          white          §7  related              neutral-2-100
   ========================================================================== */

#portal,#access,#get-access,
#software,#manuals,#pdks,#models,#training,
#qualify,#register,#maintenance,#evaluating{scroll-margin-top:96px}

/* --------------------------------------------------------------------------
   §3 The portal: five blocks, three across from 1024; §4 access, 2 x 2
   -------------------------------------------------------------------------- */
@media (min-width:1024px){
  .dl-portal .pf-cap__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dl-access .pf-cap__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.dl-tag{
  order:0;align-self:flex-start;margin:-4px 0 12px;
  padding:2px 10px;border-radius:999px;
  background:var(--ps-color-neutral-2-100);
  font:500 12px/18px var(--ps-font);letter-spacing:.02em;
  color:var(--ps-color-secondary-5-500);
}

/* --------------------------------------------------------------------------
   §5 Get into the portal: links inside the band body need the link colour
   -------------------------------------------------------------------------- */
.dl-action .band__body a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}
.dl-action .band__body a:hover{color:var(--ps-color-brand-500)}
.dl-action .band__body + .band__body{margin-top:6px}

/* --------------------------------------------------------------------------
   §7 Related: four tiles, two across from 640, four from 1024; five with the
   held Documentation tile on
   -------------------------------------------------------------------------- */
@media (min-width:640px){.pf-related__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.pf-related__list{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1350px){.pf-related__list:has(> li:nth-child(5)){grid-template-columns:repeat(5,minmax(0,1fr))}}
.dl-related__up{margin-top:20px}

@media (min-width:1350px){
  .dl-portal .pf-cap__head,.dl-portal .pf-cap__grid,
  .dl-access .pf-cap__head,.dl-access .pf-cap__grid,
  .pf-related__inner{grid-column-start:2;grid-column-end:span 10}
}

/* phones: the large buttons can be wider than a 320px column; let them wrap */
@media (max-width:639.98px){
  .page-banner__ctas .ps-btn--large,.dl-action .ps-btn--large{max-width:100%}
  .page-banner__ctas .ps-btn--large .ps-btn__text,.dl-action .ps-btn--large .ps-btn__text{white-space:normal;min-width:0}
}

/* --------------------------------------------------------------------------
   Band run for this page
   -------------------------------------------------------------------------- */
.dl-portal,.dl-action,.pf-related{
  background:var(--ps-color-neutral-2-100);
  border-block:1px solid var(--ps-color-neutral-2-300);
}
.dl-access,.faq{background:var(--sv-white)}
.dl-access .pf-cap-block{background:var(--ps-color-neutral-2-000)}
.dl-access .dl-tag{background:var(--sv-white)}
.pf-related__link{background:var(--ps-color-neutral-2-000)}