/* ============================================================
   Shared "technical layout" primitives.

   Loaded by both `product-technical` and `category-technical` pages via TYPE_ASSETS in
   layout.mjs, so it never ships on any other page and site.css is untouched. Every colour,
   radius and shadow comes from the tokens already defined in site.css.

   These rules started life in product-technical.css and were moved here verbatim when the
   listing pages adopted the same hero, section nav, headings, cards, FAQ and downloads list.
   The `ptx-` prefix was kept rather than renamed: a rename would have touched every line of
   product-technical.mjs for no visual gain. Read it as "technical layout", not "product".
   Components used by only one of the two types stay in that type's own stylesheet.
   ============================================================ */

:root {
  --ptx-nav-h: 56px;
  --ptx-rule: rgba(26, 27, 96, 0.10);
}

/* Anchors must clear the sticky site header AND the sticky section nav. */
.ptx-section { scroll-margin-top: calc(var(--header-h) + var(--ptx-nav-h)); }

/* ---------- hero ---------- */

.ptx-hero {
  background:
    radial-gradient(120% 90% at 82% 0%, #e4f1ff 0%, rgba(236, 246, 255, 0) 60%),
    linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
  border-bottom: 1px solid var(--ptx-rule);
}
.ptx-hero__crumbs { padding-top: 22px; }
.ptx-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 4vw, 64px); align-items: center; padding-block: 28px 8px;
}
.ptx-hero__eyebrow {
  font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue-600); margin-bottom: 10px;
}
.ptx-hero__title {
  font-size: clamp(34px, 4.4vw, 54px); font-weight: 700; letter-spacing: -.035em;
  line-height: 1.04; color: var(--navy); margin-bottom: 10px;
}
.ptx-hero__kicker { font-size: 14px; color: var(--ink-50); margin-bottom: 6px; }
.ptx-hero__tagline {
  font-size: clamp(17px, 1.6vw, 20px); font-weight: 600; letter-spacing: -.015em;
  color: var(--ink-70); margin-bottom: 20px;
}
.ptx-hero__intro { color: var(--ink-70); font-size: 15.5px; line-height: 1.72; max-width: 60ch; }

.ptx-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; list-style: none; }
.ptx-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--ptx-rule); border-radius: var(--radius-pill);
  padding: 6px 13px; font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: var(--navy); box-shadow: var(--shadow-sm);
}
.ptx-badge svg { width: 13px; height: 13px; stroke: var(--blue); flex: none; }

.ptx-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ptx-actions .btn { text-transform: none; letter-spacing: 0; font-size: 15px; }
/* --grey-500, not an opacity: 55% navy on white is 3.7:1, below the 4.5:1 AA needs at 13px. */
.ptx-actions__meta { color: var(--grey-500); font-weight: 600; font-size: 13px; }

.ptx-hero__media { min-width: 0; }

/* Key figures — the spec headline, read before anything else. */
.ptx-figures {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--ptx-rule);
  border: 1px solid var(--ptx-rule); border-radius: var(--radius-md);
  overflow: hidden; margin-block: 34px 0; transform: translateY(28px);
  box-shadow: var(--shadow-md);
}
.ptx-figure { background: #fff; padding: 18px 20px; text-align: center; }
.ptx-figure__label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--grey-500); margin-bottom: 6px;
}
/* margin: 0 kills the UA's 40px margin-inline-start on <dd>, which indented the
   value away from its <dt> label. */
.ptx-figure__value {
  margin: 0;
  font-size: clamp(16px, 1.45vw, 20px); font-weight: 700; letter-spacing: -.025em;
  color: var(--navy); display: flex; align-items: baseline; justify-content: center;
  gap: 5px; flex-wrap: wrap;
}
.ptx-figure__unit { font-size: 13px; font-weight: 600; color: var(--grey-500); letter-spacing: 0; }

/* ---------- sticky section nav ---------- */

.ptx-nav {
  position: sticky; top: var(--header-h); z-index: 90;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--ptx-rule);
  margin-top: 28px;   /* clears the key-figure strip, which overhangs the hero */
}
.ptx-nav__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: var(--ptx-nav-h);
}
.ptx-nav__list {
  display: flex; align-items: center; gap: 4px; list-style: none;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.ptx-nav__list::-webkit-scrollbar { display: none; }
.ptx-nav__link {
  display: inline-block; white-space: nowrap; padding: 9px 14px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--navy); opacity: .62; transition: opacity .15s, background .15s, color .15s;
}
.ptx-nav__link:hover { opacity: 1; background: var(--blue-50); color: var(--blue-600); }
.ptx-nav__link[aria-current='true'] { opacity: 1; background: var(--navy); color: #fff; }
.ptx-nav__cta { flex: none; text-transform: none; letter-spacing: 0; font-size: 14px; padding: 10px 20px; }

/* ---------- shared section furniture ---------- */

.ptx-section--tint { background: linear-gradient(180deg, #f7fbff 0%, #f2f8ff 100%); }
.ptx-section__head { max-width: 62ch; margin-bottom: clamp(28px, 3vw, 44px); }
.ptx-section__lead { margin-top: 12px; color: var(--ink-70); font-size: 15.5px; line-height: 1.7; }
.ptx-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue-600); margin-bottom: 12px;
}
.ptx-h2 {
  font-size: clamp(25px, 2.8vw, 34px); font-weight: 700; letter-spacing: -.03em;
  color: var(--navy); line-height: 1.15;
}
.ptx-h2--sm { font-size: clamp(19px, 1.9vw, 23px); }

/* ---------- feature cards ---------- */

/* Three across, so a nine-card feature list fills three complete rows with no orphan. */
.ptx-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
@media (min-width: 1000px) { .ptx-features { grid-template-columns: repeat(3, 1fr); } }
.ptx-feature {
  background: #fff; border: 1px solid var(--ptx-rule); border-radius: var(--radius-md);
  padding: 26px 24px; box-shadow: var(--shadow-sm);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.ptx-feature:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(1, 164, 241, .35); }
.ptx-feature__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 11px; background: var(--blue-50); margin-bottom: 16px;
}
.ptx-feature__icon svg { width: 21px; height: 21px; stroke: var(--blue-600); }
.ptx-feature__title { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 8px; letter-spacing: -.01em; }
.ptx-feature__body { font-size: 14.5px; line-height: 1.65; color: var(--ink-70); }

