/*
 * Opentic Modern 1.5.2 - Hard detail-layout normalization
 *
 * All product/service/variant detail sections share ONE master visual axis.
 * The outer section width never changes between Hero, Context, Variants,
 * Next steps, CTA, Related experience and Related solutions.
 * Reading measure is controlled INSIDE that common shell, not by recentering
 * each section with a different max-width.
 */
:root{
  --op-detail-max:1180px;
  --op-detail-reading:880px;
  --op-detail-gutter:28px;
  --op-detail-shell:min(var(--op-detail-max),calc(100vw - (var(--op-detail-gutter) * 2)));
}

/* Single master edge for every detail-page visual section. */
.opentic-detail-shell,
.opentic-entity-content>.wp-block-post-content,
.opentic-entity-context,
.opentic-variant-list,
.opentic-next-steps,
.opentic-entity-cta,
.opentic-related-cases>.opentic-shell,
.opentic-related>.opentic-shell{
  width:var(--op-detail-shell)!important;
  max-width:var(--op-detail-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}

/* The body is only a host. It must not impose a Gutenberg content-size axis. */
.opentic-entity-content{
  width:100%!important;
  max-width:none!important;
  padding:72px 0 0!important;
  margin:0!important;
}
.opentic-entity-content>.wp-block-shortcode{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* Hero uses the exact same left/right axis as every section below it. */
.opentic-entity-hero{
  padding:92px max(var(--op-detail-gutter),calc((100vw - var(--op-detail-max))/2))!important;
}
.opentic-entity-hero>*{
  width:100%!important;
  max-width:var(--op-detail-reading)!important;
  margin-left:0!important;
  margin-right:0!important;
}
.opentic-entity-hero .wp-block-post-excerpt{
  max-width:760px!important;
}

/* Editorial content: same master shell, readable copy aligned to its LEFT edge. */
.opentic-entity-content>.wp-block-post-content{
  padding:0!important;
}
.opentic-entity-content>.wp-block-post-content>.opentic-editor-section,
.opentic-entity-content>.wp-block-post-content>.wp-block-group,
.opentic-entity-content>.wp-block-post-content>section{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}
.opentic-editor-section h2,
.opentic-editor-section>p:not(.opentic-kicker):not(.opentic-editor-closing){
  max-width:var(--op-detail-reading)!important;
}
.opentic-editor-grid{
  width:100%!important;
  max-width:none!important;
}
.opentic-editor-closing{
  max-width:var(--op-detail-reading)!important;
}

/* Structured sections: SAME shell. Only their inner content may be narrower. */
.opentic-entity-context,
.opentic-variant-list,
.opentic-next-steps,
.opentic-entity-cta{
  margin-top:64px!important;
}
.opentic-entity-context{
  padding-top:34px!important;
  border-top:1px solid var(--op-line)!important;
}
.opentic-variant-list{
  padding-top:50px!important;
  border-top:1px solid var(--op-line)!important;
}
.opentic-next-steps{
  padding-top:50px!important;
  border-top:1px solid var(--op-line)!important;
}
.opentic-entity-cta{
  padding:38px!important;
}

/* Grids consume the same visual width. */
.opentic-context-grid,
.opentic-variant-list .opentic-grid,
.opentic-next-steps__grid,
.opentic-related-cases .opentic-case-grid,
.opentic-related .opentic-grid{
  width:100%!important;
  max-width:none!important;
}
.opentic-variant-list .opentic-grid--3,
.opentic-related-cases .opentic-case-grid--3,
.opentic-related .opentic-grid--3{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:22px!important;
}

/* Full-width background bands, with content locked to the common master axis. */
.opentic-related-cases,
.opentic-related{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}
.opentic-related-cases{
  padding:84px 0!important;
}
.opentic-related{
  padding:84px 0!important;
}
.opentic-related-cases>.opentic-shell,
.opentic-related>.opentic-shell{
  padding-left:0!important;
  padding-right:0!important;
}

/* Headings keep the same starting edge. */
.opentic-entity-context>*,
.opentic-variant-list>*,
.opentic-next-steps>*,
.opentic-related-cases .opentic-heading-row,
.opentic-related> .opentic-shell>p,
.opentic-related> .opentic-shell>h2{
  margin-left:0!important;
}

/* CTA content can be readable while the CTA container preserves the common edge. */
.opentic-entity-cta>div{
  max-width:760px;
}

/* Remove any previous 1.5.1 width model that can survive in cached/merged CSS. */
.opentic-entity-context,
.opentic-next-steps{max-width:var(--op-detail-max)!important;}

@media (max-width:1050px){
  :root{--op-detail-gutter:24px;}
  .opentic-variant-list .opentic-grid--3,
  .opentic-related-cases .opentic-case-grid--3,
  .opentic-related .opentic-grid--3{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:700px){
  :root{--op-detail-gutter:14px;}
  .opentic-entity-hero{
    padding-left:14px!important;
    padding-right:14px!important;
  }
  .opentic-entity-content{
    padding-top:52px!important;
  }
  .opentic-entity-context,
  .opentic-variant-list,
  .opentic-next-steps,
  .opentic-entity-cta{
    margin-top:48px!important;
  }
  .opentic-variant-list .opentic-grid--3,
  .opentic-related-cases .opentic-case-grid--3,
  .opentic-related .opentic-grid--3{
    grid-template-columns:1fr!important;
  }
  .opentic-entity-cta{
    padding:26px!important;
  }
  .opentic-related-cases,
  .opentic-related{
    padding:64px 0!important;
  }
}