/* ==========================================================================
   e-Pragma "Specialized development services" block
   A generic services grid that used to live at the bottom of the Drupal
   page. It is not Drupal-specific, so it now sits on the /services/ page
   and is scoped to .ep-craft so it never leaks into the docs pages.
   ========================================================================== */

.ep-craft {
  --epk-bg: #ffffff;
  --epk-fg: #12141f;
  --epk-muted: #5a6178;
  --epk-line: #e4e7f0;
  --epk-card: #ffffff;
  --epk-navy: #12132e;
  --epk-navy-2: #1c1e42;
  --epk-brand: #4051b5;
  --epk-brand-2: #6c7bff;
  --epk-accent: #ff7a1a;
  --epk-radius: 18px;
  --epk-shadow: 0 1px 2px rgba(16, 20, 45, .06), 0 12px 32px rgba(16, 20, 45, .07);
  --epk-shadow-lg: 0 2px 6px rgba(16, 20, 45, .08), 0 24px 60px rgba(16, 20, 45, .12);
}

[data-md-color-scheme="slate"] .ep-craft {
  --epk-bg: #14161f;
  --epk-fg: #eef0f6;
  --epk-muted: #a4abc0;
  --epk-line: #2b2f3d;
  --epk-card: #1b1e29;
  --epk-navy: #0d0f1c;
  --epk-navy-2: #171a30;
  --epk-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .35);
  --epk-shadow-lg: 0 2px 6px rgba(0, 0, 0, .5), 0 24px 60px rgba(0, 0, 0, .45);
}

.ep-craft .craft-services {
  --craft-card-bg: var(--epk-card);
  --craft-card-border: var(--epk-line);
  --craft-chip-bg: color-mix(in srgb, var(--epk-brand) 12%, transparent);
  position: relative;
  z-index: 0;
  margin-bottom: 56px;
}

.ep-craft .craft-services .craft-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.ep-craft .craft-services .craft-box {
  width: calc(50% - 15px);
  position: relative;
  display: inline-grid;
  padding: 30px;
  border-radius: 16px;
  background: var(--craft-card-bg);
  border: 1px solid var(--craft-card-border);
  box-shadow: var(--epk-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}

.ep-craft .craft-services .craft-box:hover {
  transform: translateY(-4px);
  box-shadow: var(--epk-shadow-lg);
}

.md-typeset .ep-craft .craft-services .craft-head {
  display: inline-block;
  position: relative;
  padding: 20px 0 0;
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--epk-fg);
}

.ep-craft .craft-services .craft-head::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 77px;
  height: 4px;
  border-radius: 999px;
  background: var(--epk-accent);
  transition: width .9s ease;
}

.ep-craft .craft-services .craft-box:hover .craft-head::before {
  width: 100%;
}

.md-typeset .ep-craft .craft-services .craft-para {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--epk-muted);
  margin: 15px 0 22px;
}

.ep-craft .craft-services .craft-list {
  width: fit-content;
  display: block;
  padding: 5px 16px;
  margin: 0 0 10px;
  border-radius: 18px;
  background: var(--craft-chip-bg);
  font-size: .88rem;
  line-height: 1.5;
  color: var(--epk-fg);
}

.md-typeset .ep-craft .craft-services .craft-cta {
  display: inline-block;
  margin-top: 14px;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid var(--epk-accent);
  color: var(--epk-fg);
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}

.md-typeset .ep-craft .craft-services .craft-cta:hover {
  background: var(--epk-accent);
  color: #1b1200;
}

/* The dark theme repaints every hovered link with the theme accent:
     [data-md-color-scheme="slate"] .md-typeset a:hover
   That selector is (0,3,1) and would beat the (0,3,0) rule above, which
   turned the orange "Contact us" button blue on hover in the dark theme.
   This one is (0,4,0) and wins it back. */
[data-md-color-scheme="slate"] .md-typeset .ep-craft .craft-services .craft-cta:hover {
  background: var(--epk-accent);
  color: #1b1200;
}

.ep-craft .craft-services .construct-over-flex {
  row-gap: 30px;
  column-gap: 40px;
  margin: 0 0 40px;
}

.ep-craft .craft-services .construct-over-box {
  width: 33%;
  border-radius: 20px;
  background: var(--craft-card-bg);
}

/* ---------- Responsive ---------- */

@media screen and (max-width: 768px) {
  .ep-craft .craft-services .craft-box {
    width: 100%;
  }
}