/* ==========================================================================
   QUOTE — a pull quote / testimonial, on its own or in a Contao `swiper`
   ==========================================================================
   Text element `quote`. Two marks, one component:

     authored mark   <p class="quote-mark">&ldquo;</p><blockquote><p>…</p>
                     </blockquote><cite>— Name</cite>
                     The mark is a big accent glyph in its own column; the
                     quote runs to 900px.
     drawn mark      `quote quote--drawn`: <blockquote><p>…</p><p class="cite">
                     Name, role</p></blockquote> [+ <p><a class="btn">]
                     The mark is drawn by CSS and the first line indents to
                     clear it; quote and attribution share --quote-color.
                     Pairs with an image `col-1-2` in a `row` for quote + photo.

   Colours: --quote-color (the quote text, default --heading) and
   --quote-mark-color (default --accent). `quote--drawn` sets both to
   --accent-deep, the deep-accent serif quote.
   ========================================================================== */
.quote {
  --quote-color: var(--heading);
  --quote-mark-color: var(--accent);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(20px, 2.4vw, 32px);

  .rte { display: contents; }
  .quote-mark {
    grid-row: 1 / 3;
    margin: 0;
    color: var(--quote-mark-color);
    font-size: clamp(5rem, 8vw, 8.125rem);
    font-weight: 800;
    line-height: 0.75;
  }
  blockquote { max-width: 900px; margin: 0; padding-top: 16px; }   /* sits the quote just under the mark's top */
  blockquote p {
    color: var(--quote-color);
    font-size: clamp(1.25rem, 1.9vw, 1.625rem);
    font-weight: 500;
    line-height: 1.45;
  }
  cite {
    display: block;
    margin-top: 1.4em;
    color: var(--text-body);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 600;
  }
}

/* ---- Drawn mark ----------------------------------------------------------- */
.quote--drawn {
  --quote-color: var(--accent-deep);
  --quote-mark-color: var(--accent-deep);
  display: block;

  .rte { display: block; }
  blockquote { position: relative; max-width: none; padding-top: 0.5em; }
  blockquote::before {
    content: "\201C";
    position: absolute;
    top: -0.15em; left: -0.04em;
    font-family: var(--type-display);
    font-size: 3.5rem; line-height: 1;
    color: var(--quote-mark-color);
    pointer-events: none;
  }
  blockquote > p:first-of-type {
    font-family: var(--type-display);
    font-size: clamp(1.35rem, 2.6vw, 2rem);
    line-height: 1.32;
    margin: 0 0 1em;
    text-indent: 1.1em;                 /* clear the mark on line 1 */
  }
  blockquote .cite, blockquote > p:last-child {
    font-family: var(--type-body);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--quote-color);
    margin: 0;
  }
  blockquote strong { font-weight: 700; }

  a.btn { margin-top: 1.5rem; margin-bottom: 0; }
}

/* ---- In a swiper: two 44px circle arrows beside the quote ----------------- */
/* An outline "previous" and a filled "next", centred on the quote at the
   right. Swiper hides them while there is only one slide; set the slider to
   loop (Continuous) so neither arrow goes dead. */
.content-swiper {
  .swiper-button-prev,
  .swiper-button-next {
    top: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0;
    border: 1.5px solid var(--heading);
    border-radius: 50%;
    color: var(--heading);
    transition: background-color 0.2s ease, color 0.2s ease;

    /* text arrows, not Swiper's chevron (an injected <svg>) */
    svg { display: none; }
    &::after { font-family: var(--type-body); font-size: 16px; font-weight: 600; }
    &:hover { background: var(--heading); color: var(--accent); }
    &.swiper-button-disabled { opacity: 0.35; }
  }
  .swiper-button-prev { left: auto; right: 108px; &::after { content: "\2190"; } }
  .swiper-button-next {
    right: 54px;
    background: var(--heading);
    color: var(--accent);
    &::after { content: "\2192"; }
    &:hover { background: var(--second); border-color: var(--second); }
  }
  .swiper-pagination { display: none; }
  /* room for the arrows beside the quote */
  .swiper:has(.swiper-button-next:not(.swiper-button-lock)) .quote { padding-right: 180px; }
}

@media (max-width: 700px) {
  /* the arrows move under the quote */
  .content-swiper {
    .swiper { padding-bottom: 64px; }
    .swiper-button-prev,
    .swiper-button-next { top: auto; bottom: 0; margin: 0; }
    .swiper-button-prev { right: 54px; }
    .swiper-button-next { right: 0; }
    .swiper:has(.swiper-button-next:not(.swiper-button-lock)) .quote { padding-right: 0; }
  }
}