/* Shared section controls. Existing Hana section classes remain the visual source of truth. */
.hana-block-section.hana-block-width-normal {
  width: min(100%, 760px);
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
}

.hana-block-section.hana-block-width-wide {
  width: min(100%, var(--hana-layout-site-max-width, 1360px));
  max-width: var(--hana-layout-site-max-width, 1360px);
  margin-right: auto;
  margin-left: auto;
}

.hana-block-section.hana-block-width-full { max-width: none; }

/* Keep the saved global spacing preset active inside the editor canvas. */
.editor-styles-wrapper .hana-block-section.hana-spacing-compact,
.editor-styles-wrapper .hana-block-section.hana-spacing-preset-compact {
  --hana-gutter: clamp(min(1rem, var(--hana-layout-page-padding, 2rem)), 3vw, var(--hana-layout-page-padding, 2rem));
  --hana-section: clamp(min(3rem, var(--hana-layout-section-spacing, 4rem)), 7vw, var(--hana-layout-section-spacing, 4rem));
  --hana-preset-column-gap: 2rem;
  --hana-preset-card-gap: 1.5rem;
}

.editor-styles-wrapper .hana-block-section.hana-spacing-normal,
.editor-styles-wrapper .hana-block-section.hana-spacing-preset-normal {
  --hana-gutter: clamp(min(1.125rem, var(--hana-layout-page-padding, 3rem)), 3.5vw, var(--hana-layout-page-padding, 3rem));
  --hana-section: clamp(min(4rem, var(--hana-layout-section-spacing, 6.5rem)), 8vw, var(--hana-layout-section-spacing, 6.5rem));
  --hana-preset-column-gap: 3rem;
  --hana-preset-card-gap: 2rem;
}

.hana-block-section.hana-section.hana-block-space-top-small { padding-top: calc(var(--hana-section) * .55); }
.hana-block-section.hana-section.hana-block-space-top-large { padding-top: calc(var(--hana-section) * 1.35); }
.hana-block-section.hana-section.hana-block-space-top-custom { padding-top: var(--hana-block-custom-space-top, var(--hana-section)); }
.hana-block-section.hana-section.hana-block-space-bottom-small { padding-bottom: calc(var(--hana-section) * .55); }
.hana-block-section.hana-section.hana-block-space-bottom-large { padding-bottom: calc(var(--hana-section) * 1.35); }
.hana-block-section.hana-section.hana-block-space-bottom-custom { padding-bottom: var(--hana-block-custom-space-bottom, var(--hana-section)); }

.hana-hero.hana-block-space-top-small .hana-hero__copy { padding-top: calc(var(--hana-section) * .55); }
.hana-hero.hana-block-space-top-large .hana-hero__copy { padding-top: calc(var(--hana-section) * 1.35); }
.hana-hero.hana-block-space-top-custom .hana-hero__copy { padding-top: var(--hana-block-custom-space-top, var(--hana-section)); }
.hana-hero.hana-block-space-bottom-small .hana-hero__copy { padding-bottom: calc(var(--hana-section) * .55); }
.hana-hero.hana-block-space-bottom-large .hana-hero__copy { padding-bottom: calc(var(--hana-section) * 1.35); }
.hana-hero.hana-block-space-bottom-custom .hana-hero__copy { padding-bottom: var(--hana-block-custom-space-bottom, var(--hana-section)); }

.hana-block-align-left { text-align: left; }
.hana-block-align-center { text-align: center; }
.hana-block-align-right { text-align: right; }
.hana-block-align-center .hana-section-heading > *,
.hana-block-align-center .hana-about-section__copy,
.hana-block-align-center.hana-process-section > header { justify-self: center; }
.hana-block-align-right .hana-section-heading > *,
.hana-block-align-right .hana-about-section__copy,
.hana-block-align-right.hana-process-section > header { justify-self: end; }
.hana-block-align-center .hana-section-heading > p,
.hana-block-align-center .hana-about-section__copy > p,
.hana-block-align-center.hana-home-cta > p { margin-right: auto; margin-left: auto; }
.hana-block-align-right .hana-section-heading > p,
.hana-block-align-right .hana-about-section__copy > p,
.hana-block-align-right.hana-home-cta > p { margin-left: auto; }

