/* ==========================================================================
   SnapUp business website — components shared by all themes.
   Each theme layout sets the --bwx-* variables so these pieces inherit the
   theme's colours and type.
   ========================================================================== */

:root {
  --bwx-bg: #fff;
  --bwx-surface: #f6f5f2;
  --bwx-text: #111;
  --bwx-muted: #6b6b6b;
  --bwx-accent: #b8860b;
  --bwx-accent-contrast: #fff;
  --bwx-line: rgba(0, 0, 0, .1);
  --bwx-radius: 14px;
  --bwx-font-display: Georgia, serif;
  --bwx-font-body: system-ui, sans-serif;
}

@keyframes bwxFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------ owner preview bar */
.bwx-owner-bar {
  position: fixed; left: 16px; bottom: 16px; z-index: 9990;
  display: flex; align-items: center; gap: 10px;
  background: rgba(21, 20, 18, .94); color: #f4f2ec;
  padding: 8px 8px 8px 16px; border-radius: 999px;
  font: 500 13px/1.2 system-ui, -apple-system, 'Segoe UI', sans-serif;
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .6);
  backdrop-filter: blur(8px);
}
.bwx-owner-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: #ff5a2c; box-shadow: 0 0 0 4px rgba(255, 90, 44, .25); }
.bwx-owner-bar a { color: #fff; background: #ff5a2c; text-decoration: none; padding: 7px 12px; border-radius: 999px; font-weight: 600; }
.bwx-owner-bar a.ghost { background: #2a2722; }

/* ------------------------------------------------ WhatsApp float */
.bwx-wa {
  position: fixed; right: 18px; bottom: 18px; z-index: 9980;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25d366; color: #fff; display: grid; place-items: center;
  font-size: 26px; text-decoration: none;
  box-shadow: 0 12px 30px -8px rgba(37, 211, 102, .6);
  transition: transform .2s;
}
.bwx-wa:hover { transform: scale(1.06); }

/* ------------------------------------------------ cover fallback */
.bwx-cover-fallback {
  width: 100%; height: 100%; min-height: 240px;
  background: linear-gradient(135deg, var(--bwx-surface), color-mix(in srgb, var(--bwx-accent) 25%, var(--bwx-surface)));
  display: grid; place-items: center; color: var(--bwx-muted);
  font-family: var(--bwx-font-display); font-size: 1.4rem; text-align: center; padding: 20px;
}

/* ------------------------------------------------ project page */
.bwx-section { padding-block: clamp(40px, 7vw, 96px); }
.bwx-wrap { width: min(1320px, 100% - 40px); margin-inline: auto; }
.bwx-narrow { width: min(820px, 100% - 40px); margin-inline: auto; }

.bwx-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 22px 0 0; padding: 0; list-style: none; font-family: var(--bwx-font-body); }
.bwx-facts li { display: flex; flex-direction: column; gap: 2px; }
.bwx-facts small { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bwx-muted); }
.bwx-facts b { font-weight: 600; color: var(--bwx-text); }

.bwx-story { font-family: var(--bwx-font-body); font-size: 1.08rem; line-height: 1.8; color: var(--bwx-muted); white-space: pre-line; max-width: 70ch; }

.bwx-gallery { columns: 3 320px; column-gap: 14px; }
.bwx-gallery a { display: block; margin: 0 0 14px; break-inside: avoid; border-radius: var(--bwx-radius); overflow: hidden; position: relative; background: var(--bwx-surface); cursor: zoom-in; }
.bwx-gallery img { width: 100%; height: auto; display: block; transition: transform .8s cubic-bezier(.2, .8, .2, 1), filter .4s; }
.bwx-gallery a:hover img { transform: scale(1.035); }
.bwx-gallery a::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--bwx-line); border-radius: inherit; pointer-events: none; }
@media (max-width: 640px) { .bwx-gallery { columns: 2 140px; column-gap: 8px; } .bwx-gallery a { margin-bottom: 8px; border-radius: 8px; } }

/* .bwx-film { position: relative; aspect-ratio: 16 / 9; border-radius: calc(var(--bwx-radius) + 4px); overflow: hidden; background: #000; }
.bwx-film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: none; }
.bwx-film-thumb { position: absolute; inset: 0; cursor: pointer; }
.bwx-film-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .3s, transform .8s; }
.bwx-film-thumb:hover img { opacity: 1; transform: scale(1.02); }
.bwx-film-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px; border-radius: 50%; background: var(--bwx-accent); color: var(--bwx-accent-contrast); display: grid; place-items: center; font-size: 26px; box-shadow: 0 0 0 12px color-mix(in srgb, var(--bwx-accent) 25%, transparent); transition: transform .25s; }
.bwx-film-thumb:hover .bwx-film-play { transform: translate(-50%, -50%) scale(1.08); }
.bwx-film-label { position: absolute; left: 20px; bottom: 18px; color: #fff; font: 600 .8rem/1 var(--bwx-font-body); letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); } */
.bwx-film {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: calc(var(--bwx-radius) + 4px);
    overflow: hidden;
    background: #000;
}

