/* COR Solutions Interactive — v1.3.5
   ---------------------------------------------------------------------------
   Drives any "list + image deck" section. Everything below is generic: the JS
   tags the Icon List with .cor-sol-list, so no CSS IDs appear here except in
   the per-section theming block at the bottom.

   Each section sets its own look through custom properties. The defaults are
   the home page Solutions values, so that section behaves exactly as in 1.2.
   ------------------------------------------------------------------------- */

/* Defaults on :root, not on .cor-sol-list. The list and the gallery are
   siblings, so a variable defined on the list never reaches the deck — the
   stack's aspect-ratio silently resolves to nothing and it collapses to 0px. */
:root {
    --sol-line: 67.5px;                 /* resting line box: 45px x 1.5 */
    /* Measured off the live render, where both faces sit at the Icon List's own
       43px: Utile gives a 30px cap and 22px x-height, Playfair 34px and 24px —
       13% and 9% larger at the SAME nominal size. Equal cap height wants 37.9px,
       equal x-height 39.4px. 38 matches the cap, which is the more visible
       anchor in Title Case. */
    --sol-active-size: 38px;
    --sol-active-family: "playfair-display", "Playfair Display", serif;
    --sol-active-spacing: 1px;
    --sol-active-color: inherit;
    --sol-dim: .55;                     /* opacity of the rows that are not active */
    --sol-radius: 12px;                 /* deck corner radius */
    --sol-ratio: 16 / 10;               /* deck aspect ratio */
}

/* 1) The list ------------------------------------------------------------- */

.cor-sol-list .elementor-icon-list-item { position: relative; cursor: default; }
.cor-sol-list .elementor-icon-list-item a { cursor: pointer; }

.cor-sol-list .elementor-icon-list-text {
    display: inline-block;
    /* Lock the vertical box. The active face is a different family and size, and
       without this the line box changes height and shoves every row below it. */
    line-height: var(--sol-line) !important;
    min-height: var(--sol-line);
    vertical-align: top;
    transition: color .3s ease, opacity .3s ease;
}

/* Every declaration here needs !important, and it is not laziness.
   Elementor writes the Icon List's own typography as
     .elementor-N .elementor-element.elementor-element-XXXX .elementor-icon-list-item > .elementor-icon-list-text
   which is five classes, (0,5,0). This rule is four, (0,4,0), so without
   !important the widget's own font-size and family win and the active row never
   changes size or face at all — the switch you see is only whatever the site's
   own !important font-family rule is doing. No class chain short of absurd beats
   a per-widget Elementor selector, which is why line-height above has always
   carried !important too. */
.cor-sol-list .elementor-icon-list-item.is-active .elementor-icon-list-text {
    font-style: italic !important;
    font-size: var(--sol-active-size) !important;
    letter-spacing: var(--sol-active-spacing) !important;
    font-family: var(--sol-active-family) !important;
    color: var(--sol-active-color);
}

/* The arrow stays out of flow so it can never push the text sideways.

   The transition deliberately lives on the ACTIVE rule below, not here. A
   transition declared on the base state also plays on the way *out*, and
   `font-style` is not an animatable property — so the italic snapped back
   instantly while the arrow took .25s/.35s to fade and slide away. For that
   quarter second the outgoing row sat upright and still carrying an arrow
   beside the incoming italic row: two arrows, on every tick of the auto-cycle.
   (Invisible to anyone trying to reproduce it, because hovering the list stops
   the timer.) Declared only on .is-active, the arrow eases in and snaps out,
   which is exactly what the italic does. */
.cor-sol-list .elementor-icon-list-text::after {
    position: absolute;
    transition: none !important;
}
/* !important for the same reason as the type above, one rung worse. The rule
   that hides the arrow at rest is written with an ID —
     #service .elementor-icon-list-text::after  -> (1,1,0)
   and an ID outranks any number of classes, so this rule at (0,4,0) could never
   reveal it. That is why the arrow showed on hover (its own rule also carries
   the ID) but never on the auto-cycled row. */
.cor-sol-list .elementor-icon-list-item.is-active .elementor-icon-list-text::after {
    opacity: 1 !important;
    transform: translateX(0) !important;
    transition: opacity .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1) !important;
}

/* Quiet the rows that are not active. */
.cor-sol-list.has-active .elementor-icon-list-item:not(.is-active) .elementor-icon-list-text {
    opacity: var(--sol-dim);
}

/* 2) The deck ------------------------------------------------------------- */

.cor-sol-gallery--converted .elementor-widget-container { line-height: 0; }

.cor-sol-stack {
    position: relative;
    width: 100%;
    margin: auto;
    aspect-ratio: var(--sol-ratio);
}
/* The doubled class is deliberate. Elementor's frontend.css carries
       .elementor img { height: auto; border-radius: 0; box-shadow: none; }
   which has exactly the same specificity as `.cor-sol-stack img` — so which one
   wins comes down to stylesheet order, and on the live site Elementor loads
   second. The deck then renders every card at its own aspect ratio: a portrait
   photo in a 16:10 frame becomes twice the height of the deck and hangs out of
   the section. Repeating the class takes this to (0,2,1) and settles it without
   an !important, and without depending on an ancestor. */
