/* ==========================================================================
   Bappaz — ACF section helper classes (container widths, visibility, anims,
   color schemes). These supplement the extracted theme.css and only add
   behaviour the dynamic Section Settings need. No source design values change.
   ========================================================================== */

/* Container widths driven by Section Settings */
.container-full  { width: 100%; padding-inline: clamp(18px, 4vw, 48px); margin-inline: auto; }
.container-wide  { width: min(1400px, 100% - 40px); margin-inline: auto; }
.container-narrow{ width: min(900px, 100% - 40px); margin-inline: auto; }

/* Text colour scheme on dark/photographic backgrounds */
.color-scheme-light,
.color-scheme-light h1, .color-scheme-light h2, .color-scheme-light h3,
.color-scheme-light h4, .color-scheme-light p, .color-scheme-light .lede { color: #FFF8F0; }
.color-scheme-light .kicker { color: #EFC368; }

/* Section overlay (for image backgrounds) */
.theme-section.has-bg-image { position: relative; }
.theme-section.has-overlay > .section-overlay {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--overlay-c, #46342E); opacity: calc(var(--overlay-o, 50) / 100);
}
.theme-section.has-overlay > .wrap,
.theme-section.has-overlay > .container-full,
.theme-section.has-overlay > .container-wide,
.theme-section.has-overlay > .container-narrow { position: relative; z-index: 1; }

/* Responsive visibility */
@media (min-width: 981px)                      { .hide-desktop { display: none !important; } }
@media (min-width: 621px) and (max-width: 980px){ .hide-tablet  { display: none !important; } }
@media (max-width: 620px)                      { .hide-mobile  { display: none !important; } }

/* Scroll animations for whole sections (Section Settings → Animation) */
.has-anim { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.has-anim.anim-zoom-in { transform: scale(.96); }
.has-anim.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .has-anim { opacity: 1; transform: none; transition: none; } }

/* Testimonial avatar image variant */
.ava--img { padding: 0; overflow: hidden; }
.ava--img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* WYSIWYG description inside service cards keeps source spacing */
.svc__body > p:first-of-type { margin-top: 8px; }

/* Story body matches source .story p rhythm */
.story__body p { color: var(--ink-soft); font-size: 17.5px; margin-top: 16px; }
.story__body p:first-child { margin-top: 0; }

/* ==========================================================================
   Uniform kicker → heading spacing.
   The source relies on inline-flex line-box leading, which differs between
   containers (hero vs pricing block vs centered section) and produced an
   inconsistent gap between the kicker pill and the heading. Making the kicker
   a fit-content block with one fixed margin guarantees the SAME gap everywhere.
   ========================================================================== */
.kicker { display: flex; width: -moz-fit-content; width: fit-content; margin-bottom: 16px; }
.center .kicker,
.phero--solo .wrap .kicker,
.scrollcols__head .kicker { margin-left: auto; margin-right: auto; }

/* Heading sits flush under the kicker; description keeps its own small gap. */
.kicker + h1, .kicker + h2, .kicker + h3,
.kicker + .h-xl, .kicker + .h-lg, .kicker + .h-md { margin-top: 0; }

/* Pricing page: package contents (same data as the service page packages) */
.pcell__for { font-size: 13.5px; color: var(--ink-soft); font-weight: 600; margin-top: 2px; }
.pcell__list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
.pcell__list li { position: relative; padding-left: 20px; font-size: 14px; color: var(--ink-soft); font-weight: 600; line-height: 1.4; }
.pcell__list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--terra-deep); font-weight: 700; }

/* Instagram feed section (Smash Balloon shortcode renders into .ig-feed) */
.ig-feed { margin-top: 44px; }
.ig-feed .wrap { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.ig-feed__placeholder { border: 2px dashed var(--line); border-radius: var(--r-lg); padding: 52px 24px; text-align: center; color: var(--ink-soft); background: var(--paper); }
.ig-feed__placeholder code { background: var(--terra-soft); color: var(--terra-deep); padding: 2px 8px; border-radius: 6px; font-size: 13px; }

/* ==========================================================================
   Fancybox lightbox triggers. The <a class="lightbox"> wraps the image so it
   must fill the figure exactly like the bare <img> did.
   ========================================================================== */
a.lightbox { display: block; cursor: zoom-in; line-height: 0; }
a.lightbox img { display: block; width: 100%; height: 100%; }
.photo a.lightbox { width: 100%; height: 100%; border-radius: inherit; overflow: hidden; }
.gitem a.lightbox img { transition: transform .4s ease; }
.gitem:hover a.lightbox img { transform: scale(1.04); }
/* keep absolutely-positioned hero collage / duo images filling their frame */
.collage .photo a.lightbox, .duo .photo a.lightbox, .banner__ph a.lightbox { width: 100%; height: 100%; }