/* ============================================================
   ELV Hub - Solutions carousel section
   1:1 port of the approved homepage mockup
   (elv-hub.aiwebdesignz.com  #solutions)

   EVERY component rule is scoped under .elvs (two classes deep).
   That is deliberate: Astra and Elementor ship rules like
   ".entry-content h3" and ".elementor-widget-container p" which are
   also two-specificity and load after this file once LiteSpeed
   combines everything - a bare ".elvs-card__title" silently loses to
   them. Keep the ".elvs " prefix on anything you add here.
   ============================================================ */

.elvs{
  --elvs-blue:#1261A1;
  --elvs-orange:#FF8B00;
  --elvs-amber:#FFC000;
  --elvs-ink:#0F1B2D;
  --elvs-muted:#6B7A8C;
  --elvs-line:#E4EAF1;
  --elvs-bg:#F5F8FB;
  --elvs-radius:18px;
  --elvs-container:1350px;
  --elvs-ease:cubic-bezier(.22,1,.36,1);
  --elvs-shadow-sm:0 4px 14px rgba(10,47,79,.08);
  --elvs-shadow-lg:0 32px 70px -20px rgba(10,47,79,.35);
  --elvs-card-h:520px;
  --elvs-gap:24px;

  /* One place to tune the card's internal rhythm. Every value scales
     with the screen so the type never crowds the button. */
  --elvs-card-pad:clamp(22px,2vw,32px);
  --elvs-card-title:clamp(1.18rem,1.55vw,1.55rem);
  --elvs-title-gap:clamp(14px,1.3vw,20px);
  --elvs-text-gap:clamp(16px,1.5vw,22px);

  position:relative;
  background:var(--elvs-bg);
  overflow:hidden;
  padding:clamp(72px,9vw,120px) 0;
  font-family:Inter,system-ui,-apple-system,sans-serif;
  line-height:1.65;
  font-size:16px;
  color:#3B4A5C;
  -webkit-font-smoothing:antialiased;
}

/* local resets - scoped, never global */
.elvs *,.elvs *::before,.elvs *::after{box-sizing:border-box}
.elvs a{color:inherit;text-decoration:none}
.elvs img{max-width:100%;display:block}
/* <picture> must not take part in layout: the img inside is absolutely positioned. */
.elvs picture{display:contents}
.elvs button{font-family:inherit;cursor:pointer;border:0;background:none;margin:0}

.elvs .elvs__wrap{
  width:min(var(--elvs-container),100% - 40px);
  margin-inline:auto;
}

/* ---------- section head ---------- */
.elvs .elvs__head{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:40px;
  align-items:end;
  margin-bottom:46px;
}
.elvs .elvs__lead{
  justify-self:end;
  max-width:44ch;
  padding-bottom:6px;
  font-size:1.08rem;
  line-height:1.65;
  color:var(--elvs-muted);
  margin:0;
}

.elvs .elvs__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--elvs-blue);
  line-height:1.2;
}
.elvs .elvs__eyebrow::before{
  content:"";
  width:34px;height:3px;
  border-radius:3px;
  background:linear-gradient(90deg,var(--elvs-orange),var(--elvs-amber));
  flex:0 0 auto;
}

.elvs .elvs__title{
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  font-size:clamp(2rem,4.2vw,3.3rem);
  font-weight:800;
  text-transform:none; /* client, 18 Oct: no all-caps headings */
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--elvs-ink);
  margin:18px 0 0;
}
.elvs .elvs__title .elvs__accent{color:var(--elvs-blue)}

/* ---------- carousel ----------
   The rail is full-bleed on the right: its left edge lines up with the
   container, its right edge is the edge of the screen. With
   .elvs{overflow:hidden} that makes the last visible card touch the
   border and the next one peek in from off-screen. */
.elvs .elvs__rail{
  padding-left:max((100% - var(--elvs-container)) / 2, 20px);
  overflow:visible;
}
.elvs .elvs__swiper{overflow:visible}
.elvs .elvs__swiper .swiper-wrapper{align-items:stretch}
/* Slides stretch so every card in a row matches the tallest, and a card
   grows past its minimum when the copy needs the room. */
.elvs .elvs__swiper .swiper-slide{height:auto}

