/* ==========================================================================
   e-Pragma services pages
   Replaces the inline <style> blocks that used to live inside
   docs/{el,en}/services/drupal/drupal.md, and fixes the light-theme
   contrast bugs (white headings on a pale background).

   Two pages share these styles:
     /services/             -> .ep-svc   (hero, offering cards, services index)
     /services/drupal/.../  -> .ep-drupal (Drupal technologies panel)

   The hero banner and the "Τι προσφέρουμε" / "What we offer" cards now live
   on the services index page; the Drupal page keeps only the parts that are
   genuinely Drupal-specific. The shared blocks are scoped with :is() so both
   pages pick them up without duplicating the rules.
   ========================================================================== */

/* ---------- Design tokens ---------- */

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

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

/* ---------- Hero banner ---------- */

:is(.ep-svc, .ep-drupal) .hero-section {
  position: relative;
  overflow: hidden;
  padding: 56px 44px;
  margin: 0 0 48px;
  border-radius: var(--epd-radius);
  color: #f5f6fb;
  background:
    radial-gradient(120% 140% at 88% 0%, rgba(108, 123, 255, .38) 0%, transparent 58%),
    linear-gradient(135deg, var(--epd-navy) 0%, var(--epd-navy-2) 100%);
  box-shadow: var(--epd-shadow-lg);
}

:is(.ep-svc, .ep-drupal) .hero-section-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .3;
  background:
    radial-gradient(80% 60% at 12% 10%, rgba(255, 122, 26, .18) 0%, transparent 60%),
    radial-gradient(70% 70% at 90% 90%, rgba(108, 123, 255, .22) 0%, transparent 60%);
  pointer-events: none;
}

:is(.ep-svc, .ep-drupal) .hero-section .hero-container {
  position: relative;
  z-index: 1;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}

.md-typeset :is(.ep-svc, .ep-drupal) .hero-section .solution-tag {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--epd-accent);
  margin: 0 0 16px;
}

.md-typeset :is(.ep-svc, .ep-drupal) .hero-section .main-heading {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 40px;
  max-width: 22ch;
}

/* The heading is the last thing inside .hero-container, and the card grid
   follows it as a sibling. The grid has to start from the full width of the
   banner - capping it would leave a gap on wide screens. */
:is(.ep-svc, .ep-drupal) .hero-section .services-grid {
  clear: both;
  width: 100%;
}

:is(.ep-svc, .ep-drupal) .hero-section .services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: none;
}

:is(.ep-svc, .ep-drupal) .hero-section .service-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  color: inherit;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}

:is(.ep-svc, .ep-drupal) .hero-section .service-item:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .25);
  transform: translateY(-2px);
}

:is(.ep-svc, .ep-drupal) .hero-section .icon-container {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .1);
  transition: background .2s ease;
}

:is(.ep-svc, .ep-drupal) .hero-section .service-item:hover .icon-container {
  background: rgba(255, 122, 26, .24);
}

:is(.ep-svc, .ep-drupal) .hero-section .icon-container .icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.md-typeset :is(.ep-svc, .ep-drupal) .hero-section .service-title {
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(255, 255, 255, .92);
  margin: 0;
}

/* ---------- Offering cards ---------- */

:is(.ep-svc, .ep-drupal) .offering-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 28px 0 56px;
}

/* The "Tasks we already own" grid holds four wide cards - two columns read
   much better than the three the auto-fit would give us. */
:is(.ep-svc, .ep-drupal) .offering-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

:is(.ep-svc, .ep-drupal) .offering-card {
  background: var(--epd-card);
  border: 1px solid var(--epd-line);
  border-radius: 16px;
  padding: 28px 26px;
  box-shadow: var(--epd-shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

:is(.ep-svc, .ep-drupal) .offering-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--epd-brand) 40%, var(--epd-line));
  box-shadow: var(--epd-shadow-lg);
}

:is(.ep-svc, .ep-drupal) .offering-icon {
  font-size: 26px;
  line-height: 1;
  margin-bottom: 14px;
}

