/* ==========================================================================
   Automotive Networking  (/products/design/design-ip/automotive-ip/networking/)

   The networking-role variant of Automotive IP, canonical to it. Built from
   Automotive IP's pieces. NO NEW COMPONENTS: .pf-cap for the four roles, the
   shared .pf-parts / .pf-ptable for the bus summary, .pf-applist, the closing
   band and .pf-related. No proof band and no FAQ: those are on the canonical
   page.

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

     §1  banner        white          §4  applications   neutral-2-100
     §2  roles         neutral-2-100  §5  evaluate       neutral-2-000
     §3  buses         white          §6  related        neutral-2-100
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section anchors - 96px clears the sticky header
   -------------------------------------------------------------------------- */
#roles,#buses,#applications{scroll-margin-top:96px}

/* the banner sentence and the roles lead each link Automotive IP */
.page-banner__body a,
.pf-cap__lead a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}
.page-banner__body a:hover,
.pf-cap__lead a:hover{color:var(--ps-color-brand-500)}

/* --------------------------------------------------------------------------
   §2 Roles: four blocks, two across from 640 (2 x 2) at every wider width
   -------------------------------------------------------------------------- */
@media (min-width:640px){
  .pf-cap__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --------------------------------------------------------------------------
   §3 Buses: the role is the row header and may wrap; each controller links
   its row on Automotive IP
   -------------------------------------------------------------------------- */
.auton-table th[scope="row"]{text-align:left;white-space:normal;min-width:10em}
.auton-table .pf-ptable__part a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}
.auton-table .pf-ptable__part a:hover{color:var(--ps-color-brand-500)}

/* --------------------------------------------------------------------------
   §6 Related: three tiles, two across from 640 with the last taking its row,
   three from 1024
   -------------------------------------------------------------------------- */
@media (min-width:640px) and (max-width:1023.98px){
  .pf-related__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-related__list > li:last-child:nth-child(odd){grid-column:1 / -1}
}
@media (min-width:1024px){
  .pf-related__list{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* phones: the large button can be wider than a 375px column; let it wrap */
@media (max-width:639.98px){
  .page-banner__ctas .ps-btn--large{max-width:100%}
  .page-banner__ctas .ps-btn--large .ps-btn__text{white-space:normal;min-width:0}
}
/* the closing band's button sits beside a text link; let it wrap at every width */
.section-headings__ctas .ps-btn--large{max-width:100%}
.section-headings__ctas .ps-btn--large .ps-btn__text{white-space:normal;min-width:0}

/* --------------------------------------------------------------------------
   Band run for this page
   -------------------------------------------------------------------------- */
.pf-cap,.pf-applist,.pf-related{
  background:var(--ps-color-neutral-2-100);
  border-block:1px solid var(--ps-color-neutral-2-300);
}
/* stated explicitly rather than left transparent */
.pf-parts{background:var(--sv-white)}
/* the conversion band takes the tint the site reserves for it site-wide */
.section-headings__wrapper--cta{background:var(--ps-color-neutral-2-000)}

/* Automotive Networking round, 2026-09-28.
   AUTONET-03 rebuilds the selector as five columns with a gate count, set as
   on Automotive IP (.auto-gates). */
.auton-gates{white-space:nowrap;font-weight:500;color:var(--ps-color-neutral-3-500)}