/* ---------- applications + related ---------- */

.ptx-applications, .ptx-related__list { list-style: none; display: grid; gap: 16px; }
/* Column counts are set so each list fills complete rows: five sectors across, six families 3x2. */
.ptx-applications { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
/* A single application card should not stretch the full page width. */
.ptx-applications > li { max-width: 420px; }
.ptx-related__list { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
@media (min-width: 1180px) {
  /* Card counts vary per product (1 to 5 sectors, 3 to 6 families). auto-fit sizes to whatever
     is there; only the six-family lists get a fixed 3-up so they fill two complete rows. */
  .ptx-related__list { grid-template-columns: repeat(3, 1fr); }
}
.ptx-linkcard {
  display: flex; flex-direction: column; gap: 8px; height: 100%;
  background: #fff; border: 1px solid var(--ptx-rule); border-radius: var(--radius-md);
  padding: 22px; box-shadow: var(--shadow-sm);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.ptx-linkcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(1, 164, 241, .4); }
.ptx-linkcard__label { font-size: 15.5px; font-weight: 700; color: var(--navy); letter-spacing: -.01em; }
.ptx-linkcard__blurb { font-size: 13px; color: var(--ink-70); line-height: 1.55; }
.ptx-linkcard__more { margin-top: auto; padding-top: 12px; color: var(--blue-600); }
.ptx-linkcard__more svg { width: 18px; height: 18px; transition: transform .18s; }
.ptx-linkcard:hover .ptx-linkcard__more svg { transform: translateX(5px); }

.ptx-related { margin-top: clamp(38px, 4vw, 56px); }
.ptx-related .ptx-h2 { margin-bottom: 20px; }

/* ---------- faq ---------- */

.ptx-faq-wrap { max-width: 900px; }
.ptx-faq { display: grid; gap: 12px; }
.ptx-faq__item {
  background: #fff; border: 1px solid var(--ptx-rule); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.ptx-faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; cursor: pointer; list-style: none;
}
.ptx-faq__q::-webkit-details-marker { display: none; }
/* The card clips to its radius, and the global focus ring sits 2px OUTSIDE the summary's border
   box — i.e. exactly in the clipped region, so it would be invisible. Draw it inside instead. */
.ptx-faq__q:focus-visible { outline-offset: -3px; }
.ptx-faq__q h3 { font-size: 16px; font-weight: 700; color: var(--navy); letter-spacing: -.01em; line-height: 1.4; }
.ptx-faq__q:hover h3 { color: var(--blue-600); }
.ptx-faq__marker { flex: none; color: var(--blue-600); transition: transform .2s; }
.ptx-faq__marker svg { width: 16px; height: 16px; }
.ptx-faq__item[open] .ptx-faq__marker { transform: rotate(180deg); }
.ptx-faq__a { padding: 0 22px 20px; }
.ptx-faq__a p { font-size: 14.5px; line-height: 1.72; color: var(--ink-70); }
.ptx-faq__item:focus-within { border-color: rgba(1, 164, 241, .45); }

/* ---------- downloads ---------- */

.ptx-downloads { list-style: none; display: grid; gap: 12px; }
.ptx-download {
  display: flex; align-items: center; gap: 18px;
  background: #fff; border: 1px solid var(--ptx-rule); border-radius: var(--radius-md);
  padding: 18px 22px; box-shadow: var(--shadow-sm);
}
.ptx-download__icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 11px; background: var(--blue-50); color: var(--blue-600);
}
.ptx-download__icon svg { width: 20px; height: 20px; }
.ptx-download__text { flex: 1 1 auto; min-width: 0; }
.ptx-download__name { font-size: 15px; font-weight: 700; color: var(--navy); }
.ptx-download__meta {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--grey-500); margin-left: 8px;
}
.ptx-download__desc { font-size: 13.5px; color: var(--ink-70); line-height: 1.55; margin-top: 4px; }
.ptx-download .btn { flex: none; text-transform: none; letter-spacing: 0; font-size: 14px; }
.ptx-download--empty .ptx-download__icon { background: #f3f4f6; color: var(--grey); }

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
  .ptx-hero__grid { grid-template-columns: 1fr; padding-block: 24px 0; }
  .ptx-hero__media { order: -1; }
  .ptx-nav__cta { display: none; }
}

@media (max-width: 720px) {
  .ptx-figures { transform: none; margin-block: 30px 0; }
  .ptx-nav { margin-top: 0; }
  .ptx-download { flex-wrap: wrap; }
  .ptx-download .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ptx-feature, .ptx-linkcard, .ptx-faq__marker, .ptx-linkcard__more svg { transition: none; }
  .ptx-feature:hover, .ptx-linkcard:hover { transform: none; }
}

@media print {
  .ptx-nav, .ptx-actions { display: none; }
  /* Override the UA rule that hides a closed <details>, so every answer prints. */
  .ptx-faq__item > *:not(summary) { display: block !important; }
  .ptx-faq__marker { display: none; }
}