/* Everything scoped to .ribalta-carousel so it won't affect the rest of your site */
/* Everything scoped to .ribalta-carousel so it won't affect the rest of your site */
.ribalta-carousel{
  --text:#0f172a;
  --muted:#475569;
  --radius:18px;
  --gap:18px;

  background:#ffffff;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;

  /* 🔽 WAS 48px → NOW 24px */
  padding:24px 18px;
}

/* Base box sizing only inside the component */
.ribalta-carousel,
.ribalta-carousel *{
box-sizing:border-box;
}

.ribalta-carousel .wrap{
max-width:1100px;
margin:0 auto;
}

.ribalta-carousel .header{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:16px;
margin-bottom:14px;
}

.ribalta-carousel h1{
font-size:clamp(20px, 2.2vw, 28px);
margin:0;
letter-spacing:.2px;
}

.ribalta-carousel .controls{
display:flex;
gap:10px;
}

.ribalta-carousel .btn{
appearance:none;
border:1px solid rgba(15,23,42,.18);
background:rgba(15,23,42,.04);
color:var(--text);
padding:10px 12px;
border-radius:999px;
cursor:pointer;
line-height:1;
transition:transform .08s ease, background .12s ease;
user-select:none;
}

.ribalta-carousel .btn:hover{ background:rgba(15,23,42,.07); }
.ribalta-carousel .btn:active{ transform:scale(.98); }

/* Carousel */
.ribalta-carousel .carousel{
display:flex;
gap:var(--gap);
overflow-x:auto;
padding:10px 6px 18px;
scroll-snap-type:x mandatory;
scroll-padding:12px;
-webkit-overflow-scrolling:touch;
scrollbar-width:thin;
scrollbar-color: rgba(15,23,42,.25) transparent;
}

.ribalta-carousel .carousel::-webkit-scrollbar{ height:10px; }
.ribalta-carousel .carousel::-webkit-scrollbar-thumb{
background:rgba(15,23,42,.18);
border-radius:999px;
}
.ribalta-carousel .carousel::-webkit-scrollbar-track{ background:transparent; }

.ribalta-carousel .card{
scroll-snap-align:start;
flex:0 0 auto;
width:min(78vw, 360px);
background:linear-gradient(180deg, rgba(15,23,42,.04), rgba(15,23,42,.02));
border:1px solid rgba(15,23,42,.10);
border-radius:var(--radius);
overflow:hidden;
box-shadow:0 12px 30px rgba(2,6,23,.10);
}

/* Remove bottom shadows */
.ribalta-carousel .card{
  box-shadow:none;
}

/* Image frame (less crop + hover zoom) */
.ribalta-carousel .media-wrap{
aspect-ratio:16 / 11;
background:#f1f5f9; /* light slate so letterboxing looks intentional */
display:flex;
align-items:center;
justify-content:center;
padding:10px;
overflow:hidden;
cursor:zoom-in;
position:relative;
}

.ribalta-carousel .media{
width:100%;
height:100%;
object-fit:contain;
display:block;
transform:scale(1);
transition: transform 260ms ease, filter 260ms ease;
will-change: transform;
user-select:none;
-webkit-user-drag:none;
}

/* Soft zoom on hover */
.ribalta-carousel .media-wrap:hover .media{
transform:scale(1.04);
filter:brightness(1.02);
}

/* subtle sheen */
.ribalta-carousel .media-wrap::after{
content:"";
position:absolute;
inset:0;
background: radial-gradient(1200px 400px at 30% 0%, rgba(255,255,255,.65), transparent 55%);
opacity:0;
transition: opacity 220ms ease;
pointer-events:none;
}
.ribalta-carousel .media-wrap:hover::after{ opacity:.9; }

.ribalta-carousel .content{
padding:14px 14px 16px;
}

.ribalta-carousel .title{
margin:0 0 6px;
font-size:16px;
letter-spacing:.2px;
}

.ribalta-carousel .desc{
margin:0;
color:var(--muted);
font-size:14px;
line-height:1.45;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
min-height:calc(1.45em * 2);
}

@media (min-width:900px){
.ribalta-carousel .card{ width:380px; }
}

/* Lightbox */
.ribalta-carousel .lightbox{
position:fixed;
inset:0;
display:none;
align-items:center;
justify-content:center;
padding:24px;
background:rgba(0,0,0,.78);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index:9999;
}
.ribalta-carousel .lightbox.is-open{ display:flex; }

