/* ==========================================================================
   renderme/section — the universal page-builder block. A section is either one
   full-width column or a two-column split (left/right). Each column holds a
   free stack of elements (heading, button, quote, list, image, video, cards).
   The elements reuse the existing about__/services__ styled classes so they
   look identical to the rest of the site; this file only lays out the
   section/columns + a couple of element wrappers.
   ========================================================================== */

.rm-section {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-16) var(--container-pad);
}

.rm-section__split {
  display: grid;
  grid-template-columns: var(--rm-split, 1fr 1fr);
  gap: 64px;
  align-items: center;
}

/* Vertical rhythm between stacked elements in a column. */
.rm-section__col > .rm-el + .rm-el,
.rm-section__full > .rm-el + .rm-el {
  margin-top: var(--space-6);
}
/* Reset the leading element's own top margin so spacing is driven by the
   wrapper rule above, not each element's internal margin. */
.rm-el > *:first-child {
  margin-top: 0;
}
.rm-el .about__figure,
.rm-el .about__list,
.rm-el .about__quote,
.rm-el .about__prose {
  margin-top: 0;
}

/* Video element — a 16:9 framed player (YouTube / file / poster). */
.rm-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #07070b;
  border: 1px solid var(--color-border);
}
.rm-video__frame iframe,
.rm-video__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* object-fit only on a video FILE (matches a 16:9 crop); an iframe (YouTube)
   must NOT get object-fit or the browser scales + crops the player. */
.rm-video__frame video {
  object-fit: cover;
}
.rm-video__frame iframe,
.services__hero-frame-inner iframe {
  object-fit: fill;
}

/* Card images ("Інші послуги" / cards element) — 16:9, to match every work
   thumbnail on the site (overrides the shared .services__more-media 4:3). */
.services__more-media.rm-wide {
  aspect-ratio: 16 / 9;
}

/* This card is a plain link out — no hover image-zoom (kill the shared
   .services__more-card:hover img scale) and no underline (the section's
   generic `a:not(.btn)` underline rule would otherwise underline the whole
   card). Border-only hover, like the carousel cards. */
.rm-cards-grid .services__more-card:hover .services__more-media.rm-wide img {
  transform: none;
}
.rm-section .rm-cards-grid a.services__more-card,
.rm-section .rm-cards-grid a.services__more-card:hover {
  text-decoration: none;
  /* These cards are <a>, so the section's content-link rules would otherwise win:
     `.rm-section a:not(.btn):hover { opacity:.78 }` dimmed the whole card on hover
     (the "instant darkening"), and its `transition:opacity` replaced the card's
     own. Force full opacity + only a smooth lift/border ease here. */
  opacity: 1;
  transition: transform 360ms var(--ease-standard),
    border-color 400ms var(--ease-standard);
}
/* «Інші послуги» cards: gentle lift only — NO dimming, NO shadow on hover. */
.rm-section .rm-cards-grid a.services__more-card:hover {
  opacity: 1;
  box-shadow: none;
}

/* Cards grid ("Інші послуги" / cards element) — a clean full-width 3-up grid
   (cards fill their cell, left-to-right). */
.rm-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8) var(--space-6);
}
.rm-cards-grid .services__more-card {
  width: 100%;
  flex: none;
}
/* Same collapse as the verstka's cross-sell grid: 3-up → 2-up on tablet
   (≤1024) → single column on phones (≤600). */
@media (max-width: 1024px) {
  .rm-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .rm-cards-grid { grid-template-columns: 1fr; }
}

/* In a FULL-width section, keep plain text at a comfortable reading measure
   (not the whole 1360px work area). Media (image / video / cards) stays full. */
.rm-section__full > .rm-el > .about__title,
.rm-section__full > .rm-el > .about__text,
.rm-section__full > .rm-el > .about__prose,
.rm-section__full > .rm-el > .about__list,
.rm-section__full > .rm-el > .about__quote {
  max-width: 760px;
}

/* "На всю робочу ширину" — the per-element wide toggle drops the reading-measure
   cap so a heading/text/list/quote spans the entire work area. */
