/* Versioned opt-in branded editorial primitives, responsive-complete in v2. */

.brand-editorial {
  /* Shared branded editorial owner controls.
   * The canonical --brand-content-gutter remains owned by tokens.css. */
  --brand-editorial-text-width: 40rem;
  --brand-editorial-photo-width: 20rem;
  --brand-editorial-photo-ornament-size: 4rem;
  --brand-editorial-mobile-text-width: 100%;
  --brand-editorial-mobile-photo-width: 12rem;
  --brand-editorial-mobile-photo-ornament-size: 1.75rem;
  --brand-frame-ornament-size: 8rem;
  --brand-frame-responsive-scale: 1;
  --brand-frame-pair-overlap-adjustment: 5px;
  --brand-frame-between-pairs-gap: 0.5rem;
  --brand-frame-content-inline-gap: 3rem;
  --brand-frame-content-block-gap: 0rem;
  --brand-frame-column-gap: 1rem;
  --brand-frame-mobile-column-gap: var(--space-6);
  --brand-package-ornament-size: 7rem;
  --brand-package-pair-overlap-adjustment: 5px;
  --brand-package-between-pairs-gap: 1rem;
  --brand-package-rail-photo-gap: var(--brand-content-gutter);
  container-type: inline-size;
  min-width: 0;
}

.brand-primary-hero {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  min-height: max(100svh, 100dvh);
  isolation: isolate;
  overflow: hidden;
}

.brand-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: var(--space-3) var(--space-5);
  border: 0.125rem solid transparent;
  border-radius: var(--radius-pill);
  color: var(--color-coffee);
  background: var(--color-rice);
  box-shadow: 0 0.35rem 1rem color-mix(
    in srgb,
    var(--color-coffee) 16%,
    transparent
  );
  font-family: var(--font-interface);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, box-shadow 160ms ease,
    transform 160ms ease;
}

.brand-button:hover {
  color: var(--color-coffee);
  background: var(--color-cream);
  transform: translateY(-0.0625rem);
}

.brand-button:focus-visible {
  outline: 0.1875rem solid var(--color-ivory);
  outline-offset: 0.1875rem;
  box-shadow: 0 0 0 0.375rem var(--color-coffee);
}

.brand-button:active {
  background: var(--color-sand);
  box-shadow: none;
  transform: translateY(0);
}

.brand-editorial-row {
  --_brand-editorial-row-natural-width: calc(
    var(--brand-content-gutter) * 4 +
      var(--brand-editorial-photo-ornament-size) +
      var(--brand-editorial-photo-width) +
      var(--brand-editorial-text-width)
  );
  display: grid;
  width: min(100%, var(--_brand-editorial-row-natural-width));
  margin-inline: auto;
  grid-template-columns:
    var(--brand-content-gutter)
    var(--brand-editorial-photo-ornament-size)
    var(--brand-content-gutter)
    var(--brand-editorial-photo-width)
    var(--brand-content-gutter)
    minmax(0, var(--brand-editorial-text-width))
    var(--brand-content-gutter);
  align-items: center;
  min-width: 0;
}

.brand-editorial-row--media-start .brand-editorial-row__ornament {
  grid-column: 2;
}

.brand-editorial-row--media-start .brand-editorial-row__media,
.brand-editorial-row--media-end .brand-editorial-row__media {
  grid-column: 4;
}

.brand-editorial-row--media-start .brand-editorial-row__copy {
  grid-column: 6;
}

.brand-editorial-row--media-end {
  grid-template-columns:
    var(--brand-content-gutter)
    minmax(0, var(--brand-editorial-text-width))
    var(--brand-content-gutter)
    var(--brand-editorial-photo-width)
    var(--brand-content-gutter)
    var(--brand-editorial-photo-ornament-size)
    var(--brand-content-gutter);
}

.brand-editorial-row--media-end .brand-editorial-row__copy {
  grid-column: 2;
}

.brand-editorial-row--media-end .brand-editorial-row__ornament {
  grid-column: 6;
}