.cor-sol-stack.cor-sol-stack img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--sol-radius);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .18);
    user-select: none;
    pointer-events: none;
    will-change: transform, opacity;
}
/* Transitions only after the first paint, so nothing fades in on load. */
.cor-sol-stack.is-ready img {
    transition: transform 1.2s cubic-bezier(.22, 1, .36, 1), opacity .9s ease;
}

/* Deck positions. The rotations are the ones in the comps. */
.cor-sol-stack img         { z-index: 0; opacity: 0; transform: translate(-16px, 10px) scale(.97)  rotate(-2.91deg); }
.cor-sol-stack img.pos3    { z-index: 1; opacity: 1; transform: translate(-16px, 10px) scale(.97)  rotate(-2.91deg); }
.cor-sol-stack img.pos2    { z-index: 2; opacity: 1; transform: translate(-8px, 5px)   scale(.985) rotate(-1.94deg); }
.cor-sol-stack img.pos1    { z-index: 3; opacity: 1; transform: translate(0, 0)        scale(1)    rotate(0deg); }
.cor-sol-stack img.pos-out { z-index: 0; opacity: 0; transform: translate(-22px, 14px) scale(.96)  rotate(-3.5deg); }

/* 3) The unconverted-gallery fallback lives in PHP -------------------------
   The gallery IDs are configuration, so the rules that cap an unconverted
   gallery are printed from cor_sol_fallback_css() and attached to this
   stylesheet. See the note there for why it matters. */

@media (prefers-reduced-motion: reduce) {
    .cor-sol-stack img,
    .cor-sol-list .elementor-icon-list-text,
    .cor-sol-list .elementor-icon-list-item.is-active .elementor-icon-list-text::after { transition: none !important; }
}

/* 4) Per-section theming ---------------------------------------------------
   The only place a CSS ID belongs. Featured Brands on the Products page sits on
   white with Midnight type, so its active row goes Agave rather than inheriting,
   and the resting line box is the comp's 70px rather than the home page's 67.5. */

/* Both the list and its gallery, since the variables are read in two places. */
#featured-brands,
#featured-brands-images {
    --sol-line: 70px;
    /* The comp draws this at 40px. Same measurement as above applies — 38 keeps
       the switch from changing the apparent size. Set it back to 40 here if you
       want the literal comp value. */
    --sol-active-size: 38px;
    --sol-active-color: #259596;
    /* 1, not .45 — this section does NOT dim its resting rows. Sampled off the
       comp, the glyph cores of Herman Miller, Muuto and Dirtt all read #2E4147,
       which is Midnight through antialiasing; Midnight at .45 on white would be
       about #94AEB1, and it is plainly not. The home page still dims, which is
       why this is a per-section value rather than a change to the default. */
    --sol-dim: 1;
    --sol-radius: 10px;
    /* Not the home page's 16/10 — the Products comp draws a squarer fan.

       Figma measures the whole fan at 1227.55 x 864.64 inside the 1980 x 1069
       section, but that box includes the two cards *behind* the front one,
       which sit up to 16px outside it. This ratio is the front card alone, so
       that once the deck is drawn the fan lands back on Figma's box:

         1227.55 / 864.64  ->  fan renders 1245.65 x 900.08   (+1.5% w, +4.1% h)
         1210 / 831        ->  fan renders 1245.12 x 879.00   (+1.4% w, +1.7% h)

       Measured in headless Chromium against these exact transforms, not
       derived on paper. */
    --sol-ratio: 1210 / 831;
}

/* Colour is the one active-row property that needs the ID, and it is the one I
   left out of the !important sweep in 1.3.3 — so the active row kept rendering
   Midnight instead of Agave while its size, face and arrow all changed.

   The generic rule up in section 1 sets `color: var(--sol-active-color)` at
   (0,4,0). Elementor writes the Icon List's own text colour at
     .elementor-N .elementor-element.elementor-element-XXXX
       .elementor-icon-list-item > .elementor-icon-list-text
   which is (0,5,0), so the generic rule loses.

   It is fixed here with an ID rather than by adding !important up there, and
   that is deliberate: the generic default is `color: inherit`, and forcing
   `inherit !important` on every section would break the home page, where the
   active row is meant to keep the colour Elementor gives it. An ID takes this
   to (1,3,0) — one ID outranks any number of classes — and only this section
   is affected.

   Any future section that themes its active colour needs a line like this one.
   Setting --sol-active-color alone is not enough. */
#featured-brands .elementor-icon-list-item.is-active .elementor-icon-list-text {
    color: var(--sol-active-color);
}