/* ==========================================================================
   Botanical Illustrations - Positioned organically along edges
   ========================================================================== */

/* -------------------------------------------------------------------------
   Botanicals Container
   ------------------------------------------------------------------------- */

.botanicals {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-behind);
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   Base botanical styles
   ------------------------------------------------------------------------- */

.botanical {
  position: absolute;
  opacity: 0.22;
  filter: saturate(0.75) brightness(1.05);
}

/* -------------------------------------------------------------------------
   Left side botanicals
   ------------------------------------------------------------------------- */

/* Branch at top left - rotated to come in from left edge */
.botanical--left-top {
  top: 8%;
  left: -8%;
  width: clamp(150px, 20vw, 280px);
  transform: rotate(-30deg);
}

/* Vine in middle left */
.botanical--left-mid {
  top: 45%;
  left: -12%;
  width: clamp(180px, 25vw, 350px);
  transform: rotate(75deg);
}

/* -------------------------------------------------------------------------
   Right side botanicals
   ------------------------------------------------------------------------- */

/* Branch at top right - mirrored and rotated */
.botanical--right-top {
  top: 15%;
  right: -10%;
  width: clamp(140px, 18vw, 250px);
  transform: rotate(40deg) scaleX(-1);
}

/* Flower-2 (chrysanthemum) on right side */
.botanical--right-mid {
  top: 55%;
  right: -5%;
  width: clamp(120px, 16vw, 220px);
  transform: rotate(-10deg);
}

/* -------------------------------------------------------------------------
   Accent botanicals
   ------------------------------------------------------------------------- */

/* Tulips at bottom left */
.botanical--bottom-left {
  bottom: 5%;
  left: -3%;
  width: clamp(100px, 14vw, 180px);
  transform: rotate(15deg);
  opacity: 0.18;
}

/* -------------------------------------------------------------------------
   Responsive - fade and hide on smaller screens
   ------------------------------------------------------------------------- */

@media (max-width: 72rem) {
  .botanical {
    opacity: 0.15;
  }
  
  .botanical--left-mid,
  .botanical--right-mid {
    display: none;
  }
}

@media (max-width: 48rem) {
  .botanicals {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   Section title decorations
   ------------------------------------------------------------------------- */

.section__title::after {
  content: '';
  display: block;
  width: 2.5rem;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--color-sage-light),
    transparent
  );
  margin-top: var(--space-sm);
  border-radius: var(--radius-full);
}

.section__header--offset-right .section__title::after {
  margin-left: auto;
  background: linear-gradient(
    270deg,
    var(--color-sage-light),
    transparent
  );
}

.section__header--center .section__title::after {
  margin-inline: auto;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-sage-light),
    transparent
  );
}