/* =========================================================
   quote-overlay.css (UPDATED — balanced line lengths)
   Constrains quote width for better typography across devices
   ========================================================= */

#page-edit-parallax { position: relative; }

#quote-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 6%;
  pointer-events: none;
  z-index: 6;
}

.quote-box {
  /* Constrain width for balanced line lengths */
  max-width: min(34vw, 680px);   /* roughly 1/3 screen on desktop */
  width: 100%;
  margin: 0 auto;

  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

.quote-box.show { opacity: 1; }

.quote-text {
  font-family: 'AvenirNext', 'Avenir Next', Avenir, sans-serif;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #FFCD05;
  text-shadow: 1px 1px 2px #111;
  line-height: 1.6;

  /* Typography controls */
  text-wrap: balance;        /* modern browsers: balances line breaks */
  word-break: normal;
  overflow-wrap: normal;
}

.quote-author {
  margin-top: 14px;
  font-family: 'AvenirNext', 'Avenir Next', Avenir, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.20em;
  color: #FFCD05;
  font-style: italic;
  text-transform: none;
  opacity: 0.95;
  text-shadow: 1px 1px 2px #111;

  text-wrap: balance;
}

/* Tablet */
@media (max-width: 1024px) {
  .quote-box { max-width: 70vw; }
}

/* Mobile */
@media (max-width: 768px) {
  #quote-overlay { padding: 0 10%; }
  .quote-box { max-width: 88vw; }
}

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


/* =========================================================
   QUOTE LINE-BREAK / WIDTH BALANCE (Jan 2026)
   Goal: Avoid awkward single-word wrap lines by constraining
   measure and enabling balanced line wrapping when supported.
   ========================================================= */

/* Constrain quote measure to a comfortable width that scales by device */
#quote-overlay .quote-box{
  max-width: min(33vw, 52ch);   /* ~1/3 viewport, but never wider than readable measure */
}

/* Improve wrapping aesthetics */
#quote-overlay .quote-text{
  text-wrap: balance;           /* modern browsers: balances ragged lines */
  overflow-wrap: break-word;    /* prevents overflow on long words */
  hyphens: auto;
}

/* Slightly tighter tracking for multi-line quotes (keeps style consistent) */
@media (max-width: 900px){
  #quote-overlay .quote-box{
    max-width: min(80vw, 46ch);
  }
}

/* On very wide screens, prevent overly long single-line quotes */
@media (min-width: 1400px){
  #quote-overlay .quote-box{
    max-width: min(28vw, 56ch);
  }
}