/* ================= BLOCK: CITY CAROUSEL ================= */
.c-city-carousel {
  position: relative;
  width: 100%;
  overflow-x: clip; 
  box-sizing: border-box;
}

.c-city-carousel * {
  box-sizing: border-box;
}

.c-city-carousel__max-width {
  max-width: var(--max-w);
  margin: 0 auto;
}

.c-city-carousel__wrap {
  display: flex;
  flex-direction: column;
  background: var(--bg-val);
  border-radius: var(--rad-tl-d) var(--rad-tr-d) var(--rad-br-d) var(--rad-bl-d);
  padding: var(--pt-d) var(--pr-d) var(--pb-d) var(--pl-d);
  gap: var(--gap-head-d);
}

/* ================= HEADER SECTION ================= */
.c-city-carousel__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
}

.c-city-carousel__h-texts {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: var(--al-htxt-d);
}

.c-city-carousel__h-tag {
  font-family: var(--ff-htg-d);
  font-size: var(--fs-htg-d);
  font-weight: var(--fw-htg-d);
  line-height: var(--lh-htg-d);
  color: var(--c-htag);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.c-city-carousel__h-tit {
  font-family: var(--ff-hti-d);
  font-size: var(--fs-hti-d);
  font-weight: var(--fw-hti-d);
  line-height: var(--lh-hti-d);
  color: var(--c-htit);
  margin: 0;
}

.c-city-carousel__h-sub {
  font-family: var(--ff-hsu-d);
  font-size: var(--fs-hsu-d);
  font-weight: var(--fw-hsu-d);
  line-height: var(--lh-hsu-d);
  font-style: italic;
  color: var(--c-hsub);
  margin: 0;
}

.c-city-carousel__h-btn {
  align-self: var(--b-as-d);
  width: var(--b-w-d);
  justify-content: var(--b-jc-d);
  
  display: inline-flex;
  align-items: center;
  gap: var(--gap-btn-d);
  min-height: 48px;
  padding: 16px 24px;
  border-radius: 800px;
  background-color: var(--c-bbg);
  color: var(--c-btxt);
  border: 1px solid var(--c-bbor);
  font-family: var(--ff-btn-d);
  font-size: var(--fs-btn-d);
  font-weight: var(--fw-btn-d);
  line-height: var(--lh-btn-d);
  text-decoration: none;
  transition: all 0.3s ease;
  flex-shrink: 0;
  text-align: center;
}
.c-city-carousel__h-btn:hover { background-color: var(--c-bbg-h); color: var(--c-btxt-h); border-color: var(--c-bbor-h); }
.c-city-carousel__h-btn:focus-visible { background-color: var(--c-bbg-f); color: var(--c-btxt-f); border-color: var(--c-bbor-f); outline: none; }
.c-city-carousel__h-btn:focus:not(:focus-visible) { outline: none; }

.c-city-carousel__h-btn--mob { display: none; }

/* ================= CAROUSEL BODY ================= */
.c-city-carousel__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-main-d);
}

.c-city-carousel__track {
  position: relative;
  width: 100%;
  height: var(--tk-h-d);
  margin: var(--tk-mt-d) var(--tk-mr-d) var(--tk-mb-d) var(--tk-ml-d);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible; 
}

/* Target */
.c-city-carousel__card {
  position: absolute;
  top: 50%;
  left: 50%; 
  width: var(--cw-d); 
  max-width: 500px; 
  background-color: var(--c-cbg);
  border-radius: var(--crad-tl-d) var(--crad-tr-d) var(--crad-br-d) var(--crad-bl-d);
  overflow: hidden;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease, box-shadow 0.6s ease;
  
  transform: translate(calc(-50% + (var(--offset, 0) * var(--cdist-d))), -50%) scale(var(--c-scale, 1));
  opacity: var(--c-op, 1);
  z-index: var(--c-z, 1);
  pointer-events: none;
  height: 100%; 
  display: flex;
  flex-direction: column;
}

.c-city-carousel__card.is-active {
  box-shadow: var(--c-cshad-d);
  pointer-events: auto;
  cursor: default;
}
.c-city-carousel__card[data-pos="1"],
.c-city-carousel__card[data-pos="-1"] {
  pointer-events: auto;
  cursor: pointer;
}

