/* ═══════════════════════════════════════════════════════════════════════════
   SOFTWARE / TECHNOLOGY PAGES — page-group rules
   2026 design system — Geomage Website (www.geomage.com)

   Loaded ALONGSIDE main.css by the four pages of the tech group:
     /seismic-software/                      frontend/software.html
     /seismic-software/technology/           frontend/technology.html
     /seismic-software/diffraction-imaging/  frontend/diffraction-imaging.html
     /multifocusing-imaging/                 frontend/multifocusing-imaging.html

   Only what the design-system components do NOT already provide lives here:

     · .hero margin-top reset — these four pages carry no .subnav, so the
       component's 116px header+subnav offset has to come back to 70px
       (the same override pages/home.css and pages/services.css write).
     · .sw-prod*  — the software-hub product record: legacy `.content__body`
       was text beside a 600px screenshot. components/mod-cards .mod crops its
       media to a 158px strip, which would destroy a product screenshot, so the
       hub keeps the two-up shape as its own block.
     · .sw-rel*   — the two extra suite entries (VSP, Academic) as link cards.
     · .sw-list / .tech-list — bullet lists outside a card (.mod__features is
       card-scoped: 12.5px and margin-top:auto).
     · .cmp*      — the before / after figure pair that replaces the legacy
       jQuery twentytwenty drag handle. Same images, same "Before" / "After"
       labels (which are the images' own alt text on these pages), no jQuery.
       NOTE: pages/services.css carries the same pattern under .svc-compare*.
       Both groups are page-scoped sheets, so neither can see the other's copy;
       promoting one shared components/compare.css belongs to the cleanup task,
       not to a page-group restyle.
     · .tech-split / .tech-body / .tech-icon / .tech-abbr — the technology
       sections: full-width comparison figure with the prose and bullets under
       it, an icon inside the section title, and the MFDI abbreviation.
     · .btn-ghost — the neutral third action on a product record (the legacy
       `button__transparent`); the design system ships no neutral variant.

   Everything else on these pages is a component: .hero (+ .hero__inner--narrow),
   .section-head / .eyebrow, .btn, and the header/footer includes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── HERO OFFSET (no subnav on these pages) ──────────────────────────────── */
.hero { margin-top: 70px; }
/* Anchor targets clear the fixed header only (header-2026.css assumes +subnav). */
section[id],
article[id] { scroll-margin-top: 86px; }
@media (max-width: 720px) {
  section[id],
  article[id] { scroll-margin-top: 76px; }
}

/* ── NEUTRAL ACTION BUTTON ───────────────────────────────────────────────── */
.btn-ghost { background: transparent; color: var(--text); border: 1.5px solid var(--border); padding: 12px 26px; }
.btn-ghost:hover { border-color: var(--text-light); color: var(--text-dark); background: var(--bg); }

/* ── SOFTWARE HUB: PRODUCT RECORDS ───────────────────────────────────────── */
.sw-prod {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--bg-white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.sw-prod:hover { border-color: var(--orange); box-shadow: var(--shadow-md); }
.sw-prod + .sw-prod { margin-top: 24px; }
.sw-prod__body { padding: 32px 32px 30px; display: flex; flex-direction: column; }

.sw-prod__head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.sw-prod__logo { width: 54px; height: 54px; flex-shrink: 0; object-fit: contain; }
.sw-prod__num { font-family: var(--font-head); font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--orange); margin-bottom: 5px; }
.sw-prod__name { font-family: var(--font-head); font-size: 21px; font-weight: 700; line-height: 1.2; color: var(--text-dark); }
.sw-prod__name span { color: var(--orange); }
.sw-prod__lead { font-size: 14.5px; line-height: 1.7; color: var(--text); margin-bottom: 22px; }
.sw-prod__sub {
  font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--text-dark);
  padding-top: 20px; border-top: 1px solid var(--border); margin-bottom: 10px;
}
.sw-prod__desc { font-size: 13.5px; line-height: 1.7; color: var(--text); margin-bottom: 16px; }

/* Media panel: the screenshot is evidence, so it is shown whole (contain, not
   a cover crop) on the dark panel the design system uses behind imagery. */
.sw-prod__media { display: flex; align-items: center; justify-content: center; background: #0d1117; padding: 24px; border-left: 1px solid var(--border); }
.sw-prod__media img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); }
/* Alternate the screenshot side down the stack. Equal columns keep the copy
   measure and the screenshot width identical on every record. */