.bwx-film iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: none;
}

.bwx-film-thumb {
    position: absolute;
    inset: 0;
    cursor: pointer;
}

.bwx-film-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .82;
    transition: opacity .3s, transform .8s;
}

.bwx-film-thumb:hover img {
    opacity: 1;
    transform: scale(1.02);
}

.bwx-film-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--bwx-accent);
    color: var(--bwx-accent-contrast);
    display: grid;
    place-items: center;
    font-size: 26px;
    box-shadow: 0 0 0 12px color-mix(in srgb, var(--bwx-accent) 25%, transparent);
    transition: transform .25s;
}

.bwx-film-thumb:hover .bwx-film-play {
    transform: translate(-50%, -50%) scale(1.08);
}

.bwx-film-label {
    position: absolute;
    left: 20px;
    bottom: 18px;
    color: #fff;
    font: 600 .8rem/1 var(--bwx-font-body);
    letter-spacing: .14em;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}
.bwx-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: clamp(40px, 6vw, 80px); border-top: 1px solid var(--bwx-line); padding-top: 28px; }
.bwx-pager a { text-decoration: none; color: var(--bwx-text); display: flex; flex-direction: column; gap: 6px; padding: 8px 0; }
.bwx-pager a small { font: 600 .72rem/1 var(--bwx-font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--bwx-muted); }
.bwx-pager a span { font-family: var(--bwx-font-display); font-size: clamp(1.2rem, 2.2vw, 1.8rem); line-height: 1.15; }
.bwx-pager a:hover span { color: var(--bwx-accent); }
.bwx-pager .next { text-align: right; align-items: flex-end; grid-column: 2; }

.bwx-count-pill { display: inline-flex; align-items: center; gap: 8px; font: 600 .78rem/1 var(--bwx-font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--bwx-muted); }