.md-typeset :is(.ep-svc, .ep-drupal) .offering-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--epd-brand);
  margin: 0 0 12px;
}

[data-md-color-scheme="slate"] :is(.ep-svc, .ep-drupal) .offering-card h3 {
  color: var(--epd-brand-2);
}

.md-typeset :is(.ep-svc, .ep-drupal) .offering-card p {
  font-size: .95rem;
  line-height: 1.65;
  color: var(--epd-muted);
  margin: 0 0 14px;
}

:is(.ep-svc, .ep-drupal) .offering-card ul {
  margin: 0;
  padding-left: 20px;
}

.md-typeset :is(.ep-svc, .ep-drupal) .offering-card li {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--epd-muted);
  margin: 5px 0;
}

.md-typeset :is(.ep-svc, .ep-drupal) .offering-card li::marker {
  color: var(--epd-accent);
}

/* ---------- Drupal technologies panel ---------- */

.ep-drupal .drupal_container {
  display: flex;
  gap: 48px;
  max-width: 100%;
  margin: 0 0 56px;
  padding: 44px 40px;
  border-radius: var(--epd-radius);
  color: #f4f6fb;
  background:
    radial-gradient(100% 120% at 100% 0%, rgba(108, 123, 255, .3) 0%, transparent 55%),
    linear-gradient(135deg, var(--epd-navy) 0%, var(--epd-navy-2) 100%);
  box-shadow: var(--epd-shadow-lg);
}

.ep-drupal .drupal_left_section,
.ep-drupal .drupal_right_section {
  flex: 1;
  min-width: 0;
}

.md-typeset .ep-drupal .drupal_container .drupal_main_title {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 18px;
}

.md-typeset .ep-drupal .drupal_container .drupal_subtitle {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .72);
  margin: 0;
}

.ep-drupal .drupal_tech_list {
  display: flex;
  flex-direction: column;
}

.ep-drupal .drupal_tech_item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
}

.ep-drupal .drupal_tech_item:last-child {
  border-bottom: none;
}

.ep-drupal .drupal_icon_wrapper {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .1);
}

.ep-drupal .drupal_icon_wrapper svg,
.ep-drupal .drupal_icon_wrapper svg path {
  fill: #fff !important;
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ep-drupal .drupal_icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.md-typeset .ep-drupal .drupal_tech_title {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  margin: 0 0 6px;
}

.md-typeset .ep-drupal .drupal_tech_desc {
  font-size: .92rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .68);
  margin: 0;
}

.ep-drupal .drupal_container a {
  color: #fff;
}

/* ---------- Services index page ---------- */

/* The hero block at the top of /services/. */
.ep-svc__hero {
  position: relative;
  margin: 0 0 40px;
  padding: 34px 36px;
  border-radius: var(--epd-radius);
  color: #f5f6fb;
  background:
    radial-gradient(110% 130% at 85% 0%, rgba(108, 123, 255, .34) 0%, transparent 58%),
    linear-gradient(135deg, var(--epd-navy) 0%, var(--epd-navy-2) 100%);
  box-shadow: var(--epd-shadow-lg);
}

/* These four are <p> elements, and `.md-typeset .ep-svc p` is (0,2,1) - it
   overwrites the colour, the size and the margins of every paragraph in the
   services wrapper. A bare `.md-typeset .ep-svc__eyebrow` is (0,2,0) and
   simply loses.

   The fix is `:is(.ep-svc, .ep-drupal) p.ep-svc__eyebrow` = (0,3,1): one
   class more than the rule it has to beat, so it wins regardless of the
   order the two rules appear in the file. */
.md-typeset :is(.ep-svc, .ep-drupal) p.ep-svc__eyebrow {
  display: inline-block;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--epd-accent);
  margin: 0 0 12px;
  max-width: none;
}

.md-typeset .ep-svc__title {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 14px;
}

.md-typeset :is(.ep-svc, .ep-drupal) p.ep-svc__lead {
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .78);
  margin: 0;
  max-width: 62ch;
}

