/*
 * Cards layouts and styles (cards sections, set in the editor).
 *
 * settings.layout
 *   carousel: slide | center | fade | stack   manual (arrows, dots, swipe, keys)
 *   scroll:   horizontal | stack | focus       driven by the page scroll, on the
 *             "items one by one" (pin) engine of motion.js (screens >= 900 px;
 *             smaller screens and reduced motion show the grid)
 * settings.card_style
 *   elevated | outline | accent | numbered | glass | gradient | solid
 *
 * Loaded only when a section uses one of them (always in the editor preview,
 * so a style chosen in the editor shows at once).
 */

/* ================= Card styles ================= */
.cards-style-elevated>.card{border-color:transparent;border-radius:calc(var(--card-radius,16px) + 6px);box-shadow:0 20px 50px var(--shadow-color,rgb(11 38 61 / .12))}
.cards-style-elevated>.card:hover{box-shadow:0 30px 70px var(--shadow-color,rgb(11 38 61 / .18))}

.cards-style-outline>.card{background:transparent;border:1.5px solid color-mix(in srgb,currentColor 18%,transparent);box-shadow:none}
.cards-style-outline>.card:hover{border-color:var(--color-secondary);box-shadow:none}
.cards-style-outline .card-icon{background:transparent;color:var(--color-secondary);border:1.5px solid currentColor}

.cards-style-accent>.card{border-top:4px solid var(--color-secondary);border-radius:calc(var(--card-radius,16px) - 4px)}
.cards-style-accent .card-icon{background:color-mix(in srgb,var(--color-secondary) 14%,transparent);color:var(--color-secondary);border-radius:14px}

.cards-style-numbered{counter-reset:qweb-card}
.cards-style-numbered>.card{position:relative;counter-increment:qweb-card;overflow:hidden}
.cards-style-numbered>.card::before{content:counter(qweb-card,decimal-leading-zero);position:absolute;top:14px;right:20px;font:800 3.2rem/1 var(--font-heading,inherit);letter-spacing:-.04em;color:color-mix(in srgb,var(--color-secondary) 28%,transparent);pointer-events:none}
.cards-style-numbered>.card h3{position:relative;padding-right:3.6rem}

