.tas-blog-breadcrumb {
  --tas-content-gutter: 20px;
}

.tas-blog-breadcrumb__inner {
  width: min(100% - calc(var(--tas-content-gutter) * 2), var(--layout-max-width));
  margin: 0 auto;
}

.tas-blog-breadcrumb__nav {
  margin: 0;
}

.tas-blog-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.tas-blog-breadcrumb__item {
  display: inline-flex;
  align-items: center;
}

.tas-blog-breadcrumb__item:not(:last-child)::after {
  content: "›";
  margin: 0 8px;
  color: var(--accent);
  opacity: 0.85;
}

.tas-blog-breadcrumb__item a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.tas-blog-breadcrumb__item a:hover {
  color: var(--primary);
}

.tas-blog-breadcrumb__item span[aria-current="page"] {
  color: var(--primary);
  font-weight: 600;
}

/*
 * Overlay — absolute on top of banner (no background).
 * Put breadcrumb + TAS Blog Hero in the same Elementor container;
 * breadcrumb must be the first widget, hero the second.
 */
.e-con:has(.tas-blog-breadcrumb--overlay) {
  position: relative;
}

.elementor-element.elementor-widget-Common-breadcrumb:has(.tas-blog-breadcrumb--overlay),
.elementor-widget-Common-breadcrumb:has(.tas-blog-breadcrumb--overlay) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 12;
  width: 100%;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: none;
}

.tas-blog-breadcrumb--overlay {
  margin: 0;
  padding: 16px 0 0;
  background: transparent;
  border: none;
}

.tas-blog-breadcrumb--overlay .tas-blog-breadcrumb__nav {
  pointer-events: auto;
}

/* Reserve top space on hero so title does not overlap crumbs */
.elementor-element.elementor-widget-Common-breadcrumb:has(.tas-blog-breadcrumb--overlay)
  + .elementor-element.elementor-widget-tas-blog-hero
  .tas-blog-hero__inner,
.elementor-widget-Common-breadcrumb:has(.tas-blog-breadcrumb--overlay)
  + .elementor-widget-tas-blog-hero
  .tas-blog-hero__inner {
  padding-top: 56px;
}

.elementor-element.elementor-widget-Common-breadcrumb:has(.tas-blog-breadcrumb--overlay)
  + .elementor-element.elementor-widget-tas-case-detail-hero
  .tas-case-detail-hero,
.elementor-widget-Common-breadcrumb:has(.tas-blog-breadcrumb--overlay)
  + .elementor-widget-tas-case-detail-hero
  .tas-case-detail-hero {
  padding-top: 0;
}

.elementor-element.elementor-widget-Common-breadcrumb:has(.tas-blog-breadcrumb--overlay)
  + .elementor-element.elementor-widget-tas-case-detail-hero
  .tas-case-detail-hero__content,
.elementor-widget-Common-breadcrumb:has(.tas-blog-breadcrumb--overlay)
  + .elementor-widget-tas-case-detail-hero
  .tas-case-detail-hero__content {
  padding-top: clamp(40px, 5vw, 52px);
}

/* Overlay on TAS Tour Line Hero — banner (order: -1 on mobile) must sit below crumbs */
.elementor-element.elementor-widget-Common-breadcrumb:has(.tas-blog-breadcrumb--overlay)
  + .elementor-element.elementor-widget-tas-tour-line-hero
  .tas-tour-hero,
.elementor-widget-Common-breadcrumb:has(.tas-blog-breadcrumb--overlay)
  + .elementor-widget-tas-tour-line-hero
  .tas-tour-hero {
  padding-top: clamp(48px, 7vw, 64px);
}

/* Overlay on TAS Tour Pkg Hero — same arch banner layout as tour line hero */
.elementor-element.elementor-widget-Common-breadcrumb:has(.tas-blog-breadcrumb--overlay)
  + .elementor-element.elementor-widget-tas-tour-pkg-hero
  .tas-tour-pkg-hero,
.elementor-widget-Common-breadcrumb:has(.tas-blog-breadcrumb--overlay)
  + .elementor-widget-tas-tour-pkg-hero
  .tas-tour-pkg-hero {
  padding-top: clamp(48px, 7vw, 64px);
}

/* Standalone — own row, still no fill color (works on any page background) */
.tas-blog-breadcrumb--standalone {
  padding: 14px 0;
  background: transparent;
}

@media (max-width: 767px) {
  .tas-blog-breadcrumb--overlay {
    padding-top: 12px;
  }

  .elementor-element.elementor-widget-Common-breadcrumb:has(.tas-blog-breadcrumb--overlay)
    + .elementor-element.elementor-widget-tas-blog-hero
    .tas-blog-hero__inner,
  .elementor-widget-Common-breadcrumb:has(.tas-blog-breadcrumb--overlay)
    + .elementor-widget-tas-blog-hero
    .tas-blog-hero__inner {
    padding-top: 48px;
  }

  .elementor-element.elementor-widget-Common-breadcrumb:has(.tas-blog-breadcrumb--overlay)
    + .elementor-element.elementor-widget-tas-case-detail-hero
    .tas-case-detail-hero,
  .elementor-widget-Common-breadcrumb:has(.tas-blog-breadcrumb--overlay)
    + .elementor-widget-tas-case-detail-hero
    .tas-case-detail-hero {
    padding-top: 0;
  }

  .elementor-element.elementor-widget-Common-breadcrumb:has(.tas-blog-breadcrumb--overlay)
    + .elementor-element.elementor-widget-tas-case-detail-hero
    .tas-case-detail-hero__inner,
  .elementor-widget-Common-breadcrumb:has(.tas-blog-breadcrumb--overlay)
    + .elementor-widget-tas-case-detail-hero
    .tas-case-detail-hero__inner {
    padding-top: 48px;
  }

  .elementor-element.elementor-widget-Common-breadcrumb:has(.tas-blog-breadcrumb--overlay)
    + .elementor-element.elementor-widget-tas-tour-line-hero
    .tas-tour-hero,
  .elementor-widget-Common-breadcrumb:has(.tas-blog-breadcrumb--overlay)
    + .elementor-widget-tas-tour-line-hero
    .tas-tour-hero {
    padding-top: clamp(26px, 8vw, 50px);
  }

  .elementor-element.elementor-widget-Common-breadcrumb:has(.tas-blog-breadcrumb--overlay)
    + .elementor-element.elementor-widget-tas-tour-pkg-hero
    .tas-tour-pkg-hero,
  .elementor-widget-Common-breadcrumb:has(.tas-blog-breadcrumb--overlay)
    + .elementor-widget-tas-tour-pkg-hero
    .tas-tour-pkg-hero {
    padding-top: clamp(26px, 8vw, 50px);
  }
}