/* Section headings on the services index.

   The `##` headings of the page render as <h5> - Material is configured with
   `toc.baselevel: 4`, so `#` -> h4 and `##` -> h5. The rule is scoped to the
   page wrapper so it cannot reach the <h2> elements inside the hero banner
   and the offering cards - those have their own styles, and picking up the
   border and the accent bar gave the hero a stray white line under every
   card title. The selector is a descendant, not a child, because the
   markdown output can be wrapped in an extra anonymous <div>. */
.md-typeset .ep-svc h5 {
  font-size: clamp(1.35rem, 2.3vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--epd-fg);
  margin: 52px 0 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--epd-line);
}

.md-typeset .ep-svc h5::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 12px;
  border-radius: 999px;
  background: var(--epd-accent);
}

.md-typeset .ep-svc p {
  font-size: .98rem;
  line-height: 1.7;
  color: var(--epd-muted);
  margin: 0 0 14px;
  max-width: 76ch;
}

/* The "Specialized services" groups - a two column grid of titled blocks. */
.ep-svc__group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin: 24px 0 8px;
}

.ep-svc__item {
  background: var(--epd-card);
  border: 1px solid var(--epd-line);
  border-radius: 16px;
  padding: 24px 26px;
  box-shadow: var(--epd-shadow);
}

.md-typeset .ep-svc__item h3 {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--epd-brand);
  margin: 0 0 10px;
}

[data-md-color-scheme="slate"] .ep-svc__item h3 {
  color: var(--epd-brand-2);
}

.md-typeset .ep-svc__item p {
  font-size: .93rem;
  line-height: 1.65;
  color: var(--epd-muted);
  margin: 0;
}

.md-typeset .ep-svc__item ul {
  margin: 0;
  padding-left: 18px;
}

.md-typeset .ep-svc__item li {
  font-size: .92rem;
  line-height: 1.62;
  color: var(--epd-muted);
  margin: 7px 0;
}

.md-typeset .ep-svc__item li::marker {
  color: var(--epd-accent);
}

.md-typeset .ep-svc__item li strong {
  color: var(--epd-fg);
  font-weight: 600;
}

/* The "learn more" links that sit at the end of a bullet in a service card. */
.md-typeset .ep-svc__link {
  display: inline-block;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--epd-brand);
  text-decoration: none;
  white-space: nowrap;
}

.md-typeset .ep-svc__link::after {
  content: " →";
}

.md-typeset .ep-svc__link:hover {
  color: var(--epd-accent);
  text-decoration: underline;
}

[data-md-color-scheme="slate"] .md-typeset .ep-svc__link {
  color: var(--epd-brand-2);
}

/* ---------- Service sub-pages ---------- */

/* The small label above a section, used on the "Website experience" band.
   It is a <p>, so it needs the extra class to beat
   `.md-typeset .ep-svc p` - see the note on the hero eyebrow above. */
.md-typeset :is(.ep-svc, .ep-drupal) p.ep-svc__label {
  display: inline-block;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--epd-accent);
  margin: 44px 0 0;
  max-width: none;
}

/* The numbered "when you need a new website" list and the "what a good
   website has to do" list. Both are markdown blocks with `markdown="1"`, so
   the `###` headings inside them render as real headings and land in the
   on-page TOC. The heading and the paragraph that follows it are a pair, so
   the block is a single column - a grid would break them apart. */
.ep-svc__reasons,
.ep-svc__criteria {
  counter-reset: epc;
  margin: 24px 0 8px;
}

.md-typeset .ep-svc__reasons h6,
.md-typeset .ep-svc__criteria h6 {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--epd-brand);
  margin: 26px 0 6px;
  padding: 0 0 10px 40px;
  border-bottom: 1px solid var(--epd-line);
  position: relative;
}

.md-typeset .ep-svc__reasons h6:first-of-type,
.md-typeset .ep-svc__criteria h6:first-of-type {
  margin-top: 0;
}

[data-md-color-scheme="slate"] .md-typeset .ep-svc__reasons h6,
[data-md-color-scheme="slate"] .md-typeset .ep-svc__criteria h6 {
  color: var(--epd-brand-2);
}