.elvs .elvs-card{
  position:relative;
  min-height:var(--elvs-card-h);
  height:100%;
  border-radius:var(--elvs-radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  padding:var(--elvs-card-pad);
  color:#fff;
  box-shadow:var(--elvs-shadow-sm);
  transition:box-shadow .5s var(--elvs-ease),transform .5s var(--elvs-ease);
  isolation:isolate;
  overflow-wrap:anywhere;
}
.elvs .elvs-card__img{
  position:absolute;
  inset:0;
  width:100%!important;
  height:100%!important;
  max-width:none;
  object-fit:cover;
  object-position:center;
  transition:transform 1.2s var(--elvs-ease);
  z-index:-2;
}
.elvs .elvs-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(7,27,49,.05) 30%,rgba(7,27,49,.92));
  z-index:-1;
  transition:opacity .5s;
}
.elvs .elvs-card:hover,
.elvs .elvs-card:focus-visible{
  transform:translateY(-8px);
  box-shadow:var(--elvs-shadow-lg);
}
.elvs .elvs-card:hover .elvs-card__img,
.elvs .elvs-card:focus-visible .elvs-card__img{transform:scale(1.07)}

.elvs .elvs-card__num{
  position:absolute;
  top:26px;
  left:var(--elvs-card-pad);
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  font-weight:800;
  font-size:.85rem;
  letter-spacing:.14em;
  color:var(--elvs-amber);
  line-height:1;
}
.elvs .elvs-card__ico{
  position:absolute;
  top:22px;right:24px;
  width:48px;height:48px;
  border-radius:12px;
  background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
}
.elvs .elvs-card__ico svg{width:22px;height:22px;display:block}
.elvs .elvs-card__ico i,
.elvs .elvs-card__ico svg.e-font-icon-svg{font-size:22px;line-height:1}

.elvs .elvs-card__title{
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  color:#fff;
  font-size:var(--elvs-card-title);
  font-weight:800;
  text-transform:none;
  line-height:1.1;
  letter-spacing:-.02em;
  margin:0 0 var(--elvs-title-gap);
}
.elvs .elvs-card__text{
  font-size:.92rem;
  line-height:1.6;
  color:rgba(255,255,255,.85);
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .6s var(--elvs-ease),opacity .6s var(--elvs-ease),margin .6s var(--elvs-ease);
  margin:0;
}
.elvs .elvs-card:hover .elvs-card__text,
.elvs .elvs-card:focus-visible .elvs-card__text{
  max-height:260px;
  opacity:1;
  margin:0 0 var(--elvs-text-gap);
}
/* Touch devices have no hover, so the copy is always shown there. */
@media(hover:none){
  .elvs .elvs-card__text{
    max-height:none;
    opacity:1;
    margin:0 0 var(--elvs-text-gap);
  }
}

.elvs .elvs-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:13px 22px;
  border-radius:999px;
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.02em;
  line-height:1.2;
  background:#fff;
  color:var(--elvs-blue);
  transition:transform .35s var(--elvs-ease),background .3s,color .3s;
  position:relative;
  white-space:nowrap;
  flex:0 0 auto;
}
.elvs .elvs-btn svg{width:18px;height:18px;transition:transform .35s var(--elvs-ease);flex:0 0 auto}
.elvs .elvs-card:hover .elvs-btn{background:var(--elvs-amber);color:var(--elvs-ink);transform:translateY(-3px)}
.elvs .elvs-card:hover .elvs-btn svg{transform:translateX(4px)}

