:root{ --vv-gutter:20px; --vv-radius: 12px; --vv-border: #E5E7EB; --vv-bg: #FFFFFF; --vv-shadow: 0 2px 8px rgba(0,0,0,.06); }

/* module: island.carousel — layout 3-up desktop / 1-up mobile */
.vv-carousel{
  display: grid;
  gap: var(--vv-gutter);
}

.vv-track{ direction:ltr; display:flex; gap: var(--vv-gutter); flex-wrap: nowrap; will-change: transform; transform: translateX(0); }

.vv-slide{
  background: var(--vv-bg);
  border: 1px solid var(--vv-border);
  border-radius: var(--vv-radius);
  box-shadow: var(--vv-shadow);
  overflow: hidden;
  position: relative;
}

.vv-media{
  width: 100%;
  aspect-ratio: var(--vv-aspect-w) / var(--vv-aspect-h);
  display: block;
  object-fit: cover;
}

.vv-slide[data-active="true"]{
  border-color: var(--vv-border-active);
}

.vv-controls{ max-width:1300px; margin-inline:auto; display:grid; grid-template-columns:48px 1fr 48px; align-items:center; gap: var(--vv-gutter); }

.vv-btn{
  width: 48px; height: 48px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--vv-border);
  border-radius: 999px;
  background: var(--vv-bg);
  cursor: pointer;
  user-select: none;
}
.vv-btn:hover{ background: var(--vv-hover); }
.vv-btn:active{ transform: translateY(1px); }

/* Responsive columns */
@media (min-width: 769px){
  .vv-track{ direction:ltr; display:flex; gap: var(--vv-gutter); flex-wrap: nowrap; will-change: transform; transform: translateX(0); }
}
@media (max-width: 768px){
  .vv-track{ direction:ltr; display:flex; gap: var(--vv-gutter); flex-wrap: nowrap; will-change: transform; transform: translateX(0); }
}


.vv-error{border:1px solid #FCA5A5;background:#FEF2F2;color:#991B1B;border-radius:12px;padding:12px;margin-bottom:12px}


/* sizing rules */
@media (min-width: 769px){ .vv-slide{ box-sizing:border-box; flex:0 0 var(--vv-card-w, calc((100% - (2 * var(--vv-gutter))) / 3)); } }
@media (max-width: 768px){
  .vv-slide{ flex: 0 0 100%; }
}

.vv-track::-webkit-scrollbar{ display:none; }
.vv-track{ direction:ltr; display:flex; gap: var(--vv-gutter); flex-wrap: nowrap; will-change: transform; transform: translateX(0); }

.vv-caption-wrap{ width: var(--vv-active-width, var(--vv-card-w, 100%));  background:var(--vv-bg); border:1px solid var(--vv-border); border-radius:var(--vv-radius); box-shadow:var(--vv-shadow); padding: calc(var(--vv-gutter)*.75) var(--vv-gutter); min-height:3.25rem; width:var(--vv-active-width, 100%); margin-inline:auto; overflow:hidden; }

.vv-btn{ cursor: pointer; }

.vv-slide{  }

/* viewport masks the overflowing track */
.vv-viewport{ width:100%; max-width:1300px; margin-inline:auto; overflow:hidden; position:relative; }


/* Responsive slide sizing */
@media (min-width: 769px){ .vv-slide{ box-sizing:border-box; flex:0 0 var(--vv-card-w, calc((100% - (2 * var(--vv-gutter))) / 3)); } }
@media (max-width: 768px){
  .vv-slide{ flex: 0 0 100%; }
}
.vv-slide{ border:1px solid var(--vv-border); border-radius: var(--vv-radius); background: var(--vv-bg); overflow:hidden; }
.vv-slide[data-active="true"]{ border-color:#111827; }
.vv-slide .vv-media{ width:100%; height:auto; aspect-ratio: 512 / 696; object-fit: cover; display:block; }


/* Sizing & aspect */
.vv-slide{ box-sizing:border-box; border:1px solid var(--vv-border); border-radius:var(--vv-radius); background:var(--vv-bg); overflow:hidden; }
.vv-slide[data-active="true"]{ border-color:#111827; }
.vv-media{ width:100%; height:auto; aspect-ratio: 512 / 696; object-fit: cover; display:block; }

@media (min-width: 769px){ .vv-slide{ box-sizing:border-box; flex:0 0 var(--vv-card-w, calc((100% - (2 * var(--vv-gutter))) / 3)); } }
@media (max-width: 768px){
  .vv-slide{ flex:0 0 100%; }
}

/* Controls rail and caption aligned to carousel width */
.vv-controls{ max-width:1300px; margin-inline:auto; display:grid; grid-template-columns:48px 1fr 48px; align-items:center; gap:var(--vv-gutter); }
.vv-btn{ width:48px; height:48px; border-radius:12px; border:1px solid var(--vv-border); background:#F9FAFB; cursor:pointer; }
.vv-btn:hover{ background:#F3F4F6; }
.vv-btn:focus{ outline:3px solid #3B82F6; outline-offset:2px; }
.vv-caption-wrap{ width: var(--vv-active-width, var(--vv-card-w, 100%));  background:var(--vv-bg); border:1px solid var(--vv-border); border-radius:var(--vv-radius); box-shadow:var(--vv-shadow); padding: calc(var(--vv-gutter)*.75) var(--vv-gutter); min-height:3.25rem; width:var(--vv-active-width, 100%); margin-inline:auto; overflow:hidden; }

/* Desktop media cap */
@media (min-width: 769px){
  .vv-media{ height: 420px; width:100%; object-fit: cover; }
}
/* Mobile keeps vertical aspect */
@media (max-width: 768px){
  .vv-media{ height:auto; aspect-ratio: 512 / 696; object-fit: cover; }
}

@media (max-width:768px){
  .vv-viewport{ overflow:hidden; width:100%; }
  .vv-track{ gap:0 !important; }
  .vv-slide{ box-sizing:border-box; flex:0 0 100% !important; min-width:100% !important; max-width:100% !important; margin:0 !important; }
  .vv-media{ display:block; width:100%; height:auto; object-fit:cover; }
  .vv-caption-wrap{ width:100% !important; }
}