/*
 * Theme layout primitives
 *
 * A standalone CSS Grid system.  This intentionally has no dependency on
 * the previous float/flex grid or its legacy class names.
 */
.tvd-grid {
  --tvd-grid-gap: clamp(1rem, 2vw, 2rem);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--tvd-grid-gap);
  width: min(100% - 2rem, var(--tvd-grid-width, 75rem));
  margin-inline: auto;
}

.tvd-grid--full,
.tvd-grid--full-width {
  width: 100%;
  margin-inline: 0;
}
.tvd-grid--gap-sm {
  --tvd-grid-gap: 0.75rem;
}
.tvd-grid--gap-lg {
  --tvd-grid-gap: 3rem;
}
.tvd-grid--gap-none {
  --tvd-grid-gap: 0;
}
.tvd-grid--gap-small {
  --tvd-grid-gap: 0.75rem;
}
.tvd-grid--gap-large {
  --tvd-grid-gap: 3rem;
}
.tvd-grid--gap-collapse {
  --tvd-grid-gap: 0;
}
.tvd-grid__item {
  grid-column: span var(--tvd-grid-span, 12);
  /* Keep the item filling its assigned tracks when the grid centers content. */
  width: 100%;
  min-width: 0;
}
.tvd-grid__content {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
}
.tvd-grid__item--divided {
  border-inline-start: 1px solid currentColor;
}
.tvd-grid--middle {
  align-items: center;
}
.tvd-grid--bottom {
  align-items: end;
}
.tvd-grid--equal > .tvd-grid__item {
  align-self: stretch;
}
.tvd-grid--center {
  justify-items: center;
}
.tvd-grid--right {
  justify-items: end;
}
.tvd-grid--columns-1 {
  --tvd-grid-card-columns: repeat(1, minmax(0, 1fr));
  grid-template-columns: var(--tvd-grid-card-columns);
}
.tvd-grid--columns-2 {
  --tvd-grid-card-columns: repeat(2, minmax(0, 1fr));
  grid-template-columns: var(--tvd-grid-card-columns);
}
.tvd-grid--columns-3 {
  --tvd-grid-card-columns: repeat(3, minmax(0, 1fr));
  grid-template-columns: var(--tvd-grid-card-columns);
}
.tvd-grid--columns-4 {
  --tvd-grid-card-columns: repeat(4, minmax(0, 1fr));
  grid-template-columns: var(--tvd-grid-card-columns);
}
.tvd-grid--columns-5 {
  --tvd-grid-card-columns: repeat(5, minmax(0, 1fr));
  grid-template-columns: var(--tvd-grid-card-columns);
}
.tvd-grid--columns-6 {
  --tvd-grid-card-columns: repeat(6, minmax(0, 1fr));
  grid-template-columns: var(--tvd-grid-card-columns);
}
.tvd-grid--cards > .tvd-grid__item {
  grid-column: auto;
}
/* Banner Grid Bento & Packery Layout */
.banner-grid,
.banner-grid.tvd-grid,
.banner-grid .tvd-grid,
.tvd-grid.tvd-grid--banner,
.tvd-grid--banner {
  display: block !important;
  position: relative !important;
  box-sizing: border-box;
  width: 100%;
}
.banner-grid .grid-col,
.banner-grid .tvd-grid__item,
.tvd-grid--banner .grid-col,
.tvd-grid--banner .tvd-grid__item {
  position: absolute !important;
  box-sizing: border-box;
}
.banner-grid .tvd-grid__item--span-12, .tvd-grid--banner .tvd-grid__item--span-12 { width: 100% !important; }
.banner-grid .tvd-grid__item--span-11, .tvd-grid--banner .tvd-grid__item--span-11 { width: 91.66666667% !important; }
.banner-grid .tvd-grid__item--span-10, .tvd-grid--banner .tvd-grid__item--span-10 { width: 83.33333333% !important; }
.banner-grid .tvd-grid__item--span-9,  .tvd-grid--banner .tvd-grid__item--span-9  { width: 75% !important; }
.banner-grid .tvd-grid__item--span-8,  .tvd-grid--banner .tvd-grid__item--span-8  { width: 66.66666667% !important; }
.banner-grid .tvd-grid__item--span-7,  .tvd-grid--banner .tvd-grid__item--span-7  { width: 58.33333333% !important; }
.banner-grid .tvd-grid__item--span-6,  .tvd-grid--banner .tvd-grid__item--span-6  { width: 50% !important; }
.banner-grid .tvd-grid__item--span-5,  .tvd-grid--banner .tvd-grid__item--span-5  { width: 41.66666667% !important; }
.banner-grid .tvd-grid__item--span-4,  .tvd-grid--banner .tvd-grid__item--span-4  { width: 33.33333333% !important; }
.banner-grid .tvd-grid__item--span-3,  .tvd-grid--banner .tvd-grid__item--span-3  { width: 25% !important; }
.banner-grid .tvd-grid__item--span-2,  .tvd-grid--banner .tvd-grid__item--span-2  { width: 16.66666667% !important; }
.banner-grid .tvd-grid__item--span-1,  .tvd-grid--banner .tvd-grid__item--span-1  { width: 8.33333333% !important; }