.ribalta-carousel .lightbox-inner{
width:min(96vw, 1400px);
height:min(92vh, 900px);
display:flex;
align-items:center;
justify-content:center;
position:relative;
}

.ribalta-carousel .lightbox-img{
max-width:100%;
max-height:100%;
object-fit:contain;
border-radius:16px;
background:rgba(255,255,255,.06);
box-shadow:0 28px 90px rgba(0,0,0,.6);
}

.ribalta-carousel .lightbox-close{
position:absolute;
top:-10px;
right:-10px;
border:1px solid rgba(255,255,255,.18);
background:rgba(255,255,255,.10);
color:#ffffff;
width:40px;
height:40px;
border-radius:999px;
cursor:pointer;
display:grid;
place-items:center;
font-size:18px;
line-height:1;
transition: background 140ms ease, transform 80ms ease;
}
.ribalta-carousel .lightbox-close:hover{ background:rgba(255,255,255,.16); }
.ribalta-carousel .lightbox-close:active{ transform:scale(.98); }

.ribalta-carousel .lightbox-hint{
position:fixed;
bottom:18px;
left:50%;
transform:translateX(-50%);
color:rgba(255,255,255,.85);
font-size:13px;
letter-spacing:.2px;
user-select:none;
text-align:center;
padding:8px 12px;
border:1px solid rgba(255,255,255,.14);
background:rgba(0,0,0,.35);
border-radius:999px;
display:none;
z-index:10000;
}
.ribalta-carousel .lightbox.is-open ~ .lightbox-hint{ display:block; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
.ribalta-carousel .media{ transition:none; }
.ribalta-carousel .media-wrap::after{ transition:none; }
}
/* Make ONLY the mobile carousel tall (so desktop carousel can stay wide) */
.ribalta-carousel--mobile .card{
  width:min(78vw, 320px);
  display:flex;
  flex-direction:column;
}

.ribalta-carousel--mobile .media-wrap{
  aspect-ratio: 9 / 16;
}
@media (min-width: 900px){
  .ribalta-carousel--mobile .card{ width:340px; }
}
/* ===== Global Lightbox Styles (for #globalLightbox appended to <body>) ===== */
.lightbox{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index:9999;
}
.lightbox.is-open{ display:flex; }

.lightbox-inner{
  width:min(96vw, 1400px);
  height:min(92vh, 900px);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.lightbox-img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  box-shadow:0 28px 90px rgba(0,0,0,.6);
}

.lightbox-close{
  position:absolute;
  top:-10px;
  right:-10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  color:#ffffff;
  width:40px;
  height:40px;
  border-radius:999px;
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:18px;
  line-height:1;
  transition: background 140ms ease, transform 80ms ease;
}
.lightbox-close:hover{ background:rgba(255,255,255,.16); }
.lightbox-close:active{ transform:scale(.98); }

.lightbox-hint{
  position:fixed;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  color:rgba(255,255,255,.85);
  font-size:13px;
  letter-spacing:.2px;
  user-select:none;
  text-align:center;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.35);
  border-radius:999px;
  display:none;
  z-index:10000;
}
.lightbox.is-open + .lightbox-hint{ display:block; }
/* ===============================
 MOBILE CAROUSEL – SMALLER CARDS
 =============================== */

.ribalta-carousel--mobile .card{
  width: min(60vw, 220px);   /* ~50% visual size */
  display: flex;
  flex-direction: column;
}

.ribalta-carousel--mobile .media-wrap{
  aspect-ratio: 9 / 16;
  padding: 8px;
}

.ribalta-carousel--mobile .desc{
  font-size: 13px;
  line-height: 1.4;
}

@media (min-width: 900px){
  .ribalta-carousel--mobile .card{
    width: 260px;
  }
}

/* ===============================
 Requested adjustments
 =============================== */

/* 1) Shrink ONLY the mobile interface screenshots by 15% */
.ribalta-carousel--mobile .media{
transform:scale(0.95);
}
.ribalta-carousel--mobile .media-wrap:hover .media{
transform:scale(0.984);
}

/* 2) Desktop view: hide buttons + scrollbar for the mobile interface carousel */
@media (min-width: 900px){
.ribalta-carousel--mobile .controls{ display:none; }
.ribalta-carousel--mobile .carousel{ scrollbar-width:none; }
.ribalta-carousel--mobile .carousel::-webkit-scrollbar{ display:none; }
}