.cards-style-glass>.card{background:color-mix(in srgb,var(--color-surface,#fff) 55%,transparent);border:1px solid color-mix(in srgb,#fff 45%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 18px 45px rgb(0 0 0 / .10)}
.text-light .cards-style-glass>.card,.bg-primary .cards-style-glass>.card{background:rgb(255 255 255 / .08);border-color:rgb(255 255 255 / .18)}

.cards-style-gradient>.card{background:linear-gradient(140deg,var(--color-primary),var(--color-primary-dark));border-color:transparent;color:#fff}
.cards-style-gradient>.card h3,.cards-style-gradient>.card p{color:#fff}
.cards-style-gradient>.card p{opacity:.86}
.cards-style-gradient .card-icon{background:rgb(255 255 255 / .16);color:#fff}

/* Solid: the theme colours inverted, without the gradient. */
.cards-style-solid>.card{background:var(--color-primary);border-color:transparent;color:#fff}
.cards-style-solid>.card h3,.cards-style-solid>.card p{color:#fff}
.cards-style-solid>.card p{opacity:.86}
.cards-style-solid .card-icon{background:var(--color-secondary);color:#fff}
.cards-style-solid>.card:hover{background:var(--color-primary-dark)}

/* ================= Carousel (manual) ================= */
.cl-stage{position:relative}
.cards-carousel{--cl-gap:24px;position:relative;display:flex;gap:var(--cl-gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline:none;padding-block:14px 18px}
.cards-carousel::-webkit-scrollbar{display:none}
.cards-carousel:focus-visible{outline:3px solid color-mix(in srgb,var(--color-secondary,#E67E22) 45%,transparent);outline-offset:4px;border-radius:var(--card-radius,16px)}
.cards-carousel>.card{flex:0 0 calc((100% - 2 * var(--cl-gap)) / 3);scroll-snap-align:start;min-width:0;display:flex;flex-direction:column}
.cards-carousel>.card:hover{transform:none}

/* Strip: soft edges show there is more. */
.cl-ready.cards-effect-slide{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%)}
@media(max-width:1024px){.cards-effect-slide>.card{flex-basis:calc((100% - var(--cl-gap)) / 2)}}
@media(max-width:640px){.cards-effect-slide>.card{flex-basis:84%}}

/* Center focus */
.cards-effect-center{--cl-w:min(560px,62vw);padding-inline:calc((100% - var(--cl-w)) / 2);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%)}
.cards-effect-center>.card{flex-basis:var(--cl-w);scroll-snap-align:center;padding:38px;transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .55s ease,box-shadow .55s ease,filter .55s ease;transform:scale(.84);opacity:.5;filter:saturate(.6)}
.cards-effect-center>.card.is-active{transform:none;opacity:1;filter:none;box-shadow:0 28px 70px var(--shadow-color,rgb(11 38 61 / .18))}
.cards-effect-center>.card h3{font-size:1.45rem}
@media(max-width:640px){.cards-effect-center{--cl-w:78vw;-webkit-mask-image:none;mask-image:none}.cards-effect-center>.card{padding:28px}}

/* Fade and deck: the cards share one place; JavaScript moves the active one. */
.cl-ready.cards-effect-fade,.cl-ready.cards-effect-stack{display:grid;grid-template-columns:1fr;overflow:visible;scroll-snap-type:none;max-width:680px;margin-inline:auto}
.cl-ready.cards-effect-fade>.card,.cl-ready.cards-effect-stack>.card{grid-area:1/1;width:100%;padding:40px}
.cl-ready.cards-effect-fade>.card h3,.cl-ready.cards-effect-stack>.card h3{font-size:1.5rem}
.cl-ready.cards-effect-fade>.card{opacity:0;visibility:hidden;transform:translateY(16px) scale(.98);filter:blur(4px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1),filter .7s ease,visibility 0s linear .7s}
.cl-ready.cards-effect-fade>.card.is-active{opacity:1;visibility:visible;transform:none;filter:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1),filter .7s ease,visibility 0s}
.cl-ready.cards-effect-stack{padding-bottom:40px}
.cl-ready.cards-effect-stack>.card{transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .6s ease;transform-origin:50% 100%;opacity:0;visibility:hidden}
.cl-ready.cards-effect-stack>.card[data-cl-pos="0"]{z-index:3;opacity:1;visibility:visible;transform:none;box-shadow:0 24px 60px var(--shadow-color,rgb(11 38 61 / .16))}
.cl-ready.cards-effect-stack>.card[data-cl-pos="1"]{z-index:2;opacity:.9;visibility:visible;transform:translateY(16px) scale(.95) rotate(-1.5deg)}
.cl-ready.cards-effect-stack>.card[data-cl-pos="2"]{z-index:1;opacity:.7;visibility:visible;transform:translateY(32px) scale(.9) rotate(1.5deg)}
.cl-ready.cards-effect-stack>.card.cl-leaving{z-index:4;opacity:0;visibility:visible;transform:translateX(-120%) rotate(-9deg)}
.cl-ready.cards-effect-stack>.card.cl-leaving.cl-back{transform:translateX(120%) rotate(9deg)}

/* Controls (added by cards-layout.js): side arrows, counter, progress, dots. */
.cl-arrow{position:absolute;top:50%;z-index:5;display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;padding:0;border:0;border-radius:50%;background:var(--color-background,#fff);color:var(--color-text,#17212b);box-shadow:0 10px 30px rgb(0 0 0 / .14);cursor:pointer;transform:translateY(-50%);transition:transform .25s ease,background .25s ease,color .25s ease}
.cl-prev{left:-18px}
.cl-next{right:-18px}
.cl-arrow:hover{background:var(--color-secondary,#E67E22);color:#fff;transform:translateY(-50%) scale(1.06)}
.cl-arrow:focus-visible{outline:3px solid color-mix(in srgb,var(--color-secondary,#E67E22) 55%,transparent);outline-offset:3px}
.cl-arrow svg{width:20px;height:20px;fill:currentColor}
.cards-effect-fade~.cl-prev,.cards-effect-stack~.cl-prev{left:calc(50% - 340px - 76px)}
.cards-effect-fade~.cl-next,.cards-effect-stack~.cl-next{right:calc(50% - 340px - 76px)}
.cl-bar{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:26px}
.cl-counter{font:700 .95rem/1 var(--font-heading,inherit);letter-spacing:.06em;font-variant-numeric:tabular-nums;min-width:4.5em;text-align:center}
.cl-counter b{color:var(--color-secondary,#E67E22);font-size:1.25rem}
.cl-progress{position:relative;width:min(220px,40vw);height:3px;border-radius:999px;background:color-mix(in srgb,currentColor 14%,transparent);overflow:hidden}
.cl-progress span{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--cl-progress,0));background:var(--color-secondary,#E67E22);border-radius:inherit;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.cl-dots{display:flex;gap:8px}
.cl-dot{width:9px;height:9px;padding:0;border:0;border-radius:999px;background:color-mix(in srgb,currentColor 25%,transparent);cursor:pointer;transition:width .3s ease,background .3s ease}
.cl-dot[aria-current="true"]{width:26px;background:var(--color-secondary,#E67E22)}
.cl-dot:focus-visible{outline:2px solid var(--color-secondary,#E67E22);outline-offset:3px}
.cl-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:900px){
  .cl-arrow{position:static;transform:none;width:44px;height:44px}
  .cl-arrow:hover{transform:scale(1.06)}
  .cl-stage{display:grid;grid-template-columns:1fr auto auto;grid-template-areas:"track track track" ". prev next";gap:14px 10px}
  .cl-stage>.cards-carousel{grid-area:track}
  .cl-stage>.cl-prev{grid-area:prev}
  .cl-stage>.cl-next{grid-area:next}
  .cl-bar{justify-content:flex-start;margin-top:-58px;min-height:44px}
  .cl-dots{display:none}
}

/* ================= Scroll layouts (pin engine, desktop) ================= */
/* Horizontal: the row of cards travels sideways while the page scrolls. */
section.qm-pin[data-pin-effect="horizontal"]{overflow-x:clip}
.qm-pin .cards-scroll-horizontal{display:flex;gap:24px;will-change:transform;transform:translate3d(calc(var(--qm-pin,0) * (var(--cl-count,3) - var(--cl-view,3)) * (100% + 24px) / var(--cl-view,3) * -1),0,0)}
.qm-pin .cards-scroll-horizontal>.card{flex:0 0 calc((100% - (var(--cl-view,3) - 1) * 24px) / var(--cl-view,3));opacity:1;transform:none}
.qm-pin .cards-scroll-horizontal>.card:hover{transform:none}

/* Stack: each card rises and settles on top of the previous ones. */
.qm-pin .cards-scroll-stack{display:grid;grid-template-columns:1fr;max-width:720px;margin-inline:auto;padding-bottom:70px}
.qm-pin .cards-scroll-stack>.card{grid-area:1/1;padding:40px;opacity:min(1,calc(var(--qm-item,0) * 2.5));transform:translate3d(0,calc((1 - var(--qm-item,0)) * 130% + var(--cl-i,0) * 12px),0) scale(calc(.9 + var(--cl-i,0) * .02));box-shadow:0 -10px 40px var(--shadow-color,rgb(11 38 61 / .10))}
.qm-pin .cards-scroll-stack>.card:first-child{opacity:1;transform:scale(.9)}
.qm-pin .cards-scroll-stack>.card h3{font-size:1.5rem}
.cards-scroll-stack>.card:nth-child(1){--cl-i:0;z-index:1}
.cards-scroll-stack>.card:nth-child(2){--cl-i:1;z-index:2}
.cards-scroll-stack>.card:nth-child(3){--cl-i:2;z-index:3}
.cards-scroll-stack>.card:nth-child(4){--cl-i:3;z-index:4}
.cards-scroll-stack>.card:nth-child(5){--cl-i:4;z-index:5}
.cards-scroll-stack>.card:nth-child(6){--cl-i:5;z-index:6}
.cards-scroll-stack>.card:nth-child(n+7){--cl-i:5;z-index:7}

/* Focus: all cards in view; the current one grows and lights up in turn. */
.qm-pin .cards-scroll-focus>.card{opacity:calc(.38 + .62 * var(--qm-focus,1));transform:scale(calc(.93 + .09 * var(--qm-focus,1)));border-color:color-mix(in srgb,var(--color-secondary,#E67E22) calc(var(--qm-focus,0) * 100%),var(--color-border,#e3e8ee));box-shadow:0 calc(8px + var(--qm-focus,0) * 22px) calc(24px + var(--qm-focus,0) * 40px) var(--shadow-color,rgb(11 38 61 / .14))}
.qm-pin .cards-scroll-focus>.card:hover{transform:scale(calc(.93 + .09 * var(--qm-focus,1)))}

@media (prefers-reduced-motion:reduce){
  .cards-carousel{scroll-behavior:auto}
  .cards-carousel>.card,.cl-dot,.cl-arrow,.cl-progress span{transition:none!important}
}