@media (max-width: 849px) {
  .banner-grid .tvd-grid__item--span-md-12, .tvd-grid--banner .tvd-grid__item--span-md-12 { width: 100% !important; }
  .banner-grid .tvd-grid__item--span-md-6,  .tvd-grid--banner .tvd-grid__item--span-md-6  { width: 50% !important; }
  .banner-grid .tvd-grid__item--span-md-4,  .tvd-grid--banner .tvd-grid__item--span-md-4  { width: 33.33333333% !important; }
  .banner-grid .tvd-grid__item--span-md-3,  .tvd-grid--banner .tvd-grid__item--span-md-3  { width: 25% !important; }
}
@media (max-width: 549px) {
  .banner-grid .tvd-grid__item--span-sm-12, .tvd-grid--banner .tvd-grid__item--span-sm-12 { width: 100% !important; }
  .banner-grid .tvd-grid__item--span-sm-6,  .tvd-grid--banner .tvd-grid__item--span-sm-6  { width: 50% !important; }
}

/* Banner Grid Spacing Gutter */
.banner-grid.tvd-grid--gap-collapse .grid-col,
.banner-grid .tvd-grid--gap-collapse .grid-col { padding: 0; }
.banner-grid.tvd-grid--gap-small .grid-col,
.banner-grid .tvd-grid--gap-small .grid-col { padding: 6px; }
.banner-grid.tvd-grid--gap-normal .grid-col,
.banner-grid .tvd-grid--gap-normal .grid-col { padding: 10px; }
.banner-grid.tvd-grid--gap-large .grid-col,
.banner-grid .tvd-grid--gap-large .grid-col { padding: 15px; }

/* Grid Col Inner and Banner Sizing */
.banner-grid .grid-col > .tvd-grid__content,
.banner-grid .grid-col > .col-inner {
  height: 100% !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden;
  border-radius: inherit;
}
.banner-grid .grid-col .banner,
.banner-grid .grid-col .tvd-hero-panel {
  height: 100% !important;
  width: 100% !important;
  position: absolute !important;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 0 !important;
  margin: 0 !important;
}
.banner-grid .banner-bg :is(img, picture, video),
.banner-grid .tvd-hero-panel__bg img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
}
.banner-grid .tvd-grid__content > content {
  inset: 0;
  margin: 0;
  position: absolute;
}

.tvd-grid__item--span-1 {
  --tvd-grid-span: 1;
}
.tvd-grid__item--span-2 {
  --tvd-grid-span: 2;
}
.tvd-grid__item--span-3 {
  --tvd-grid-span: 3;
}
.tvd-grid__item--span-4 {
  --tvd-grid-span: 4;
}
.tvd-grid__item--span-5 {
  --tvd-grid-span: 5;
}
.tvd-grid__item--span-6 {
  --tvd-grid-span: 6;
}
.tvd-grid__item--span-7 {
  --tvd-grid-span: 7;
}
.tvd-grid__item--span-8 {
  --tvd-grid-span: 8;
}
.tvd-grid__item--span-9 {
  --tvd-grid-span: 9;
}
.tvd-grid__item--span-10 {
  --tvd-grid-span: 10;
}
.tvd-grid__item--span-11 {
  --tvd-grid-span: 11;
}
.tvd-grid__item--span-12 {
  --tvd-grid-span: 12;
}

