/* ==========================================================================
   SPRK — 08. INNER PAGES
   Shared blocks for the standalone pages: About, Products, Projects,
   Why SPRK, Request a Quote, Contact. Loaded after legal.css, before
   responsive.css. Reuses tokens/components — adds only what those files
   do not already cover.
   ========================================================================== */

/* --------------------------------------------------------------------------
   8.1 Photo page-hero — a shorter, image-backed variant of .page-hero
   -------------------------------------------------------------------------- */
.page-hero--photo {
  background: var(--navy-900);
  padding-block: clamp(4.5rem, 3.2rem + 6.5vw, 7rem) clamp(3.25rem, 2.4rem + 4vw, 4.75rem);
  isolation: isolate;
}
.page-hero__bg { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.page-hero--photo::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(100deg, rgba(10,26,43,.94) 0%, rgba(10,26,43,.8) 40%, rgba(10,26,43,.5) 75%, rgba(10,26,43,.62) 100%),
    linear-gradient(to top, rgba(10,26,43,.9) 0%, rgba(10,26,43,.15) 60%);
}
.page-hero--photo .lead { color: var(--muted-dark); }

/* --------------------------------------------------------------------------
   8.2 Figures strip — a static version of the homepage stat plate,
   used inline inside a section instead of straddling a hero seam
   -------------------------------------------------------------------------- */
.figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   8.3 Chip list — light subcategory tags on white/light cards
   -------------------------------------------------------------------------- */
.chip-list { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.chip {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--steel);
  background: var(--bg);
}

/* --------------------------------------------------------------------------
   8.4 Value cards — light icon tiles (About / Why SPRK)
   -------------------------------------------------------------------------- */
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }
.value-card {
  padding: var(--s-7);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  display: grid;
  gap: var(--s-4);
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out), border-color var(--t) var(--ease-out);
}
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #D7DCE2; }
.value-card__icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--amber-100);
  color: var(--amber-600);
}
.value-card__icon svg { width: 24px; height: 24px; }
.value-card h3 { font-size: var(--fs-h4); }
.value-card p { font-size: var(--fs-sm); color: var(--muted); margin: 0; line-height: 1.65; }

/* --------------------------------------------------------------------------
   8.5 Compare — "the old way / the SPRK way" (Why SPRK)
   -------------------------------------------------------------------------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); align-items: stretch; }
.compare__col {
  padding: var(--s-8) var(--s-7);
  border-radius: var(--r-card);
  display: grid;
  gap: var(--s-6);
  align-content: start;
}
.compare__col--old { background: var(--bg); border: 1px solid var(--line); }
.compare__col--new { background: var(--navy-800); color: var(--muted-dark); position: relative; overflow: hidden; }
.compare__head { display: flex; align-items: center; gap: var(--s-3); }
.compare__head span { font-family: var(--font-head); font-size: var(--fs-h4); font-weight: 600; }
.compare__col--old .compare__head span { color: var(--navy-800); }
.compare__col--new .compare__head span { color: #fff; }
.compare__badge {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  flex: none;
}
.compare__col--old .compare__badge { background: rgba(160,60,45,.09); color: #B5432E; }
.compare__col--new .compare__badge { background: rgba(245,162,26,.14); color: var(--amber-500); }
.compare__list { display: grid; gap: var(--s-4); }
.compare__list li { display: grid; grid-template-columns: 20px 1fr; gap: var(--s-3); align-items: start; font-size: var(--fs-sm); line-height: 1.6; }
.compare__col--old .compare__list li { color: var(--steel); }
.compare__list svg { width: 20px; height: 20px; margin-top: 2px; }
.compare__col--old .compare__list svg { color: #B5432E; opacity: .7; }
.compare__col--new .compare__list svg { color: var(--amber-500); }

/* --------------------------------------------------------------------------
   8.6 Sector rows — alternating media/body panels (Projects)
   -------------------------------------------------------------------------- */
.sector { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.sector + .sector { margin-top: var(--s-13); }
.sector__media { border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-lg); }
.sector__media img { width: 100%; height: 100%; object-fit: cover; }
.sector__body { display: grid; gap: var(--s-4); }
.sector--reverse .sector__media { order: 2; }
.sector--reverse .sector__body { order: 1; }

/* --------------------------------------------------------------------------
   8.7 Info cards — ways to reach us (Contact)
   -------------------------------------------------------------------------- */
.info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }
.info-card {
  padding: var(--s-7);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  display: grid;
  gap: var(--s-3);
  text-align: left;
}
.info-card__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--navy-800);
  color: var(--amber-500);
  margin-bottom: var(--s-2);
}
.info-card__icon svg { width: 21px; height: 21px; }
.info-card h3 { font-family: var(--font-head); font-size: var(--fs-h4); font-weight: 600; color: var(--navy-800); }
.info-card p { font-size: var(--fs-sm); color: var(--muted); margin: 0; line-height: 1.6; }
.info-card a { color: var(--navy-800); font-weight: 600; }
.info-card a:hover { color: var(--amber-600); }

/* --------------------------------------------------------------------------
   8.8 Map
   -------------------------------------------------------------------------- */
.map-frame {
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  aspect-ratio: 16 / 6;
  background: var(--bg-2);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --------------------------------------------------------------------------
   8.9 FAQ — native <details>, no JS required
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: var(--s-3); max-width: 800px; }
.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: var(--surface);
  padding: var(--s-5) var(--s-6);
}
.faq__item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  font-family: var(--font-head);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--navy-800);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  border-right: 2px solid var(--steel);
  border-bottom: 2px solid var(--steel);
  transform: rotate(45deg);
  transition: transform var(--t) var(--ease-out);
}
.faq__item[open] summary::after { transform: rotate(-135deg); }
.faq__item p { margin-top: var(--s-4); color: var(--muted); font-size: var(--fs-body); line-height: 1.7; }

/* --------------------------------------------------------------------------
   8.10 Simple numbered process row (Projects)
   -------------------------------------------------------------------------- */
.mini-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-7); }
.mini-step { display: grid; gap: var(--s-3); }
.mini-step__num {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--amber-600);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  width: 34px; height: 34px;
  display: grid; place-items: center;
}
.mini-step h3 { font-size: var(--fs-h4); }
.mini-step p { font-size: var(--fs-sm); color: var(--muted); margin: 0; line-height: 1.6; }

/* ==========================================================================
   Responsive — matches the breakpoints in responsive.css
   ========================================================================== */
@media (max-width: 1024px) {
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .info-grid  { grid-template-columns: repeat(2, 1fr); }
  .figures    { grid-template-columns: repeat(2, 1fr); }
  .figures .stat:nth-child(-n+2) { border-top: 0; }
  .figures .stat:nth-child(even) { border-left: 1px solid var(--line); }
  .figures .stat:nth-child(odd)  { border-left: 0; }
  .figures .stat:nth-child(n+3)  { border-top: 1px solid var(--line); }

  .sector { grid-template-columns: 1fr; gap: var(--s-7); }
  .sector--reverse .sector__media,
  .sector--reverse .sector__body { order: 0; }
  .sector + .sector { margin-top: var(--s-11); }

  .compare { grid-template-columns: 1fr; }
  .mini-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .value-grid { grid-template-columns: 1fr; }
  .info-grid  { grid-template-columns: 1fr; }
  .figures    { grid-template-columns: 1fr; }
  .figures .stat { border-left: 0 !important; border-top: 1px solid var(--line); }
  .figures .stat:first-child { border-top: 0; }
  .mini-steps { grid-template-columns: 1fr; }
  .map-frame { aspect-ratio: 4 / 3; }
}