/* The number badge in front of each heading. */
.md-typeset .ep-svc__reasons h6::before,
.md-typeset .ep-svc__criteria h6::before {
  content: counter(epc, decimal) ".";
  counter-increment: epc;
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: .85rem;
  font-weight: 800;
  color: var(--epd-accent);
  background: color-mix(in srgb, var(--epd-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--epd-accent) 30%, transparent);
}

.md-typeset .ep-svc__reasons p,
.md-typeset .ep-svc__criteria p {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--epd-muted);
  margin: 0 0 4px;
  padding-left: 40px;
  max-width: 80ch;
}

/* The diagnostic question that closes each review area - the part the reader
   answers in their head. It is set in the accent colour so it reads as the
   point of the block rather than as more body copy. */
.md-typeset .ep-svc__criteria p em {
  display: inline-block;
  font-style: normal;
  font-weight: 700;
  color: var(--epd-accent);
  margin-top: 4px;
}

/* The tinted paragraph that closes a section. */
.ep-svc__callout {
  margin: 28px 0;
  padding: 22px 26px;
  border-radius: 14px;
  border-left: 4px solid var(--epd-accent);
  background: color-mix(in srgb, var(--epd-brand) 6%, var(--epd-card));
}

[data-md-color-scheme="slate"] .ep-svc__callout {
  background: color-mix(in srgb, var(--epd-brand-2) 12%, var(--epd-card));
}

.md-typeset .ep-svc__callout p {
  font-size: .98rem;
  line-height: 1.72;
  color: var(--epd-fg);
  margin: 0;
  max-width: 78ch;
}

/* A short note with a title and a link - used on the e-shop page for the
   "your existing e-shop has a technical problem" pointer. */
.ep-svc__note {
  margin: 26px 0;
  padding: 20px 24px;
  border-radius: 14px;
  border: 1px solid var(--epd-line);
  background: var(--epd-card);
}

.md-typeset .ep-svc__note h3 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--epd-fg);
  margin: 0 0 8px;
}

.md-typeset .ep-svc__note p {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--epd-muted);
  margin: 0 0 10px;
}

/* The two-column "customer side / business side" block on the e-shop page.
   Each column carries a label and a list of headings with a paragraph under
   each - so the columns are independent and each is a single column, never a
   grid of items, which would break the heading/paragraph pairs apart. */
.ep-svc__sides {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin: 24px 0 8px;
}

.ep-svc__side {
  background: var(--epd-card);
  border: 1px solid var(--epd-line);
  border-radius: 16px;
  padding: 22px 24px 12px;
  box-shadow: var(--epd-shadow);
}

/* The pill that titles each column of the two-column block. It is a <p>, so
   it needs the extra class to beat `.md-typeset .ep-svc p` - without it the
   pill kept the muted body colour on the brand fill, which is barely
   readable in the light theme. */
.md-typeset :is(.ep-svc, .ep-drupal) p.ep-svc__side-label {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--epd-brand);
  border-radius: 999px;
  padding: 5px 14px;
  margin: 0 0 18px;
  max-width: none;
}

[data-md-color-scheme="slate"] .md-typeset :is(.ep-svc, .ep-drupal) p.ep-svc__side-label {
  color: var(--epd-navy);
  background: var(--epd-brand-2);
}

.ep-svc__side-list {
  counter-reset: eps;
}

.md-typeset .ep-svc__side-list h6 {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--epd-brand);
  margin: 22px 0 6px;
  padding: 0 0 9px 38px;
  border-bottom: 1px solid var(--epd-line);
  position: relative;
}

[data-md-color-scheme="slate"] .md-typeset .ep-svc__side-list h6 {
  color: var(--epd-brand-2);
}

.md-typeset .ep-svc__side-list h6::before {
  content: counter(eps, decimal) ".";
  counter-increment: eps;
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: .8rem;
  font-weight: 800;
  color: var(--epd-accent);
  background: color-mix(in srgb, var(--epd-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--epd-accent) 30%, transparent);
}

