/* =========================================================
   File: css/components/carousel.css
   Title: Invent City Carousel — Token-Safe + Caption Plates (Unified)
   Version: 2026-02-10
   Author: Invent City

   PURPOSE
   • Keep carousel visuals clean + consistent with IC tokens.
   • Provide OPTIONAL caption plates, scoped to .ic-carousel only:
       - Default: currentColor plate (token-safe)
       - .cap-white: white plate + black text
       - .cap-inset: adds inset from image edges (off by default)

   HOW TO USE
   <div class="pane-full ic-carousel cap-white cap-inset">
     ... bootstrap carousel markup ...
   </div>
========================================================= */


/* ---------------------------------------------------------
   1) IC CAROUSEL MEDIA (SCOPED)
   Notes:
   • Removes rounded corners + borders only for .ic-carousel.
   • Prevents global side-effects on other Bootstrap carousels.
--------------------------------------------------------- */
.ic-carousel .carousel img{
  position: static !important;
  display: block;
  border-radius: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Remove borders/outlines/shadows anywhere in the carousel stack */
.ic-carousel,
.ic-carousel .carousel,
.ic-carousel .carousel-inner,
.ic-carousel .carousel-item{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}


/* ---------------------------------------------------------
   2) DEFAULT / LEGACY CAPTION STYLE (GLOBAL)
   Notes:
   • This is Bootstrap-style “caption blob”.
   • IC overrides it inside .ic-carousel below.
--------------------------------------------------------- */
.carousel-caption{
  background: rgba(0,0,0,0.45);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
}


/* ---------------------------------------------------------
   3) IC CAPTION PLATES (SCOPED)
   Notes:
   • Bottom-left placement.
   • Caption becomes a stacked “plate” system.
   • No inset by default; use .cap-inset to add padding.
--------------------------------------------------------- */

/* Ensure slide can anchor caption reliably */
.ic-carousel .carousel-item{
  position: relative;
}

/* Caption container behaves like an overtext stack */
.ic-carousel .carousel-caption{
  left: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  top: auto !important;

  /* kill legacy/global caption blob */
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  /* plates should touch */
  gap: 0 !important;

  /* optional inset via tokens (default = none) */
  padding-left: var(--cap-inset-l, 0) !important;
  padding-bottom: var(--cap-inset-b, 0) !important;

  text-align: left !important;
  pointer-events: none;
  z-index: 3;
}

/* Optional inset helper (OFF by default) */
.ic-carousel.cap-inset{
  --cap-inset-l: 0.5rem;
  --cap-inset-b: 0.5rem;
}

/* Plate styling for direct caption children (most reliable) */
.ic-carousel .carousel-caption > *{
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;

  margin: 0 !important; /* no spacing between plates */

  padding: var(--cap-pad-y, 0.12rem) var(--cap-pad-x, 0.25rem);

  background: var(--cap-bg, currentColor);
  color: var(--cap-ink, var(--color-bg, #000)) !important;

  white-space: normal;
  overflow: visible;
  text-overflow: clip;

  border: 0;
  border-radius: 0; /* flat IC style */
  line-height: 1.15;
  font-weight: 400; /* default: NOT bold */
  letter-spacing: 0.02em;
}

/* Optional: force WHITE plate + BLACK text */
.ic-carousel.cap-white {
  --cap-bg: #fff;
  --cap-ink: #000;
  --cap-title-fs: 0.72rem;
}


/* ---------------------------------------------------------
   4) CAPTION: 2-LINE TYPE RULES (TOP + SECOND)
   • 1st line: weight 600
   • 2nd line: 0.9x first line, weight 500
--------------------------------------------------------- */

/* FIRST line */
.ic-carousel .carousel-caption > :first-child{
  font-size: var(--cap-title-fs, 1.15rem) !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.04em;
}

/* SECOND line */
.ic-carousel .carousel-caption > :nth-child(2){
  font-size: calc(var(--cap-title-fs, 1.15rem) * 0.9) !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.02em;
}

/* =========================================================
   4A) TOP-LEFT CONTENT LABEL (ADDITIONAL TO LOWER-LEFT CAPTION)
   Notes:
   • Separate from .carousel-caption
   • 1rem from top and left
   • Black text on white “highlighter” background
========================================================= */

.ic-carousel .carousel-toptext {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 4;
  pointer-events: none;
  text-align: left;
}

.ic-carousel .carousel-toptext > * {
  display: inline;
  margin: 0;
  padding: 0.08rem 0.28rem;
  background: var(--color-white, #fff);
  color: var(--color-black, #000);
  line-height: 1.2;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* ---------------------------------------------------------
   5) INDICATORS (DOTS) — MOVE HIGHER
--------------------------------------------------------- */
.ic-carousel .carousel-indicators {
  bottom: 0.5rem;
  transform: translateY(-0.5rem);
}

/* ---------------------------------------------------------
   6) THUMBNAILS — START FLUSH LEFT
--------------------------------------------------------- */
.ic-carousel-thumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  margin-left: 0;
  padding-left: 0;
}

.ic-carousel-thumb {
  width: 84px;
  padding: 0;
  margin: 0;
  border: 1px solid currentColor;
  background: transparent;
  opacity: 0.75;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.ic-carousel-thumb:hover,
.ic-carousel-thumb:focus,
.ic-carousel-thumb.active {
  opacity: 1;
}

.ic-carousel-thumb img {
  display: block;
  width: 100%;
  height: auto;
}

/* Section 7 pedestrianization carousel thumbnails */
#pedestrianizationCarouselS7 + .ic-carousel-thumbs,
#collapse-fidi-future-tour .ic-carousel-thumbs {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 0.35rem !important;
  width: 100% !important;
  margin: 0.5rem 0 0 0 !important;
  padding: 0 !important;
  overflow-x: auto !important;
}

#pedestrianizationCarouselS7 + .ic-carousel-thumbs .ic-carousel-thumb,
#collapse-fidi-future-tour .ic-carousel-thumb {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: 72px !important;
  max-width: 72px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#pedestrianizationCarouselS7 + .ic-carousel-thumbs .ic-carousel-thumb img,
#collapse-fidi-future-tour .ic-carousel-thumb img {
  display: block !important;
  width: 72px !important;
  height: auto !important;
  max-width: 72px !important;
}
/* =========================================================
   END OF FILE
========================================================= */