/* ============================================================================
   DEDICATED SERVERS: 2026 add-on sheet
   ----------------------------------------------------------------------------
   Loaded AFTER css/vps-template.css by the dedicated cluster (uk-dedicated,
   london, ryzen-7950x, rent-to-own, clearance, build-a-server) via the shared
   partials/vps/landing.php `$vps_extra_css` hook.

   These are the handful of components the shared kit does not already carry.
   Everything else on those pages reuses the real site components: the honeycomb
   hero, .eug-vps-card plans, .eug-hw-* silicon grid, .eug-hw-cmp comparison,
   .eug-hw-own photo split, .eug-vps-dc data-centre showcase, the anycast map,
   the honeycomb CTA card and the .eug-faq accordion.

   Namespace: .eug-ded-  ·  tokens only, no new colours.
   No em dash anywhere in the copy these components carry.
========================================================================== */

/* ----------------------------------------------------------------------------
   SPEC SHEET: key/value rows for facility specs, CPU spec sheets, cost tables.
   Two columns on desktop, hairline separated, blue label. Replaces the generic
   <dl class="eug-pspecs"> from the old page kit.
---------------------------------------------------------------------------- */
.eug-ded-specs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(20px, 3vw, 44px); margin: clamp(30px, 4vw, 46px) 0 0; padding: 0;
  border: 1px solid var(--eug-border); border-radius: var(--eug-radius-card);
  background: var(--eug-ink); overflow: hidden;
}
.eug-ded-specs > div {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  padding: 15px clamp(16px, 2vw, 24px); border-bottom: 1px solid var(--eug-border-soft);
}
.eug-ded-specs > div:nth-last-child(-n+2) { border-bottom: 0; }
.eug-ded-specs dt {
  flex: none; min-width: 148px; margin: 0;
  font-family: var(--eug-font-display); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--eug-blue);
}
.eug-ded-specs dd { margin: 0; font-size: 0.95rem; line-height: 1.5; color: #cdddec; }
.eug-ded-specs dd strong { color: var(--eug-frost); font-weight: 700; }
@media (max-width: 800px) {
  .eug-ded-specs { grid-template-columns: 1fr; }
  .eug-ded-specs > div:nth-last-child(-n+2) { border-bottom: 1px solid var(--eug-border-soft); }
  .eug-ded-specs > div:last-child { border-bottom: 0; }
}
@media (max-width: 420px) { .eug-ded-specs dt { min-width: 0; width: 100%; } }

/* ----------------------------------------------------------------------------
   PROCESS RAIL: numbered build / ownership stages with a lit connecting rail
   and a bespoke SVG token per step.
---------------------------------------------------------------------------- */
.eug-ded-steps {
  list-style: none; margin: clamp(34px, 4.5vw, 54px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px;
}
.eug-ded-steps.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eug-ded-step {
  position: relative; padding: 26px 22px 24px;
  background: var(--eug-ink); border: 1px solid var(--eug-border);
  border-radius: var(--eug-radius-card);
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.eug-ded-step:hover { border-color: var(--eug-border-blue); transform: translateY(-4px); }
/* rail between the cards */
.eug-ded-step::after {
  content: ""; position: absolute; top: 52px; right: -22px; width: 22px; height: 2px;
  background: linear-gradient(90deg, var(--eug-blue), rgba(69,199,255,0));
}
.eug-ded-steps > .eug-ded-step:last-child::after { display: none; }
.eug-ded-step-ico {
  display: flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; border-radius: 16px;
  background: rgba(69,199,255,0.10); border: 1px solid var(--eug-border-blue);
}
.eug-ded-step-ico svg { width: 40px; height: 40px; display: block; }
.eug-ded-step-n {
  display: block; margin: 18px 0 6px;
  font-family: var(--eug-font-display); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--eug-accent);
}
.eug-ded-step h3 {
  margin: 0; font-family: var(--eug-font-display);
  font-size: 1.18rem; font-weight: 700; line-height: 1.2; color: var(--eug-frost);
}
.eug-ded-step p { margin: 9px 0 0; font-size: 0.9rem; line-height: 1.58; color: var(--eug-muted); }
@media (max-width: 1000px) {
  .eug-ded-steps, .eug-ded-steps.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eug-ded-step::after { display: none; }
}
@media (max-width: 560px) {
  .eug-ded-steps, .eug-ded-steps.is-3 { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------------
   NOTE: inline advisory band under a section.
---------------------------------------------------------------------------- */
.eug-ded-note {
  display: flex; gap: 14px; align-items: flex-start;
  margin: clamp(24px, 3vw, 34px) 0 0; padding: 18px 20px;
  background: var(--eug-ink); border: 1px solid var(--eug-border);
  border-left: 2px solid var(--eug-blue); border-radius: var(--eug-radius-sm);
}
.eug-ded-note svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.eug-ded-note p { margin: 0; font-size: 0.93rem; line-height: 1.62; color: #cdddec; }
.eug-ded-note a { color: var(--eug-blue); font-weight: 600; }
.eug-ded-note a:hover { color: var(--eug-blue-glow); }

/* ----------------------------------------------------------------------------
   INLINE RELATED LINKS: the small "Related:" run at the foot of a section.
---------------------------------------------------------------------------- */
.eug-ded-links {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: clamp(28px, 3.4vw, 38px) 0 0;
}
.eug-ded-links > span {
  font-family: var(--eug-font-display); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--eug-muted);
}
.eug-ded-links a {
  padding: 7px 15px; border-radius: var(--eug-pill);
  background: var(--eug-interactive); border: 1px solid var(--eug-border);
  font-size: 0.86rem; font-weight: 600; color: #cdddec;
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}
.eug-ded-links a:hover { border-color: var(--eug-border-blue); color: var(--eug-frost); background: rgba(69,199,255,0.09); }

/* ----------------------------------------------------------------------------
   PROSE: long-form guide copy inside the shared .eug-gacc accordion.
---------------------------------------------------------------------------- */
.eug-ded-prose p { margin: 0 0 14px; font-size: 0.98rem; line-height: 1.72; color: var(--eug-muted); }
.eug-ded-prose p:last-child { margin-bottom: 0; }
.eug-ded-prose strong { color: var(--eug-frost); font-weight: 700; }
.eug-ded-prose a { color: var(--eug-blue); font-weight: 600; }
.eug-ded-prose a:hover { color: var(--eug-blue-glow); }
.eug-ded-prose h4 {
  margin: 22px 0 10px; font-family: var(--eug-font-display);
  font-size: 1.1rem; font-weight: 700; color: var(--eug-frost);
}
.eug-ded-prose ul, .eug-ded-prose ol { margin: 0 0 14px; padding-left: 20px; }
.eug-ded-prose li { margin-bottom: 8px; font-size: 0.96rem; line-height: 1.68; color: var(--eug-muted); }
.eug-ded-prose code {
  padding: 2px 6px; border-radius: 6px; background: var(--eug-interactive);
  border: 1px solid var(--eug-border); font-size: 0.86em; color: var(--eug-blue-glow);
}
.eug-ded-prose pre {
  margin: 0 0 16px; padding: 16px 18px; overflow-x: auto;
  background: var(--eug-canvas); border: 1px solid var(--eug-border);
  border-radius: var(--eug-radius-sm);
}
.eug-ded-prose pre code { padding: 0; border: 0; background: none; font-size: 0.85rem; line-height: 1.6; color: #cdddec; }

/* ----------------------------------------------------------------------------
   STOCK ROW: clearance inventory presented as rack units rather than cards:
   an SVG rack face on the left, the spec run and price on the right.
---------------------------------------------------------------------------- */
.eug-ded-stock { display: flex; flex-direction: column; gap: 18px; margin-top: clamp(34px, 4vw, 50px); }
.eug-ded-unit {
  display: grid; grid-template-columns: 260px minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 38px); align-items: center;
  padding: 22px clamp(20px, 2.6vw, 30px);
  background: var(--eug-ink); border: 1px solid var(--eug-border);
  border-radius: var(--eug-radius-card);
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.eug-ded-unit:hover { border-color: var(--eug-border-blue); transform: translateY(-3px); }
.eug-ded-unit.is-featured { border-color: var(--eug-border-blue); background: linear-gradient(180deg, rgba(69,199,255,0.07) 0%, var(--eug-ink) 60%); }
.eug-ded-unit-art { width: 100%; }
.eug-ded-unit-art svg { width: 100%; height: auto; display: block; }
.eug-ded-unit-name {
  margin: 0; font-family: var(--eug-font-display);
  font-size: clamp(1.2rem, 2vw, 1.44rem); font-weight: 700; color: var(--eug-frost);
}
.eug-ded-unit-sku {
  display: inline-block; margin-top: 7px; padding: 3px 9px; border-radius: 6px;
  background: var(--eug-canvas); border: 1px solid var(--eug-border);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem; letter-spacing: 0.02em; color: var(--eug-muted);
}
.eug-ded-unit-specs { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
.eug-ded-unit-specs li { display: flex; align-items: center; gap: 9px; font-size: 0.9rem; color: #cdddec; }
.eug-ded-unit-specs i { width: 16px; text-align: center; color: var(--eug-blue); font-size: 0.86rem; }
.eug-ded-unit-buy { text-align: right; min-width: 190px; }
.eug-ded-unit-stock {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px;
  padding: 4px 11px; border-radius: var(--eug-pill);
  background: rgba(182,255,46,0.13); border: 1px solid rgba(182,255,46,0.4);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--eug-accent);
}
.eug-ded-unit-stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--eug-accent); }
.eug-ded-unit-price { font-family: var(--eug-font-display); font-size: clamp(2rem, 3.4vw, 2.6rem); font-weight: 700; line-height: 1; color: var(--eug-frost); }
.eug-ded-unit-price small { font-family: var(--eug-font-body); font-size: 0.94rem; font-weight: 600; color: var(--eug-muted); margin-left: 3px; }
.eug-ded-unit-cta {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 14px;
  padding: 12px 22px; border-radius: var(--eug-pill);
  background: var(--eug-blue); color: #03111C !important;
  font-size: 0.94rem; font-weight: 700;
  transition: background 0.16s ease, transform 0.16s ease;
}
.eug-ded-unit-cta:hover { background: var(--eug-blue-glow); transform: translateY(-2px); }
.eug-ded-unit.is-featured .eug-ded-unit-cta { background: var(--eug-accent); color: #0d2400 !important; }
.eug-ded-unit.is-featured .eug-ded-unit-cta:hover { background: var(--eug-accent-glow); }
@media (max-width: 1060px) {
  .eug-ded-unit { grid-template-columns: 200px minmax(0, 1fr); }
  .eug-ded-unit-buy { grid-column: 1 / -1; text-align: left; border-top: 1px solid var(--eug-border-soft); padding-top: 18px; }
}
@media (max-width: 620px) {
  .eug-ded-unit { grid-template-columns: 1fr; }
  .eug-ded-unit-art { max-width: 260px; }
  .eug-ded-unit-specs { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------------
   SILICON HEADLINE FIGURE: a wide bespoke SVG used as a section lead-in on the
   single-SKU pages, sitting above the .eug-hw grid.
---------------------------------------------------------------------------- */
.eug-ded-figure {
  margin: clamp(30px, 4vw, 48px) auto 0; max-width: 940px;
  border: 1px solid var(--eug-border); border-radius: var(--eug-radius-panel);
  background: radial-gradient(circle at 50% 40%, rgba(69,199,255,0.10) 0%, rgba(7,11,18,0) 68%), var(--eug-ink);
  padding: clamp(20px, 3vw, 34px); overflow: hidden;
}
.eug-ded-figure svg { width: 100%; height: auto; display: block; overflow: visible; }
.eug-ded-figure figcaption {
  margin-top: 16px; text-align: center; font-size: 0.85rem; color: var(--eug-muted);
}

/* ----------------------------------------------------------------------------
   .eug-hw-own is written to sit at the foot of the homepage hardware section,
   so it carries a separating rule and a large top offset. When it opens a
   section of its own, add .eug-ded-own to drop both.
---------------------------------------------------------------------------- */
.eug-hw-own.eug-ded-own { margin-top: clamp(30px, 4vw, 48px); padding-top: 0; border-top: 0; }
.eug-hw-own.eug-ded-own.is-flip .eug-hw-own-media { order: 2; }
@media (max-width: 820px) { .eug-hw-own.eug-ded-own.is-flip .eug-hw-own-media { order: 2; } }

/* ----------------------------------------------------------------------------
   .eug-hw-outcomes is a four-across grid. Six-item sets read better as 3 x 2.
---------------------------------------------------------------------------- */
.eug-hw-outcomes.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 880px) { .eug-hw-outcomes.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .eug-hw-outcomes.is-3 { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------------------
   .eug-why-grid titles are set to nowrap for the six short homepage headings.
   The dedicated pages reuse the component with longer headings, so let them
   wrap rather than push a horizontal scrollbar onto narrow screens.
---------------------------------------------------------------------------- */
.eug-ded-why .eug-why-feat h3 { white-space: normal; font-size: 1.34rem; }
.eug-ded-why .eug-why-grid { row-gap: clamp(44px, 5vw, 64px); }

/* ----------------------------------------------------------------------------
   Small shared helper: centred section intro used by the injected sections.
---------------------------------------------------------------------------- */
.eug-ded-kicker {
  display: inline-block; margin-bottom: 12px;
  font-family: var(--eug-font-display); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--eug-blue);
}