.md-typeset .ep-svc__side-list p {
  font-size: .93rem;
  line-height: 1.7;
  color: var(--epd-muted);
  margin: 0 0 4px;
  padding-left: 38px;
}

/* The five steps of the project, as a horizontal strip of numbered cards.

   The selector is written out in full because Material sets
   `.md-typeset ol:not([hidden]) { display: flow-root }` - that is (0,2,1)
   and it beats a bare `.ep-svc__steps`, which left the list stacked in one
   column instead of a row of cards. */
.md-typeset :is(.ep-svc, .ep-drupal) ol.ep-svc__steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin: 24px 0 8px;
  padding: 0;
  counter-reset: epstep;
}

/* The `padding: 0` that used to sit here was killing the card padding of
   `.ep-svc__step` - this rule is far more specific than the card rule, so the
   cards ended up with no inner padding at all and the text sat flush against
   the border. The list padding belongs on the `ol` above, not on the `li`. */
.md-typeset :is(.ep-svc, .ep-drupal) ol.ep-svc__steps > li.ep-svc__step {
  margin: 0;
  list-style: none;
}

.ep-svc__step {
  position: relative;
  background: var(--epd-card);
  border: 1px solid var(--epd-line);
  border-radius: 16px;
  padding: 20px 22px 18px;
  box-shadow: var(--epd-shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.ep-svc__step:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--epd-brand) 40%, var(--epd-line));
  box-shadow: var(--epd-shadow-lg);
}

.md-typeset .ep-svc__step-no {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--epd-accent);
  margin: 0 0 10px;
}

.md-typeset .ep-svc__step-tag {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--epd-muted);
  margin: 0 0 4px;
}

.md-typeset .ep-svc__step-title {
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--epd-fg);
  margin: 0;
}

/* ---- The interactive step strip ----------------------------------------

   On the Technical Support page the step cards are real buttons and the box
   below them shows the detail of the selected step. The card keeps the look
   of the plain `ep-svc__step`, but the hover lift is dropped: the accent
   border is what marks the selection, so a card that is not selected does
   not pretend to be clickable.

   The strip is a `div` and not an `ol` - the `li` of a list keeps an implicit
   list-item role, which does not belong inside a `role="tablist"`. */
.md-typeset :is(.ep-svc, .ep-drupal) .ep-svc__steps--tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin: 24px 0 8px;
}

/* The card is the button, so the wrapper only holds the grid cell. */
.md-typeset :is(.ep-svc, .ep-drupal) .ep-svc__steps--tabs > .ep-svc__step {
  display: flex;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  transition: none;
}

.ep-svc__step-btn {
  flex: 1 1 auto;
  width: 100%;
  margin: 0;
  padding: 20px 22px 18px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: var(--epd-card);
  border: 1px solid var(--epd-line);
  border-radius: 16px;
  box-shadow: var(--epd-shadow);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.ep-svc__step-btn:hover {
  border-color: color-mix(in srgb, var(--epd-brand) 40%, var(--epd-line));
}

.ep-svc__step-btn:focus-visible {
  outline: 2px solid var(--epd-brand);
  outline-offset: 3px;
}

/* After the hover rule, so a selected card keeps the accent border. */
.ep-svc__step-btn[aria-selected="true"] {
  border-color: var(--epd-accent);
  box-shadow: 0 0 0 1px var(--epd-accent), var(--epd-shadow);
}

.ep-svc__step-btn .ep-svc__step-title {
  display: block;
}

/* The panel under the strip - the same tinted box as the callout, holding the
   detail of whichever step is selected. */
.ep-svc__step-panels {
  margin: 20px 0 8px;
}

.ep-svc__step-panels > .ep-svc__callout {
  margin: 0;
}

.ep-svc__step-panel[hidden] {
  display: none;
}

/* The "situations we take on" cards - a plain row of short paragraphs. */
.ep-svc__cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin: 24px 0 8px;
}

.ep-svc__case {
  background: var(--epd-card);
  border: 1px solid var(--epd-line);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: var(--epd-shadow);
}

