/* ==========================================================================
   COMPONENT / FLORAL DECORATION
   Positioning for the decorative corner illustrations (non-critical,
   aria-hidden images). Kept separate so it's easy to disable/trim on
   pages where the illustration would clutter dense content (e.g. tables).
   ========================================================================== */
.floral-decoration {
  position: absolute;
  width: auto;
  height: auto;
  pointer-events: none;
  z-index: var(--z-decoration);
}

.floral-decoration.top-right {
  top: -20px;
  right: 0;
}

.floral-decoration.top-left {
  top: -80px;
  left: 0;
}

/* ==========================================================================
   RESPONSIVE — Floral decoration
   Purely decorative (aria-hidden); shrink on tablet and hide on small
   mobile so it never overlaps or crowds real content.
   ========================================================================== */
@media (max-width: 1023px) {
  .floral-decoration {
    transform: scale(0.7);
  }

  .floral-decoration.top-right {
    transform-origin: top right;
  }

  .floral-decoration.top-left {
    transform-origin: top left;
  }
}

@media (max-width: 599px) {
  .floral-decoration {
    display: none;
  }
}