/* ==========================================================================
   Analog and Custom IC  (/products/design/analog-custom-ic/)

   The second AI-Driven Design family page, built like Circuit Simulation on
   product-family.css. Page-local pieces:
     .acic-group        the doc's "four group headings, nine cards": a group
                        head (H3 + one sentence) beside its cards. Nothing in
                        the shared sheet groups pf-cards. Moves to
                        product-family.css at a second use.
     .acic-node__family the visible "Circuit Simulation" label on two flow
                        stages, as the doc asks
     .acic-flow__asides the three tools beside the flow, in a row
     .acic-kind         VarMan XMA's eyebrow (same treatment as .cs-kind)
     .acic-links        the resource link columns. SECOND USE of Utmost IV's
                        .ut-links, copied rather than moved so the Utmost IV
                        round's markup stays untouched. TODO(dev): move both
                        to product-family.css as one component.

   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          §6  applications  neutral-2-100
     §2  what it covers      neutral-2-100  §7  proof         white
     §3  flow                white          §8  evaluate      neutral-2-000
     §4  products            neutral-2-100  §9  FAQ           white
     §5  Circuit Simulation  white          §10 related       neutral-2-100
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section anchors - 96px clears the sticky header
   -------------------------------------------------------------------------- */
#what-it-covers,#flow,#products,#circuit-simulation,#applications,#resources{scroll-margin-top:96px}

/* §2 three paragraphs, where the shared definition block has one */
.pf-def__answer + .pf-def__answer{margin-top:16px}

/* --------------------------------------------------------------------------
   §3 The flow

   Eight stages, which the shared chain lays out as 2 across from 640 and
   4 + 4 from 1024. The Circuit Simulation label sits between the step number
   and the product name, in the eyebrow style, so it is read, not only seen.
   -------------------------------------------------------------------------- */
.acic-node__family{
  align-self:flex-start;margin:2px 0 1px;padding:1px 8px;
  background:var(--ps-color-brand-000);border-radius:100px;
  font:500 10px/16px var(--ps-font);letter-spacing:.06em;
  color:var(--ps-color-brand-600);
}
.acic-flow__asides{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:1024px){
  .acic-flow__asides{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* --------------------------------------------------------------------------
   §4 The products, in four groups

   Phones: head, then the cards stacked. 640: head, then two across. 1024:
   the head takes a quarter of the row and the cards three columns of the
   rest, so a two-card group and a three-card group share one rhythm.
   -------------------------------------------------------------------------- */
.acic-groups{
  grid-column-end:span var(--ps-grid-columns);
  display:grid;gap:36px;
}
.acic-group{display:grid;grid-template-columns:1fr;gap:16px}
.acic-group__name{margin:0 0 8px;color:var(--ps-color-neutral-3-500)}
.acic-group__lead{
  margin:0;max-width:60ch;
  font:400 14px/22px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
.acic-group__grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:16px;
}
/* on a tinted band the cards go white */
.acic-group .pf-card{background:var(--sv-white)}
.acic-kind{
  margin:0 0 8px;
  font:500 11px/16px var(--ps-font);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ps-color-brand-600);
}
@media (min-width:640px){
  .acic-groups{gap:44px}
  .acic-group__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .acic-group{grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:28px;align-items:start}
  .acic-group__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .acic-groups{padding-top:8px}
  .acic-group + .acic-group{padding-top:36px;border-top:1px solid var(--ps-color-neutral-2-300)}
}
@media (min-width:1350px){
  .acic-groups{grid-column-start:2;grid-column-end:span 10}
}

/* --------------------------------------------------------------------------
   §7 Proof and resources: one customer card, then the link columns
   -------------------------------------------------------------------------- */
.acic-res__grid{grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.acic-res__grid{grid-template-columns:minmax(0,1fr)}}
@media (min-width:1024px){.acic-res__grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}
/* the quote is .pf-res-card__quote in product-family.css (moved at its
   third use, the Gateway page) */

.acic-links{
  grid-column-end:span var(--ps-grid-columns);
  display:grid;grid-template-columns:1fr;gap:24px;
  margin-top:28px;padding-top:24px;
  border-top:1px solid var(--ps-color-neutral-2-300);
}
.acic-links__head{
  margin:0 0 10px;
  font:500 11px/16px var(--ps-font);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ps-color-brand-600);
}
.acic-links__list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.acic-links__list a{
  font:400 13px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
  text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--ps-color-neutral-2-500);
}
.acic-links__list a:hover{color:var(--ps-color-brand-600);text-decoration-color:currentColor}
@media (min-width:640px){.acic-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px}}
@media (min-width:1350px){
  .acic-links{grid-template-columns:repeat(4,minmax(0,1fr));grid-column-start:2;grid-column-end:span 10}
}

/* --------------------------------------------------------------------------
   §10 Related: three tiles, so three across rather than the shared five
   -------------------------------------------------------------------------- */
@media (min-width:1024px){
  .pf-related__list{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* An empty resources list takes no space, as on Victory Process */
.pf-res__grid:not(:has(li)){display:none}

/* phones: "Talk to our Technical Experts" is wider than a 375px column at the
   large button size; let it wrap, as the rounds' pages do. TODO(dev): this
   rule now has near-identical copies in nine page sheets - a candidate for
   product-family.css or page-banner.css. */
@media (max-width:639.98px){
  .page-banner__ctas .ps-btn--large,.section-headings__ctas .ps-btn--large{max-width:100%}
  .page-banner__ctas .ps-btn--large .ps-btn__text,.section-headings__ctas .ps-btn--large .ps-btn__text{white-space:normal;min-width:0}
}

/* --------------------------------------------------------------------------
   §9 FAQ - sits on white, below the conversion band
   -------------------------------------------------------------------------- */
.faq{background:var(--sv-white)}

/* --------------------------------------------------------------------------
   Band run for this page. Two sections are pf-applist, so those two are told
   apart by their own class.
   -------------------------------------------------------------------------- */
.pf-def,.pf-cards,.acic-apps,.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: an inherited body colour
   looks right today and breaks silently the moment anything above it moves */
.pf-flow,.acic-cs,.pf-res{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)}
/* unlinked rows on a tinted band keep a white surface */
.acic-apps .pf-approw__link{background:var(--sv-white)}