/* ===== Technology pages — extends tokens.css + styles.css =====
   Self-contained on purpose: these pages don't load about.css, so the shared
   page-chrome patterns they need are (re)declared here rather than coupling the
   Technology section to the About Us stylesheet. The accordion deliberately
   REUSES .finder-accordion from styles.css — that is the project's one accordion
   component, so reusing it keeps the two in visual lockstep. */

/* ===== Breadcrumb ===== */
.breadcrumb { position: relative; z-index: 1; margin-bottom: var(--space-5); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--fs-xs); color: var(--text-on-dark-muted); }
.breadcrumb li { display: flex; gap: var(--space-2); }
.breadcrumb li:not(:last-child)::after { content: "/"; opacity: 0.45; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb [aria-current="page"] { color: var(--accent); }

/* ===== Hub hero (text-only) ===== */
.tech-hub-hero { position: relative; background: radial-gradient(ellipse 80% 60% at 75% 20%, var(--navy-700), var(--navy-900) 65%); color: var(--text-on-dark); padding-block: var(--space-9); overflow: hidden; }
.tech-hub-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(234,180,87,0.15) 1px, transparent 0); background-size: 28px 28px; opacity: 0.5; pointer-events: none; }
.tech-hub-hero .container { position: relative; }
.tech-hub-hero h1 { font-size: clamp(2.4rem, 5vw, var(--fs-4xl)); text-transform: uppercase; color: var(--accent); }
.tech-hub-hero .eyebrow { display: block; }
.tech-hub-lead { margin-top: var(--space-5); font-size: var(--fs-md); color: var(--text-on-dark-muted); max-width: 68ch; line-height: var(--lh-normal); }

/* ===== Sub-page hero (with banner image) ===== */
.tech-hero { position: relative; min-height: 340px; display: flex; align-items: flex-end; background: var(--navy-900); color: var(--text-on-dark); overflow: hidden; padding-block: var(--space-8); }
.tech-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.34; }
.tech-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--navy-900) 8%, rgba(11,26,46,0.72) 55%, rgba(11,26,46,0.42) 100%); }
.tech-hero .container { position: relative; z-index: 1; }
.tech-hero h1 { font-size: clamp(2.2rem, 5vw, var(--fs-4xl)); text-transform: uppercase; color: var(--accent); }
.tech-hero-lead { margin-top: var(--space-4); font-size: var(--fs-md); color: var(--text-on-dark-muted); max-width: 58ch; line-height: var(--lh-normal); }
.tech-hero-credit { margin: var(--space-5) 0 0; font-size: 0.6875rem; line-height: 1.4; text-align: right; color: rgba(255,255,255,0.32); }
.tech-hero-credit a { color: inherit; text-decoration: underline; }
.tech-hero-credit a:hover { color: var(--text-on-dark); }
@media (max-width: 640px) { .tech-hero-credit { text-align: left; } }

/* ===== At a glance strip ===== */
.tech-glance { background: var(--navy-800); border-top: 1px solid var(--border-on-dark); border-bottom: 1px solid var(--border-on-dark); color: var(--text-on-dark); }
.tech-glance-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-6); padding-block: var(--space-7); }
.tech-glance-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.tech-glance-item > svg { width: 26px; height: 26px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.tech-glance-item h3 { font-family: var(--font-display); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin-bottom: var(--space-2); }
.tech-glance-item p { font-size: var(--fs-sm); color: var(--text-on-dark); line-height: var(--lh-normal); }
@media (max-width: 860px) { .tech-glance-grid { grid-template-columns: 1fr; gap: var(--space-5); } }

/* ===== Process diagram (pure CSS/SVG — no raster assets) ===== */
.process-steps { --steps: 5; position: relative; display: grid; grid-template-columns: repeat(var(--steps), minmax(0,1fr)); gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
/* dashed connector sits behind the numbered circles; the circles are opaque and on top */
.process-steps::before { content: ""; position: absolute; top: 21px; left: calc(100% / var(--steps) / 2); right: calc(100% / var(--steps) / 2); height: 2px; background: repeating-linear-gradient(90deg, var(--gold-500) 0 7px, transparent 7px 15px); opacity: 0.55; }
.process-step { position: relative; text-align: center; }
.process-step-num { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--gold-500); background: var(--white); color: var(--gold-600); font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-4); }
.process-step h3 { font-size: var(--fs-sm); text-transform: uppercase; color: var(--text-on-light); margin-bottom: var(--space-2); }
.process-step p { font-size: var(--fs-xs); color: var(--text-on-light-muted); line-height: var(--lh-normal); }

@media (max-width: 860px) {
  /* stack vertically rather than scroll horizontally */
  .process-steps { grid-template-columns: 1fr; gap: 0; }
  .process-steps::before { display: none; }
  .process-step { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: var(--space-4); text-align: left; padding-bottom: var(--space-6); }
  .process-step:last-child { padding-bottom: 0; }
  .process-step-num { margin: 0; }
  .process-step:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 50px; bottom: 6px; width: 2px; background: repeating-linear-gradient(180deg, var(--gold-500) 0 7px, transparent 7px 15px); opacity: 0.55; }
}

