/* ==========================================================================
   Photonics and Optoelectronics  (/solutions/photonics-and-optoelectronics/)

   The third By Industry page, copying Power Devices (PD10): the product
   pages' nine-section shape, with the TCAD page's flow as "Where Silvaco
   fits". NO NEW COMPONENTS: everything comes from product-family.css.
   Not to be confused with photonics.css, the Photonics product family 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          §6  proof          neutral-2-100
     §2  the market        neutral-2-100  §7  evaluate       neutral-2-000
     §3  where Silvaco fits white         §8  FAQ            white
     §4  technologies      neutral-2-100  §9  related        neutral-2-100
     §5  applications      white
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section anchors - 96px clears the sticky header
   -------------------------------------------------------------------------- */
#the-market,#where-silvaco-fits,#technologies,
#applications,#resources{scroll-margin-top:96px}

/* two market paragraphs: space the second from the first */
.pf-def__answer + .pf-def__answer{margin-top:16px}

/* The flow has eight nodes (input, six products, XSim Photonics alongside),
   so the shared four-across chain closes 4 + 4 with no override. */

/* FOUR technology groups: two across from 640, and still two at 1024 rather
   than the shared three, so the grid closes 2 + 2 */
@media (min-width:1024px){
  .pf-cap__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* FIVE Related tiles use the shared grid as it is: three across from 640
   (3 + 2), five across from 1024 (one row). */

/* 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. */
@media (max-width:639.98px){
  .page-banner__ctas .ps-btn--large,.section-headings__ctas .ps-btn--large,.pf-res__more .ps-btn{max-width:100%}
  .page-banner__ctas .ps-btn--large .ps-btn__text,.section-headings__ctas .ps-btn--large .ps-btn__text,.pf-res__more .ps-btn__text{white-space:normal;min-width:0}
}

/* --------------------------------------------------------------------------
   §8 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)}

/* Photonics and Optoelectronics round, 2026-09-29.
   PHOTONICS-19 holds the fourth technologies card. While three show: two
   across from 640 with the odd last card on its own row, three across from
   1024. The 2 + 2 grid above returns if the card is switched back on. */
@media (min-width:640px) and (max-width:1023.98px){
  .pf-cap__grid > .pf-cap-block:last-child:nth-child(odd){grid-column:1 / -1}
}
@media (min-width:1024px){
  .pf-cap__grid:not(:has(> .pf-cap-block:nth-child(4))){grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* PHOTONICS-31: the figure between the customer cards and the resource
   cards takes the full row of the resource grid */
.pf-res__grid > .ope-figure{grid-column:1 / -1;list-style:none}
.ope-figure__inner{margin:0}
.ope-figure__img{display:block;max-width:100%;height:auto;border-radius:12px;border:1px solid var(--ps-color-neutral-2-300);background:var(--sv-white)}
.ope-figure__caption{margin-top:12px;font:400 13px/20px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-2-900)}