/* ==========================================================================
   Services page (/service) and service detail pages (/service/{id})

   Loaded after industries.css and home.css (service/partials/styles), which
   supply the navy hero, cards, buttons, section heads, the stats strip, the
   service cards and the takeover block. This file only adds what the
   service pages have and the others do not. Plain CSS with a filemtime()
   query string - nothing may need building on the live box.

   Everything is scoped under .sv-page.
   ========================================================================== */

/* `.ind-page p { margin: 0 }` outranks .ind-eyebrow's own margin. */
.sv-page .sv-hero .ind-eyebrow { margin-bottom: 18px; }
.sv-page .sv-hero h1 { max-width: 22em; }
.sv-page .sv-hero .hp-hero-stats { margin-top: 44px !important; }

/* Eight services are two rows of four; home.css drops to three across
   below 1200px, which would leave 3 + 3 + 2. Keep four down to 992px, then
   home.css's two and one. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .sv-grid.hp-cols-4 { gap: 18px; }
  .sv-grid.hp-cols-4 > li { width: calc((100% - 54px) / 4); }
  .sv-grid.hp-cols-4 .hp-service-body { padding: 16px 16px 18px; }
}

/* --- Detail: hero image ------------------------------------------------ */
.sv-hero-figure {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: 0 0 0 12px rgba(255, 255, 255, .04), 0 24px 48px rgba(5, 12, 40, .35);
}
.sv-hero-figure img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* --- Detail: description (CMS rich text) -------------------------------- */
.sv-body { font-size: 1.04rem; line-height: 1.95; color: var(--ind-ink); }
.sv-body > * + * { margin-top: 1.1em !important; }
/* The CMS sets text-align: justify inline; justified Japanese opens wide
   gaps once phrases stay whole (auto-phrase), so align to the start. */
.sv-body p, .sv-body li { text-align: start !important; }
.sv-body ul { list-style: disc; padding-left: 1.4em; }
.sv-body ol { padding-left: 1.4em; }
.sv-body h2, .sv-body h3, .sv-body h4 { color: var(--ind-navy); font-weight: 800; margin-top: 1.6em !important; }
.sv-body img { max-width: 100%; height: auto; border-radius: 12px; }
.sv-body a { color: var(--ind-blue); }
.sv-page:lang(ja) .sv-body { line-height: 2; }

/* --- Detail: process steps under the description ------------------------ */
.sv-steps-wrap { margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--ind-line); }
.sv-steps-wrap h2 { font-size: clamp(1.2rem, 1rem + .7vw, 1.5rem); font-weight: 800; color: var(--ind-navy); margin: 0 0 20px; }
.sv-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.sv-steps li { padding: 18px 20px 20px; border-radius: 14px; background: #fff; border: 1px solid var(--ind-line); }
.sv-steps .ind-step-num { margin-bottom: 10px; font-size: .72rem; }
.sv-steps h3 { font-size: 1rem; font-weight: 800; color: var(--ind-navy); margin: 0 0 6px; }
.sv-steps p { font-size: .9rem; color: var(--ind-muted); }

/* --- Detail: other services --------------------------------------------- */
.sv-others {
  position: sticky;
  top: 110px;
  padding: 22px 20px;
  border-radius: 16px;
  background: var(--ind-bg);
  border: 1px solid var(--ind-line);
}
.sv-others h2 { font-size: 1.05rem; font-weight: 800; color: var(--ind-navy); margin: 0 0 12px; }
.sv-others ul { display: grid; gap: 8px; }
.sv-others li a {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 8px 8px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--ind-line);
  color: var(--ind-ink);
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.45;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sv-others li a:hover { border-color: var(--ind-blue); box-shadow: 0 6px 18px rgba(26, 42, 108, .08); color: var(--ind-navy); }
.sv-others li a:not(:has(img)) { grid-template-columns: minmax(0, 1fr) auto; padding-left: 14px; }
.sv-others img { width: 72px; height: 48px; border-radius: 8px; object-fit: cover; background: var(--ind-line); }
.sv-others .fa { color: var(--ind-blue); }
.sv-others-all { display: inline-block; margin-top: 14px; font-weight: 800; font-size: .92rem; color: var(--ind-blue); text-decoration: none; }
.sv-others-all:hover { color: var(--ind-navy); text-decoration: none; }

/* --- Detail: related cards (takeover + three industries) ---------------- */
.sv-related { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.sv-takeover-card { --ind-accent: var(--ind-navy); --ind-accent-soft: #e7ecfb; }
.sv-takeover-card .hp-badge-new { align-self: flex-start; margin-bottom: 10px !important; }
.sv-related .ind-industry-card h3 { font-size: 1.12rem; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .sv-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .sv-others { position: static; }
  .sv-hero-figure { max-width: 560px; }
}
@media (max-width: 767.98px) {
  .sv-related { grid-template-columns: 1fr; gap: 16px; }
  .sv-body { font-size: 1rem; }
  .sv-steps { grid-template-columns: 1fr; }
}

/* --- Print --------------------------------------------------------------- */
@media print {
  .sv-hero-figure { box-shadow: none; max-width: 50%; }
  .sv-others { position: static; background: none; }
}