.weblabs-bold-service{
  /* layout */
  --wbs-gap: 22px;
  --wbs-h: 260px;
  --wbs-radius: 0px;
  --wbs-anim: 450ms;
  --wbs-active-grow: 2.2;

  /* header deco */
  --wbs-bar: #c8a85a;
  --wbs-line: #1f2f32;
  --wbs-title-underline: #1f2f32;
  --wbs-head-space: 18px;

  /* compact overlay */
  --wbs-ov: rgba(0,0,0,.60);
  --wbs-ov-hover: rgba(0,0,0,.45);

  /* expanded */
  --wbs-expanded-bg: #f3f3f3;
  --wbs-expanded-text: #222;
  --wbs-pattern-op: 0.12;
  --wbs-exp-pt: 28px;
  --wbs-exp-pr: 28px;
  --wbs-exp-pb: 28px;
  --wbs-exp-pl: 28px;

  /* top icon */
  --wbs-topicon-bg: #153b45;

  /* mobile toggle */
  --wbs-toggle-sz: 40px;
  --wbs-toggle-bg: rgba(255,255,255,.08);
  --wbs-toggle-bd: rgba(255,255,255,.18);
  --wbs-toggle: #fff;

  /* button */
  --wbs-btn-bg: #c8a85a;
  --wbs-btn-color: #0f2b33;
  --wbs-btn-dia-bg: #fff;
  --wbs-btn-arrow: #c8a85a;

  position: relative;
  width: 100%;
}

/* =========================
   Header (line must be LEFT)
   ========================= */
.weblabs-bold-service__header{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: var(--wbs-head-space);
  padding-left: 26px; /* جا برای دکور سمت چپ */
}

.weblabs-bold-service__header-deco{
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.weblabs-bold-service__bar{
    width: 100px;
    height: 16px;
    background: var(--wbs-bar);
    display: block;
}

.weblabs-bold-service__line{
  width: 2px;
  flex: 1;
  background: var(--wbs-line);
  display: block;
  margin-top: 10px;
}

.weblabs-bold-service__header-row{
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.weblabs-bold-service__header-main{
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
}

.weblabs-bold-service__header-title{
  margin: 0;
  font-weight: 700;
  line-height: 1.2;
}

.weblabs-bold-service__header-underline{
  width: 46px;
  height: 2px;
  background: var(--wbs-title-underline);
  display: block;
}

.weblabs-bold-service__header-desc{
  opacity: .8;
  font-weight: 300;
}

/* =========================
   Desktop items row
   ========================= */
.weblabs-bold-service__items{
  display: flex;
  gap: var(--wbs-gap);
  align-items: stretch;
}

.weblabs-bold-service__item{
  position: relative;
  overflow: hidden;
  border-radius: var(--wbs-radius);
  height: var(--wbs-h);
  flex: 1 1 0;
  cursor: pointer;
  user-select: none;

  transition: flex-grow var(--wbs-anim) ease, transform var(--wbs-anim) ease;
  transform: translateZ(0);
  outline: none;
}

.weblabs-bold-service__item:focus-visible{
  outline: 2px solid rgba(200,168,90,.55);
  outline-offset: 2px;
}

.weblabs-bold-service__item.is-active{
  flex-grow: var(--wbs-active-grow);
}

/* media */
.weblabs-bold-service__media{
  position: absolute;
  inset: 0;
  z-index: 1;
}

.weblabs-bold-service__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.weblabs-bold-service__overlay{
  position: absolute;
  inset: 0;
  background: var(--wbs-ov);
  transition: background var(--wbs-anim) ease;
}

.weblabs-bold-service__item:hover .weblabs-bold-service__overlay{
  background: var(--wbs-ov-hover);
}

/* Compact content on image */
.weblabs-bold-service__compact{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px;
  text-align: center;
  transition: opacity var(--wbs-anim) ease;
}

.weblabs-bold-service__compact-title{
  margin: 0;
  color: #fff;
  line-height: 1.25;
  font-size: 22px;
  font-weight: 700;
  text-shadow: 0 2px 20px rgba(0,0,0,.35);
}

.weblabs-bold-service__compact-subtitle{
  margin-top: 10px;
  color: rgba(255,255,255,.7);
  font-size: 14px;
}

/* Toggle (arrow) - show mainly on mobile but keep on desktop hidden */
.weblabs-bold-service__toggle{
  position: absolute;
  top: 12px;
  left: 12px;
  width: var(--wbs-toggle-sz);
  height: var(--wbs-toggle-sz);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wbs-toggle-bg);
  border: 1px solid var(--wbs-toggle-bd);
  color: var(--wbs-toggle);
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  transition: transform var(--wbs-anim) ease, opacity var(--wbs-anim) ease;
}

.weblabs-bold-service__item.is-active .weblabs-bold-service__toggle{
  transform: rotate(180deg);
}

/* Expanded grey card (exact hover state like your screenshot) */
.weblabs-bold-service__expanded{
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--wbs-expanded-bg);
  color: var(--wbs-expanded-text);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--wbs-anim) ease;
}

