/* ============================================================
   SANO | Quote — CSS panel
   ============================================================ */

.sano-quote {
  container-type: inline-size;
  container-name: sano-quote;

  /* ---- MOTION TOKENS — shared across every Sano module ---- */
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --dur-reveal: 1000ms;
  --reveal-step: 120ms;

  /* ---- TYPOGRAPHY — replace "inherit" with the theme font ---- */
  --q-font: inherit;

  /* Leading. Big text wants tighter leading than small text, so
     these two do not match on purpose. Two numbers to tune. */
  --q-lh: 1.5;
  --q-lh-mobile: 1.55;

  /* ---- SPACING between the three parts ---- */
  --q-gap-mark: 28px;
  --q-gap-logo: 40px;

  /* ---- FALLBACKS — the live values are printed by the HTML panel ---- */
  --q-size: 22px;
  --q-size-mobile: 18px;
  --q-weight: 400;
  --q-max: 760px;
  --q-mark-w: 32px;
  --q-logo-h: 32px;
  --q-text-color: #0B1B2B;

  /* NO padding here. Horizontal and vertical spacing belongs to
     the dnd section, so this lines up with every other section. */
}

.sano-quote__inner {
  max-width: var(--q-max, 760px);
  margin: 0 auto;
  text-align: center;
}

/* ---- QUOTE MARK ------------------------------------------- */
.sano-quote__mark {
  display: flex;
  justify-content: center;
  margin-bottom: var(--q-gap-mark, 28px);
}

.sano-quote__mark img {
  display: block;
  width: var(--q-mark-w, 32px);
  height: auto;
  max-width: 100%;
}

/* ---- QUOTE ------------------------------------------------
   The reset is deliberately heavy-handed. Themes decorate
   <blockquote> by default — a coloured left rule, a left pad, an
   italic, sometimes generated quote glyphs — and the theme
   stylesheet is off limits, so the module has to defend itself.
   The left pad is also what pushes the text off centre.
----------------------------------------------------------- */
.sano-quote__text {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  quotes: none;
  color: var(--q-text-color, #0B1B2B);
  font-family: var(--q-font);
  font-size: var(--q-size, 22px);
  font-style: normal;
  font-weight: var(--q-weight, 400);
  line-height: var(--q-lh, 1.5);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.sano-quote__text::before,
.sano-quote__text::after { content: none; }

.sano-quote__text p {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}

/* ---- LOGO ------------------------------------------------- */
.sano-quote__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--q-logo-h, 32px);
  margin-top: var(--q-gap-logo, 40px);
}

.sano-quote__logo img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* ---- NARROW SCREENS ---------------------------------------
   The tokens are set on __inner, not on .sano-quote: a container
   query can style the container's descendants but never the
   container itself. Custom properties inherit down from there.

   ONE NUMBER TO TUNE: the 600px, and the same 600px in the
   @supports fallback at the bottom of this file.
----------------------------------------------------------- */
@container sano-quote (max-width: 600px) {
  .sano-quote__inner {
    --q-gap-mark: 20px;
    --q-gap-logo: 32px;
  }

  .sano-quote__text {
    font-size: var(--q-size-mobile, 18px);
    line-height: var(--q-lh-mobile, 1.55);
  }
}

/* ---- SCROLL REVEAL ----------------------------------------
   Hidden state carries no transition, or adding .is-ready fades
   the quote out for a second before it fades back in. The delay
   lives on .is-visible, the state each part transitions INTO —
   that is what staggers them.
----------------------------------------------------------- */
.sano-quote.is-ready .sano-quote__mark,
.sano-quote.is-ready .sano-quote__text,
.sano-quote.is-ready .sano-quote__logo {
  opacity: 0;
  transform: translateY(24px);
}

.sano-quote.is-ready .sano-quote__mark.is-visible,
.sano-quote.is-ready .sano-quote__text.is-visible,
.sano-quote.is-ready .sano-quote__logo.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-reveal) var(--ease-soft),
              transform var(--dur-reveal) var(--ease-soft);
  transition-delay: calc(var(--i, 0) * var(--reveal-step));
}

/* ---- REDUCED MOTION ---------------------------------------
   Zero the tokens, then force the resting state, so the quote is
   never left hidden for someone who asked for less movement.
----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sano-quote { --dur-reveal: 1ms; --reveal-step: 0ms; }

  .sano-quote.is-ready .sano-quote__mark,
  .sano-quote.is-ready .sano-quote__text,
  .sano-quote.is-ready .sano-quote__logo {
    opacity: 1;
    transform: none;
  }
}

/* ---- Fallback for browsers without container queries ------ */
@supports not (container-type: inline-size) {
  @media (max-width: 600px) {
    .sano-quote__inner {
      --q-gap-mark: 20px;
      --q-gap-logo: 32px;
    }

    .sano-quote__text {
      font-size: var(--q-size-mobile, 18px);
      line-height: var(--q-lh-mobile, 1.55);
    }
  }
}