@media (max-width: 849px) {
  .tvd-grid--columns-md-1 {
    --tvd-grid-card-columns: repeat(1, minmax(0, 1fr));
    grid-template-columns: var(--tvd-grid-card-columns);
  }
  .tvd-grid--columns-md-2 {
    --tvd-grid-card-columns: repeat(2, minmax(0, 1fr));
    grid-template-columns: var(--tvd-grid-card-columns);
  }
  .tvd-grid--columns-md-3 {
    --tvd-grid-card-columns: repeat(3, minmax(0, 1fr));
    grid-template-columns: var(--tvd-grid-card-columns);
  }
  .tvd-grid--columns-md-4 {
    --tvd-grid-card-columns: repeat(4, minmax(0, 1fr));
    grid-template-columns: var(--tvd-grid-card-columns);
  }
  .tvd-grid__item--span-md-1 {
    --tvd-grid-span: 1;
  }
  .tvd-grid__item--span-md-2 {
    --tvd-grid-span: 2;
  }
  .tvd-grid__item--span-md-3 {
    --tvd-grid-span: 3;
  }
  .tvd-grid__item--span-md-4 {
    --tvd-grid-span: 4;
  }
  .tvd-grid__item--span-md-5 {
    --tvd-grid-span: 5;
  }
  .tvd-grid__item--span-md-6 {
    --tvd-grid-span: 6;
  }
  .tvd-grid__item--span-md-7 {
    --tvd-grid-span: 7;
  }
  .tvd-grid__item--span-md-8 {
    --tvd-grid-span: 8;
  }
  .tvd-grid__item--span-md-9 {
    --tvd-grid-span: 9;
  }
  .tvd-grid__item--span-md-10 {
    --tvd-grid-span: 10;
  }
  .tvd-grid__item--span-md-11 {
    --tvd-grid-span: 11;
  }
  .tvd-grid__item--span-md-12 {
    --tvd-grid-span: 12;
  }
}

@media (max-width: 549px) {
  .tvd-grid {
    --tvd-grid-gap: 1rem;
    width: min(100% - 1.5rem, var(--tvd-grid-width, 75rem));
  }
  .tvd-grid__item--span-sm-1 {
    --tvd-grid-span: 1;
  }
  .tvd-grid__item--span-sm-2 {
    --tvd-grid-span: 2;
  }
  .tvd-grid__item--span-sm-3 {
    --tvd-grid-span: 3;
  }
  .tvd-grid__item--span-sm-4 {
    --tvd-grid-span: 4;
  }
  .tvd-grid__item--span-sm-5 {
    --tvd-grid-span: 5;
  }
  .tvd-grid__item--span-sm-6 {
    --tvd-grid-span: 6;
  }
  .tvd-grid__item--span-sm-7 {
    --tvd-grid-span: 7;
  }
  .tvd-grid__item--span-sm-8 {
    --tvd-grid-span: 8;
  }
  .tvd-grid__item--span-sm-9 {
    --tvd-grid-span: 9;
  }
  .tvd-grid__item--span-sm-10 {
    --tvd-grid-span: 10;
  }
  .tvd-grid__item--span-sm-11 {
    --tvd-grid-span: 11;
  }
  .tvd-grid__item--span-sm-12 {
    --tvd-grid-span: 12;
  }
  .tvd-grid--columns-sm-1 {
    --tvd-grid-card-columns: repeat(1, minmax(0, 1fr));
    grid-template-columns: var(--tvd-grid-card-columns);
  }
  .tvd-grid--columns-sm-2 {
    --tvd-grid-card-columns: repeat(2, minmax(0, 1fr));
    grid-template-columns: var(--tvd-grid-card-columns);
  }
  .tvd-grid--columns-sm-3 {
    --tvd-grid-card-columns: repeat(3, minmax(0, 1fr));
    grid-template-columns: var(--tvd-grid-card-columns);
  }
}

/* ==========================================================================
   Slider (tvdipe) inside tvd-grid
   tvdipe reads offsetWidth of each cell BEFORE adding .isactivetvdiped.
   We apply explicit widths using the .slider class so that cells are sized
   correctly when the carousel engine measures them.
   After activation .isactivetvdiped replaces the CSS Grid display so that
   tvdipe's internal viewport/track divs work as intended.

   NOTE: designweb-enhancements.css sets
     .tvdiper-slider-next-pre > div:not(.col) { width: 100% !important }
   We override with higher-specificity + !important rules below.
   ========================================================================== */

