/* Vertical rhythm belongs to the section, never to its last button/card.
   A surface label describes the existing background; it does not set a color. */
:root{--section-space:var(--space-section);--sec-y:var(--space-section)}
/* Preserve imported layouts that have not adopted semantic section roles. */
:is(.section,.sec,.tl-section,.aube-editorial-section,.aube-section):where(:not([data-rhythm])){padding-block:var(--section-top,var(--space-section)) var(--section-bottom,var(--space-section))}

/* Full sections own equal inner space at both ends of a surface. */
main [data-rhythm="section"][data-surface]{
  margin-block:0;
  padding-block:var(--space-section);
}

/* One continuous surface gets ONE gap, owned by the following section.
   Only adjacent full sections participate; page titles and image strips do not. */
main :is(
  [data-rhythm="section"][data-surface="paper"]:has(+ [data-rhythm="section"][data-surface="paper"]),
  [data-rhythm="section"][data-surface="soft"]:has(+ [data-rhythm="section"][data-surface="soft"]),
  [data-rhythm="section"][data-surface="lavender"]:has(+ [data-rhythm="section"][data-surface="lavender"]),
  [data-rhythm="section"][data-surface="lilac"]:has(+ [data-rhythm="section"][data-surface="lilac"]),
  [data-rhythm="section"][data-surface="sand"]:has(+ [data-rhythm="section"][data-surface="sand"]),
  [data-rhythm="section"][data-surface="dark"]:has(+ [data-rhythm="section"][data-surface="dark"])
){padding-bottom:0}

/* An edge-to-edge final strip already defines the section boundary. */
main [data-rhythm="section"][data-surface][data-edge="end"]{padding-bottom:0}

/* A page heading and its list/form are one composition with one compact gap. */
main [data-rhythm="intro"][data-surface]{padding-block:var(--space-page-top) var(--space-page-bottom)}
main [data-rhythm="content"][data-surface]{padding-block:var(--space-page-bottom) var(--space-section)}
main [data-rhythm="intro"][data-surface]+[data-rhythm="content"][data-surface]{padding-top:0}
main [data-rhythm="article"][data-surface]{padding-block:var(--space-page-bottom) var(--space-section)}

/* Subgroups and final actions use their own shared steps, with no bottom gap.
   The parent section provides the final distance to the next background. */
main .doctor .expertise{margin-top:var(--space-group);padding-block:0}
main :is(.doctor-action,.youtube-action){margin-top:var(--space-action);margin-bottom:0}
main .before-after>.text-link{margin-top:var(--space-action);margin-bottom:0}
.detail-statement{padding-block:var(--space-section)}
.comm-bottom-link{margin-bottom:var(--space-section);padding-block:var(--space-section-compact)}

/* Separate adjacent video and consultation sections within their existing gap. */
.procedure-page main .youtube+.reservation{position:relative}
.procedure-page main .youtube+.reservation::before{content:"";position:absolute;inset-inline:0;top:calc(var(--space-section)/2);height:1px;background:var(--line);pointer-events:none}

/* Keep mobile section actions close to their cards or videos. */
@media(max-width:760px){
 main :is(.doctor-action,.youtube-action),main .before-after>.text-link{margin-top:16px}
 main :is(.doctor-action,.youtube-action)>.text-link{margin-top:0}
 main .expertise-grid{padding-bottom:0}
}

/* Section headers share one distance to their content. */
#main [data-rhythm="section"] > :is(.section-head,.aube-section-head){margin-bottom:var(--heading-gap,var(--space-heading))}
/* The filler introduction owns the section space; its children must not add it again. */
#main .filler-introduction > .detail-statement{padding-top:0;padding-bottom:var(--space-heading)}
#main .filler-introduction > .filler-principles{padding-bottom:0}
/* Keep the device introduction rule inside one shared section gap. */
#main .detail-approach:has(.device-intro-label) .detail-statement{padding-bottom:calc(var(--space-section)/2)}
#main .detail-approach:has(.device-intro-label) + [data-rhythm="section"]{padding-top:calc(var(--space-section)/2)}

/* A lower section on a repeated tinted surface returns to the page background. */
#main .section--plain{background:var(--paper)}

/* Mobile procedure introductions share balanced, compact boundaries. */
@media(max-width:760px){
 #main .detail-approach:not(.filler-introduction)>.detail-statement,
 #main .detail-approach:has(.device-intro-label) .detail-statement{padding-block:48px}
 #main .filler-introduction[data-rhythm="section"]{padding-top:48px}
 #main .detail-approach:has(.device-intro-label)+[data-rhythm="section"]{padding-top:48px}
}

/* Shared expertise already includes the mobile profile action. */
@media(max-width:760px){
 #main .expertise:has(.doctor-action)+.doctor-action{display:none}
}

/* Continuous backgrounds need a clear section break even without a color change. */
:root{--space-section-transition:144px}
@media(max-width:1200px){:root{--space-section-transition:120px}}
@media(max-width:760px){:root{--space-section-transition:96px}}
#main :is(
 [data-rhythm="section"][data-surface="paper"] + [data-rhythm="section"][data-surface="paper"],
 [data-rhythm="section"][data-surface="soft"] + [data-rhythm="section"][data-surface="soft"],
 [data-rhythm="section"][data-surface="lavender"] + [data-rhythm="section"][data-surface="lavender"],
 [data-rhythm="section"][data-surface="lilac"] + [data-rhythm="section"][data-surface="lilac"],
 [data-rhythm="section"][data-surface="sand"] + [data-rhythm="section"][data-surface="sand"],
 [data-rhythm="section"][data-surface="dark"] + [data-rhythm="section"][data-surface="dark"]
){padding-top:var(--space-section-transition)}