/* v1.1.1 */
.eiat-wrap { --eiat-gap: 16px; }
.eiat-tabs { display:flex; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.eiat-tab { appearance:none; border:0; background:transparent; padding:8px 14px; border-radius:999px; font-weight:600; cursor:pointer; transition:background .2s,color .2s; }
.eiat-tab.is-active { background:#111; color:#fff; }

.eiat-panels { display:flex; gap:var(--eiat-gap); height:520px; width:100%; overflow:hidden; }
.eiat-panel { position:relative; flex:1 1 0px; min-width:80px; cursor:pointer; border-radius:16px; overflow:hidden; transition:flex .45s cubic-bezier(.2,.6,.2,1); isolation:isolate;}
.eiat-panel.is-active { flex:5 1 0px; }
.eiat-panel .eiat-bg { position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.02); transition:transform .45s ease; }
.eiat-panel.is-active .eiat-bg { transform:scale(1.06); }

.eiat-panel::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 60%); z-index:1; }

.eiat-overlay { position:absolute; z-index:2; left:24px; right:24px; bottom:24px; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.4); opacity:0; visibility:hidden; transition:opacity .3s ease, transform .3s ease; transform:translateY(6px); }
.eiat-panel.is-active .eiat-overlay { opacity:1; visibility:visible; transform:translateY(0); }

.eiat-badge { font-size:12px; letter-spacing:.08em; font-weight:800; opacity:.9; margin-bottom:8px; text-transform:uppercase; }
.eiat-title { margin:0 0 8px 0; font-size:28px; line-height:1.2; }
.eiat-desc { margin:0 0 14px 0; max-width:46ch; }
.eiat-btn { display:inline-block; background:#fff; color:#111; padding:10px 14px; border-radius:999px; font-weight:700; text-decoration:none; }

@media (max-width:1024px){ .eiat-panels{ height:420px; } }

/* Mobile: keep horizontal, enable swipe via horizontal scroll + snap */
@media (max-width:768px){
  .eiat-panels{
    overflow-x:auto;
    overflow-y:hidden;
    height:320px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .eiat-panel{
    flex:0 0 80%;
    min-width:80%;
  }
  .eiat-panel.is-active{
    flex:0 0 88%;
  }
}