/* Scoped block CSS — plain CSS, served as-is, no Tailwind rebuild needed.
   Visual reference: prototype variant D (Documentation/AI/prototype-services-section.html).

   Two faces, one selected-service state:
     • base rules          = accordion (all widths, and the JS-less fallback)
     • .service-explorer--enhanced inside @media (min-width: 1024px)
                           = master-detail, list left / panel right

   `--enhanced` is set by Frontend.js, so the two-column layout only ever
   applies once JS is actually there to move the selected detail into the panel.

   The section background is not part of this block (the eyebrow/heading/intro
   are separate elements), and variant D puts it on navy while a plain content
   page is light. So the rail's own surfaces are mixed out of `currentColor`:
   they tint towards whatever text colour the section inherits, which keeps the
   closed accordion rows visible on either. The plain `rgba()` values are the
   fallback for engines without `color-mix` and assume variant D's dark section.

   `--se-accent` is the single accent knob: the selected row, the icons, the
   checkmarks and the primary CTA's hover all read it, so the editor's
   `accent_color` choice re-tints the whole block by overriding this one property
   inline (Frontend.html).

   The value below only applies to records saved before that field existed, and is
   deliberately the same literal as the field's own default rather than
   `var(--theme-tertiary, …)` it used to be: one default colour, reachable two
   ways, instead of untouched records quietly following the site theme while every
   new record gets a fixed green. Following the theme is now an explicit choice in
   the dropdown. Keep the two in step with EditorInterface.yaml's `default:`.

   The lg breakpoint below is mirrored in Frontend.js (`DESKTOP`) — the two have
   to move together. */
