/* ============================================================
   HubSync Elementor Widgets – widgets.css  v1.0.2
   Font: Montserrat (loaded via plugin PHP)
   Max content width: 1280px
   ============================================================ */

.hs-wp-section *,
.hs-stats-section * {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

/* ============================================================
   WORK PROCESS WIDGET
   ============================================================ */

.hs-wp-section {
  width:               100%;
  background-color:    #0d0d0d;
  background-size:     cover;
  background-position: center center;
  background-repeat:   no-repeat;
  font-family:         'Montserrat', sans-serif;
  padding:             80px 0;
}

/* ── CSS Grid inner wrapper ──────────────────────────────────
   Two columns: [42% image] [1fr content]
   Two rows:    [header] [steps]
   The image area is assigned grid-area "image" which spans
   BOTH rows, so the photo fills the height of header + steps.
   ─────────────────────────────────────────────────────────── */
.hs-wp-inner {
  display:               grid;
  grid-template-columns: 42% 1fr;
  grid-template-rows:    auto auto;
  grid-template-areas:
    "image header"
    "image steps";
  max-width:             1280px;
  margin:                0 auto;
  padding:               0 40px;
}

/* ── Left image column ── */
.hs-wp-image-col {
  grid-area:    image;
  display:      flex;
  align-self:   stretch;    /* fills combined row height   */
  padding-right: 48px;
  position:     relative;
  z-index:      2;          /* renders ON TOP of .hs-steps-wrapper */
}

/* Rounded on ALL 4 corners */
.hs-wp-image-mask {
  width:         100%;
  border-radius: 20px;
  overflow:      hidden;
  box-shadow:    0 24px 64px rgba(0, 0, 0, 0.55);
}

.hs-wp-image {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* ── Header area (eyebrow + title + description) ── */
.hs-wp-header {
  grid-area:       header;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  padding-bottom:  40px;
}

.hs-wp-eyebrow-wrap {
  display:       flex;
  align-items:   center;
  gap:           8px;
  margin-bottom: 18px;
}

.hs-wp-eyebrow-icon {
  width:       20px;
  height:      20px;
  object-fit:  contain;
  flex-shrink: 0;
}

.hs-wp-eyebrow {
  font-family:    'Montserrat', sans-serif;
  font-size:      14px;
  font-weight:    700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color:          #ffffff;
}

.hs-wp-title {
  font-family:   'Montserrat', sans-serif;
  line-height:   1.15;
  margin-bottom: 22px;
}

.hs-wp-title-bold {
  display:     block;
  font-size:   clamp(28px, 3.2vw, 46px);
  font-weight: 800;
  color:       #ffffff;
  line-height: 1.15;
}

.hs-wp-title-light {
  display:     block;
  font-size:   clamp(28px, 3.2vw, 46px);
  font-weight: 400;
  color:       #ffffff;
  line-height: 1.15;
}

.hs-wp-description {
  font-family: 'Montserrat', sans-serif;
  font-size:   15px;
  font-weight: 400;
  line-height: 1.7;
  color:       #cccccc;
  max-width:   560px;
}

/* ── Steps wrapper ───────────────────────────────────────────
   Grid area "steps" sits in column 2, row 2.
   We then pull it 24px LEFT with a negative margin so its
   left edge slides 24px UNDER the image column.
   The image (z-index 2) is on top; the steps (z-index 1)
   peek out from beneath with a top-left border-radius of 20px
   that mirrors the image's bottom-right rounded corner.
   On screens ≤ 1024px we reset this to zero overlap.
   ─────────────────────────────────────────────────────────── */
.hs-steps-wrapper {
  grid-area:     steps;
  position:      relative;
  z-index:       1;
  margin-left:   -24px;   /* slide under image column by 24px */
  padding-left:  24px;    /* keep step content visually aligned */
  padding-top:   32px;
  border-radius: 20px 0 0 0; /* only top-left curved */
}

/* Number row with connecting line */
.hs-steps-numbers-row {
  display:       flex;
  align-items:   center;
  margin-bottom: 24px;
}

.hs-step-col {
  flex: 1;
}

.hs-step-number-wrap {
  display:     flex;
  align-items: center;
}

.hs-step-badge {
  flex-shrink:      0;
  width:            52px;
  height:           52px;
  border-radius:    50%;
  background-color: #2a2a2a;
  color:            #ffffff;
  font-family:      'Montserrat', sans-serif;
  font-size:        20px;
  font-weight:      700;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  position:         relative;
  z-index:          1;
}

.hs-step-line {
  flex:             1;
  height:           1px;
  background-color: #444444;
}

.hs-steps-content-row {
  display: flex;
}

.hs-steps-content-row .hs-step-col {
  padding-right: 32px;
}

.hs-steps-content-row .hs-step-col:last-child {
  padding-right: 0;
}

.hs-step-title {
  font-family:   'Montserrat', sans-serif;
  font-size:     17px;
  font-weight:   700;
  color:         #ffffff;
  margin-bottom: 12px;
  line-height:   1.3;
}

.hs-step-desc {
  font-family: 'Montserrat', sans-serif;
  font-size:   14px;
  font-weight: 400;
  color:       #cccccc;
  line-height: 1.65;
}

/* ============================================================
   STATS WIDGET
   ============================================================ */

.hs-stats-section {
  width:            100%;
  background-color: #0d0d0d;
  font-family:      'Montserrat', sans-serif;
  padding:          60px 0;
}

.hs-stats-inner {
  max-width: 1280px;
  margin:    0 auto;
  padding:   0 40px;
}

.hs-stats-grid {
  display:               grid;
  grid-template-columns: repeat( var(--hs-stats-cols, 4), 1fr );
  gap:                   0;
}

/* ── Individual stat card ─────────────────────────────────────
   Background is fully transparent.
   The visible "border" is 8 short gradient lines — two per
   corner (one horizontal + one vertical) — that form L-shaped
   bracket marks at each corner. The middle sections of each
   edge are invisible.

   Three CSS custom properties drive the appearance:
     --hs-card-corner-color  ← set by Elementor color picker
     --hs-corner-size        ← set by "Corner Length" slider
     --hs-corner-thick       ← set by "Corner Thickness" slider
   ─────────────────────────────────────────────────────────── */
.hs-stat-card {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  padding:         40px 32px;
  position:        relative;
  background:      transparent;

  --hs-card-corner-color: rgba(255, 255, 255, 0.45);
  --hs-corner-size:       40px;
  --hs-corner-thick:      1px;

  background-image:
    /* top-left  – horizontal segment */
    linear-gradient(to right,  var(--hs-card-corner-color), var(--hs-card-corner-color)),
    /* top-left  – vertical segment */
    linear-gradient(to bottom, var(--hs-card-corner-color), var(--hs-card-corner-color)),
    /* top-right – horizontal segment */
    linear-gradient(to left,   var(--hs-card-corner-color), var(--hs-card-corner-color)),
    /* top-right – vertical segment */
    linear-gradient(to bottom, var(--hs-card-corner-color), var(--hs-card-corner-color)),
    /* bot-left  – horizontal segment */
    linear-gradient(to right,  var(--hs-card-corner-color), var(--hs-card-corner-color)),
    /* bot-left  – vertical segment */
    linear-gradient(to top,    var(--hs-card-corner-color), var(--hs-card-corner-color)),
    /* bot-right – horizontal segment */
    linear-gradient(to left,   var(--hs-card-corner-color), var(--hs-card-corner-color)),
    /* bot-right – vertical segment */
    linear-gradient(to top,    var(--hs-card-corner-color), var(--hs-card-corner-color));

  background-position:
    0   0,        /* top-left  H */
    0   0,        /* top-left  V */
    100% 0,       /* top-right H */
    100% 0,       /* top-right V */
    0   100%,     /* bot-left  H */
    0   100%,     /* bot-left  V */
    100% 100%,    /* bot-right H */
    100% 100%;    /* bot-right V */

  background-size:
    var(--hs-corner-size)  var(--hs-corner-thick),   /* top-left  H */
    var(--hs-corner-thick) var(--hs-corner-size),    /* top-left  V */
    var(--hs-corner-size)  var(--hs-corner-thick),   /* top-right H */
    var(--hs-corner-thick) var(--hs-corner-size),    /* top-right V */
    var(--hs-corner-size)  var(--hs-corner-thick),   /* bot-left  H */
    var(--hs-corner-thick) var(--hs-corner-size),    /* bot-left  V */
    var(--hs-corner-size)  var(--hs-corner-thick),   /* bot-right H */
    var(--hs-corner-thick) var(--hs-corner-size);    /* bot-right V */

  background-repeat: no-repeat;
}

/* ── Large outlined / stroke number ── */
.hs-stat-number {
  font-family:               'Montserrat', sans-serif;
  font-size:                 clamp(60px, 7vw, 110px);
  font-weight:               800;
  line-height:               1;
  color:                     transparent;
  -webkit-text-stroke-width: 1.5px;
  -webkit-text-stroke-color: #ffffff;
  letter-spacing:            -0.02em;
  margin-bottom:             16px;
  -webkit-font-smoothing:    antialiased;
}

.hs-stat-label {
  font-family:    'Montserrat', sans-serif;
  font-size:      14px;
  font-weight:    700;
  letter-spacing: 0.02em;
  color:          #ffffff;
  text-transform: capitalize;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet – stack work-process, 2-col stats */
@media ( max-width: 1024px ) {

  .hs-wp-inner {
    display:        flex;
    flex-direction: column;
    padding:        0 24px;
  }

  .hs-wp-image-col {
    padding-right: 0;
    margin-bottom: 36px;
  }

  .hs-wp-image-mask {
    max-width: 520px;
    margin:    0 auto;
  }

  .hs-wp-image {
    aspect-ratio: 16 / 9;
    height:       auto;
  }

  /* Remove overlap — image and steps are independent on small screens */
  .hs-steps-wrapper {
    margin-left:   0;
    padding-left:  0;
    border-radius: 0;
    padding-top:   24px;
  }

  .hs-stats-grid {
    grid-template-columns: repeat( 2, 1fr );
  }
}

/* Mobile */
@media ( max-width: 640px ) {

  .hs-wp-section { padding: 48px 0; }
  .hs-wp-inner   { padding: 0 16px; }

  .hs-steps-content-row {
    flex-direction: column;
    gap:            28px;
  }

  .hs-steps-content-row .hs-step-col {
    padding-right: 0;
  }

  .hs-step-line { display: none; }

  .hs-stats-section { padding: 40px 0; }
  .hs-stats-inner   { padding: 0 16px; }

  .hs-stats-grid {
    grid-template-columns: repeat( 2, 1fr );
  }

  .hs-stat-number { font-size: 56px; }

  .hs-stat-card { padding: 28px 20px; }
}

@media ( max-width: 360px ) {
  .hs-stats-grid {
    grid-template-columns: 1fr;
  }
}