.brand-editorial-row__ornament,
.brand-editorial-row__media,
.brand-editorial-row__copy {
  grid-row: 1;
  min-width: 0;
}

.brand-editorial-row__ornament {
  display: block;
  justify-self: center;
  width: var(--brand-editorial-photo-ornament-size);
  max-width: 100%;
  height: auto;
  pointer-events: none;
}

.brand-editorial-row__media {
  justify-self: center;
  width: var(--brand-editorial-photo-width);
  max-width: 100%;
}

.brand-editorial-row__media picture,
.brand-editorial-row__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.brand-editorial-row__media img {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
  object-position: center;
  transform: none;
}

.brand-editorial-row__copy {
  width: 100%;
  max-width: none;
  overflow-wrap: anywhere;
}

.brand-editorial-row__separator {
  display: none;
  pointer-events: none;
}

/* Accepted Services package rails and reusable horizontal member pairs.
 * Size follows the artwork's long axis; overlap and between-pair gap are independent. */
.brand-package__ornament,
.brand-package__pair {
  --_brand-package-size: max(0px, var(--brand-package-ornament-size));
  --_brand-package-thickness: calc(var(--_brand-package-size) * 15 / 49);
  --_brand-package-overlap: clamp(0px, var(--brand-package-pair-overlap-adjustment), var(--_brand-package-size));
  --_brand-package-pair-length: calc(var(--_brand-package-size) * 2 - var(--_brand-package-overlap));
}

.brand-package__ornament {
  --_brand-package-gap: clamp(0px, var(--brand-package-rail-photo-gap), calc(var(--brand-editorial-photo-ornament-size) + var(--brand-content-gutter) - var(--_brand-package-thickness)));
  display: flex;
  align-self: center;
  width: 100%;
  max-width: none;
  opacity: 0.72;
}

.brand-editorial-row--media-start .brand-package__ornament {
  grid-column: 2 / 4;
  justify-content: end;
  padding-inline-end: var(--_brand-package-gap);
}

.brand-editorial-row--media-end .brand-package__ornament {
  grid-column: 5 / 7;
  justify-content: start;
  padding-inline-start: var(--_brand-package-gap);
}

.brand-package__rail {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: max(0px, var(--brand-package-between-pairs-gap));
  width: var(--_brand-package-thickness);
}

.brand-editorial-row--media-end .brand-package__rail {
  transform: scaleX(-1);
}

.brand-package__pair-reversal {
  position: relative;
  flex: none;
  width: var(--_brand-package-thickness);
  height: var(--_brand-package-pair-length);
}

.brand-package__pair-reversal--lower {
  transform: rotate(180deg);
}

.brand-package__pair-orientation {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--_brand-package-pair-length);
  height: var(--_brand-package-thickness);
  transform: translate(-50%, -50%) rotate(-90deg);
}

.brand-package__pair {
  display: flex;
  width: max-content;
}

.brand-package__ornament-item {
  position: relative;
  flex: none;
  width: var(--_brand-package-size);
  height: var(--_brand-package-thickness);
}

.brand-package__ornament-item--second {
  margin-inline-start: calc(0px - var(--_brand-package-overlap));
}

.brand-package__ornament-mirror {
  width: 100%;
  height: 100%;
}

.brand-package__ornament-mirror--mirrored {
  transform: scaleX(-1);
}

.brand-package__ornament-orientation {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--_brand-package-thickness);
  height: var(--_brand-package-size);
  transform: translate(-50%, -50%) rotate(90deg);
}

.brand-package__ornament-image {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  pointer-events: none;
}

