/*
 * Organic blob photo mask — the retreat page's signature photo motif.
 * Applied via the editor's Styles panel ("Organic blob"), see inc/block-styles.php.
 *
 * WHY CSS AND NOT AN EXPORTED MASK
 * Figma draws the blob as a vector with an image fill (90:93 hero, 95:344
 * how-it-works), so exporting yields a flattened PNG — one asset per photo,
 * re-cut by a designer on every image swap. Measuring both vectors off their
 * alpha channels showed they are the SAME shape, and that a plain 8-value
 * border-radius reproduces it at IoU 0.952 (~5% area delta):
 *
 *     90:93   44.6% 50.6% 53.0% 41.8% / 65.9% 37.4% 59.1% 30.5%
 *     95:344  44.5% 50.6% 52.9% 41.8% / 66.0% 37.4% 59.1% 30.6%
 *
 * Every value is a PERCENTAGE, so one declaration self-adapts to any aspect
 * ratio — the hero (1.084:1) and how-it-works (1.276:1) blobs need no separate
 * numbers, and neither will the next one. Swap the photo, keep the silhouette.
 *
 * WHY THIS FILE AND NOT utilities.css
 * assets/css/sections/retreat/*.css is glob-enqueued by inc/enqueue.php on BOTH
 * surfaces — front end (page-gated) and, via enqueue_block_assets, the editor
 * canvas WITHOUT add_editor_style()'s `.editor-styles-wrapper` prefixing. So a
 * file here needs no enqueue.php edit (the F1 freeze is respected) and actually
 * reaches the editor. utilities.css does neither: it is site-wide, and it is
 * injected with add_editor_style(), which prefixes selectors so that a
 * `.retreat-page` rule can never match in the canvas. This is the same trap
 * already documented for token-overrides.css at inc/enqueue.php:274-291.
 *
 * SCOPE GUARD: `.retreat-page` is the front-end template wrapper; the editor
 * canvas carries `.editor-styles-wrapper` instead. Both arms are needed — same
 * two-selector pattern token-overrides.css uses. Safe to match the canvas class
 * broadly because this file only loads on retreat editing screens.
 *
 * TO VARY IT — override variables, never add rules:
 *     one corner   style="--pc-blob-tl-h: 30%"
 *     whole shape  style="--pc-blob-shape: 60% 40% 30% 70% / 60% 30% 70% 40%"
 *     pin ratio    style="--pc-blob-ratio: 1.085"   (defends an odd crop)
 *
 * NOTE ON THE COMPOSITION BELOW: the eight corner values are substituted inside
 * the `border-radius` declaration itself, NOT hoisted into a `--pc-blob-shape`
 * declared on `.retreat-page`. A custom property's computed value is its
 * specified value with var() ALREADY substituted, resolved on the element that
 * declares it — so composing the shape on the page wrapper would bake in the
 * base numbers and make every per-corner override and preset class below a
 * silent no-op.
 */

.retreat-page,
.editor-styles-wrapper {
  /* Horizontal radii — TL TR BR BL (share of width) */
  --pc-blob-tl-h: 44.6%;
  --pc-blob-tr-h: 50.6%;
  --pc-blob-br-h: 53.0%;
  --pc-blob-bl-h: 41.8%;
  /* Vertical radii — TL TR BR BL (share of height) */
  --pc-blob-tl-v: 65.9%;
  --pc-blob-tr-v: 37.4%;
  --pc-blob-br-v: 59.1%;
  --pc-blob-bl-v: 30.5%;

  /* auto = follow the photo's own aspect. Set a number to pin the silhouette. */
  --pc-blob-ratio: auto;
}

.retreat-page .wp-block-image.is-style-pc-blob,
.editor-styles-wrapper .wp-block-image.is-style-pc-blob {
  aspect-ratio: var(--pc-blob-ratio);
}

.retreat-page .wp-block-image.is-style-pc-blob img,
.editor-styles-wrapper .wp-block-image.is-style-pc-blob img {
  display: block;
  width: 100%;
  /*
   * height:100% resolves to auto while the figure's aspect-ratio is auto, so the
   * per-section CLS width/height guards still apply. It only becomes a real
   * constraint once --pc-blob-ratio is pinned — which is exactly when cropping
   * via object-fit is the intended behaviour.
   */
  height: 100%;
  object-fit: cover;
  border-radius: var(--pc-blob-shape,
    var(--pc-blob-tl-h) var(--pc-blob-tr-h) var(--pc-blob-br-h) var(--pc-blob-bl-h) /
    var(--pc-blob-tl-v) var(--pc-blob-tr-v) var(--pc-blob-br-v) var(--pc-blob-bl-v));
}

/* Mirrored preset — same silhouette flipped horizontally (TL↔TR, BL↔BR), so a
   run of blobs down the page reads as varied without inventing a second shape. */
.retreat-page .is-style-pc-blob.pc-blob--mirror,
.editor-styles-wrapper .is-style-pc-blob.pc-blob--mirror {
  --pc-blob-tl-h: 50.6%;
  --pc-blob-tr-h: 44.6%;
  --pc-blob-br-h: 41.8%;
  --pc-blob-bl-h: 53.0%;
  --pc-blob-tl-v: 37.4%;
  --pc-blob-tr-v: 65.9%;
  --pc-blob-br-v: 30.5%;
  --pc-blob-bl-v: 59.1%;
}

/* Calmer preset — pulls every corner toward 50%/50% for a softer, rounder read. */
.retreat-page .is-style-pc-blob.pc-blob--calm,
.editor-styles-wrapper .is-style-pc-blob.pc-blob--calm {
  --pc-blob-tl-h: 47%;
  --pc-blob-tr-h: 50%;
  --pc-blob-br-h: 51%;
  --pc-blob-bl-h: 46%;
  --pc-blob-tl-v: 57%;
  --pc-blob-tr-v: 44%;
  --pc-blob-br-v: 54%;
  --pc-blob-bl-v: 41%;
}