/* ==========================================================================
   SVAC — Z Pattern Features
   - Alternating Z-layout repeater
   - Narrow inner rail aligned to hero/header
   - Image scaled to support (not dominate) typography
   - Mobile: ALWAYS image then text, and images centered
   - Animation: image-only scroll-reveal (CSS-only progressive enhancement)
   ========================================================================== */

.svac-mod-z-pattern-features{
  container-type:inline-size;
  width:100%;
  max-width:100%;
}

/* =========================
   Inner Rail
   ========================= */

.svac-mod-z-pattern-features__list{
  width:100%;
  max-width:1080px;
  margin-inline:auto;
  display:grid;
  gap:92px;
}

/* =========================
   Item Layout (Desktop)
   ========================= */

.svac-mod-z-pattern-features__item{
  display:grid;
  grid-template-columns:minmax(0, 380px) minmax(0, 1fr);
  align-items:center;
  gap:64px;
}

/* Z-pattern alternation (desktop only) */
.svac-mod-z-pattern-features__item:nth-child(even){
  grid-template-columns:minmax(0, 1fr) minmax(0, 380px);
}

.svac-mod-z-pattern-features__item:nth-child(even)
  .svac-mod-z-pattern-features__media{ order:2; }

.svac-mod-z-pattern-features__item:nth-child(even)
  .svac-mod-z-pattern-features__content{ order:1; }

/* =========================
   Media
   ========================= */

.svac-mod-z-pattern-features__media{
  width:100%;
  max-width:380px;
  justify-self:start;
}

.svac-mod-z-pattern-features__item:nth-child(even)
  .svac-mod-z-pattern-features__media{
  justify-self:end;
}

.svac-mod-z-pattern-features__img{
  display:block;
  width:100%;
  max-height:380px;
  aspect-ratio:1 / 1;
  object-fit:cover;
  border-radius:14px;
}

/* =========================
   Content
   ========================= */

.svac-mod-z-pattern-features__content{
  min-width:0;
}

.svac-mod-z-pattern-features__heading{
  margin:0 0 16px;
  font-size:38px;
  line-height:1.15;
  font-weight:500;
  color:var(--svac-dark-blue);
}

.svac-mod-z-pattern-features__desc{
  margin:0 0 20px;
  font-size:30px;
  line-height:1.3;
  font-weight:400;
  color:var(--svac-dark-grey);
}

.svac-mod-z-pattern-features__desc p{
  margin:0 0 14px;
}

.svac-mod-z-pattern-features__desc p:last-child{
  margin:0;
}

/* =========================
   Explore Link
   ========================= */

.svac-mod-z-pattern-features__link{
  display:inline-flex;
  align-items:center;
  gap:10px;

  font-family:"Futura-PT", sans-serif;
  font-size:20px;
  line-height:1;
  font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;

  color:var(--svac-bright-blue);
  text-decoration:none;
}

.svac-mod-z-pattern-features__link:hover{
  color:var(--svac-link-hover);
}

.svac-mod-z-pattern-features__link-icon{
  transform:translateY(-1px);
}

/* =========================
   Scroll Reveal Animation (Images Only)
   - Progressive enhancement: only runs when supported
   ========================= */

@keyframes svacZImgInLeft{
  from{ opacity:0; transform:translateX(-18px); }
  to{ opacity:1; transform:translateX(0); }
}

@keyframes svacZImgInRight{
  from{ opacity:0; transform:translateX(18px); }
  to{ opacity:1; transform:translateX(0); }
}

@keyframes svacZImgInUp{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Only apply "invisible then animate on view()" if supported */
@supports (animation-timeline: view()){
  /* Default: odd rows slide in from left */
  .svac-mod-z-pattern-features__item .svac-mod-z-pattern-features__img{
    opacity:0;
    transform:translateX(-18px);
    animation:svacZImgInLeft .7s cubic-bezier(.2,.8,.2,1) both;
    animation-timeline:view();
    animation-range: entry 15% cover 30%;
    will-change: transform, opacity;
  }

  /* Even rows slide in from right */
  .svac-mod-z-pattern-features__item:nth-child(even) .svac-mod-z-pattern-features__img{
    transform:translateX(18px);
    animation-name:svacZImgInRight;
  }
}

@media (prefers-reduced-motion: reduce){
  .svac-mod-z-pattern-features__img{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

/* =========================
   Responsive (Container Queries)
   ========================= */

@container (max-width: 860px){
  .svac-mod-z-pattern-features__list{
    max-width:100%;
    gap:64px;
  }

  .svac-mod-z-pattern-features__item{
    grid-template-columns:1fr;
    gap:28px;
  }

  .svac-mod-z-pattern-features__item:nth-child(even){
    grid-template-columns:1fr;
  }

  /* Mobile stacking order: ALWAYS image then text (even rows too) */
  .svac-mod-z-pattern-features__item .svac-mod-z-pattern-features__media{ order:1 !important; }
  .svac-mod-z-pattern-features__item .svac-mod-z-pattern-features__content{ order:2 !important; }

  /* Center art on mobile */
  .svac-mod-z-pattern-features__media{
    max-width:360px;
    justify-self:center;
    margin-inline:auto;
  }

  .svac-mod-z-pattern-features__img{
    max-height:360px;
    margin-inline:auto;
    border-radius:12px;
  }

  /* On mobile, animate images upward instead of left/right */
  @supports (animation-timeline: view()){
    .svac-mod-z-pattern-features__item .svac-mod-z-pattern-features__img{
      transform:translateY(14px);
      animation-name:svacZImgInUp;
    }
  }
}

@container (max-width: 520px){
  .svac-mod-z-pattern-features__list{
    gap:56px;
  }

  .svac-mod-z-pattern-features__heading{
    font-size:32px;
  }

  .svac-mod-z-pattern-features__desc{
    font-size:24px;
  }
}

/* =========================
   Fallback if container queries aren't supported/triggering
   (Ensures mobile order + centering still work)
   ========================= */

@media (max-width: 860px){
  .svac-mod-z-pattern-features__item{
    grid-template-columns:1fr;
  }

  .svac-mod-z-pattern-features__item .svac-mod-z-pattern-features__media{ order:1 !important; }
  .svac-mod-z-pattern-features__item .svac-mod-z-pattern-features__content{ order:2 !important; }

  .svac-mod-z-pattern-features__media{
    justify-self:center;
    margin-inline:auto;
  }

  .svac-mod-z-pattern-features__img{
    margin-inline:auto;
  }
}