.brand-ornament-frame {
  --_brand-frame-effective-overlap: max(
    0px,
    var(--brand-frame-pair-overlap-adjustment)
  );
  --_brand-frame-fit-size: max(0px, calc(
    (100cqi - var(--brand-content-gutter) * 2 +
      var(--_brand-frame-effective-overlap) * 6 -
      var(--brand-frame-between-pairs-gap) * 7) / (12 + 30 / 49)
  ));
  --_brand-frame-effective-size: min(
    calc(
      var(--brand-frame-ornament-size) *
        var(--brand-frame-responsive-scale)
    ),
    var(--_brand-frame-fit-size)
  );
  --_brand-frame-thickness: calc(
    var(--_brand-frame-effective-size) * 15 / 49
  );
  --_brand-frame-side-length: calc(
    var(--_brand-frame-effective-size) * 6 -
      var(--_brand-frame-effective-overlap) * 3 +
      var(--brand-frame-between-pairs-gap) * 2
  );
  position: relative;
  display: grid;
  box-sizing: border-box;
  width: 100%;
  padding: var(--brand-content-gutter);
  grid-template-areas:
    "top-left top top-right"
    "left content right"
    "bottom-left bottom bottom-right";
  grid-template-columns:
    var(--_brand-frame-thickness)
    minmax(0, 1fr)
    var(--_brand-frame-thickness);
  grid-template-rows:
    var(--_brand-frame-thickness)
    auto
    var(--_brand-frame-thickness);
  gap: var(--brand-frame-between-pairs-gap);
  isolation: isolate;
  min-width: 0;
}

.brand-ornament-frame__corner--top-left {
  grid-area: top-left;
}

.brand-ornament-frame__corner--top-right {
  grid-area: top-right;
}

.brand-ornament-frame__corner--bottom-left {
  grid-area: bottom-left;
}

.brand-ornament-frame__corner--bottom-right {
  grid-area: bottom-right;
}

.brand-ornament-frame__edge {
  position: relative;
  z-index: 0;
  display: grid;
  align-items: center;
  justify-items: center;
  min-width: 0;
  pointer-events: none;
  transform-origin: center;
}

.brand-ornament-frame__edge--top,
.brand-ornament-frame__edge--bottom {
  min-height: var(--_brand-frame-thickness);
}

.brand-ornament-frame__edge--top {
  grid-area: top;
}

.brand-ornament-frame__edge--bottom {
  grid-area: bottom;
}

.brand-ornament-frame__edge-rotation {
  width: max-content;
  transform-origin: center;
}

.brand-ornament-frame__edge--bottom
  .brand-ornament-frame__edge-rotation {
  transform: rotate(180deg);
}

.brand-ornament-frame__strip {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--brand-frame-between-pairs-gap);
  width: max-content;
}

.brand-ornament-frame__pair {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0;
}

.brand-ornament-frame__item {
  position: relative;
  flex: none;
  width: var(--_brand-frame-effective-size);
  height: var(--_brand-frame-thickness);
  transform-origin: center;
}

.brand-ornament-frame__item--mirrored {
  transform: scaleX(-1);
}

.brand-ornament-frame__item--pair-second {
  margin-inline-start: calc(
    0px - var(--_brand-frame-effective-overlap)
  );
}

.brand-ornament-frame__orientation {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--_brand-frame-thickness);
  height: var(--_brand-frame-effective-size);
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center;
}

.brand-ornament-frame__ornament {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  pointer-events: none;
}

.brand-ornament-frame__edge--left,
.brand-ornament-frame__edge--right {
  align-self: stretch;
  min-width: 0;
}

.brand-ornament-frame__edge--left {
  grid-area: left;
}

.brand-ornament-frame__edge--right {
  grid-area: right;
}

.brand-ornament-frame__edge--left
  .brand-ornament-frame__pair:nth-child(n + 4),
.brand-ornament-frame__edge--right
  .brand-ornament-frame__pair:nth-child(n + 4) {
  display: none;
}

.brand-ornament-frame__edge--left
  .brand-ornament-frame__edge-rotation,
.brand-ornament-frame__edge--right
  .brand-ornament-frame__edge-rotation {
  position: absolute;
  top: 50%;
  left: 50%;
  height: var(--_brand-frame-thickness);
}

.brand-ornament-frame__edge--left
  .brand-ornament-frame__edge-rotation {
  transform: translate(-50%, -50%) rotate(-90deg);
}