/* Pre-activation: items need explicit widths so tvdipe can measure correctly.
   .tvd-grid.slider.tvd-grid--columns-N > .tvd-grid__item  (specificity 0-4-0)
   wins over  .slider > div:not(.col)  (0-2-1). */
.tvd-grid.slider.tvd-grid--columns-2 > .tvd-grid__item {
  width: 50% !important;
}
.tvd-grid.slider.tvd-grid--columns-3 > .tvd-grid__item {
  width: 33.3333% !important;
}
.tvd-grid.slider.tvd-grid--columns-4 > .tvd-grid__item {
  width: 25% !important;
}
.tvd-grid.slider.tvd-grid--columns-5 > .tvd-grid__item {
  width: 20% !important;
}
.tvd-grid.slider.tvd-grid--columns-6 > .tvd-grid__item {
  width: 16.6667% !important;
}

/* Post-activation: items are inside .tvdiper-slider-next-pre
   Selector specificity (0-4-0) beats .tvdiper-slider-next-pre > div:not(.col) (0-1-2).
   Both have !important so specificity wins. */
.tvd-grid--columns-2.isactivetvdiped .tvdiper-slider-next-pre > .tvd-grid__item {
  width: 50% !important;
}
.tvd-grid--columns-3.isactivetvdiped .tvdiper-slider-next-pre > .tvd-grid__item {
  width: 33.3333% !important;
}
.tvd-grid--columns-4.isactivetvdiped .tvdiper-slider-next-pre > .tvd-grid__item {
  width: 25% !important;
}
.tvd-grid--columns-5.isactivetvdiped .tvdiper-slider-next-pre > .tvd-grid__item {
  width: 20% !important;
}
.tvd-grid--columns-6.isactivetvdiped .tvdiper-slider-next-pre > .tvd-grid__item {
  width: 16.6667% !important;
}

/* When tvdipe has activated the slider, switch the outer grid to block. */
.tvd-grid.isactivetvdiped {
  display: block;
  overflow: hidden;
}

@media (max-width: 849px) {
  .tvd-grid.slider.tvd-grid--columns-md-2 > .tvd-grid__item {
    width: 50% !important;
  }
  .tvd-grid.slider.tvd-grid--columns-md-3 > .tvd-grid__item {
    width: 33.3333% !important;
  }
  .tvd-grid.slider.tvd-grid--columns-md-4 > .tvd-grid__item {
    width: calc(25% - var(--tvd-grid-gap) * 3 / 4) !important;
  }
  .tvd-grid--columns-md-2.isactivetvdiped .tvdiper-slider-next-pre > .tvd-grid__item {
    width: 50% !important;
  }
  .tvd-grid--columns-md-3.isactivetvdiped .tvdiper-slider-next-pre > .tvd-grid__item {
    width: 33.3333% !important;
  }
  .tvd-grid--columns-md-4.isactivetvdiped .tvdiper-slider-next-pre > .tvd-grid__item {
    width: calc(25% - var(--tvd-grid-gap) * 3 / 4) !important;
  }
}

@media (max-width: 549px) {
  .tvd-grid.slider.tvd-grid--columns-sm-1 > .tvd-grid__item {
    width: 100% !important;
  }
  .tvd-grid.slider.tvd-grid--columns-sm-2 > .tvd-grid__item {
    width: 50% !important;
  }
  .tvd-grid.slider.tvd-grid--columns-sm-3 > .tvd-grid__item {
    width: calc(33.3333% - var(--tvd-grid-gap) * 2 / 3) !important;
  }
  .tvd-grid--columns-sm-1.isactivetvdiped .tvdiper-slider-next-pre > .tvd-grid__item {
    width: 100% !important;
  }
  .tvd-grid--columns-sm-2.isactivetvdiped .tvdiper-slider-next-pre > .tvd-grid__item {
    width: 50% !important;
  }
  .tvd-grid--columns-sm-3.isactivetvdiped .tvdiper-slider-next-pre > .tvd-grid__item {
    width: calc(33.3333% - var(--tvd-grid-gap) * 2 / 3) !important;
  }
}