/*!
 * 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-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 { background:#f0f0ff; border-left:4px solid #7c5cbf; padding:16px; border-radius:4px; }
.zx-callout h4 { margin:0 0 8px; }
.zx-callout p { margin:0; }
.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 { border:1px solid #e0e0e0; border-radius:6px; margin-bottom:8px; }
.zx-accordion summary { cursor:pointer; font-weight:600; padding:12px 16px; }
.zx-accordion > div { padding:0 16px 16px; }
.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 .zx-tab-labels { display:flex; border-bottom:2px solid #e0e0e0; }
.zx-tab-label { padding:8px 16px; border:none; background:none; cursor:pointer; font-weight:600; }
.zx-tab-label.active { border-bottom:2px solid #7c5cbf; margin-bottom:-2px; color:#7c5cbf; }
.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; }