/* ===========================
   GLOBAL TOKENS
   =========================== */
:root{
  /* header/btn gradient (slate) */
  --nav-grad-1:#2b3442;
  --nav-grad-2:#3d4a5a;

  /* BUTTONS use header colors */
  --btn-grad-1:var(--nav-grad-1);
  --btn-grad-2:var(--nav-grad-2);
  --btn-radius:10px;

  /* ARROWS keep existing blue */
  --arrow-grad-1:#5978b2;
  --arrow-grad-2:#8ea9df;

  /* strict card sizes */
  --card-h:200px;      /* desktop/tablet */
  --card-h-sm:220px;   /* phones */
}

/* ===========================
   CONTAINERS
   =========================== */
.carousel-background,
.welcome-box{
  background:#f8f9fa;
  border-radius:.75rem;
  padding:.75rem;
  margin-bottom:1rem;
  border:2px solid #dee2e6;
}

/* keep the whole carousel from ever creating horizontal overflow */
#constructionCarousel.carousel{
  position:relative;
  overflow:hidden;
  max-width:100%;
}

/* reserve arrow hit area so cards never overlap controls */
#constructionCarousel{ --ctrl-hit:3rem; }

/* inner track – block flow (Bootstrap expects this), isolated for iOS */
#constructionCarousel .carousel-inner{
  padding:.15rem;
  padding-left:calc(.15rem + var(--ctrl-hit));
  padding-right:calc(.15rem + var(--ctrl-hit));
  min-height:150px;
  position:relative;
  overflow:hidden;
  display:block;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:translateZ(0);
  will-change:transform;
  max-width:100%;
}

/* slide isolation during animation – stops iOS width jump */
#constructionCarousel .carousel-item{
  box-sizing:border-box;
  width:100%;
  contain:layout paint;
  overflow:hidden;
  max-width:100%;
}

/* row: no outer margins; use gutters instead */
#constructionCarousel .carousel-item .row{
  margin:0;
  --bs-gutter-x:1rem;
  --bs-gutter-y:0;
  justify-content:center;
  align-items:stretch;
  width:100%;
}

/* columns must be allowed to shrink (critical for iOS) */
#constructionCarousel .carousel-item .row > [class^="col-"],
#constructionCarousel .carousel-item .row > [class*=" col-"]{
  display:flex;
  min-width:0;
  padding-left:calc(var(--bs-gutter-x)*.5);
  padding-right:calc(var(--bs-gutter-x)*.5);
}

/* ===========================
   STRICT CARD BOX
   =========================== */
#constructionCarousel .card.h-100{height:var(--card-h) !important;}
#constructionCarousel .card{
  width:100%;
  height:var(--card-h) !important;
  min-height:var(--card-h) !important;
  max-height:var(--card-h) !important;
  border-radius:1rem;
  overflow:hidden;
  box-shadow:0 .125rem .25rem rgba(0,0,0,.075);
  display:flex;
  flex-direction:column;
  position:relative;
  padding-bottom:2.5rem; /* space for the button */
}

/* body stays within fixed box */
#constructionCarousel .card-body{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  padding-bottom:0;
  overflow:hidden;
  flex:1 1 auto;
  min-height:0;
}

/* title – 2 lines max, then ellipsis (stable height) */
#constructionCarousel .card-title{
  font-size:1.05rem;
  font-weight:700;
  margin:0;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.25;
  min-height:calc(1.25em * 2);
}

/* example/description – clamped lines */
#constructionCarousel .example-text,
#constructionCarousel .card-text{
  font-size:.92rem;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  margin:0;
  word-break:break-word;
}

/* CEFR badges */
#constructionCarousel .cefr-badge{
  position:absolute; top:.5rem; right:.5rem;
  padding:.3rem .6rem; font-size:.75rem; font-weight:700; color:#fff;
  border-radius:.5rem; z-index:10;
}
#constructionCarousel .badge-cefr{padding:.25em .5em;border-radius:.5rem;font-size:.78em;color:#fff;font-weight:700;}
#constructionCarousel .badge-n{background:#6c757d;}
#constructionCarousel .level-a1,
#constructionCarousel .level-a2{background:#28a745;}
#constructionCarousel .level-b1,
#constructionCarousel .level-b2{background:#ffc107;color:#212529;}
#constructionCarousel .level-c1,
#constructionCarousel .level-c2{background:#dc3545;}