.sw-prod:nth-child(even) .sw-prod__body { order: 2; }
.sw-prod:nth-child(even) .sw-prod__media { order: 1; border-left: none; border-right: 1px solid var(--border); }

.sw-prod__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 24px; }

/* ── BULLET LISTS OUTSIDE A CARD ─────────────────────────────────────────── */
.sw-list, .tech-list { list-style: none; }
.sw-list li, .tech-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; line-height: 1.6; color: var(--text);
}
.sw-list li + li, .tech-list li + li { margin-top: 10px; }
.sw-list li::before, .tech-list li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange); flex-shrink: 0; margin-top: 7px;
}
/* Two columns so no line runs the full container measure. Multi-column, not a
   2-col grid: a grid flows row-wise, `columns` flows in written order. */
.tech-list { columns: 2; column-gap: 44px; }
.tech-list li { break-inside: avoid; }

/* ── SUITE LINK CARDS (VSP · ACADEMIC) ───────────────────────────────────── */
.sw-more { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 24px; }
.sw-rel {
  display: block; text-decoration: none;
  background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 22px 22px 24px;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.sw-rel:hover { border-color: var(--orange); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.sw-rel__t {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-head); font-size: 15px; font-weight: 700;
  color: var(--text-dark); line-height: 1.25; margin-bottom: 8px;
}
.sw-rel:hover .sw-rel__t { color: var(--orange); }
.sw-rel__t svg { width: 13px; height: 13px; stroke: var(--orange); fill: none; stroke-width: 2.5; flex-shrink: 0; }
.sw-rel__d { display: block; font-size: 12.5px; line-height: 1.6; color: var(--text); }

/* ── BEFORE / AFTER FIGURE PAIR ──────────────────────────────────────────── */
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.cmp__half {
  position: relative; overflow: hidden; background: #0d1117;
  border: 1px solid var(--border); border-radius: var(--radius-md);
}
/* Natural aspect: seismic sections must not be cropped where they are the
   evidence. The two images of a pair share an aspect ratio on every page. */
.cmp__half img { width: 100%; height: auto; display: block; }
.cmp__label {
  position: absolute; top: 9px; left: 9px; z-index: 1;
  font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: rgba(10, 18, 35, .78); padding: 3px 9px; border-radius: 100px;
}
.cmp__half--after .cmp__label { background: var(--orange); }

/* ── TECHNOLOGY SECTIONS ─────────────────────────────────────────────────── */
.tech-band { background: var(--bg-white); }
.tech-split { display: grid; grid-template-columns: 1fr; gap: 34px; }
/* The comparison figure takes the whole container (it is the evidence); the
   copy under it is capped so no line runs the full 1144px measure. */
.tech-body { max-width: 880px; margin: 0 auto; width: 100%; }
.tech-body p { font-size: 15.5px; line-height: 1.85; color: var(--text); }
.tech-body p + p { margin-top: 18px; }
.tech-body p + .tech-list,
.tech-body .tech-list + .tech-actions { margin-top: 22px; }
.tech-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* Section-title icon: the legacy headings opened with a 48px technology mark. */
.tech-icon { width: 40px; height: 40px; vertical-align: -9px; margin-right: 12px; }
.tech-abbr { color: var(--orange); font-weight: 700; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .sw-prod { grid-template-columns: 1fr; }
  .sw-prod__media { border-left: none; border-bottom: 1px solid var(--border); order: -1; padding: 24px; }
  .sw-prod:nth-child(even) .sw-prod__body { order: 0; }
  .sw-prod:nth-child(even) .sw-prod__media { order: -1; border-right: none; border-bottom: 1px solid var(--border); }
  .tech-list { columns: 1; }
  .tech-split { gap: 28px; }
}

@media (max-width: 720px) {
  .hero { margin-top: 60px; }
  .sw-prod__body { padding: 26px 24px 24px; }
  .sw-more { grid-template-columns: 1fr; }
  .cmp { grid-template-columns: 1fr; }
  .tech-icon { width: 32px; height: 32px; vertical-align: -6px; margin-right: 9px; }
  .tech-body p { font-size: 15px; }
}

@media (max-width: 480px) {
  /* Three actions side by side at phone width break their labels across lines;
     components/hero.css already stretches hero buttons with flex:1 below 720px. */
  .sw-prod__actions { flex-direction: column; align-items: stretch; }
  .sw-prod__actions .btn { width: 100%; justify-content: center; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; justify-content: center; }
}