/* ==========================================================================
   PCB DESIGN & ENGINEERING SERVICES — pcb-design.html
   Page-scoped layout. Reuses the site design tokens (tokens.css), base
   primitives (base.css), shared components (components.css), and the shared
   hero/nav/footer system. Only PCB-page-specific layout lives here.
   ========================================================================== */

/* ---------- Section header helper (consistent engineering page rhythm) ---------- */
.section-head{ margin-bottom: var(--sp-4); }
.section-head .eyebrow{ text-align: left; }
.section-head__title{ margin-top: .5em; max-width: 26ch; }
.section-head__lede{ margin-top: var(--sp-2); max-width: 64ch; color: var(--text-2); font-size: var(--fs-sm); }

/* ==========================================================================
   HERO — engineering hero with a decorative points-globe backdrop.
   Reuses the shared .hero base (min-height, radial bg) plus page positioning.
   ========================================================================== */
.pcb-hero{ align-items: center; }
.pcb-hero__globe-layer{ position: absolute; inset: 0; z-index: 1; }

/* The points-only globe (rendered by pcb-design.js, reusing vendored Globe.gl).
   Sits as a decorative engineering element on the right of the hero on desktop,
   dimmed behind a scrim so it never fights the copy or CTA buttons. */
.pcb-globe{
  position: absolute; z-index: 1; pointer-events: none;
  width: 62vw; height: 62vw; max-width: 780px; max-height: 780px;
  top: 52%; right: -7vw; transform: translateY(-50%);
}
.pcb-globe canvas{ width: 100%; height: 100%; display: block; }

/* Medium desktop (901–1200px): slightly smaller globe, tucked further right so the
   sphere never strays under the left-aligned hero CTA buttons. */
@media (min-width: 901px) and (max-width: 1200px){
  .pcb-globe{ width: 44vw; right: -3vw; }
}

/* Scrim guards text contrast: solidly rooted in the page background on the left
   (where the copy sits) and fading to transparent over the decorative globe. */
.pcb-hero__scrim{
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, var(--bg-0) 0%, var(--bg-0) 32%, transparent 78%);
}
[data-theme="light"] .pcb-hero__scrim{
  background: linear-gradient(90deg, var(--bg-0) 0%, var(--bg-0) 30%, transparent 74%);
}

/* Hero copy is left-aligned for an engineering/service feel (the home hero is
   centered; this page overrides to its own deliberate alignment). */
.pcb-hero__content{ text-align: left; align-items: flex-start; }
.pcb-hero__content .hero__title{ margin: 0; }
.pcb-hero__content .hero__sub{ margin-inline: 0; }
.pcb-hero__content .hero__cta{ justify-content: flex-start; }

@media (max-width: 900px){
  .pcb-hero{ min-height: 90vh; }
  .pcb-globe{
    width: 150vw; height: 150vw; max-width: none; max-height: none;
    top: 42%; left: 50%; right: auto; transform: translate(-50%, -50%);
    opacity: .5;
  }
  .pcb-hero__scrim{
    background: linear-gradient(180deg, var(--bg-0) 0%, color-mix(in srgb, var(--bg-0) 60%, transparent) 42%, transparent 58%, var(--bg-0) 100%);
  }
  [data-theme="light"] .pcb-hero__scrim{
    background: linear-gradient(180deg, var(--bg-0) 0%, color-mix(in srgb, var(--bg-0) 70%, transparent) 44%, transparent 58%, var(--bg-0) 100%);
  }
  .pcb-hero__content{ text-align: center; align-items: center; }
  .pcb-hero__content .hero__title{ margin: 0 auto; }
  .pcb-hero__content .hero__sub{ margin-inline: auto; }
  .pcb-hero__content .hero__cta{ justify-content: center; }
}

/* ==========================================================================
   CAPABILITIES — grouped feature cards with bullet detail lists
   ========================================================================== */
.capability-list{ list-style: none; margin-top: var(--sp-2); padding: 0; }
.capability-list li{
  position: relative;
  padding-left: 1.1em;
  color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5;
  margin-bottom: .45em;
}
.capability-list li::before{
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.capability-card{ display: flex; flex-direction: column; }

/* ==========================================================================
   HIGH-SPEED PCB — text block + key-concepts checklist panel
   ========================================================================== */
.hs__lead{
  font-family: var(--font-display);
  color: var(--text-1); line-height: 1.65; font-size: var(--fs-md);
}
.hs__body{ margin-top: var(--sp-3); color: var(--text-2); font-size: var(--fs-sm); line-height: 1.7; }
.hs__body + .hs__body{ margin-top: var(--sp-2); }

.hs-concepts{ display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-2); margin-top: var(--sp-4); }
.hs-concept{
  display: flex; align-items: center; gap: .6em;
  font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: .02em;
  color: var(--text-1);
  padding: .7em .9em; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: rgba(var(--accent-rgb), .04);
}
.hs-concept svg{ flex-shrink: 0; color: var(--accent); }