.hana-hero.hana-block-align-center .hana-hero__copy > h1,
.hana-hero.hana-block-align-center .hana-hero__intro,
.hana-hero.hana-block-align-center .hana-hero__note { align-self: center; }
.hana-hero.hana-block-align-right .hana-hero__copy > h1,
.hana-hero.hana-block-align-right .hana-hero__intro,
.hana-hero.hana-block-align-right .hana-hero__note { align-self: flex-end; }
.hana-hero.hana-block-align-center .hana-hero__actions { justify-content: center; }
.hana-hero.hana-block-align-right .hana-hero__actions { justify-content: flex-end; }

/* Automatically preserve readable foregrounds for arbitrary section colors. */
.hana-block-background-dark {
  --hana-color-heading: #fff;
  --hana-color-text: #f8f6f0;
  --hana-color-text-secondary: #deddd7;
  --hana-color-text-muted: #c9c8c1;
  --hana-line: rgba(255,255,255,.28);
  color: #f8f6f0;
}
.hana-block-background-light {
  --hana-color-heading: #171814;
  --hana-color-text: #171814;
  --hana-color-text-secondary: #565851;
  --hana-color-text-muted: #65675f;
  --hana-line: rgba(23,24,20,.2);
  color: #171814;
}
.hana-block-background-dark .hana-button {
  border-color: #fff;
  background: #fff;
  color: #171814;
}
.hana-block-background-dark .hana-text-link { color: #fff; }
.hana-block-background-dark .hana-testimonial footer span { color: #c9c8c1; }
.hana-block-background-dark .hana-filters button:hover,
.hana-block-background-dark .hana-filters button.is-active {
  border-color: #fff;
  background: #fff;
  color: #171814;
}
.hana-hero.hana-block-background-dark .hana-hero__caption { color: #171814; }
.hana-process-section.hana-block-background-light { color: #171814; }
.hana-process-section.hana-block-background-light .hana-process-list { border-top-color: rgba(23,24,20,.2); }
.hana-process-section.hana-block-background-light .hana-process-list li { border-color: rgba(23,24,20,.2); }
.hana-process-section.hana-block-background-light .hana-process-list span,
.hana-process-section.hana-block-background-light .hana-process-list p { color: #65675f; }

.hana-about-section__portrait--image::before,
.hana-about-section__portrait--image::after,
.hana-about-section__portrait--image > span,
.hana-about-section__portrait--image > small { display: none; }
.hana-about-section__portrait--image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hana-block-empty {
  margin: 1.5rem 0 0;
  color: var(--hana-color-text-muted, var(--hana-muted));
  font-size: .9rem;
}

/* Let full-width Hana sections escape the ordinary page prose constraint. */
.hana-page-content > .hana-block-width-full {
  width: calc(100% + (var(--hana-gutter) * 2));
  max-width: none;
  margin-right: calc(var(--hana-gutter) * -1);
  margin-left: calc(var(--hana-gutter) * -1);
}
.hana-page-content > .hana-block-width-wide { max-width: var(--hana-layout-site-max-width, 1360px); }
.hana-page-content--hana-blocks > .hana-block-width-full {
  width: 100%;
  margin-right: 0;
  margin-left: 0;
}

/* A mixed page keeps ordinary Gutenberg content at readable prose widths. */
.hana-page-content--hana-blocks > :not(.hana-block-section):not(.hana-page-composer):not(.alignwide):not(.alignfull) {
  width: calc(100% - (var(--hana-gutter) * 2));
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
}
.hana-page-content--hana-blocks > .alignwide:not(.hana-block-section) {
  width: calc(100% - (var(--hana-gutter) * 2));
  max-width: var(--hana-layout-site-max-width, 1360px);
  margin-right: auto;
  margin-left: auto;
}
.hana-page-content--hana-blocks > .alignfull:not(.hana-block-section) {
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
}

/* Normal-width sections reflow by their chosen width, not only the viewport. */
.hana-block-width-normal.hana-hero {
  display: flex;
  min-height: auto;
  flex-direction: column;
}
.hana-block-width-normal.hana-hero .hana-hero__copy { min-height: auto; }
.hana-block-width-normal.hana-hero .hana-hero__media { min-height: 34rem; }
.hana-block-width-normal.hana-statement,
.hana-block-width-normal.hana-about-section,
.hana-block-width-normal.hana-testimonials,
.hana-block-width-normal.hana-process-section > header,
.hana-block-width-normal .hana-section-heading { grid-template-columns: 1fr; }
.hana-block-width-normal.hana-statement,
.hana-block-width-normal.hana-about-section,
.hana-block-width-normal.hana-testimonials { gap: 2.5rem; }
.hana-block-width-normal .hana-section-heading { gap: 1.3rem; }
.hana-block-width-normal.hana-about-section .hana-about-section__portrait { min-height: clamp(24rem, 70vw, 38rem); }
.hana-block-width-normal .hana-process-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hana-block-width-normal .hana-process-list li { min-height: 15rem; border-bottom: 1px solid rgba(255,255,255,.2); }
.hana-block-width-normal .hana-process-list li:last-child { grid-column: 1 / -1; }
.hana-block-width-normal .hana-slider-controls { grid-column: 1; }

/* Block editor parity and editing affordances. */
.editor-styles-wrapper {
  max-width: none;
  overflow-x: clip;
}

.editor-styles-wrapper [data-hana-editor-section] {
  position: relative;
  transition: opacity .2s, outline-color .2s;
}

.editor-styles-wrapper [data-hana-editor-section].is-selected,
.editor-styles-wrapper [data-hana-editor-section]:focus-within {
  outline: 1px solid color-mix(in srgb, var(--hana-color-accent, #9b6f55) 45%, transparent);
  outline-offset: -1px;
}

.editor-styles-wrapper .is-hana-hidden-editor {
  opacity: .55;
  outline: 2px dashed #b26228;
  outline-offset: -2px;
}

.editor-styles-wrapper .hana-block-hidden-notice {
  position: absolute;
  z-index: 20;
  top: .75rem;
  right: .75rem;
  width: min(25rem, calc(100% - 1.5rem));
  margin: 0;
  text-align: left;
}

.editor-styles-wrapper .hana-hero {
  min-height: min(760px, 82vh);
  margin-top: 0;
}
.editor-styles-wrapper .hana-hero__copy { min-height: min(680px, 74vh); }
.editor-styles-wrapper .hana-hero__media { min-height: min(680px, 74vh); }
.editor-styles-wrapper .hana-hero__media > img { animation: none; }
.editor-styles-wrapper .hana-scroll-cue { cursor: text; }

.editor-styles-wrapper .hana-block-media-placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 26rem;
  place-items: center;
  background: #e8e4dc;
}

.editor-styles-wrapper .hana-block-media-action {
  position: absolute;
  z-index: 8;
  top: 1rem;
  right: 1rem;
  padding: .35rem;
  border-radius: 2px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 1px 5px rgba(0,0,0,.16);
}

.editor-styles-wrapper .hana-about-section__portrait { position: relative; }
.editor-styles-wrapper .hana-about-section__portrait > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.editor-styles-wrapper .hana-hero__actions .block-editor-rich-text__editable,
.editor-styles-wrapper .hana-about-section__copy .hana-text-link,
.editor-styles-wrapper .hana-section-end .hana-text-link,
.editor-styles-wrapper .hana-home-cta > .hana-button {
  cursor: text;
}

.editor-styles-wrapper .hana-hero__note > .block-editor-rich-text__editable {
  width: auto;
  height: auto;
  background: transparent;
}

.editor-styles-wrapper .hana-editor-dynamic-preview .components-placeholder {
  min-height: 7rem;
  margin: 1rem 0;
  background: rgba(255,255,255,.65);
}

.editor-styles-wrapper .hana-editor-dynamic-preview--testimonials,
.editor-styles-wrapper .hana-editor-dynamic-preview--testimonials > div:not(.components-placeholder) {
  display: contents;
}

.editor-styles-wrapper .hana-editor-dynamic-preview button,
.editor-styles-wrapper .hana-editor-dynamic-preview a {
  pointer-events: none;
}

.editor-styles-wrapper .hana-testimonial { margin: 0; }
.editor-styles-wrapper .hana-process-list [contenteditable="true"] { min-height: 1.2em; }

@media (max-width: 780px) {
  .hana-block-section.hana-block-width-normal,
  .hana-block-section.hana-block-width-wide { width: 100%; }
  .editor-styles-wrapper .hana-hero,
  .editor-styles-wrapper .hana-hero__copy,
  .editor-styles-wrapper .hana-hero__media { min-height: auto; }
  .editor-styles-wrapper .hana-hero__media { min-height: 34rem; }
  .hana-block-width-normal .hana-process-list { grid-template-columns: 1fr; }
  .hana-block-width-normal .hana-process-list li,
  .hana-block-width-normal .hana-process-list li:last-child { grid-column: auto; min-height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .editor-styles-wrapper [data-hana-editor-section] { transition: none; }
}