.c-city-carousel__card-img-wrap {
  width: 100%;
  flex-grow: 1;
  min-height: 0; 
}
.c-city-carousel__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-city-carousel__card-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-shrink: 0;
}

.c-city-carousel__card-tag {
  font-family: var(--ff-ctg-d);
  font-size: var(--fs-ctg-d);
  font-weight: var(--fw-ctg-d);
  line-height: var(--lh-ctg-d);
  color: var(--c-ctag);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.c-city-carousel__card-tit {
  font-family: var(--ff-cti-d);
  font-size: var(--fs-cti-d);
  font-weight: var(--fw-cti-d);
  line-height: var(--lh-cti-d);
  color: var(--c-ctit);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c-city-carousel__card-desc {
  font-family: var(--ff-cde-d);
  font-size: var(--fs-cde-d);
  font-weight: var(--fw-cde-d);
  line-height: var(--lh-cde-d);
  color: var(--c-cdesc);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.c-city-carousel__card-desc p { margin: 0; }

/* Nav Controls */
.c-city-carousel__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.c-city-carousel__arrow {
  width: 48px;
  height: 48px;
  border-radius: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: var(--c-abg);
  border: 1px solid var(--c-abo);
  color: var(--c-atx);
  transition: all 0.3s ease;
}
.c-city-carousel__arrow:hover { background-color: var(--c-abg-h); border-color: var(--c-abo-h); color: var(--c-atx-h); }
.c-city-carousel__arrow:focus-visible { background-color: var(--c-abg-f); color: var(--c-atx-f); border-color: var(--c-abo-f); outline: none; }
.c-city-carousel__arrow:focus:not(:focus-visible) { outline: none; }

.c-city-carousel__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.c-city-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 800px;
  background-color: var(--c-dot);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
}
.c-city-carousel__dot:hover { background-color: var(--c-doth); }
.c-city-carousel__dot.is-active { width: 32px; background-color: var(--c-dota); }
.c-city-carousel__dot:focus-visible { outline: 2px solid var(--c-dota); outline-offset: 2px; }
.c-city-carousel__dot:focus:not(:focus-visible) { outline: none; }

/* ================= TABLET (<= 1024px) ================= */
@media (max-width: 1024px) {
  .c-city-carousel__wrap {
    border-radius: var(--rad-tl-t) var(--rad-tr-t) var(--rad-br-t) var(--rad-bl-t);
    padding: var(--pt-t) var(--pr-t) var(--pb-t) var(--pl-t);
    gap: var(--gap-head-t);
  }

  .c-city-carousel__h-texts { text-align: var(--al-htxt-t); }
  
  .c-city-carousel__h-btn {
    align-self: var(--b-as-t); width: var(--b-w-t); justify-content: var(--b-jc-t);
    gap: var(--gap-btn-t);
    font-family: var(--ff-btn-t); font-size: var(--fs-btn-t); font-weight: var(--fw-btn-t); line-height: var(--lh-btn-t);
  }

  .c-city-carousel__h-tag { font-family: var(--ff-htg-t); font-size: var(--fs-htg-t); font-weight: var(--fw-htg-t); line-height: var(--lh-htg-t); }
  .c-city-carousel__h-tit { font-family: var(--ff-hti-t); font-size: var(--fs-hti-t); font-weight: var(--fw-hti-t); line-height: var(--lh-hti-t); }
  .c-city-carousel__h-sub { font-family: var(--ff-hsu-t); font-size: var(--fs-hsu-t); font-weight: var(--fw-hsu-t); line-height: var(--lh-hsu-t); }
  
  .c-city-carousel__body { gap: var(--gap-main-t); }

  .c-city-carousel__track {
    height: var(--tk-h-t);
    margin: var(--tk-mt-t) var(--tk-mr-t) var(--tk-mb-t) var(--tk-ml-t);
  }

  .c-city-carousel__card {
    width: var(--cw-t);
    border-radius: var(--crad-tl-t) var(--crad-tr-t) var(--crad-br-t) var(--crad-bl-t);
    transform: translate(calc(-50% + (var(--offset, 0) * var(--cdist-t))), -50%) scale(var(--c-scale, 1));
  }
  .c-city-carousel__card.is-active { box-shadow: var(--c-cshad-t); }

  .c-city-carousel__card-tag { font-family: var(--ff-ctg-t); font-size: var(--fs-ctg-t); font-weight: var(--fw-ctg-t); line-height: var(--lh-ctg-t); }
  
  .c-city-carousel__card-tit { 
    font-family: var(--ff-cti-t); font-size: var(--fs-cti-t); font-weight: var(--fw-cti-t); line-height: var(--lh-cti-t); 
  }
  
  .c-city-carousel__card-desc { 
    font-family: var(--ff-cde-t); font-size: var(--fs-cde-t); font-weight: var(--fw-cde-t); line-height: var(--lh-cde-t); 
    min-height: calc(1em * var(--lh-cde-t) * 2);
  }
}

/* ================= MOBILE (<= 768px) ================= */
@media (max-width: 768px) {
  .c-city-carousel__wrap {
    border-radius: var(--rad-tl-m) var(--rad-tr-m) var(--rad-br-m) var(--rad-bl-m);
    padding: var(--pt-m) var(--pr-m) var(--pb-m) var(--pl-m);
    gap: var(--gap-head-m);
  }

  .c-city-carousel__header { flex-direction: column; gap: 24px; }
  .c-city-carousel__h-texts { text-align: var(--al-htxt-m); }

  .c-city-carousel__h-btn--desk { display: none; }
  .c-city-carousel__h-btn--mob {
    display: inline-flex;
    align-self: var(--b-as-m); width: var(--b-w-m); justify-content: var(--b-jc-m); gap: var(--gap-btn-m);
    font-family: var(--ff-btn-m); font-size: var(--fs-btn-m); font-weight: var(--fw-btn-m); line-height: var(--lh-btn-m);
    margin-top: 16px; 
  }

  .c-city-carousel__body { gap: var(--gap-main-m); }

  .c-city-carousel__h-tag { font-family: var(--ff-htg-m); font-size: var(--fs-htg-m); font-weight: var(--fw-htg-m); line-height: var(--lh-htg-m); }
  .c-city-carousel__h-tit { font-family: var(--ff-hti-m); font-size: var(--fs-hti-m); font-weight: var(--fw-hti-m); line-height: var(--lh-hti-m); }
  .c-city-carousel__h-sub { font-family: var(--ff-hsu-m); font-size: var(--fs-hsu-m); font-weight: var(--fw-hsu-m); line-height: var(--lh-hsu-m); }
  
  .c-city-carousel__track { 
    height: var(--tk-h-m); 
    margin: var(--tk-mt-m) var(--tk-mr-m) var(--tk-mb-m) var(--tk-ml-m);
  }

  /* Mobile Overrides */
  .c-city-carousel__card {
    left: 0 !important; 
    width: var(--cw-m) !important;
    max-width: none !important; 
    border-radius: var(--crad-tl-m) var(--crad-tr-m) var(--crad-br-m) var(--crad-bl-m) !important;
    transform: translate(calc(var(--offset, 0) * var(--cdist-m)), -50%) !important;
    --c-scale: 1 !important; 
  }
  
  .c-city-carousel__card[data-pos="0"] { 
    opacity: 1 !important; 
    z-index: 10 !important;
    box-shadow: var(--c-cshad-m) !important; 
    pointer-events: auto !important;
  }
  
  .c-city-carousel__card[data-pos="1"], 
  .c-city-carousel__card[data-pos="2"] { 
    opacity: 1 !important; 
    z-index: 5 !important;
    box-shadow: none !important;
    pointer-events: auto !important;
  }

  .c-city-carousel__card:not([data-pos="0"]):not([data-pos="1"]):not([data-pos="2"]) { 
    opacity: 0 !important; 
    z-index: 1 !important;
    pointer-events: none !important;
  }

  .c-city-carousel__card-tag { font-family: var(--ff-ctg-m); font-size: var(--fs-ctg-m); font-weight: var(--fw-ctg-m); line-height: var(--lh-ctg-m); }
  
  .c-city-carousel__card-tit { 
    font-family: var(--ff-cti-m); font-size: var(--fs-cti-m); font-weight: var(--fw-cti-m); line-height: var(--lh-cti-m); 
  }
  
  .c-city-carousel__card-desc { 
    font-family: var(--ff-cde-m); font-size: var(--fs-cde-m); font-weight: var(--fw-cde-m); line-height: var(--lh-cde-m); 
    min-height: calc(1em * var(--lh-cde-m) * 2);
  }

  .c-city-carousel__dots { display: none; }
  .c-city-carousel__nav { flex-wrap: wrap; }
}