.weblabs-bold-service__expanded::before{
  /* dotted pattern on LEFT side like screenshot */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 46%;
  opacity: var(--wbs-pattern-op);
  background-image:
    radial-gradient(currentColor 1px, transparent 1px);
  background-size: 14px 14px;
  color: #9a9a9a;
  pointer-events: none;
}

.weblabs-bold-service__expanded-inner{
    position: relative;
    z-index: 2;
    height: 100%;
    padding: var(--wbs-exp-pt) var(--wbs-exp-pr) var(--wbs-exp-pb) var(--wbs-exp-pl);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 18px;
    text-align: right;
}

.weblabs-bold-service__expanded-top{
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 18px;
    flex-direction: row-reverse;
}

.weblabs-bold-service__expanded-title{
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.weblabs-bold-service__expanded-subtitle{
  margin-top: 8px;
  font-size: 14px;
  opacity: .55;
}

.weblabs-bold-service__topicon{
  width: 58px;
  height: 58px;
  background: var(--wbs-topicon-bg);
  color: var(--wbs-topicon-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.weblabs-bold-service__topicon svg path {
    fill: var(--wbs-topicon-color);
}

.weblabs-bold-service__topicon svg,
.weblabs-bold-service__topicon i{
  width: 22px;
  height: 22px;
  font-size: 22px;
}

/* body */
.weblabs-bold-service__expanded-body{
  font-size: 14px;
  line-height: 2;
  opacity: .9;
}
.weblabs-bold-service__expanded-body p{ margin: 0; }
.weblabs-bold-service__expanded-body p + p{ margin-top: 10px; }

/* Button exactly like screenshot: gold rectangle + white diamond + arrow */
.weblabs-bold-service__btn{
  align-self: flex-start;
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  background: var(--wbs-btn-bg);
  color: var(--wbs-btn-color);
  padding: 10px 14px;
  border: 0;
}

.weblabs-bold-service__btn-dia{
  width: 30px;
  height: 30px;
  background: var(--wbs-btn-dia-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: rotate(45deg);
  flex: 0 0 auto;
}

.weblabs-bold-service__btn-dia svg{
  transform: rotate(-45deg);
  color: var(--wbs-btn-arrow);
}

.weblabs-bold-service__btn-text{
  white-space: nowrap;
}

/* show expanded on active */
.weblabs-bold-service__item.is-active .weblabs-bold-service__expanded{
  opacity: 1;
  pointer-events: auto;
}
.weblabs-bold-service__item.is-active .weblabs-bold-service__compact{
  opacity: 0;
  pointer-events: none;
}
.weblabs-bold-service__item.is-active .weblabs-bold-service__media{
  opacity: 0;
  pointer-events: none;
}

.weblabs-bold-service__media img {
    height: 100%;
    object-fit: cover;
}

/* =========================
   Mobile accordion
   ========================= */
@media (max-width: 767px){
  .weblabs-bold-service__items{
    display: block;
  }

  .weblabs-bold-service__item{
    height: auto;
    flex: none;
  }

  .weblabs-bold-service__item + .weblabs-bold-service__item{
    margin-top: var(--wbs-gap);
  }

  .weblabs-bold-service__toggle{
    opacity: 1;
    pointer-events: auto;
  }

  /* compact becomes a header strip with image */
  .weblabs-bold-service__media{
    position: relative;
    height: 92px;
  }

  .weblabs-bold-service__compact{
    position: absolute;
    inset: 0;
    justify-content: center;
  }

  /* expanded becomes collapsible section below */
  .weblabs-bold-service__expanded{
    position: relative;
    inset: auto;
    opacity: 1; /* manage visibility with max-height */
    pointer-events: auto;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--wbs-anim) ease;
  }

  .weblabs-bold-service__expanded-inner{
    height: auto;
    padding: 18px;
    justify-content: flex-start;
  }

  .weblabs-bold-service__expanded::before{
    width: 55%;
  }

  .weblabs-bold-service__item.is-active .weblabs-bold-service__expanded{
    max-height: 1200px; /* enough for content */
  }

  /* in mobile we keep image visible; expanded appears below */
  .weblabs-bold-service__item.is-active .weblabs-bold-service__media{
    opacity: 1;
    pointer-events: auto;
  }

  .weblabs-bold-service__item.is-active .weblabs-bold-service__compact{
    opacity: 1;
    pointer-events: auto;
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .weblabs-bold-service__item,
  .weblabs-bold-service__expanded,
  .weblabs-bold-service__compact,
  .weblabs-bold-service__overlay{
    transition: none !important;
  }
}