/* Extended editorial modules: one visual language across every rubric. */
.sdelano-module {
  --module-accent: var(--sdn-accent, var(--sdn-coral, #f58258));
  --module-on: var(--rubric-on, #fff);
  width: min(100%, 980px);
  margin: clamp(40px, 6vw, 76px) auto;
  color: var(--sdn-navy, #05052f);
}

.sdelano-module .sdelano-extended__title {
  margin: 0 0 clamp(28px, 3.6vw, 44px);
  font: 800 clamp(28px, 3.4vw, 44px)/1.08 Montserrat, Arial, sans-serif;
  letter-spacing: -.035em;
}

.sdelano-module h3 { margin: 0 0 10px; font: 700 21px/1.2 Montserrat, Arial, sans-serif; }
.sdelano-module p:last-child { margin-bottom: 0; }
.sdelano-module__eyebrow { margin-bottom: 12px; font: 750 12px/1.2 Montserrat, Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.sdelano-module__meta { margin: 5px 0 12px; color: #686875; font-size: 15px; }
.sdelano-module__link { display: inline-block; margin-top: 16px; color: inherit; font-weight: 700; text-underline-offset: 4px; }

.sdelano-step-guide__list { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.sdelano-step-guide__list li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 20px; padding: 24px 0; border-top: 1px solid #d9d9df; counter-increment: step; }
.sdelano-step-guide__number::before { content: counter(step, decimal-leading-zero); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--module-accent); color: var(--module-on); font-weight: 800; }

.sdelano-card-grid-block { display: block; width: min(100%, 980px); }
.sdelano-card-grid__items { display: grid; grid-template-columns: repeat(var(--sdelano-columns, 3), minmax(0, 1fr)); gap: 16px; }
.sdelano-card-grid__card { overflow: hidden; border: 1px solid #dedee4; border-radius: 16px; background: #fff; }
.sdelano-card-grid__image { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.sdelano-card-grid__body { padding: 22px; }

.sdelano-accordion__items { border-top: 2px solid currentColor; }
.sdelano-accordion details { border-bottom: 1px solid #cfcfd7; }
.sdelano-accordion summary { cursor: pointer; padding: 22px 44px 22px 0; font-weight: 750; list-style: none; position: relative; }
.sdelano-accordion summary::-webkit-details-marker { display: none; }
.sdelano-accordion summary::after { content: '+'; position: absolute; right: 4px; top: 15px; font-size: 30px; font-weight: 400; }
.sdelano-accordion details[open] summary::after { content: '−'; }
.sdelano-accordion__answer { padding: 0 44px 24px 0; }

.sdelano-tabs__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 0; border-bottom: 2px solid currentColor; }
.sdelano-tabs__tabs button { border: 0; border-radius: 10px 10px 0 0; padding: 14px 20px; background: #eeeef2; color: inherit; font: 700 16px/1.2 Montserrat, Arial, sans-serif; cursor: pointer; }
.sdelano-tabs__tabs button[aria-selected="true"] { background: var(--module-accent); color: var(--module-on); }
.sdelano-tabs__tabs button:hover:not([aria-selected="true"]) { background: #e2e2e9; }
.sdelano-tabs__tabs button:focus-visible { outline: 3px solid var(--sdn-navy, #05052f); outline-offset: 2px; }
.sdelano-tabs__panel { padding: 28px 0; }

.sdelano-case-card { padding: clamp(24px, 4vw, 42px); border: 2px solid currentColor; border-radius: 18px; }
.sdelano-case-card .sdelano-extended__title { margin-bottom: clamp(32px, 4vw, 48px); }
.sdelano-case-card__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px; }
.sdelano-case-card__result { padding-left: 28px; border-left: 6px solid var(--module-accent); font: 650 20px/1.35 Montserrat, Arial, sans-serif; }

.sdelano-resource-list__items { display: grid; gap: 18px; }
.sdelano-resource-list__item { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 24px; padding: 20px 0; border-top: 1px solid #d9d9df; }
.sdelano-resource-list__item img { width: 130px; aspect-ratio: 2/3; object-fit: cover; border-radius: 5px; }

.sdelano-before-after__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sdelano-before-after figure { margin: 0; }
.sdelano-before-after img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; }
.sdelano-before-after figcaption { margin-top: 9px; color: #686875; font-size: 14px; }

.sdelano-three-tips__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: tip; }
.sdelano-three-tips__items li { min-height: 220px; padding: 22px; border-top: 8px solid var(--module-accent); background: #f4f4f6; counter-increment: tip; }
.sdelano-three-tips__items li::before { content: '0' counter(tip); display: block; margin-bottom: 34px; font-weight: 800; }

.sdelano-bridge__inner { --module-accent: var(--sdn-coral, #f58258); padding: clamp(28px, 5vw, 52px); border-radius: 18px; background: var(--module-accent); }
.sdelano-bridge__inner .sdelano-extended__title { margin-bottom: 16px; }
.sdelano-bridge__inner .sdelano-module__eyebrow { margin-bottom: 14px; }
.sdelano-bridge__button { display: inline-flex; margin-top: 22px; padding: 13px 20px; border: 2px solid currentColor; border-radius: 999px; color: inherit; font-weight: 750; text-decoration: none; }

.sdelano-related-posts__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sdelano-related-posts__legacy-field { display: none !important; }
.sdelano-related-posts article a { color: inherit; text-decoration: none; }
.sdelano-related-posts img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; }
.sdelano-related-posts h3 { margin-top: 12px; font-size: 17px; }

.sdelano-disclaimer { font-size: 14px; color: #5d5d68; }
.sdelano-disclaimer__inner { padding: 18px 20px; border-left: 3px solid #a7a7b0; background: #f5f5f6; }
.sdelano-disclaimer__inner strong { display: block; margin-bottom: 6px; color: var(--sdn-navy, #05052f); }

.sdelano-help { padding: clamp(26px, 4vw, 44px); border: 2px solid var(--module-accent); border-radius: 18px; }
.sdelano-help__contacts { margin: 26px 0 0; padding: 0; list-style: none; border-top: 1px solid #d5d5dc; }
.sdelano-help__contacts li { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 18px 0; border-bottom: 1px solid #d5d5dc; }
.sdelano-help__contacts .sdelano-module__link { margin-top: 0; }
.sdelano-help__contacts span { display: block; margin-top: 4px; color: #686875; }

.sdelano-inline-related { margin-top: 30px; margin-bottom: 30px; }
.sdelano-inline-related__link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 20px; padding: 20px 0; border-block: 2px solid currentColor; color: inherit; text-decoration: none; }
.sdelano-inline-related__link .sdelano-module__eyebrow { grid-column: 1 / -1; margin: 0; color: var(--module-accent); }

/* Before / after curtain (built by editorial-blocks.js). */
.sdelano-compare { --compare-pos: 50%; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: #f1f1f4; touch-action: pan-y; user-select: none; }
.sdelano-compare__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sdelano-compare__img--after { clip-path: inset(0 0 0 var(--compare-pos)); }
.sdelano-compare__tag { position: absolute; top: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(5,5,47,.82); color: #fff; font: 750 12px/1 Montserrat, Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; pointer-events: none; }
.sdelano-compare__tag--before { left: 14px; }
.sdelano-compare__tag--after { right: 14px; }
.sdelano-compare__handle { position: absolute; top: 0; bottom: 0; left: var(--compare-pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(5,5,47,.25); pointer-events: none; }
.sdelano-compare__handle::after { content: '↔'; position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #fff; color: var(--sdn-navy, #05052f); font-size: 20px; box-shadow: 0 2px 10px rgba(5,5,47,.3); }
.sdelano-compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.sdelano-compare:has(.sdelano-compare__range:focus-visible) { outline: 3px solid var(--sdn-navy, #05052f); outline-offset: 3px; }
.sdelano-compare__captions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 9px; color: #686875; font-size: 14px; }
.sdelano-compare__captions p { margin: 0; }

@media (max-width: 900px) {
  .sdelano-card-grid__items, .sdelano-related-posts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sdelano-three-tips__items { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .sdelano-step-guide__list li { grid-template-columns: 42px minmax(0, 1fr); gap: 14px; }
  .sdelano-step-guide__number::before { width: 38px; height: 38px; }
  .sdelano-card-grid__items, .sdelano-related-posts__grid, .sdelano-case-card__grid, .sdelano-before-after__grid { grid-template-columns: minmax(0, 1fr); }
  .sdelano-resource-list__item { grid-template-columns: 86px minmax(0, 1fr); gap: 16px; }
  .sdelano-resource-list__item img { width: 86px; }
  .sdelano-help__contacts li { display: block; }
}

/* The editor remains readable even when the sidebar is open. */
.editor-styles-wrapper .sdelano-module { width: min(100%, 980px); }

/* Inline glossary term: selectable in any Paragraph or Heading toolbar. */
.sdelano-term {
  position: relative;
  border-bottom: 2px dotted var(--module-accent, var(--sdn-coral, #f58258));
  cursor: help;
}

.sdelano-term::after {
  content: attr(data-definition);
  position: absolute;
  z-index: 20;
  left: 0;
  bottom: calc(100% + 10px);
  width: min(320px, 78vw);
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--sdn-navy, #05052f);
  color: #fff;
  font: 500 14px/1.45 Montserrat, Arial, sans-serif;
  box-shadow: 0 8px 28px rgba(5,5,47,.2);
  opacity: 0;
  transform: translateY(5px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}

.sdelano-term:hover::after,
.sdelano-term:focus::after { opacity: 1; transform: none; }

/* Gutenslider: same rhythm and radius as the other editorial modules. */
.wp-block-eedee-block-gutenslider {
  width: min(100%, 980px);
  margin: clamp(40px, 6vw, 76px) auto;
  overflow: hidden;
  border-radius: 14px;
}

.wp-block-eedee-block-gutenslider .swiper-button-prev,
.wp-block-eedee-block-gutenslider .swiper-button-next {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  color: var(--sdn-navy, #05052f);
  box-shadow: 0 2px 12px rgba(5, 5, 47, .25);
}

.wp-block-eedee-block-gutenslider .swiper-button-prev::after,
.wp-block-eedee-block-gutenslider .swiper-button-next::after {
  font-size: 18px;
  font-weight: 800;
}

.wp-block-eedee-block-gutenslider .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #fff;
  opacity: .7;
}

.wp-block-eedee-block-gutenslider .swiper-pagination-bullet-active {
  background: var(--sdn-coral, #f58258);
  opacity: 1;
}

/* Editor placeholder of the article CTA blocks. */
.fz-embed--preview { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border: 1px dashed #b8b8c4; border-radius: 12px; background: #f6f6f9; }
.fz-embed--preview span { color: #686875; font-size: 14px; }

/* Very light accents keep dark text so digits and tab labels stay readable. */
.sdelano-color--lime, .sdelano-color--yellow, .sdelano-color--orange { --module-on: var(--sdn-ink, #000029); }

/* Paragraphs inside modules (steps, tabs, accordions...): the article reset sets p margin to 0,
   so a real gap between paragraphs, lists and code is restored here. */
.custom-content .sdelano-module p { margin: 0 0 1em; }
.custom-content .sdelano-module p:last-child { margin-bottom: 0; }
.custom-content .sdelano-module :is(ul, ol, pre) { margin-top: 0; margin-bottom: 1em; }
.custom-content .sdelano-module :is(ul, ol, pre):last-child { margin-bottom: 0; }
.custom-content .sdelano-module p:empty { display: none; }

/* Type hierarchy inside modules: the article's `.custom-content p` (19px, rubric-coloured) must not leak in.
   Only the text bodies are set here; modules that style their own text (key thought, quote, big number)
   are left alone. Reading text is dark ink, sized by the body, and p/li inherit it. */
.custom-content :is(.sdelano-module__body, .sdelano-accordion__answer, .sdelano-tabs__panel, .sdelano-card-grid__body,
  .sdelano-step-guide__list li > div, .sdelano-case-card__grid, .sdelano-help__intro, .sdelano-disclaimer__inner) {
  font-size: 17px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--sdn-ink, #000029) 86%, #fff);
}
.custom-content :is(.sdelano-module__body, .sdelano-accordion__answer, .sdelano-tabs__panel, .sdelano-card-grid__body,
  .sdelano-step-guide__list li > div, .sdelano-case-card__grid, .sdelano-help__intro, .sdelano-disclaimer__inner) :is(p, li) {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
/* Margin variant: small quiet note. */
.custom-content .sdelano-module--margin .sdelano-module__body { font-size: 15px; line-height: 1.55; }
.custom-content .sdelano-module--margin.sdelano-quote figcaption { color: var(--sdn-ink, #000029); }
.custom-content .sdelano-quote blockquote :is(p, li) { font-size: inherit; line-height: inherit; color: inherit; }
.custom-content .sdelano-quote blockquote { color: var(--sdn-ink, #000029); }

/* The "Цвет" switch of the modules: `.sdelano-module { --module-accent: … }` above is loaded after the colour
   roles in sdelano-system.css and silently overrode them, so every module stayed in the rubric colour.
   Re-assert the roles with higher specificity. "Цвет материала" (inherit) keeps the rubric accent. */
.sdelano-module.sdelano-color--coral  { --module-accent: var(--sdn-coral); }
.sdelano-module.sdelano-color--orange { --module-accent: var(--sdn-orange); }
.sdelano-module.sdelano-color--teal   { --module-accent: var(--sdn-teal); }
.sdelano-module.sdelano-color--lime   { --module-accent: var(--sdn-lime); }
.sdelano-module.sdelano-color--yellow { --module-accent: var(--sdn-yellow); }
.sdelano-module.sdelano-color--pink   { --module-accent: var(--sdn-pink); }
.sdelano-module.sdelano-color--navy   { --module-accent: var(--sdn-navy); }

/* Code and wide content inside modules scrolls inside its own box instead of pushing the layout wide. */
.sdelano-module :is(pre, table, img, iframe, video) { max-width: 100%; }
.sdelano-module pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sdelano-step-guide__list li > div { min-width: 0; }

.sdelano-module { overflow-wrap: break-word; }