/*
 * Diagonally-split inner-page hero: a solid color panel (title +
 * breadcrumb) sliced at an angle against a real photo, used on every
 * inner page (About, Products, Product Category, Contact, etc.).
 *
 * RTL: flex auto-reverses the visual order (color panel moves from the
 * inline-start side to inline-end, i.e. left-to-right in a right-to-left
 * document), but a shape defined with clip-path/absolute-position physical
 * values does NOT auto-mirror the way logical CSS properties do — every
 * "left"/"right" below is a value the panel's own diagonal edge and padding
 * depend on, so each needs its own [dir=rtl] counterpart (or a logical
 * property) rather than being left as plain LTR-only physical values.
 */
.rs-split-breadcrumb {
  position: relative;
  display: flex;
  min-height: 300px;
  overflow: hidden;
}

.rs-split-breadcrumb-color {
  position: relative;
  z-index: 2;
  flex: 0 0 58%;
  max-width: 58%;
  background: var(--rs-theme-light-blue);
  clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
  display: flex;
  align-items: center;
  padding-block: 60px;
  /* inline-start (outer edge, away from the photo) / inline-end (inner
     edge, against the diagonal cut) — logical so this stays correct after
     the mirror below without needing its own [dir=rtl] override. */
  padding-inline: 60px 80px;
}

[dir="rtl"] .rs-split-breadcrumb-color {
  /* Mirror of "polygon(0 0, 100% 0, 80% 100%, 0 100%)": the diagonal cut
     moves from the right edge to the left edge, since the panel itself is
     now on the right (inline-end) with the photo on the left. */
  clip-path: polygon(100% 0, 0 0, 20% 100%, 100% 100%);
}

.rs-split-breadcrumb-content h1 {
  font-family: var(--rs-ff-title);
  color: var(--rs-white);
  font-size: 40px;
  font-weight: var(--rs-fw-bold);
  margin-bottom: 14px;
}

.rs-split-breadcrumb-nav {
  font-size: 15px;
  color: var(--rs-rgba-1, rgba(255, 255, 255, 0.85));
}

.rs-split-breadcrumb-nav a {
  color: var(--rs-white);
  text-decoration: none;
}

.rs-split-breadcrumb-nav a:hover {
  text-decoration: underline;
}

.rs-split-breadcrumb-nav span {
  color: rgba(255, 255, 255, 0.75);
  margin: 0 6px;
}

/* The "›" separator visually points the wrong way once breadcrumb reads
   right-to-left (Home is still first, but "›" implies left-to-right flow). */
[dir="rtl"] .rs-split-breadcrumb-sep {
  display: inline-block;
  transform: scaleX(-1);
}

.rs-split-breadcrumb-icons {
  position: absolute;
  inset-inline-start: 40px;
  bottom: 0;
  width: 240px;
  height: 72px;
}

.rs-split-breadcrumb-photo {
  flex: 1;
  margin-inline-start: -12%;
  background-size: cover;
  background-position: center;
}

@media (max-width: 767px) {
  .rs-split-breadcrumb {
    min-height: 220px;
  }
  .rs-split-breadcrumb-color {
    flex-basis: 100%;
    max-width: 100%;
    clip-path: none;
    padding: 40px 24px;
  }
  .rs-split-breadcrumb-photo {
    display: none;
  }
  .rs-split-breadcrumb-content h1 {
    font-size: 28px;
  }
}