.rm-section__full > .rm-el--wide > .about__title,
.rm-section__full > .rm-el--wide > .about__text,
.rm-section__full > .rm-el--wide > .about__prose,
.rm-section__full > .rm-el--wide > .about__list,
.rm-section__full > .rm-el--wide > .about__quote {
  max-width: none;
}

/* A width-limited image / video (Розмір %) sits left by default; centred when the
   element's align is "center". max-width comes inline from the % slider. */
.rm-el > .about__figure,
.rm-el > .rm-video,
.rm-el > .services__hero-media {
  margin-inline: 0;
}
.rm-el--center > .about__figure,
.rm-el--center > .rm-video,
.rm-el--center > .services__hero-media {
  margin-inline: auto;
}

/* Links inside a section — brand magenta, NO underline (site-wide content-link
   style for the constructor, products and posts). Buttons (.btn) keep their own
   style, so they're excluded. A per-link custom colour set in the editor
   (core/text-color → inline style on a child <span>) still wins over this.
   `--rm-link` lets a whole block override the link colour if ever needed. */
.rm-section a:not(.btn) {
  color: var(--rm-link, var(--color-magenta, #c0298b));
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.rm-section a:not(.btn):hover {
  opacity: 0.78;
}

/* Never let a long unbroken string (URLs, or pasted text with no spaces) spill
   past the column — break it so everything stays inside the block, and centred
   text stays centred relative to the block instead of overflowing it. */
.rm-el,
.rm-el > *,
.article__content,
.article__content > p {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Per-element horizontal alignment (align: center) — centres the text and the
   max-width blocks (heading/text/list/quote/button/image) inside the column. */
.rm-el--center {
  text-align: center;
}
.rm-el--center > * {
  margin-inline: auto;
}

/* Blog post content column — the frozen 820px reading measure, but WITHOUT the
   .article__body element-level typography (h2/li::before/…) that would fight the
   constructor blocks (double bullets, overridden headings, overflow). Plain
   paragraphs still get a sensible default; constructor sections self-style and
   just fill the column. */
.article__content {
  max-width: 820px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.article__content > p {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-text-muted);
}
.article__content > p + p {
  margin-top: var(--space-4);
}
.article__content .rm-section {
  max-width: none;
  padding-inline: 0;
}

/* Stack the split to one column on tablet + phone (≤1024) — same as the
   verstka's hero row, so the copy+button and the video sit one under the
   other (and a sticky button can then span the full width). */
@media (max-width: 1024px) {
  .rm-section__split {
    grid-template-columns: 1fr !important;
    gap: 40px;
    align-items: stretch !important;
  }
}

/* Product-style elements used inside the section constructor (checklist +
   reviews) — tuned for how the studio wants them as reusable blocks:
   • the ✓ checklist stacks in ONE column (not the product page's 2-up grid);
   • reviews keep the verstka's comfortable reading width instead of stretching
     across the full section. */
.rm-el .product__includes {
  grid-template-columns: 1fr;
}
.rm-el .product__reviews {
  max-width: 860px;
}

/* FAQ element embedded in a section — reuse the homepage .faq accordion but drop
   its standalone section padding + the grid's own container inset, since the
   .rm-section already provides the spacing and max-width. */
.rm-el .faq--embed {
  padding: 0;
  background: none;
}
.rm-el .faq--embed .faq__grid {
  padding-inline: 0;
}

/* Constructor «Ціна» element — a compact magenta-outlined pill: "від" in white,
 * the amount+currency in the brand gradient (matches the approved mockup). The
 * whole button scales with the element's font-size (size % from the editor);
 * padding/gap are in em so the frame scales with the text. */
.rm-price { width: 100%; }
.rm-price__btn {
	display: inline-flex; align-items: baseline; gap: 0.35em;
	border: 1.5px solid var(--color-magenta); border-radius: var(--radius-sm);
	padding: 0.3em 0.7em; line-height: 1.1;
}
.rm-price__from { color: var(--color-text); font-weight: 400; }
.rm-price__val {
	font-family: var(--font-heading); font-weight: 700;
	background: linear-gradient(135deg, #8a5cff 0%, var(--color-magenta) 52%, var(--color-orange) 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}