.hs-panel{
  padding: var(--sp-4);
  border: 1px solid var(--card-border); border-radius: var(--radius-md);
  background: var(--orbit-gradient-soft);
}
.hs-panel__kicker{ font-family: var(--font-mono); color: var(--accent); font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; }
.hs-panel__title{ margin-top: .4em; font-size: var(--fs-md); }
.hs-panel__list{ list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.hs-panel__list li{
  display: flex; gap: .6em; align-items: flex-start;
  color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; margin-bottom: .6em;
}
.hs-panel__list li svg{ flex-shrink: 0; color: var(--accent); margin-top: .2em; }

/* ==========================================================================
   CERTIFICATIONS / STANDARDS — certification reference card
   ========================================================================== */
.pcb-cert-card{ padding: var(--sp-1); }
.pcb-cert-card__img{
  width: 100%; height: auto; aspect-ratio: 16/10;
  object-fit: fill; border-radius: var(--radius-sm);
  background: var(--bg-2); border: 1px solid var(--line);
}
.pcb-cert-card__cap{ margin-top: var(--sp-2); overflow-wrap: anywhere; }

.green{ padding: var(--sp-1); }
.green__img{
  width: 100%; height: auto; aspect-ratio: 4/3;
  object-fit: cover; border-radius: var(--radius-sm);
  background: var(--bg-2); border: 1px solid var(--line);
}
.green__cap{ margin-top: var(--sp-2); overflow-wrap: anywhere; }



/* ==========================================================================
   EXAMPLES — responsive grid of placeholder design visuals
   ========================================================================== */
.pcb-examples__grid{ display: grid; gap: var(--sp-4); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px){
  .pcb-examples__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .pcb-examples__grid{ grid-template-columns: 1fr; }
}
.pcb-example-card{ display: flex; flex-direction: column; padding: var(--sp-3); }
.pcb-example-card__meta{ margin-top: var(--sp-2); }
.pcb-example-card__title{ font-size: 1rem; color: var(--text-0); font-family: var(--font-display); }
.pcb-example-card__desc{ margin-top: .3em; color: var(--text-2); font-size: var(--fs-xs); }
.pcb-example-card__slot{ margin-top: .4em; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-2); letter-spacing: .04em; }

/* ==========================================================================
   ENCLOSURE — 3D mechanical / enclosure design
   ========================================================================== */
.pcb-enclosure__body{ color: var(--text-2); font-size: var(--fs-sm); line-height: 1.7; margin-top: var(--sp-2); }
.enclosure-list{ list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.enclosure-list li{
  display: flex; gap: .6em; align-items: flex-start;
  color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; margin-bottom: .55em;
}
.enclosure-list li svg{ flex-shrink: 0; color: var(--accent); margin-top: .2em; }

/* ==========================================================================
   CONTACT / INQUIRY — Formspree form matching the site contact card + WhatsApp
   ========================================================================== */
.pcb-form-card{ padding: var(--sp-4); }
.pcb-form-card .form-field{ margin-bottom: var(--sp-3); }

/* Two-across layout for the many short inquiry fields; textareas span both. */
.pcb-form-grid{ display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp-3); }
.pcb-form-grid .span-2{ grid-column: span 2 / span 2; }
@media (max-width: 640px){
  .pcb-form-grid{ grid-template-columns: 1fr; }
  .pcb-form-grid .span-2{ grid-column: auto; }

  /* Mobile optimization: the outer `.grid--2`, the nested `.pcb-form-grid`, and
     each field all keep `min-width: auto` by default, so long labels / select
     option text force a min-content width taller than the (collapsed) column —
     the card used to spill past its column to the screen edge with no right
     padding. Letting every level shrink (`min-width: 0`) pulls the form back
     inside the wrap. We also cap + center the card and tighten its padding so it
     reads as a compact, phone-friendly form instead of an edge-to-edge block. */
  body[data-page="pcb"] .grid--2 > * { min-width: 0; }
  .pcb-form-grid{ min-width: 0; }
  .pcb-form-grid > * { min-width: 0; }
  .pcb-form-card{
    width: 100%; max-width: 30rem; margin-inline: auto;
    padding: var(--sp-3);
  }

  /* The contact cards flanking the form can carry long, unbreakable tokens
     (e.g. the email address). Let those wrap / break so the whole inquiry
     section fits very narrow phones without horizontal scroll. */
  body[data-page="pcb"] .contact-card > *{ min-width: 0; }
  body[data-page="pcb"] .contact-card a{ overflow-wrap: anywhere; }
}

.pcb-contact__heading{ font-size: var(--fs-md); color: var(--text-0); font-family: var(--font-display); margin-bottom: .3em; }
.pcb-contact__sub{ color: var(--text-2); font-size: var(--fs-sm); }

/* Tiny caption so implementers know where to drop real assets later. */
.pcb-slot-note{
  display: inline-block; margin-top: .5em;
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-2);
  letter-spacing: .03em;
}