/* ======================================================================
   FPGA Design page (pages/fpga-design.html). Loaded after style.css and only on this page.
   The page reuses the ChipStack AI (cs-*) and Design for AI (dfa-*) parts, which follow cadence.com;
   this file only adds what is specific to FPGA Design (same layout as the RTL Design page). Colours follow the PulseWave theme.
   ====================================================================== */
[data-page="fpga"] { --font-head: var(--font-nav); --font-body: var(--font-nav); }
[data-page="fpga"] main { font-family: var(--font-nav); color: var(--nav-ink); background: #fff; }

/* ---------- hero: ChipStack hero with the existing FPGA photo; same buttons and hovers ---------- */
.fpga-hero .cs-hero__art { background-image: url("../img/photos/fpga.jpg"); }
.fpga-hero .cs-hero__title { max-width: 900px; }
.fpga-hero .cs-hero__btns { column-gap: 35px; }
.fpga-hero .cs-hero__btns .btn { min-width: 220px; height: 46.64px; padding: 12px 30px 10px; border: 0.8px solid transparent; justify-content: center; }
.fpga-hero .cs-hero__btns .cs-btn--white:hover { border-color: #fff; }

/* ---------- overview: the existing chip illustration sits where Design for AI has its cubes ---------- */
.fpga-art { position: absolute; top: 96px; left: calc(50% + 337px); width: 300px; pointer-events: none; }
.fpga-art svg { display: block; width: 100%; height: auto; }

/* ---------- applications: intro paragraph under the heading ---------- */
[data-page="fpga"] .dfa-sec--apps .cs-col p { margin-bottom: 0; }

/* ---------- offerings: intro paragraph, cards 56px below ---------- */
[data-page="fpga"] #services .cs-col p { margin-bottom: 0; }


/* ---------- resources: "View all" under the cards; hover = solid offset shadow (like the stacked buttons elsewhere) ---------- */
.fpga-viewall { display: flex; justify-content: center; margin-top: 48px; }
[data-page="fpga"] .fpga-viewall .btn--stack { min-width: 220px; height: 47px; font: 500 14.4px/23.04px var(--font-nav); letter-spacing: 1.728px;
  background: #fff; color: var(--nav-ink); border: 1px solid var(--nav-ink); box-shadow: 4px 4px 0 -1px #f5f5f5, 4px 4px 0 0 var(--nav-ink); transition: box-shadow .25s, transform .25s; }
[data-page="fpga"] .fpga-viewall .btn--stack:hover, [data-page="fpga"] .fpga-viewall .btn--stack:focus-visible {
  background: #fff; color: var(--nav-ink); box-shadow: 5px 5px 0 0 var(--nav-ink); }

/* ---------- FAQ: intro on the left, ChipStack-style rows (chevron) on the right ---------- */
.fpga-faq { padding: 96px 0 112px; }
.fpga-faq__grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 60px; align-items: start; }
.fpga-faq__grid .cs-col p, .fpga-faq__grid > div > p { margin: 0 0 32px; }
.fpga-faq .cs-acc { margin-top: 8px; }
.fpga-faq .cs-acc .acc__head { padding: 20px 52px 20px 16px; }
.fpga-faq .cs-acc .acc__body p { margin: 0; padding: 0 52px 24px 16px; font: 300 16.2px/25.92px var(--font-nav); letter-spacing: 0.648px; color: var(--nav-ink); }
.cs-btn--line { min-width: 220px; height: 47px; padding: 12px 30px 10px; justify-content: center; border: 1.6px solid var(--nav-ink); background: #fff; color: var(--nav-ink);
  font: 500 14.4px/23.04px var(--font-nav); letter-spacing: 1.728px; text-transform: uppercase; transition: background-color .3s, color .3s; }
.cs-btn--line:hover, .cs-btn--line:focus-visible { background: var(--nav-ink); color: #fff; }

/* ---------- smaller screens ---------- */
@media (max-width: 1240px) { .fpga-art { display: none; } }
@media (max-width: 1100px) {
  .fpga-faq__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 760px) {
  .fpga-faq { padding: 56px 0; }
  .fpga-hero .cs-hero__btns .btn { min-width: 0; }
}

/* offerings bar without the "All Offerings" link: the first dropdown lines up with the page edge like it did */
.subnav--ctx .container > .fam-dd:first-child .fam-dd__toggle { margin-left: -15px; }
/* overview: more room between the text column and the chip illustration (~100px) */
.fpga-art { left: calc(50% + 407px); width: 240px; }
/* offerings on the grey band again: 96px top padding so it sits evenly in the band */
[data-page="fpga"] #services { padding-top: 96px; }
/* overview: centre the chip illustration on the text column (the box spans the section's content area) */
.fpga-art { top: 96px; bottom: 64px; display: flex; align-items: center; }   /* 64 = section padding + the last paragraph margin */

/* resources: the original photos back on top of each card (full card width), hover effects unchanged */
[data-page="fpga"] .cs-cards--res .cs-card { overflow: hidden; }
.fpga-res__img { display: block; height: 190px; margin: -40px -33px 28px; background-size: cover; background-position: center; }

/* Key Benefits -> Applications gap = Overview -> Key Benefits gap (112px): 12px text margin + 16px card padding
   + 48px section padding + 36px here */
[data-page="fpga"] #applications { padding-top: 36px; }