/**
 * Section Rotating Text — block layout.
 *
 * Lives in custom-assets/ rather than resources/assets/sass/ for the same
 * reason as infographie-fixes.css: the deployment channel is FTP-only, no
 * Node/webpack build is available, so static/ cannot be rebuilt. Webpack
 * watches only resources/assets/{js,sass}/, never this directory.
 *
 * Loaded by app/config/wp/section-rotating-text-css.php — on the front for
 * infographie/integrations singles, and in the block editor so the preview
 * lays out like the front.
 *
 * Breakpoint 1025px mirrors the theme's own bp-medium
 * (resources/assets/sass/_variables.sass:24), which is what the
 * medium-w-full / medium-flex-col helper classes in the markup key on.
 */

/* ---------------------------------------------------------------------
   Vertical centring
   ---------------------------------------------------------------------
   .sectionContent is a fixed-height box (100vh - 80px, see
   resources/assets/sass/_infographie.sass:26) and does nothing to centre
   its children, so each block centres its own. The markup already carries
   `flex item-center`; what was missing is the height chain, without which
   align-items has no free space to distribute and the row collapses to
   the top of the slide.

   This is the sectionGoodNews convention verbatim
   (resources/assets/sass/blocks/_sectionGoodNews.sass:1-4): height 100% on
   the page-container, height 100% on the flex row. Below 1025px
   .sectionContent switches to height:auto with vertical padding, so these
   resolve to auto and the stacked layout flows — which is why
   sectionGoodNews needs no override at that breakpoint either.
   --------------------------------------------------------------------- */
.sectionRotatingText {
    height: 100%;
}

.sectionRotatingText-ctt {
    height: 100%;
    gap: 40px;
}

/* ---------------------------------------------------------------------
   The ring
   ---------------------------------------------------------------------
   No explicit height: the inline <svg> carries viewBox="0 0 500 500", so
   at width:100% it derives its own height and stays square. That is also
   why the block never needs aspect-ratio here.

   The 70vh cap is what keeps the section inside a fullpage.js slide on
   short, wide screens — without it a 520px ring plus the stacked title
   and text can exceed the viewport and the slide scrolls internally.
   --------------------------------------------------------------------- */
.sectionRotatingText-circle {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-width: min(520px, 70vh);
    margin: 0 auto;
}

.sectionRotatingText-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    animation: qqfRtSpin 34s linear infinite;
}

/* The font-size and dy are computed per instance in the Twig and land as
   presentation attributes on the <text> element — do not set font-size
   here, a CSS declaration would override the attribute and break the
   length calibration.

   letter-spacing MUST stay in em. The Twig derives the glyph advance
   constant K = 0.63 from a 0.168em spacing; switching to px would make
   the constant wrong at every computed font-size but 28.5px.

   Deliberately no text-transform: the editorial team types the casing it
   wants. Capitals are wider than the K estimate, but textLength on the
   <textPath> absorbs the difference. */
.sectionRotatingText-svg .sectionRotatingText-text {
    fill: currentColor;
    font-weight: 700;
    letter-spacing: 0.168em;
}

@keyframes qqfRtSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .sectionRotatingText-svg {
        animation: none;
    }
}

/* ---------------------------------------------------------------------
   The centre
   ---------------------------------------------------------------------
   A sibling of the <svg>, not a child, so it stays still while the ring
   turns. 46% of the ring box: the glyphs occupy the band between roughly
   74% and 86% of the box width, so this leaves a clear margin at every
   font size.

   At rest the disc is transparent, so the label is read against the
   section background and inherits Text Color — the same contrast the rest
   of the section already relies on. Only the filled hover state needs a
   different colour, handled in the Twig's inline <style>.

   46% is roughly twice the ratio of the visual reference, whose centre is
   28% of the ring diameter. That was a deliberate trade: this block's
   centre has to hold editor-written text, not just a two-word label, and
   a 28% disc would overflow quickly. Narrowing it is a one-value change
   here if the airier reference proportion is preferred.
   --------------------------------------------------------------------- */
.sectionRotatingText-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 46%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    padding: 6%;
    line-height: 1.25;
}

/* Outline at rest, filled on hover. border-color and the hover colours are
   per-block and come from the inline <style> in the Twig; currentColor is
   the fallback if Circle Color is ever left empty.

   2px is the thin stroke of the visual reference transposed: the reference
   draws ~1px on a 160px disc (0.6% of the diameter), which on this 239px
   disc would be 1.5px — a width that renders blurry on non-Retina
   screens. 2px is the nearest crisp step.

   box-sizing: border-box is set on .sectionRotatingText-center above, so
   adding the border does not change the disc diameter. */
.sectionRotatingText-center--disc {
    border-radius: 50%;
    overflow: hidden;
    background-color: transparent;
    border: 2px solid currentColor;
    transition: background-color 0.35s ease, color 0.35s ease;
}

a.sectionRotatingText-center--disc {
    color: inherit;
    text-decoration: none;
}

.sectionRotatingText-center--image {
    padding: 0;
}

.sectionRotatingText-center--image img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

/* ---------------------------------------------------------------------
   Right column — same rhythm as the other sections' title + text pair
   --------------------------------------------------------------------- */
.sectionRotatingText-title {
    margin-bottom: 20px;
}

.sectionRotatingText-title p:last-child,
.sectionRotatingText-text-ctt p:last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------
   Stacked layout — matches the medium-flex-col / medium-w-full helpers
   --------------------------------------------------------------------- */
@media only screen and (max-width: 1025px) {
    .sectionRotatingText-ctt {
        gap: 24px;
    }

    .sectionRotatingText-circle {
        max-width: min(380px, 48vh);
    }

    .sectionRotatingText-textCol {
        text-align: center;
    }
}