/* ==========================================================================
   Process Proximity Compensation  (/products/manufacturing/lithography/ppc/)

   The Lithography family's product page, built like the TCAD child pages
   (Victory Process) from product-family.css. The doc asks for ten sections;
   nine ship, because Works with is held until the product team supplies its
   content (components/held/ppc-works-with.html, open item PP3).
   Two page-local pieces: .pf-node--stage (a flow stage that is not a link)
   with its tool line, and .ppc-cap--wide (the wider Recipe creation block).

   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          §7  proof          neutral-2-100
     §2  what it is    neutral-2-100  §8  evaluate       neutral-2-000
     §3  flow          white          §9  FAQ            white
     §4  capabilities  neutral-2-100  §10 related        neutral-2-100
     §6  applications  white
     (§5 works with is held. SWITCHING IT ON MEANS RE-CUTTING THIS RUN: it
     lands between two bands of different tints, so give it white and swap
     applications to neutral-2-100 and proof to white.)
   ========================================================================== */

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

/* --------------------------------------------------------------------------
   §3 Flow stages

   Every stage runs in PPC, the product this page is about, so no stage is a
   link. The card is .pf-node__link's without the hover, and with a tool line
   under the two lines of text, because the doc asks each stage to name its
   tool. On a white band, so the cards take the faint tint.
   -------------------------------------------------------------------------- */
.pf-node--stage{
  display:flex;flex-direction:column;gap:3px;height:100%;
  background:var(--ps-color-neutral-2-000);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:12px;
  padding:14px 16px;
}
.pf-node--stage .pf-node__name{color:var(--ps-color-neutral-3-500)}
.ppc-node__tool{
  margin-top:auto;padding-top:10px;
  font:500 11px/17px var(--ps-font);letter-spacing:.02em;
  color:var(--ps-color-brand-600);
}
/* Five stages. The shared chain is two across from 640 and four from 1024,
   which would leave 4 + 1; three at 1024 gives 3 + 2, and from 1350 all five
   sit on one row, as the doc's "one horizontal flow" asks. */
@media (min-width:1024px){
  .ppc-flow{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1350px){
  .ppc-flow{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* --------------------------------------------------------------------------
   §4 Capabilities: five blocks; Recipe creation spans two columns wherever
   the grid has more than one (the doc: "worth more space than one bullet"),
   so 2 + 2 + wide from 640 and 3 + (1 + wide) from 1024, with no orphan. On
   a tinted band the blocks go white.
   -------------------------------------------------------------------------- */
.pf-cap .pf-cap-block{background:var(--sv-white)}
@media (min-width:640px){
  .ppc-cap--wide{grid-column:span 2}
}

/* --------------------------------------------------------------------------
   §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 eight 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
   -------------------------------------------------------------------------- */
.pf-def,.pf-cap,.pf-res,.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,.pf-applist{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)}

/* --------------------------------------------------------------------------
   PPC round (2026-09-25)
   -------------------------------------------------------------------------- */
/* phones: the longer button labels wrap instead of overflowing */
@media (max-width:639.98px){
  .page-banner__ctas .ps-btn--large,.section-headings__ctas .ps-btn{max-width:100%}
  .page-banner__ctas .ps-btn--large .ps-btn__text,.section-headings__ctas .ps-btn .ps-btn__text{white-space:normal;min-width:0}
}