/* ------------------------------------------------ lightbox */
.bwx-lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(8, 8, 8, .96); display: none; align-items: center; justify-content: center; }
.bwx-lightbox.is-open { display: flex; animation: bwxFade .25s ease; }
.bwx-lb-stage { margin: 0; max-width: calc(100vw - 140px); max-height: calc(100vh - 110px); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bwx-lb-stage img { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; border-radius: 4px; opacity: 0; transform: scale(.985); transition: opacity .3s, transform .4s; }
.bwx-lb-stage img.is-in { opacity: 1; transform: none; }
.bwx-lb-stage figcaption { color: #bbb; font: 14px/1.4 system-ui, sans-serif; }
.bwx-lightbox button { position: absolute; background: rgba(255, 255, 255, .08); color: #fff; border: 0; cursor: pointer; border-radius: 50%; width: 52px; height: 52px; font-size: 30px; line-height: 1; display: grid; place-items: center; transition: background .2s; }
.bwx-lightbox button:hover { background: rgba(255, 255, 255, .2); }
.bwx-lb-close { top: 18px; right: 18px; }
.bwx-lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.bwx-lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
.bwx-lb-count { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); color: #aaa; font: 500 13px/1 ui-monospace, monospace; letter-spacing: .1em; }
@media (max-width: 640px) {
  .bwx-lb-stage { max-width: 100vw; }
  .bwx-lb-prev, .bwx-lb-next { top: auto; bottom: 18px; transform: none; }
}

/* ------------------------------------------------ journal post */
.bwx-prose { font-family: var(--bwx-font-body); font-size: 1.12rem; line-height: 1.85; color: var(--bwx-text); }
.bwx-prose p { margin: 0 0 1.35em; color: var(--bwx-muted); }
.bwx-prose h2 { font-family: var(--bwx-font-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.2; margin: 1.8em 0 .6em; color: var(--bwx-text); }
/* rich text from the blog editor */
.bwx-prose h3, .bwx-prose h4 { font-family: var(--bwx-font-display); font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.3; margin: 1.5em 0 .5em; color: var(--bwx-text); }
.bwx-prose ul, .bwx-prose ol { margin: 0 0 1.35em; padding-left: 1.4em; color: var(--bwx-muted); }
.bwx-prose li { margin: .3em 0; }
.bwx-prose blockquote { margin: 1.6em 0; padding: .4em 0 .4em 1.2em; border-left: 3px solid currentColor; font-style: italic; color: var(--bwx-text); }
.bwx-prose a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.bwx-prose strong, .bwx-prose b { color: var(--bwx-text); }
.bwx-prose hr { border: 0; border-top: 1px solid currentColor; opacity: .2; margin: 2em 0; }
.bwx-post-cover { border-radius: calc(var(--bwx-radius) + 6px); overflow: hidden; margin: 0 0 clamp(28px, 5vw, 56px); }
.bwx-post-cover img { width: 100%; height: auto; display: block; }
.bwx-post-meta { display: flex; gap: 14px; flex-wrap: wrap; font: 600 .78rem/1 var(--bwx-font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--bwx-muted); margin-bottom: 18px; }
.bwx-back { display: inline-flex; gap: 8px; align-items: center; text-decoration: none; color: var(--bwx-muted); font: 600 .8rem/1 var(--bwx-font-body); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 26px; }
.bwx-back:hover { color: var(--bwx-accent); }

/* ------------------------------------------------ contact form states */
.bwx-invalid { border-color: #d23a2a !important; box-shadow: 0 0 0 3px rgba(210, 58, 42, .12) !important; }
.bwx-field-error { display: block; color: #d23a2a; font-size: .82rem; margin-top: 6px; font-family: var(--bwx-font-body); }
.bwx-success { text-align: center; padding: clamp(28px, 5vw, 56px) 20px; border-radius: calc(var(--bwx-radius) + 6px); border: 1px solid var(--bwx-line); background: var(--bwx-surface); }
.bwx-success-icon { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: var(--bwx-accent); color: var(--bwx-accent-contrast); font-size: 24px; }
.bwx-success h3 { font-family: var(--bwx-font-display); font-size: 1.8rem; margin: 0 0 8px; color: var(--bwx-text); }
.bwx-success p { color: var(--bwx-muted); margin: 0; font-family: var(--bwx-font-body); }
.bwx-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------ empty / pagination */
.bwx-empty { text-align: center; padding: 60px 20px; color: var(--bwx-muted); font-family: var(--bwx-font-body); border: 1px dashed var(--bwx-line); border-radius: calc(var(--bwx-radius) + 6px); }
.bwx-empty b { display: block; font-family: var(--bwx-font-display); font-size: 1.6rem; color: var(--bwx-text); margin-bottom: 6px; font-weight: 400; }
.bwx-pagination { display: flex; justify-content: center; gap: 10px; margin-top: 48px; font-family: var(--bwx-font-body); }
.bwx-pagination a, .bwx-pagination span { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--bwx-line); color: var(--bwx-text); text-decoration: none; font-size: .9rem; }
.bwx-pagination a:hover { border-color: var(--bwx-accent); color: var(--bwx-accent); }
.bwx-pagination .off { opacity: .4; }

/* Logo image inside theme brand slots */
.bwx-logo { height: 40px; width: auto; max-width: 180px; object-fit: contain; display: block; }
.bwx-logo-lg { height: 52px; max-width: 220px; }
/* default logo (public/logo.avif) shown next to the brand name */
.bwx-logo-mark { height: 34px; width: auto; max-width: 64px; object-fit: contain; display: inline-block; vertical-align: middle; margin-right: 10px; flex: none; }

/* Utility used by several themes for items revealed by filters */
[data-bw-item] { animation: bwxFade .5s ease both; }

/* ------------------------------------------------------------------
   Few services / team members → centred cards of a good width
   (instead of one card stuck on the left, or one huge stretched card).
   Views add "bwx-fit bwx-n1|n2|n3" when there are fewer items than columns.
   ------------------------------------------------------------------ */
.bwx-fit { justify-content: center; }
.bwx-fit.bwx-start { justify-content: start; }   /* themes with left-aligned headings (Obsidian Lens) */
.bwx-fit > * { min-height: 0 !important; }
@media (min-width: 769px) {
  .bwx-fit.bwx-n1 { grid-template-columns: minmax(0, 340px) !important; }
  .bwx-fit.bwx-n2 { grid-template-columns: repeat(2, minmax(0, 340px)) !important; }
}
@media (min-width: 1025px) {
  .bwx-fit.bwx-n3 { grid-template-columns: repeat(3, minmax(0, 340px)) !important; }
}
@media (max-width: 768px) {
  .bwx-fit { grid-template-columns: minmax(0, 420px) !important; }
}

/* Price line on home-page service cards */
.bwx-price { margin-top: 14px; font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }

/* ------------------------------------------------------------------
   Mobile header: long studio names stay on ONE line (… at the end),
   so the header doesn't grow and cover the hero text below it.
   Floating social bars are hidden on phones (they covered the text);
   the same links are in the menu drawer and footer.
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .bwx-brand-text {
    display: inline-block;
    max-width: calc(100vw - 150px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    font-size: 1.2rem !important;
    line-height: 1.25;
  }
  .bwx-logo-mark { height: 30px; margin-right: 8px; }
  .floating-social, .floating-social-bar, .floating-socials { display: none !important; }
}