/* ---------- tabs ---------- */
.elvs .elvs__tabs{
  display:flex;
  gap:0;
  margin-top:36px;
  border-top:1px solid var(--elvs-line);
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.elvs .elvs__tabs::-webkit-scrollbar{display:none}
.elvs .elvs__tabs button{
  flex:1 0 auto; /* never narrower than its label: the strip scrolls instead of labels running into each other */
  min-width:150px;
  padding:20px 12px 0;
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--elvs-muted);
  text-align:left;
  position:relative;
  transition:color .3s;
  white-space:nowrap;
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.elvs .elvs__tabs button::before{
  content:"";
  position:absolute;
  top:-1px;left:0;right:0;
  height:3px;
  background:var(--elvs-orange);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s var(--elvs-ease);
}
.elvs .elvs__tabs button:hover{color:var(--elvs-ink);background:none}
.elvs .elvs__tabs button.is-active{color:var(--elvs-ink)}
.elvs .elvs__tabs button.is-active::before{transform:scaleX(1)}

/* ---------- arrows ---------- */
.elvs .elvs__nav{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:26px;
}
.elvs .elvs__arrow{
  width:48px;height:48px;
  border-radius:50%;
  border:1.5px solid var(--elvs-line);
  background:#fff;
  display:grid;
  place-items:center;
  color:var(--elvs-ink);
  transition:background .3s,border-color .3s,color .3s,opacity .3s;
  padding:0;
  box-shadow:none;
}
.elvs .elvs__arrow:hover{background:var(--elvs-blue);border-color:var(--elvs-blue);color:#fff}
.elvs .elvs__arrow svg{width:18px;height:18px;display:block}
.elvs .elvs__arrow.swiper-button-disabled{opacity:.35;pointer-events:none}

/* ---------- reveal ----------
   Progressive enhancement: the hidden state is applied ONLY after the
   script decides this section is still below the fold and adds
   .elvs-js. Without JS - or when a cache plugin holds JS back - the
   content is simply visible, never a blank section. */
.elvs.elvs-js .elvs-reveal{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .9s var(--elvs-ease),transform .9s var(--elvs-ease);
}
.elvs.elvs-js .elvs-reveal.is-in{opacity:1;transform:none}
body.elementor-editor-active .elvs .elvs-reveal{opacity:1;transform:none}

/* ---------- carousel fallback before Swiper takes over ----------
   Keeps the cards laid out correctly if Swiper is deferred, blocked or
   unavailable. Swiper's own rules win the moment it initialises. */
.elvs .elvs__swiper:not(.swiper-initialized) .swiper-wrapper{
  display:flex;
  gap:var(--elvs-gap);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.elvs .elvs__swiper:not(.swiper-initialized) .swiper-wrapper::-webkit-scrollbar{display:none}
.elvs .elvs__swiper:not(.swiper-initialized) .swiper-slide{
  flex:0 0 calc((100% - var(--elvs-gap) * 3.3) / 4.3);
  width:auto;
  scroll-snap-align:start;
}

@media(prefers-reduced-motion:reduce){
  .elvs *{animation:none!important;transition:none!important}
  .elvs .elvs-reveal{opacity:1;transform:none}
}

/* ============================================================
   Responsive. Breakpoints mirror the Swiper ones in the JS:
   >=1280 four cards, 1024-1279 three, 640-1023 two, <640 one.
   ============================================================ */

@media(max-width:1439px){
  .elvs{--elvs-card-h:490px}
}

@media(max-width:1279px){
  .elvs{--elvs-card-h:470px}
  .elvs .elvs__swiper:not(.swiper-initialized) .swiper-slide{
    flex-basis:calc((100% - var(--elvs-gap) * 2.3) / 3.3);
  }
}

@media(max-width:1023px){
  .elvs{--elvs-card-h:460px}
  .elvs .elvs__tabs button{min-width:140px}
  .elvs .elvs__swiper:not(.swiper-initialized) .swiper-wrapper{gap:min(var(--elvs-gap),20px)}
  .elvs .elvs__swiper:not(.swiper-initialized) .swiper-slide{
    flex-basis:calc((100% - min(var(--elvs-gap),20px)) / 2);
  }
}

@media(max-width:900px){
  .elvs .elvs__head{grid-template-columns:1fr;gap:16px}
  .elvs .elvs__lead{justify-self:start}
}

@media(max-width:640px){
  .elvs{--elvs-card-h:440px;--elvs-gap:18px}
  .elvs .elvs__wrap{width:min(var(--elvs-container),100% - 32px)}
  .elvs .elvs__rail{padding-left:max((100% - var(--elvs-container)) / 2, 16px)}
  .elvs .elvs__head{margin-bottom:34px}
  .elvs .elvs__title{margin-top:14px}
  .elvs .elvs__tabs{margin-top:28px}
  .elvs .elvs__tabs button{min-width:128px;padding:16px 10px 0;letter-spacing:.1em}
  .elvs .elvs__nav{justify-content:center;margin-top:22px}
  .elvs .elvs__swiper:not(.swiper-initialized) .swiper-wrapper{gap:min(var(--elvs-gap),18px)}
  .elvs .elvs__swiper:not(.swiper-initialized) .swiper-slide{flex-basis:87%}
}

/* Small phones: keep the icon badge from crowding the number */
@media(max-width:380px){
  .elvs{--elvs-card-h:420px}
  .elvs .elvs-card__ico{width:42px;height:42px;top:18px;right:18px}
  .elvs .elvs-card__ico svg{width:19px;height:19px}
  .elvs .elvs-card__num{top:22px}
}

/* Short landscape phones: never let a fixed height push the button out */
@media(max-height:520px) and (orientation:landscape){
  .elvs{--elvs-card-h:380px}
}