/*!
 * Flow Sketch — Frontend CSS
 * Self-contained. Works without the plugin active.
 */
.zx-sketch-wrap { display:block; width:100%; }
.zx-row { display:block; width:100%; box-sizing:border-box; position:relative; overflow:hidden; }
.zx-row-inner { display:flex; flex-wrap:wrap; align-items:stretch; margin:0 auto; box-sizing:border-box; }
.zx-col { display:flex; flex-direction:column; box-sizing:border-box; min-width:0; }
.zx-col-inner { flex:1; display:flex; flex-direction:column; width:100%; box-sizing:border-box; }
.zx-block { box-sizing:border-box; }
.zx-block + .zx-block { margin-top:12px; }
.zx-para { font-size:16px; line-height:1.7; }
.zx-para p { margin:0 0 1em; }
.zx-para p:last-child { margin-bottom:0; }
.zx-row-overlay { position:absolute; inset:0; pointer-events:none; }
.zx-btn { display:inline-block; padding:10px 24px; background:#7c5cbf; color:#fff; text-decoration:none; border-radius:6px; font-weight:600; }
.zx-btn-outline { background:transparent; border:2px solid #7c5cbf; color:#7c5cbf; }
.zx-btn-ghost { background:transparent; color:#7c5cbf; }
.zx-divider { border:none; border-top:1px solid #e0e0e0; margin:16px 0; display:block; }
.zx-spacer { display:block; }
.zx-quote { border-left:4px solid #7c5cbf; padding:12px 16px; margin:0; font-style:italic; }
.zx-quote cite { display:block; margin-top:8px; font-size:.9em; opacity:.7; }

.zx-callout h4 { margin:0 0 8px; }
.zx-callout p { margin:0; }
/* Prevent theme resets from breaking callout image sizing */
.zx-block .zx-co-icon img,
.zx-block .zx-co-icon .zx-co-photo {
  display: block !important;
  width: 100% !important; height: 100% !important;
  max-width: none !important; max-height: none !important;
  object-fit: cover !important;
}
/* zx-svg-wrap span enforces icon size; SVG fills it completely */
.zx-svg-wrap {
  display: inline-flex !important;
  flex-shrink: 0 !important;
  overflow: visible;
}
.zx-svg-wrap svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  flex-shrink: 0 !important;
}
.zx-posts { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:24px; }
.zx-post-card img { width:100%; height:auto; display:block; border-radius:4px; }
.zx-post-card h3 { margin:8px 0 4px; }
/* .zx-accordion padding and border are fully controlled via block design settings */
.zx-video-wrap { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; }
.zx-video-wrap iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none; }
/* .zx-tabs styling controlled via block design settings */
.zx-image img { display:block; max-width:100%; }
.zx-gallery { display:grid; gap:12px; }
.zx-icon { line-height:1; }

/* ── Responsive columns ──────────────────────────────────────────────────────
   Desktop layout: .zx-col uses flex:N for proportional width. Never touched
   by any mobile rule below — desktop is always preserved.

   Mobile default (≤767px):
     Each column uses its --zx-mob-w custom property (default 100%).
     Columns with widths that sum to 100% naturally share a row via flex-wrap.

   zx-keep-mobile = "follow desktop layout on mobile":
     No mobile override fires — flex proportions apply on all screen sizes.

   zx-order-reversed = reverse stacking order on mobile.
── */

/* Mobile (≤767px): apply per-column mobile width via CSS custom property */
/* Tablet (768px–1023px): use --zx-tab-w if set, else keep desktop flex */
@media (min-width: 768px) and (max-width: 1023px) {
  .zx-row-inner:not(.zx-keep-mobile) .zx-col[style*="--zx-tab-w"] {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: var(--zx-tab-w) !important;
    width: var(--zx-tab-w) !important;
    max-width: var(--zx-tab-w) !important;
  }
}

/* Mobile (≤767px): use --zx-mob-w (default 100% = single column) */
@media (max-width: 767px) {
  .zx-row-inner:not(.zx-keep-mobile) .zx-col {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: var(--zx-mob-w, 100%) !important;
    width: var(--zx-mob-w, 100%) !important;
    max-width: var(--zx-mob-w, 100%) !important;
  }
  /* Equalize height: columns sharing a mobile row still stretch to match */
  .zx-row-inner.zx-eq-height:not(.zx-keep-mobile) .zx-col {
    align-self: stretch;
  }
  /* Reversed stacking order */
  .zx-row-inner:not(.zx-keep-mobile).zx-order-reversed {
    flex-direction: row-reverse;
    flex-wrap: wrap-reverse;
  }
}

/* zx-keep-mobile: desktop flex proportions apply on all screen sizes */

/* ── Column design ───────────────────────────────────────────────────────────*/
/* Photo overlay via CSS custom property --col-ov set by renderer */
.zx-col[style*="--col-ov"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--col-ov);
  pointer-events: none;
}
.zx-col { position: relative; }

/* Equalize column heights */
.zx-row-inner.zx-eq-height { align-items: stretch; }
/* zx-col is already display:flex flex-direction:column — no duplicate needed */
/* On mobile, stacked full-width columns equalize within their shared row */

/* ── Column content alignment ────────────────────────────────────────────────*/
.zx-row-inner.zx-align-center > .zx-col,
.zx-row-inner.zx-align-center > .zx-col p,
.zx-row-inner.zx-align-center > .zx-col h1,
.zx-row-inner.zx-align-center > .zx-col h2,
.zx-row-inner.zx-align-center > .zx-col h3,
.zx-row-inner.zx-align-center > .zx-col h4,
.zx-row-inner.zx-align-center > .zx-col h5,
.zx-row-inner.zx-align-center > .zx-col h6,
.zx-row-inner.zx-align-center > .zx-col .zx-block,
.zx-row-inner.zx-align-center > .zx-col .zx-btn-wrap { text-align: center; }

.zx-row-inner.zx-align-right > .zx-col,
.zx-row-inner.zx-align-right > .zx-col p,
.zx-row-inner.zx-align-right > .zx-col h1,
.zx-row-inner.zx-align-right > .zx-col h2,
.zx-row-inner.zx-align-right > .zx-col h3,
.zx-row-inner.zx-align-right > .zx-col h4,
.zx-row-inner.zx-align-right > .zx-col h5,
.zx-row-inner.zx-align-right > .zx-col h6,
.zx-row-inner.zx-align-right > .zx-col .zx-block,
.zx-row-inner.zx-align-right > .zx-col .zx-btn-wrap { text-align: right; }

/* ── Accordion ─────────────────────────────────────────────────── */
.zx-accordion { width: 100%; display: flex; flex-direction: column; }
.zx-ac-item { margin: 0 !important; padding: 0 !important; flex-shrink: 0; }
.zx-ac-header { margin: 0 !important; }
.zx-ac-header:hover { opacity: .85; }
.zx-ac-header * { margin: 0 !important; }
.zx-ac-icon { transition: transform .2s ease; flex-shrink: 0; }
.zx-ac-body { line-height: 1.6; margin: 0 !important; }
.zx-ac-body > *:first-child { margin-top: 0 !important; }
.zx-ac-body > *:last-child  { margin-bottom: 0 !important; }

/* ── Tabs ──────────────────────────────────────────────────────── */
.zx-tabs { width: 100%; }
.zx-tab-nav { border-bottom: none; }
.zx-tab-btn { transition: background .15s, color .15s; }
.zx-tab-btn:hover { opacity: .85; }

/* ── Gallery ───────────────────────────────────────────────────── */
.zx-gallery img { display: block; transition: transform .3s ease; }
.zx-gallery a:hover img { transform: scale(1.04); }
.zx-gl-overlay { pointer-events: none; transition: opacity .25s; }

/* ── Posts ─────────────────────────────────────────────────────── */
.zx-posts { width: 100%; }
.zx-post-card { transition: transform .2s, box-shadow .2s; }
.zx-post-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.zx-post-card h3 { margin: 0 0 6px; line-height: 1.3; }
.zx-post-card a { text-decoration: none; }
.zx-post-card a:hover { text-decoration: underline; }
.zx-post-card time { display: block; }

/* ── Video Responsive ──────────────────────────────────────────── */
.zx-video-wrap { position: relative; height: 0; overflow: hidden; }
.zx-video-wrap iframe,
.zx-video-wrap video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }