/* User revision: keep a real, non-collapsing gap between content sections.
   This file is copied into each calligraphy demo's own public directory. */
:root {
  --section-space: 132px;
}

#main {
  display: flow-root;
}

#main > section + section {
  margin-block-start: var(--section-space);
}

/* Page titles, course descriptions and forms are separate content groups. */
#main > .sub-heading + .sub-section {
  margin-block-start: var(--section-space);
  padding-block-start: 0;
}

#main .sub-intro,
#main .trial-steps {
  margin-block-end: var(--section-space);
}

#main .sub-courses {
  gap: var(--section-space);
}

#main .course-row + .course-row {
  margin-block-start: var(--section-space);
}

#main + .site-footer {
  margin-block-start: var(--section-space);
}

/* Rotated botanical artwork extends beyond its section's layout box. */
.design-a #main > section + section {
  margin-block-start: 144px;
}

/* The hero's plum artwork sits outside the copy's normal flow. */
@media (min-width: 768px) {
  .design-c #main > .hero + .about {
    margin-block-start: 224px;
  }
  .design-c #main > .faq + .access {
    margin-block-start: 156px;
  }
}

@media (max-width: 767px) {
  #main .course-grid,
  #main .features,
  #main .teacher-profile,
  #main .access-detail,
  #main .sub-courses article {
    row-gap: var(--section-space);
  }
}

/* Background-to-content breathing room. Scope is the main page sections only;
   header controls, cards, FAQ rows and button interiors keep their own scale. */
:root {
  --section-inset: 128px;
  --reservation-gap: 52px;
}

#main > section,
#main > .sub-heading,
#main > .sub-heading + .sub-section {
  padding-block: var(--section-inset);
  height: auto;
}

#main .hero-copy > p:not(.eyebrow),
#main .closing p:not(.eyebrow) {
  margin-bottom: 0;
}

#main .hero-actions,
#main .hero-copy > .button,
#main .closing .button,
#main .sub-section a.button,
#main #trial-form button[type="submit"] {
  margin-block-start: var(--reservation-gap);
}

#main .closing h2 + p { margin-block-start: 24px; }
#main .closing > div { padding-block: 0; }
#main .closing { align-items: center; }

/* A: photos stay in the padded content area; floating sprigs stay inside it. */
.design-a #main .hero-photo { height: calc(var(--u) * 283); }
.design-a #main .hero-copy { top: calc(var(--section-inset) + var(--u) * 36); }
.design-a #main .hero-detail { bottom: var(--section-inset); }
.design-a #main .hero-branch { bottom: calc(var(--section-inset) + var(--u) * 14); }
.design-a #main .about > .photo { height: calc(var(--u) * 165); }
.design-a #main .teacher > .photo { height: calc(var(--u) * 214); }
.design-a #main .closing > .photo { height: calc(var(--u) * 123); }
.design-a #main .faq-branch,
.design-a #main .access-branch { top: auto; bottom: calc(var(--section-inset) + 20px); }
.design-a #main .faq-branch { height: calc(var(--u) * 85); }
.design-a #main .closing-branch { top: 12px; }

/* B and E use edge-to-edge background photographs. Text gets the full inset. */
.design-b #main .hero { min-height: calc(var(--u) * 292); }
.design-b #main .hero-copy { position: relative; top: auto; left: auto; right: auto; padding-inline: calc(var(--u) * 32); }
.design-b #main .teacher-banner .copy { padding-block: 0; }
.design-b #main .closing > div { padding-inline: calc(var(--u) * 32); }
.design-e #main .hero { min-height: calc(var(--u) * 408); }
.design-e #main .hero-copy { padding-block: 0; }

/* C: keep the tilted letters and drawn assets comfortably inside each panel. */
.design-c #main .hero-copy { position: relative; top: auto; min-height: calc(var(--u) * 279); padding-block-start: 48px; }
.design-c #main .hero-photo { top: var(--section-inset); height: calc(100% - var(--section-inset) * 2); }
.design-c #main .hero-flower { bottom: 48px; }
.design-c #main .about { padding-block-start: calc(var(--section-inset) + 28px); }
.design-c #main .teacher-title .ornament { bottom: 12px; }
.design-c #main .faq-flower { bottom: calc(var(--section-inset) + 12px); }
.design-c #main .closing-flower { bottom: calc(var(--section-inset) + 12px); }
.design-c #main .closing-tools { bottom: calc(var(--section-inset) + 36px); width: calc(var(--u) * 110); height: calc(var(--u) * 90); }

/* D: the white hero and blue reservation panel both have independent insets. */
.design-d #main .hero-copy { padding-block: 0; align-self: center; }
.design-d #main .hero > .photo { height: calc(var(--u) * 317); }

@media (max-width: 767px) {
  :root { --section-inset: 104px; --reservation-gap: 44px; }
  .design-a #main .hero { padding-block-end: calc(var(--section-inset) + 145px); }
  .design-a #main .hero-photo { height: 365px; }
  .design-a #main .hero-copy { top: auto; padding-block-start: 40px; }
  .design-a #main .hero-branch { bottom: calc(var(--section-inset) + 26px); }
  .design-a #main .about > .photo { height: 265px; }
  .design-a #main .teacher > .photo { height: 360px; }
  .design-a #main .closing > div { padding-inline: 30px 15px; }
  .design-a #main .closing > .photo { height: 210px; margin-block-start: var(--section-inset); }
  .design-a #main .closing-branch { top: 14px; }
  .design-b #main .hero { min-height: 620px; }
  .design-b #main .hero-copy { padding-inline: 25px 20px; }
  .design-b #main .closing > div { padding-inline: 25px; }
  .design-b #main .teacher-banner > .photo { position: relative; inset: auto; height: 300px; margin-block-start: 48px; }
  .design-b #main .teacher-banner { display: flex; flex-direction: column-reverse; }
  .design-c #main .hero { display: flex; flex-direction: column; }
  .design-c #main .hero-copy { min-height: 0; left: auto; width: 100%; padding-inline: 23px; padding-block-start: 24px; }
  .design-c #main .hero-photo { position: relative; top: auto; height: 335px; margin-block-start: 48px; }
  .design-c #main .hero-flower { position: relative; inset: auto; margin: 32px 0 0 auto; transform: none; }
  .design-c #main .about { padding-block-start: calc(var(--section-inset) + 12px); }
  .design-c #main .courses,
  .design-c #main .access { padding-block-start: calc(var(--section-inset) + 12px); }
  .design-c #main .closing { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 60px; }
  .design-c #main .closing h2,
  .design-c #main .closing p { flex-basis: 100%; }
  .design-c #main .closing .button { flex-basis: auto; margin-inline: 15px; }
  .design-c #main .closing-flower,
  .design-c #main .closing-tools { position: relative; inset: auto; order: 1; height: 80px; width: 90px; margin-block-start: 48px; transform: none; }
  .design-d #main .hero-copy { align-self: stretch; padding-inline: 25px; }
  .design-d #main .hero > .photo { height: 360px; margin-block-start: var(--section-inset); }
  .design-e #main .hero { min-height: 650px; }
}