.service-explorer {
  --se-accent: #00b388;
  --se-navy: var(--theme-primary, #03305d);
  --se-panel: #dfe8ff;
  --se-rule: rgba(3, 48, 93, 0.15);
  --se-tint: rgba(255, 255, 255, 0.06);
  --se-tint-hover: rgba(255, 255, 255, 0.1);
}

@supports (background-color: color-mix(in srgb, currentColor 6%, transparent)) {
  .service-explorer {
    --se-tint: color-mix(in srgb, currentColor 6%, transparent);
    --se-tint-hover: color-mix(in srgb, currentColor 10%, transparent);
  }
}

/* ------------------------------------------------------------------ rail */

.service-explorer__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.service-explorer__row {
  border-radius: 0.375rem;
  /* Clips the inline detail against the rounded corners while it animates in. */
  overflow: hidden;
  background-color: var(--se-tint);
  /* Clears the 72–80px sticky .site-header when a row is scrolled into view. */
  scroll-margin-top: 6rem;
  transition: background-color 0.2s ease;
}

.service-explorer__row:hover {
  background-color: var(--se-tint-hover);
}

.service-explorer__row--selected,
.service-explorer__row--selected:hover {
  background-color: var(--se-panel);
  color: #000;
}

/* The heading is structure for assistive tech; the button carries the look.

   Scoped under `.service-explorer` purely for specificity: the global
   `h3:not(.card h3, .lead h3, .contact-card h3) { margin-bottom: 1rem }` in
   tailwind.css is (0,1,2) and would otherwise win, adding 16px of dead space
   below the button — the row would be 88px instead of variant D's 72px, with
   the label sitting high in it. Two classes here beat that without a Tailwind
   rebuild; the alternative is adding `.service-explorer h3` to that :not() list
   the way card/lead/contact-card do. */
.service-explorer .service-explorer__row-heading {
  margin: 0;
  font: inherit;
}

.service-explorer__trigger {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  margin: 0;
  padding: 1rem 1.25rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.service-explorer__row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.25rem;
  color: var(--se-accent);
}

.service-explorer__row-icon-svg {
  width: 1.75rem;
  height: 1.75rem;
}

.service-explorer__row-text {
  flex: 1 1 auto;
  min-width: 0;
}

.service-explorer__row-title {
  display: block;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.service-explorer__row-teaser {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.875rem;
  line-height: 1.25;
  opacity: 0.7;
}

.service-explorer__indicator {
  display: inline-flex;
  flex: none;
  color: var(--se-accent);
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

/* Chevron flips on the open row. */
.service-explorer__row--selected .service-explorer__indicator {
  transform: rotate(180deg);
}

/* ---------------------------------------------------------------- detail */

.service-explorer__detail {
  display: none;
}

.service-explorer__detail--open {
  display: block;
  animation: se-panel-in 0.28s ease-out both;
}

/* Replays on every switch: the class is added to a detail that did not have it,
   and moving the node into the desktop panel re-inserts it either way. */
@keyframes se-panel-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Only the movement is dropped; the row and CTA colour fades stay, they are not
   motion. */
@media (prefers-reduced-motion: reduce) {
  .service-explorer__detail--open {
    animation: none;
  }

  .service-explorer__indicator {
    transition: none;
  }
}

/* Inline (accordion) detail: indented to line up under the row label. */
.service-explorer__row .service-explorer__detail {
  padding: 0.25rem 1.25rem 1.5rem;
}

/* Panel-scale icon + title only make sense in the desktop panel. */
.service-explorer__detail-head {
  display: none;
}

.service-explorer__kicker,
.service-explorer__highlights-title,
.service-explorer__detail-title {
  margin: 0 0 0.2rem;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.service-explorer__kicker {
  color: var(--se-accent);
}

.service-explorer__highlights-title {
  margin-bottom: 0.75rem;
  color: var(--se-navy);
}

.service-explorer__body {
  margin: 0.5rem 0 0;
  font-size: 1.125rem;
  line-height: 1.625;
}

.service-explorer__highlights {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--se-rule);
}

.service-explorer__list-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.service-explorer__list-items li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  line-height: 1.375;
}

.service-explorer__check {
  display: inline-flex;
  flex: none;
  margin-top: 0.125rem;
  color: var(--se-accent);
}

.service-explorer__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.service-explorer__cta {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 400;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.service-explorer__cta--primary {
  background-color: var(--se-navy);
  color: #fff;
}

.service-explorer__cta--primary:hover {
  background-color: var(--se-accent);
  color: #fff;
}

.service-explorer__cta--secondary {
  background-color: #fff;
  border-color: var(--se-rule);
  color: var(--se-navy);
}

.service-explorer__cta--secondary:hover {
  background-color: var(--se-navy);
  color: #fff;
}

/* Empty until JS fills it, and never shown below lg. */
.service-explorer__panel {
  display: none;
}

/* ------------------------------------------- lg+: master list + detail panel */

@media (min-width: 1024px) {
  .service-explorer--enhanced {
    display: grid;
    /* Detail panel gets the wider track, as in variant D. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 1.5rem;
    /* Stretches the panel to the list's height — the panel is never the shorter
       of the two, and a panel taller than the list grows the row instead. */
    align-items: stretch;
  }

  .service-explorer--enhanced .service-explorer__list {
    gap: 0.25rem;
  }

  /* Rows are rail items now: no surface of their own until hovered/selected,
     and no inline detail to clip. */
  .service-explorer--enhanced .service-explorer__row {
    background-color: transparent;
    overflow: visible;
  }

  /* Repeats the base hover because the transparent rule above ties it on
     specificity and wins on source order. */
  .service-explorer--enhanced .service-explorer__row:hover {
    background-color: var(--se-tint-hover);
  }

  .service-explorer--enhanced .service-explorer__row--selected,
  .service-explorer--enhanced .service-explorer__row--selected:hover {
    background-color: var(--se-accent);
    color: #fff;
  }

  .service-explorer--enhanced .service-explorer__row--selected .service-explorer__row-icon {
    color: #fff;
  }

  /* White at 70% over the accent green is the weakest text in the component;
     variant D holds the selected row's teaser at white/85 instead. */
  .service-explorer--enhanced .service-explorer__row--selected .service-explorer__row-teaser {
    opacity: 0.85;
  }

  /* The chevron becomes a "opens on the right" pointer that fades in on the
     selected row. */
  .service-explorer--enhanced .service-explorer__indicator {
    opacity: 0;
    transform: rotate(-90deg);
  }

  .service-explorer--enhanced .service-explorer__row--selected .service-explorer__indicator {
    opacity: 1;
    color: #fff;
    transform: rotate(-90deg);
  }

  .service-explorer--enhanced .service-explorer__panel {
    display: block;
    padding: 2rem;
    border-radius: 0.375rem;
    background-color: var(--se-panel);
    color: #000;
  }

  .service-explorer--enhanced .service-explorer__panel .service-explorer__detail--open {
    display: flex;
    flex-direction: column;
    /* Fills the stretched panel so the CTAs can be pinned to its bottom. */
    height: 100%;
    padding: 0;
  }

  .service-explorer--enhanced .service-explorer__panel .service-explorer__detail-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

  .service-explorer--enhanced .service-explorer__detail-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 4rem;
    height: 4rem;
    border-radius: 0.375rem;
    background-color: var(--se-accent);
    color: #fff;
  }

  .service-explorer--enhanced .service-explorer__detail-icon-svg {
    width: 2rem;
    height: 2rem;
  }

  .service-explorer--enhanced .service-explorer__detail-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: normal;
    line-height: 1.2;
  }

  .service-explorer--enhanced .service-explorer__panel .service-explorer__ctas {
    /* Pinned to the bottom of the panel. */
    margin-top: auto;
    padding-top: 2rem;
  }
}