/* ===== Overview prose ===== */
.tech-overview { max-width: 74ch; }
.tech-overview h3 { font-size: var(--fs-lg); text-transform: uppercase; color: var(--navy-900); margin-top: var(--space-7); margin-bottom: var(--space-3); }
.tech-overview h3:first-child { margin-top: 0; }
.tech-overview p { color: var(--text-on-light-muted); line-height: var(--lh-normal); margin-bottom: var(--space-4); }
.tech-overview p:last-child { margin-bottom: 0; }

/* ===== Advantage card grid (UV) ===== */
.tech-adv-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.tech-adv-card { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--card-light-shadow); }
.tech-adv-card svg { width: 26px; height: 26px; color: var(--gold-600); margin-bottom: var(--space-3); }
.tech-adv-card h3 { font-size: var(--fs-sm); text-transform: uppercase; color: var(--navy-900); margin-bottom: var(--space-2); }
.tech-adv-card p { font-size: var(--fs-sm); color: var(--text-on-light-muted); line-height: var(--lh-normal); }
@media (max-width: 900px) { .tech-adv-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .tech-adv-grid { grid-template-columns: 1fr; } }

/* ===== Technical details (inside the shared .finder-accordion component) ===== */
.tech-detail-group { margin-bottom: var(--space-6); }
.tech-detail-group:last-child { margin-bottom: 0; }
.tech-detail-group h3 { font-family: var(--font-display); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--gold-600); margin-bottom: var(--space-3); }
.tech-detail-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tech-detail-pills li { background: var(--gray-100); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-4); font-size: var(--fs-xs); color: var(--text-on-light); }
.tech-detail-bullets li { display: flex; gap: var(--space-3); font-size: var(--fs-sm); color: var(--text-on-light-muted); line-height: var(--lh-normal); margin-bottom: var(--space-3); }
.tech-detail-bullets li:last-child { margin-bottom: 0; }
.tech-detail-bullets li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-500); flex-shrink: 0; margin-top: 9px; }

/* ===== Specification table (RO) ===== */
.tech-spec-table { width: 100%; border-collapse: collapse; }
.tech-spec-table th, .tech-spec-table td { text-align: left; padding: var(--space-4) 0; border-bottom: 1px solid var(--gray-100); font-size: var(--fs-sm); vertical-align: top; }
.tech-spec-table th { width: 42%; color: var(--navy-900); font-weight: 600; padding-right: var(--space-4); }
.tech-spec-table td { color: var(--text-on-light-muted); }
.tech-spec-table tr:last-child th, .tech-spec-table tr:last-child td { border-bottom: none; }
@media (max-width: 600px) { .tech-spec-table th { width: 50%; } }

/* ===== Hub comparison grid ===== */
.tech-compare-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-5); }
.tech-compare-card { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius-lg); box-shadow: var(--card-light-shadow); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
.tech-compare-card:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -16px rgba(15,33,56,0.28); }
.tech-compare-icon { width: 46px; height: 46px; border-radius: var(--radius-md); background: rgba(230,172,71,0.14); display: flex; align-items: center; justify-content: center; }
.tech-compare-icon svg { width: 24px; height: 24px; color: var(--gold-600); }
.tech-compare-card h3 { font-size: var(--fs-md); text-transform: uppercase; color: var(--navy-900); }
.tech-compare-card > p { font-size: var(--fs-sm); color: var(--text-on-light-muted); line-height: var(--lh-normal); }
.tech-compare-bestfor { background: var(--gray-100); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); font-size: var(--fs-xs); color: var(--text-on-light); line-height: var(--lh-normal); }
.tech-compare-bestfor strong { display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold-600); margin-bottom: 2px; }
.tech-compare-link { margin-top: auto; display: inline-flex; align-items: center; gap: var(--space-2); color: var(--gold-600); font-family: var(--font-display); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid transparent; align-self: flex-start; }
.tech-compare-link svg { width: 12px; height: 12px; }
.tech-compare-link:hover { border-bottom-color: var(--gold-600); }
@media (max-width: 1040px) { .tech-compare-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .tech-compare-grid { grid-template-columns: 1fr; } }

/* ===== TDS finder cross-link block (hub) ===== */
.tech-finder-cta { background: var(--navy-800); border: 1px solid var(--border-on-dark); border-left: 3px solid var(--accent); border-radius: var(--radius-lg); padding: var(--space-7); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.tech-finder-cta h2 { font-size: var(--fs-xl); text-transform: uppercase; color: var(--white); margin-bottom: var(--space-2); }
.tech-finder-cta p { font-size: var(--fs-sm); color: var(--text-on-dark-muted); max-width: 52ch; }

/* ===== Related products ===== */
.tech-products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); }
/* .product-card inherits its text colour from the section; pin it so the card is
   safe to drop onto either a light or dark section without going white-on-white */
.tech-products-grid .product-card-body h3 { color: var(--text-on-light); }
.tech-products-grid .product-card-body p { color: var(--text-on-light-muted); }

/* ===== Enquiry CTA ===== */
.tech-enquiry { text-align: center; }
.tech-enquiry h2 { font-size: var(--fs-xl); text-transform: uppercase; color: var(--white); margin-bottom: var(--space-3); }
.tech-enquiry p { color: var(--text-on-dark-muted); max-width: 54ch; margin: 0 auto var(--space-6); line-height: var(--lh-normal); }