/* ==========================================================================
   COMPONENT: Quote / Highlight
   Tinted background with botanical fern SVGs, glassmorphism card
   ========================================================================== */

/* ------------------------------------------------------------------
   SECTION — Tinted surface to contrast from white sections
   ------------------------------------------------------------------ */

.c-quote {
  position: relative;
  background-color: var(--color-surface-container-low);
  overflow: hidden;
}

/* ------------------------------------------------------------------
   BOTANICAL BACKGROUND — Fern / sõnajalg SVGs
   ------------------------------------------------------------------ */

.c-quote__botanicals {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.c-quote__fern {
  position: absolute;
  height: 100%;
  width: auto;
  min-width: 300px;
  color: var(--color-primary);
  opacity: 1;
}

.c-quote__fern--left {
  left: 5%;
  top: 0;
}

.c-quote__fern--right {
  right: 5%;
  top: 0;
  transform: scaleX(-1);
}

/* ------------------------------------------------------------------
   CARD — Glassmorphism centered panel
   ------------------------------------------------------------------ */

.c-quote__card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 860px;
  margin-inline: auto;
  padding: var(--space-16) var(--space-12);
  background-color: rgba(252, 249, 241, 0.55);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border-radius: var(--radius-xl);
  box-shadow:
    0 8px 60px rgba(23, 49, 36, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ------------------------------------------------------------------
   ICON — Decorative element above quote
   ------------------------------------------------------------------ */

.c-quote__icon {
  margin-bottom: var(--space-6);
  color: var(--color-tertiary);
  opacity: 0.8;
}

.c-quote__icon svg {
  width: 36px;
  height: 36px;
}

/* ------------------------------------------------------------------
   QUOTE TEXT — Serif italic, large
   ------------------------------------------------------------------ */

.c-quote__text {
  margin: 0;
}

.c-quote__text p {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.25;
  font-weight: 400;
  font-style: italic;
  color: var(--color-primary);
  max-width: 22ch;
  margin-inline: auto;
}

/* ------------------------------------------------------------------
   DIVIDER — Short horizontal rule
   ------------------------------------------------------------------ */

.c-quote__divider {
  width: 48px;
  height: 1.5px;
  background-color: var(--color-outline-variant);
  margin-top: var(--space-8);
  margin-bottom: var(--space-5);
}

/* ------------------------------------------------------------------
   AUTHOR — Attribution below divider
   ------------------------------------------------------------------ */

.c-quote__author {
  color: var(--color-on-surface-variant);
  letter-spacing: var(--text-label-sm-tracking);
}

/* ------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------ */

@media (max-width: 1024px) {
  .c-quote__card {
    padding: var(--space-12) var(--space-8);
  }

  .c-quote__fern {
    min-width: 220px;
  }
}

@media (max-width: 768px) {
  .c-quote__card {
    padding: var(--space-10) var(--space-6);
    background-color: rgba(252, 249, 241, 0.65);
  }

  .c-quote__fern--left {
    left: -5%;
  }

  .c-quote__fern--right {
    right: -5%;
  }

  .c-quote__text p {
    max-width: none;
  }
}

@media (max-width: 480px) {
  .c-quote__card {
    padding: var(--space-8) var(--space-4);
  }

  .c-quote__fern {
    min-width: 180px;
    opacity: 0.7;
  }
}