.md-typeset .ep-svc__case p {
  font-size: .93rem;
  line-height: 1.7;
  color: var(--epd-muted);
  margin: 0;
}

/* The worked example that follows the situation cards. */
.ep-svc__case--detail {
  margin-top: 18px;
  border-left: 4px solid var(--epd-accent);
}

.md-typeset .ep-svc__case-title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--epd-fg);
  margin: 0 0 12px;
}

.md-typeset .ep-svc__case-sub {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--epd-accent);
  margin: 20px 0 8px;
}

.md-typeset .ep-svc__case--detail ul {
  margin: 0;
  padding-left: 20px;
}

.md-typeset .ep-svc__case--detail li {
  font-size: .92rem;
  line-height: 1.65;
  color: var(--epd-muted);
  margin: 6px 0;
}

.md-typeset .ep-svc__case--detail li::marker {
  color: var(--epd-accent);
}

/* The "Plugins & Extensions" cards. */
.ep-svc__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin: 24px 0 8px;
}

.ep-svc__card {
  display: flex;
  background: var(--epd-card);
  border: 1px solid var(--epd-line);
  border-radius: 16px;
  padding: 26px;
  box-shadow: var(--epd-shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.ep-svc__card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--epd-brand) 40%, var(--epd-line));
  box-shadow: var(--epd-shadow-lg);
}

.ep-svc__card-body {
  flex: 1;
  min-width: 0;
}

.ep-svc__card-tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--epd-accent);
  background: color-mix(in srgb, var(--epd-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--epd-accent) 30%, transparent);
  border-radius: 999px;
  padding: 3px 10px;
  margin: 0 0 12px;
}

.md-typeset .ep-svc__card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--epd-fg);
  margin: 0 0 10px;
}

.md-typeset .ep-svc__card p {
  font-size: .93rem;
  line-height: 1.65;
  color: var(--epd-muted);
  margin: 0 0 16px;
}

.ep-svc__buy {
  display: inline-block;
  font-size: .88rem;
  font-weight: 600;
  color: var(--epd-brand);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--epd-brand) 40%, transparent);
  transition: color .2s ease, border-color .2s ease;
}

.ep-svc__buy:hover {
  color: var(--epd-brand-2);
  border-bottom-color: var(--epd-brand-2);
}

[data-md-color-scheme="slate"] .ep-svc__buy {
  color: var(--epd-brand-2);
}

/* The comparison table on the open source page. Material's own table styling
   is fine, but inside a page that uses the service design tokens the default
   header grey reads as a foreign element - so the table is wrapped in a card
   and the header picks up the brand colour instead. */
.ep-svc__table {
  margin: 26px 0 8px;
  border: 1px solid var(--epd-line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--epd-shadow);
}

.md-typeset .ep-svc__table table {
  display: table;
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
}

.md-typeset .ep-svc__table th,
.md-typeset .ep-svc__table td {
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--epd-line);
  font-size: .88rem;
  line-height: 1.55;
  vertical-align: top;
}

.md-typeset .ep-svc__table thead th {
  background: color-mix(in srgb, var(--epd-brand) 10%, var(--epd-card));
  color: var(--epd-fg);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .01em;
  white-space: nowrap;
}

[data-md-color-scheme="slate"] .md-typeset .ep-svc__table thead th {
  background: color-mix(in srgb, var(--epd-brand-2) 18%, var(--epd-card));
}

.md-typeset .ep-svc__table tbody tr:last-child td {
  border-bottom: 0;
}

.md-typeset .ep-svc__table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--epd-brand) 3%, var(--epd-card));
}

.md-typeset .ep-svc__table td:first-child {
  font-weight: 700;
  color: var(--epd-fg);
}

/* On a narrow screen the three columns cannot fit, so the table scrolls
   sideways instead of squashing the text into unreadable slivers. */
.ep-svc__table {
  overflow-x: auto;
}

/* ---------- FAQ accordion ---------- */

/* The SEO page ends with a list of questions. Material styles <details> as a
   blue admonition box, which is not what we want here - the questions should
   read as a quiet list that opens up. So the box is neutralised and the
   summary is styled as a question line. */

