/* ==========================================================================
   Artistic Dimension — Shape language
   Organic curved media masks used across every hero and feature image.
   Masks are authored on a 0–100 viewBox with preserveAspectRatio="none"
   so they stretch fluidly to any container size.
   ========================================================================== */

.ad-curve {
  position: relative;
  overflow: hidden;
  background: var(--ad-surface-2);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
}

.ad-curve > img,
.ad-curve > picture,
.ad-curve > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Hero — flush to the right edge with a soft S-curve running down the left */
.ad-curve--hero {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M33,0C27.5,10,26.5,26,21.5,42C16.5,58,6.5,70,2.4,86C1,91.5,0,96,0,100L100,100L100,0Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M33,0C27.5,10,26.5,26,21.5,42C16.5,58,6.5,70,2.4,86C1,91.5,0,96,0,100L100,100L100,0Z' fill='%23000'/%3E%3C/svg%3E");
}

/* Hero — inner page variant: generous top-left sweep, softened bottom-left */
.ad-curve--hero-soft {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100,0L24,0C11,0,3.5,9,2.6,22C1.6,36,7,48,6,60C5,72,0,80.5,0,90C0,96,5,100,12,100L100,100Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100,0L24,0C11,0,3.5,9,2.6,22C1.6,36,7,48,6,60C5,72,0,80.5,0,90C0,96,5,100,12,100L100,100Z' fill='%23000'/%3E%3C/svg%3E");
}

/* Hero — contact variant: a single, very generous rounded sweep */
.ad-curve--hero-blob {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100,0L34,0C15,0,3,13,2,32C1,50,4,64,5,78C6,92,16,100,32,100L100,100Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100,0L34,0C15,0,3,13,2,32C1,50,4,64,5,78C6,92,16,100,32,100L100,100Z' fill='%23000'/%3E%3C/svg%3E");
}

/* Feature panel — S-curve on the left, flush right (services still-life) */
.ad-curve--panel {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M36,0C28,9,27,24,22,38C17,53,6,64,2,80C0.7,86,0,93,0,100L100,100L100,0Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M36,0C28,9,27,24,22,38C17,53,6,64,2,80C0.7,86,0,93,0,100L100,100L100,0Z' fill='%23000'/%3E%3C/svg%3E");
}

/* Featured editorial card — curve sweeping out of the bottom-right */
.ad-curve--editorial {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0L100,0L100,58C100,74,92,80,78,84C62,88,52,92,46,100L0,100Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0L100,0L100,58C100,74,92,80,78,84C62,88,52,92,46,100L0,100Z' fill='%23000'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Elliptical corner treatments (fluid, no distortion)
   -------------------------------------------------------------------------- */

.ad-corner-bl { border-radius: var(--ad-r) var(--ad-r) var(--ad-r) 42% / var(--ad-r) var(--ad-r) var(--ad-r) 34%; }
.ad-corner-tl { border-radius: 42% var(--ad-r) var(--ad-r) var(--ad-r) / 34% var(--ad-r) var(--ad-r) var(--ad-r); }
.ad-corner-tr { border-radius: var(--ad-r) 42% var(--ad-r) var(--ad-r) / var(--ad-r) 34% var(--ad-r) var(--ad-r); }
.ad-corner-arch { border-radius: 46% 46% var(--ad-r) var(--ad-r) / 26% 26% var(--ad-r) var(--ad-r); }

/* On narrow screens the organic sweeps are dialled back so photographs keep
   their subject matter and the layout stays readable. */
@media (max-width: 767px) {
  .ad-curve--hero,
  .ad-curve--hero-soft,
  .ad-curve--hero-blob,
  .ad-curve--panel,
  .ad-curve--editorial {
    -webkit-mask-image: none;
    mask-image: none;
    border-radius: var(--ad-r-lg);
  }

  .ad-corner-bl { border-radius: var(--ad-r) var(--ad-r) var(--ad-r) 30% / var(--ad-r) var(--ad-r) var(--ad-r) 22%; }
  .ad-corner-tl { border-radius: 30% var(--ad-r) var(--ad-r) var(--ad-r) / 22% var(--ad-r) var(--ad-r) var(--ad-r); }
}