/* ==========================================================================
   BLOCK COMPATIBILITY
   Page content is now real Gutenberg blocks. A group block renders an extra
   .wp-block-group div, and text that used to be a <div> or <span> is now a
   <p> or <h4> with the same class. These rules reconcile the two so the
   design is identical to the previous hardcoded markup.
   Also loaded inside the editor (see qlyvion_editor_assets) so wp-admin
   previews what the visitor will see.
   ========================================================================== */

/* A group carrying a theme class shouldn't add its own box. */
.wp-block-group.section,
.wp-block-group.container,
.wp-block-group.section-head,
.wp-block-group.why-grid,
.wp-block-group.process-track,
.wp-block-group.industries-grid,
.wp-block-group.services-grid,
.wp-block-group.about-values,
.wp-block-group.faq-list,
.wp-block-group.about-columns {
  margin-block: 0;
}

/* Gutenberg's flow layout adds vertical margins between children; the theme's
   own grid gaps already handle spacing inside these containers. */
.why-grid > *, .process-track > *, .industries-grid > *,
.services-grid > *, .about-values > *, .faq-list > *,
.about-columns > * {
  margin-block: 0 !important;
}

/* Elements that changed tag but kept their class. */
p.eyebrow, p.why-num, p.process-dot, p.svc-icon, p.value-icon, p.industry-chip {
  margin: 0;
}
p.eyebrow { display: inline-block; }

/* .industry-chip was a div with an svg + span; as a paragraph it needs the
   same flex treatment. */
p.industry-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Icon paragraphs render an inline SVG from [qly_icon]. */
p.svc-icon svg, p.value-icon svg, p.industry-chip svg { display: block; }

/* Buttons are wrapped in a paragraph so they sit in the block flow. */
.qly-btn-wrap { margin: 28px 0 0; }
.qly-btn-wrap a { display: inline-flex; align-items: center; gap: 8px; }
.qly-btn-wrap a svg { width: 16px; height: 16px; }

/* The about teaser is a two-column layout; as blocks the visual and the copy
   are siblings inside the container. */
.section.about-teaser-section > .container {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 900px) {
  .section.about-teaser-section > .container { grid-template-columns: 1fr; }
  .section.about-teaser-section .about-visual { display: none; }
}

.about-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 32px;
}
@media (max-width: 760px) { .about-columns { grid-template-columns: 1fr; } }

/* Page body wrapper — sections supply their own padding, so this is only a
   safety net for loose blocks an editor adds outside a section. */
.page-content > p,
.page-content > h2,
.page-content > h3,
.page-content > ul,
.page-content > ol,
.page-content > figure {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: 24px;
}
.page-content > p:first-child { margin-top: 48px; }
.page-content > :last-child { margin-bottom: 64px; }

/* ---------- Editor-only ---------- */
.editor-styles-wrapper .wp-block-group.section {
  outline: 1px dashed rgba(13, 61, 118, 0.18);
  outline-offset: 4px;
}
.editor-styles-wrapper .page-hero { border-radius: 8px; }