.ep-svc__faq {
  margin: 24px 0 8px;
  counter-reset: epfaq;
}

.md-typeset .ep-svc__faq details {
  background: var(--epd-card);
  border: 1px solid var(--epd-line);
  border-left: 4px solid var(--epd-accent);
  border-radius: 12px;
  box-shadow: none;
  color: var(--epd-fg);
  font-size: .95rem;
  margin: 0 0 10px;
  padding: 0;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.md-typeset .ep-svc__faq details:hover {
  border-color: color-mix(in srgb, var(--epd-brand) 40%, var(--epd-line));
  box-shadow: var(--epd-shadow);
}

/* Material's own summary rule paints a blue bar and a note icon - both are
   replaced here by a numbered question marker. */
.md-typeset .ep-svc__faq summary {
  background: transparent;
  color: var(--epd-fg);
  counter-increment: epfaq;
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
  padding: 15px 44px 15px 20px;
  position: relative;
}

.md-typeset .ep-svc__faq summary::before {
  background: none;
  content: counter(epfaq, decimal) ".";
  color: var(--epd-accent);
  font-weight: 800;
  height: auto;
  left: 0;
  mask-image: none;
  -webkit-mask-image: none;
  top: 0;
  width: auto;
  position: static;
  display: inline-block;
  margin-right: 10px;
}

.md-typeset .ep-svc__faq summary::after {
  background-color: currentcolor;
  color: var(--epd-accent);
  right: 16px;
  top: 18px;
}

.md-typeset .ep-svc__faq details[open] summary {
  border-bottom: 1px solid var(--epd-line);
}

.md-typeset .ep-svc__faq details[open] {
  box-shadow: var(--epd-shadow);
}

.md-typeset .ep-svc__faq details > p {
  font-size: .93rem;
  line-height: 1.7;
  color: var(--epd-muted);
  margin: 0;
  padding: 14px 20px 18px;
  max-width: 78ch;
}

/* ---------- Craft services ---------- */
/* The generic "specialized development services" grid used to live at the
   bottom of the Drupal page. It is not Drupal-specific, so it moved up to
   /services/ and its styles moved to docs/stylesheets/craft.css. */

/* ---------- Section headings inside the Drupal page ---------- */

/* The markdown `##` headings render as <h5> - Material is configured with
   `toc.baselevel: 4`, so `#` -> h4 and `##` -> h5. The card titles are <h3>
   and must keep their own size. `text-transform: none` cancels Material's
   built-in uppercase rule for h5 - the Greek and English headings read
   better in sentence case. */
.md-typeset .ep-drupal h5 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--epd-fg);
  margin: 0 0 8px;
}

.md-typeset .ep-drupal h3 {
  font-weight: 700;
}

.ep-drupal .techno-head,
.ep-drupal .short-name {
  color: inherit;
}

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

@media screen and (max-width: 1024px) {
  :is(.ep-svc, .ep-drupal) .hero-section .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  :is(.ep-svc, .ep-drupal) .offering-grid--2 {
    grid-template-columns: 1fr;
  }

  .ep-drupal .drupal_container {
    flex-direction: column;
    gap: 32px;
  }
}

@media screen and (max-width: 768px) {
  :is(.ep-svc, .ep-drupal) .hero-section {
    padding: 36px 22px;
  }

  :is(.ep-svc, .ep-drupal) .hero-section .services-grid {
    grid-template-columns: 1fr;
  }

  .ep-drupal .drupal_container {
    padding: 30px 22px;
  }

  .ep-svc__hero {
    padding: 26px 22px;
  }

  .ep-svc__group,
  .ep-svc__grid,
  .ep-svc__sides,
  .ep-svc__cases,
  .ep-svc__steps {
    grid-template-columns: 1fr;
  }

  /* Same specificity as the base rule on purpose - a media query adds no
     specificity of its own. */
  .md-typeset :is(.ep-svc, .ep-drupal) .ep-svc__steps--tabs {
    grid-template-columns: 1fr;
  }
}