/* Per-section design overrides (builder Style panel) */



.wiola-section {

  position: relative;

  --wiola-img-max: 100%;

  --wiola-hero-min-h: 92vh;

  --wiola-content-gap: 1rem;

  --wiola-line-mult: 1;

}



.wiola-section--has-bg-image {

  background-color: transparent;

}



.wiola-section--has-bg-image.wiola-section--bg-fit-contain {

  background-repeat: no-repeat;

  background-size: contain;

}



.wiola-section--has-bg-image.wiola-section--bg-fit-none {

  background-repeat: no-repeat;

}



.wiola-section--has-bg-image::before,

.wiola-section--fx-dark::before,

.wiola-section--fx-light::before,

.wiola-section--fx-gradient-bottom::before,

.wiola-section--fx-gradient-top::before,

.wiola-section--fx-gradient-left::before,

.wiola-section--fx-gradient-right::before,

.wiola-section--fx-gradient-radial::before,

.wiola-section--fx-vignette::before,

.wiola-section--fx-blur-dark::before {

  content: '';

  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: 0;

}



.wiola-section--has-bg-image > *,

.wiola-section--fx-dark > *,

.wiola-section--fx-light > *,

.wiola-section--fx-gradient-bottom > *,

.wiola-section--fx-gradient-top > *,

.wiola-section--fx-gradient-left > *,

.wiola-section--fx-gradient-right > *,

.wiola-section--fx-gradient-radial > *,

.wiola-section--fx-vignette > *,

.wiola-section--fx-blur-dark > * {

  position: relative;

  z-index: 1;

}



.wiola-section--fx-dark::before {

  background: rgba(0, 0, 0, 0.48);

}



.wiola-section--fx-light::before {

  background: rgba(255, 255, 255, 0.55);

}



.wiola-section--fx-gradient-bottom::before {

  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.45) 100%);

}



.wiola-section--fx-gradient-top::before {

  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 55%);

}



.wiola-section--fx-gradient-left::before {

  background: linear-gradient(90deg, rgba(0, 0, 0, 0.48) 0%, transparent 62%);

}



.wiola-section--fx-gradient-right::before {

  background: linear-gradient(270deg, rgba(0, 0, 0, 0.48) 0%, transparent 62%);

}



.wiola-section--fx-gradient-radial::before {

  background: radial-gradient(ellipse 85% 70% at 50% 42%, transparent 0%, rgba(0, 0, 0, 0.52) 100%);

}



.wiola-section--fx-vignette::before {

  background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.58) 100%);

}



.wiola-section--fx-blur-dark::before {

  background: rgba(0, 0, 0, 0.32);

  -webkit-backdrop-filter: blur(10px);

  backdrop-filter: blur(10px);

}



@keyframes wiola-fx-fade-in {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}



@keyframes wiola-fx-slow-zoom {

  from {

    background-size: 100%;

  }

  to {

    background-size: 112%;

  }

}



.wiola-section--fx-animate-fade-in {

  animation: wiola-fx-fade-in 0.85s ease-out both;

}



.wiola-section--fx-animate-slow-zoom.wiola-section--has-bg-image {

  animation: wiola-fx-slow-zoom 22s ease-in-out infinite alternate;

}



@media (prefers-reduced-motion: reduce) {

  .wiola-section--fx-animate-fade-in,

  .wiola-section--fx-animate-slow-zoom.wiola-section--has-bg-image {

    animation: none;

  }

}



.wiola-section--font-serif {

  font-family: var(--wiola-serif);

}



.wiola-section--font-sans {

  font-family: var(--wiola-sans);

}



.wiola-section--font-cormorant {

  font-family: 'Cormorant Garamond', Georgia, serif;

}



.wiola-section--font-playfair {

  font-family: 'Playfair Display', Georgia, serif;

}



.wiola-section--font-lora {

  font-family: 'Lora', Georgia, serif;

}



.wiola-section--font-inter {

  font-family: 'Inter', system-ui, sans-serif;

}



.wiola-section--font-source-sans {

  font-family: 'Source Sans 3', system-ui, sans-serif;

}



.wiola-section--font-dm-sans {

  font-family: 'DM Sans', system-ui, sans-serif;

}



.wiola-section--align-left {

  text-align: left;

}



.wiola-section--align-center {

  text-align: center;

}



.wiola-section--align-center .wiola-body,

.wiola-section--align-center .wiola-lead {

  margin-inline: auto;

}



.wiola-section--align-right {

  text-align: right;

}



.wiola-section--align-right .wiola-body,

.wiola-section--align-right .wiola-lead {

  margin-inline: auto 0;

}



.wiola-section--text-small {

  font-size: 0.92rem;

}



.wiola-section--text-small .wiola-serif-display,

.wiola-section--text-small h1,

.wiola-section--text-small h2 {

  font-size: 0.95em;

}



.wiola-section--text-large {

  font-size: 1.08rem;

}



.wiola-section--text-large .wiola-serif-display,

.wiola-section--text-large h1 {

  font-size: 1.12em;

}



.wiola-section--pad-compact {

  padding-block: 1.25rem;

}



.wiola-section--pad-spacious {

  padding-block: clamp(3.5rem, 8vw, 6rem);

}



/* Image size (section root — all templates) */

.wiola-section--img-sm {

  --wiola-img-max: 72%;

  --wiola-hero-min-h: 65vh;

}



.wiola-section--img-lg {

  --wiola-img-max: 92%;

  --wiola-hero-min-h: 100vh;

}



.wiola-section--img-full {

  --wiola-img-max: 100%;

  --wiola-hero-min-h: 100vh;

}