/* View button – matches header gradient */
#constructionCarousel .card .btn{
  position:absolute; bottom:.6rem; right:.6rem;

  color:#fff; border:1px solid rgba(255,255,255,.14);
  border-radius:var(--btn-radius);
  padding:.5rem 1rem; font-weight:700; letter-spacing:.2px; line-height:1;
  box-shadow:0 6px 16px rgba(45,58,74,.25);
  text-decoration:none;
  transition:box-shadow 120ms ease, filter 120ms ease;
}
#constructionCarousel .card .btn::after{content:"→";display:inline-block;margin-left:.5rem;font-weight:700;}
#constructionCarousel .card .btn:hover,
#constructionCarousel .card .btn:focus{box-shadow:0 8px 22px rgba(45,58,74,.35);filter:brightness(1.06);}

/* ===========================
   ARROWS (keep original blue)
   =========================== */
#constructionCarousel .carousel-control-prev,
#constructionCarousel .carousel-control-next{
  width:var(--ctrl-hit);
  top:50%; transform:translateY(-50%);
  z-index:2; opacity:1;
}
#constructionCarousel .carousel-control-prev{left:0;}
#constructionCarousel .carousel-control-next{right:0;}

#constructionCarousel .carousel-control-prev-icon,
#constructionCarousel .carousel-control-next-icon{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M11.354 1.646a.5.5 0 0 1 0 .708L6.707 7l4.647 4.646a.5.5 0 0 1-.708.708l-5-5a.5.5 0 0 1 0-.708l5-5a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E"),
    linear-gradient(135deg,var(--arrow-grad-1),var(--arrow-grad-2));
  background-repeat:no-repeat,no-repeat;
  background-position:center,center;
  background-size:60% 60%,100% 100%;
  border-radius:999px;
  width:2.8rem; height:2.8rem; padding:0;
  box-shadow:0 2px 10px rgba(89,120,178,.25);
}
#constructionCarousel .carousel-control-next-icon{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M4.646 1.646a.5.5 0 0 0 0 .708L9.293 7l-4.647 4.646a.5.5 0 0 0 .708.708l5-5a.5.5 0 0 0 0-.708l-5-5a.5.5 0 0 0-.708 0z'/%3E%3C/svg%3E"),
    linear-gradient(135deg,var(--arrow-grad-1),var(--arrow-grad-2));
}
#constructionCarousel .carousel-control-prev:hover .carousel-control-prev-icon,
#constructionCarousel .carousel-control-next:hover .carousel-control-next-icon{
  box-shadow:0 4px 14px rgba(89,120,178,.35);
}


/* ===========================
   RESPONSIVE
   =========================== */
@media (max-width:768px){
  #constructionCarousel{--ctrl-hit:2.75rem;}
  #constructionCarousel .card,
  #constructionCarousel .card.h-100{
    height:var(--card-h) !important;
    min-height:var(--card-h) !important;
    max-height:var(--card-h) !important;
  }
  #constructionCarousel .card-title{font-size:1rem;}
  #constructionCarousel .example-text,
  #constructionCarousel .card-text{font-size:.9rem;}
}
@media (max-width:576px){
  .carousel-background{padding:.5rem;}
  #constructionCarousel{--ctrl-hit:2.5rem;}
  #constructionCarousel .carousel-item .col{flex:0 0 100%;max-width:100%;}
  #constructionCarousel .card,
  #constructionCarousel .card.h-100{
    height:var(--card-h-sm) !important;
    min-height:var(--card-h-sm) !important;
    max-height:var(--card-h-sm) !important;
  }
  #constructionCarousel .carousel-control-prev-icon,
  #constructionCarousel .carousel-control-next-icon{width:2.2rem;height:2.2rem;}
  #constructionCarousel .card-title{font-size:.95rem;}
  #constructionCarousel .example-text,
  #constructionCarousel .card-text{-webkit-line-clamp:3;font-size:.85rem;}
  #constructionCarousel .card .btn{bottom:.5rem;right:.5rem;padding:.48rem .9rem;}
}

/* ===========================
   iOS width guard (prevents viewport “creep”)
   =========================== */
@supports (-webkit-touch-callout:none){
  html,body{overflow-x:hidden;}
  #constructionCarousel,
  #constructionCarousel .carousel-inner,
  #constructionCarousel .carousel-item{max-width:100vw;}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  #constructionCarousel .card .btn{transition:none;}
}