.brand-ornament-frame__edge--right
  .brand-ornament-frame__edge-rotation {
  transform: translate(-50%, -50%) rotate(90deg);
}

.brand-ornament-frame__content {
  position: relative;
  z-index: 1;
  grid-area: content;
  display: grid;
  box-sizing: border-box;
  align-items: center;
  padding-block: var(--brand-frame-content-block-gap);
  padding-inline: var(--brand-frame-content-inline-gap);
  min-height: calc(
    var(--_brand-frame-side-length) +
      var(--brand-frame-content-block-gap) * 2
  );
  min-width: 0;
}

.brand-ornament-frame__columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--brand-frame-column-gap);
  min-width: 0;
}

/* The breakpoint is deliberately literal: custom properties cannot govern a
 * media-query threshold. */
@media (max-width: 80rem) {
  .brand-editorial-row,
  .brand-editorial-row--media-end {
    width: calc(100% - var(--brand-content-gutter) * 2);
    grid-template-columns: minmax(0, 1fr);
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    gap: 0;
  }

  .brand-editorial-row > .brand-editorial-row__ornament,
  .brand-editorial-row > .brand-editorial-row__media,
  .brand-editorial-row > .brand-editorial-row__copy,
  .brand-editorial-row > .brand-editorial-row__separator {
    grid-column: 1;
    grid-row: auto;
  }

  .brand-editorial-row > .brand-editorial-row__media {
    justify-self: center;
    width: min(100%, var(--brand-editorial-mobile-photo-width));
  }

  .brand-editorial-row > .brand-editorial-row__copy {
    justify-self: center;
    width: min(100%, var(--brand-editorial-mobile-text-width));
    padding-top: var(--space-5);
  }

  .brand-editorial-row > .brand-editorial-row__ornament,
  .brand-editorial-row > .brand-editorial-row__separator {
    display: none;
  }

  .brand-editorial-row > .brand-editorial-row__separator {
    width: var(--brand-editorial-mobile-photo-ornament-size);
    max-width: 100%;
    height: auto;
  }

  .brand-editorial-row--mobile-media-first
    > .brand-editorial-row__media {
    grid-row: 1;
  }

  .brand-editorial-row--mobile-media-first
    > .brand-editorial-row__copy {
    grid-row: 2;
  }

  .brand-editorial-row--mobile-media-first
    > .brand-editorial-row__separator {
    display: block;
    grid-row: 3;
    justify-self: center;
    margin-block: var(--space-5);
  }
}

@media (max-width: 48rem) {
  .brand-ornament-frame {
    --_brand-frame-fit-size: max(0px, calc(
      (100cqi - var(--brand-content-gutter) * 2 +
        var(--_brand-frame-effective-overlap) * 3 -
        var(--brand-frame-between-pairs-gap) * 4) / (6 + 30 / 49)
    ));
    --_brand-frame-side-length: calc(
      var(--_brand-frame-effective-size) * 12 -
        var(--_brand-frame-effective-overlap) * 6 +
        var(--brand-frame-between-pairs-gap) * 5
    );
  }

  .brand-ornament-frame__edge--top
    .brand-ornament-frame__pair:nth-child(n + 4),
  .brand-ornament-frame__edge--bottom
    .brand-ornament-frame__pair:nth-child(n + 4) {
    display: none;
  }

  .brand-ornament-frame__edge--left
    .brand-ornament-frame__pair:nth-child(n + 4),
  .brand-ornament-frame__edge--right
    .brand-ornament-frame__pair:nth-child(n + 4) {
    display: flex;
  }

  .brand-ornament-frame__columns {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--brand-frame-mobile-column-gap);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-button {
    transition: none;
  }

  .brand-button:hover {
    transform: none;
  }
}

/* Shared flower below process/value copy; preserves Weddings geometry. */
.brand-small-flower { width: 3rem; height: 5rem; object-fit: contain; margin-top: 2rem; margin-inline: auto; pointer-events: none; }