.wiola-section--img-sm .wiola-img,

.wiola-section--img-lg .wiola-img {

  max-width: var(--wiola-img-max);

  margin-inline: auto;

}



.wiola-section--img-full .wiola-img {

  max-width: 100%;

  width: 100%;

}



.wiola-section--img-sm .wiola-hero-photo,

.wiola-section--img-lg .wiola-hero-photo,

.wiola-section--img-full .wiola-hero-photo {

  min-height: var(--wiola-hero-min-h);

}



.wiola-section--img-sm .wiola-hero-photo__bg,

.wiola-section--img-lg .wiola-hero-photo__bg {

  transform: scale(var(--wiola-img-scale, 1));

  transform-origin: center center;

}



.wiola-section--img-sm {

  --wiola-img-scale: 1.08;

}



.wiola-section--img-lg {

  --wiola-img-scale: 1.12;

}



.wiola-section--img-sm [class$='__bg'].wiola-img-editable,

.wiola-section--img-lg [class$='__bg'].wiola-img-editable,

.wiola-section--img-full [class$='__bg'].wiola-img-editable {

  background-size: cover;

}



.wiola-section--img-sm [class*='-image__bg'],

.wiola-section--img-lg [class*='-image__bg'] {

  min-height: clamp(180px, 32vh, 320px);

}



.wiola-section--img-lg [class*='-image__bg'] {

  min-height: clamp(260px, 48vh, 520px);

}



/* Text spacing (gaps, line height, text block margins) */

.wiola-section--space-tight {

  --wiola-content-gap: 0.55rem;

  --wiola-line-mult: 0.92;

}



.wiola-section--space-loose {

  --wiola-content-gap: 1.35rem;

  --wiola-line-mult: 1.12;

}



.wiola-section--space-extra {

  --wiola-content-gap: 1.75rem;

  --wiola-line-mult: 1.22;

}



.wiola-section--space-tight,

.wiola-section--space-loose,

.wiola-section--space-extra {

  line-height: calc(1.6 * var(--wiola-line-mult));

}



.wiola-section--space-tight .wiola-eyebrow {

  margin-bottom: calc(0.65rem * var(--wiola-line-mult));

}



.wiola-section--space-loose .wiola-eyebrow,

.wiola-section--space-extra .wiola-eyebrow {

  margin-bottom: calc(1rem * var(--wiola-line-mult));

}



.wiola-section--space-tight h1,

.wiola-section--space-tight h2,

.wiola-section--space-tight h3,

.wiola-section--space-tight .wiola-serif-display {

  margin-bottom: var(--wiola-content-gap);

}



.wiola-section--space-loose h1,

.wiola-section--space-loose h2,

.wiola-section--space-loose h3,

.wiola-section--space-loose .wiola-serif-display,

.wiola-section--space-extra h1,

.wiola-section--space-extra h2,

.wiola-section--space-extra h3,

.wiola-section--space-extra .wiola-serif-display {

  margin-bottom: var(--wiola-content-gap);

}



.wiola-section--space-tight .wiola-body,

.wiola-section--space-tight .wiola-lead,

.wiola-section--space-tight .wiola-tagline,

.wiola-section--space-tight p {

  margin-top: 0;

  margin-bottom: var(--wiola-content-gap);

}



.wiola-section--space-loose .wiola-body,

.wiola-section--space-loose .wiola-lead,

.wiola-section--space-loose .wiola-tagline,

.wiola-section--space-loose p,

.wiola-section--space-extra .wiola-body,

.wiola-section--space-extra .wiola-lead,

.wiola-section--space-extra .wiola-tagline,

.wiola-section--space-extra p {

  margin-top: 0;

  margin-bottom: var(--wiola-content-gap);

}



.wiola-section--space-tight [class*='__grid'],

.wiola-section--space-tight [class*='__meta'],

.wiola-section--space-loose [class*='__grid'],

.wiola-section--space-loose [class*='__meta'],

.wiola-section--space-extra [class*='__grid'],

.wiola-section--space-extra [class*='__meta'] {

  gap: var(--wiola-content-gap);

}



.wiola-section--space-tight .wiola-container > * + *,

.wiola-section--space-loose .wiola-container > * + *,

.wiola-section--space-extra .wiola-container > * + * {

  margin-top: var(--wiola-content-gap);

}



.wiola-section--custom-text .wiola-eyebrow,

.wiola-section--custom-text .wiola-lead,

.wiola-section--custom-text .wiola-tagline {

  color: inherit;

  opacity: 0.85;

}



.wiola-section--fx-dark.wiola-section--custom-text,

.wiola-section--fx-gradient-bottom.wiola-section--custom-text,

.wiola-section--fx-gradient-top.wiola-section--custom-text,

.wiola-section--fx-gradient-left.wiola-section--custom-text,

.wiola-section--fx-gradient-right.wiola-section--custom-text,

.wiola-section--fx-gradient-radial.wiola-section--custom-text,

.wiola-section--fx-vignette.wiola-section--custom-text,

.wiola-section--fx-blur-dark.wiola-section--custom-text {

  color: #fff;

}



.wiola-section--fx-dark .wiola-btn,

.wiola-section--fx-gradient-bottom .wiola-btn,

.wiola-section--fx-gradient-top .wiola-btn,

.wiola-section--fx-gradient-left .wiola-btn,

.wiola-section--fx-gradient-right .wiola-btn,

.wiola-section--fx-gradient-radial .wiola-btn,

.wiola-section--fx-vignette .wiola-btn,

.wiola-section--fx-blur-dark .wiola-btn {

  border-color: rgba(255, 255, 255, 0.85);

  color: #fff;

}


