/* ============================================================
   BOSC Work Slider — style.css  v1.1
   Pixel-matched to Figma design.
   
   ROOT CAUSE FIX v1.1:
   Removed `overflow: visible !important` from .bws-swiper.
   That line was forcing Swiper slides to escape the .bws-inner
   container, making cards appear edge-to-edge. Swiper's default
   overflow:hidden now applies — slider stays centred inside
   the max-width container, matching Figma exactly.
   ============================================================ */

/* ── Design tokens (change these to re-brand) ───────────────────────────────── */
.bws-work-slider {

  /* Layout */
  --bws-max-w     : 1200px;
  --bws-pad-x     : 48px;
  --bws-pad-y     : 68px;

  /* Colours — matched to Figma */
  --bws-bg        : #edf1f8;         /* section background                  */
  --bws-dark      : #0f1e3d;         /* heading / card title                 */
  --bws-accent    : #f07b22;         /* "Our Work" orange                    */
  --bws-blue      : #1b4f96;         /* category tag                         */
  --bws-muted     : #64718a;         /* subtitle / description               */
  --bws-card-bg   : #ffffff;
  --bws-card-r    : 10px;            /* card corner radius                   */
  --bws-shadow    : 0 2px 16px rgba(15, 30, 61, .07);
  --bws-shadow-hv : 0 8px 32px rgba(15, 30, 61, .14);

  /* Nav buttons */
  --bws-nav-sz    : 40px;
  --bws-nav-bd    : #ccd4e6;
  --bws-nav-clr   : #4a556e;
  --bws-nav-hv-bd : #1b4f96;
  --bws-nav-hv-bg : #eef3fb;
  --bws-nav-hv-cl : #1b4f96;
}

/* ── Box-sizing reset scoped to block ────────────────────────────────────────── */
.bws-work-slider,
.bws-work-slider *,
.bws-work-slider *::before,
.bws-work-slider *::after {
  box-sizing : border-box;
}

/* ── Section ─────────────────────────────────────────────────────────────────── */
.bws-work-slider {
  background: #F8F8F8;
  padding    : var(--bws-pad-y) 0;
  width      : 100%;
}

/* ── Max-width container — centres everything on the page ───────────────────── */
.bws-inner {
  max-width : var(--bws-max-w);
  margin    : 0 auto;
  padding   : 0 var(--bws-pad-x);
}

/* Full-width Gutenberg alignment — keeps inner padding but uses full viewport */
.bws-work-slider.alignfull .bws-inner,
.bws-work-slider.alignwide .bws-inner {
  max-width : 100%;
  padding   : 0 clamp(20px, 5vw, 80px);
}

/* ── Header row ──────────────────────────────────────────────────────────────── */
.bws-header {
  display         : flex;
  align-items     : flex-start;
  justify-content : space-between;
  gap             : 24px;
  margin-bottom   : 40px;
}

.bws-header-text { flex: 1; }

/* Section title */
.bws-section-title {
  font-family    : inherit;
  font-size      : clamp(1.65rem, 2.8vw, 2rem);
  font-weight    : 500;
 color: #3d3d3d;
  line-height    : 1.15;
  letter-spacing : -0.025em;
  margin         : 0 0 10px;
}

/* Orange highlight word(s) in title */
.bws-title-accent {
      color: #1C4D86;
      font-weight: 500;
}

/* Subtitle */
.bws-section-subtitle {
    font-size: 18px;
    color: #3d3d3d;
    line-height: 1.6;
    margin: 0;
    font-weight: 400;
}

/* ── Navigation buttons ──────────────────────────────────────────────────────── */
.bws-nav {
  display     : flex;
  gap         : 10px;
  flex-shrink : 0;
  align-self  : flex-start;
  margin-top  : 6px;   /* optical alignment with title baseline */
}

.bws-nav-btn {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  width           : var(--bws-nav-sz);
  height          : var(--bws-nav-sz);
  border-radius   : 50%;
  border          : 1.5px solid #3D3D3D;
  background      : transparent;
  color           : var(--bws-nav-clr);
  cursor          : pointer;
  padding         : 0;
  transition      : border-color 0.18s ease, background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
  flex-shrink     : 0;
}

.bws-nav-btn:hover {
  border-color : var(--bws-nav-hv-bd);
  background   : #A8CF45;
  color        : var(--bws-nav-hv-cl);
}

.bws-nav-btn:focus-visible {
  outline        : 2px solid var(--bws-nav-hv-bd);
  outline-offset : 2px;
}

.bws-nav-btn:disabled,
.bws-nav-btn[aria-disabled="true"] {
  opacity        : 0.35;
  cursor         : default;
  pointer-events : none;
}

.bws-nav-btn svg {
  display        : block;
  flex-shrink    : 0;
  pointer-events : none;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SWIPER — KEY FIX
   Do NOT set overflow:visible here.
   Swiper's own CSS applies overflow:hidden to .swiper — this keeps all
   slides clipped inside the .bws-inner container, giving the clean
   centred look that matches the Figma design.
   ═══════════════════════════════════════════════════════════════════════════════ */
.bws-swiper {
  width  : 100%;
  /* overflow intentionally NOT overridden — Swiper default (hidden) applies */
}

/* Equal-height slides */
.bws-swiper .swiper-slide {
  height : auto;
}

/* ── Work Card ───────────────────────────────────────────────────────────────── */
.bws-card {
  background: transparent;
  border-radius : var(--bws-card-r);
  overflow      : hidden;
  /* box-shadow    : var(--bws-shadow); */
  height        : 100%;
  transition    : box-shadow 0.25s ease, transform 0.25s ease;
  display       : flex;
  flex-direction: column;
}

.bws-card:hover {
  /* box-shadow : var(--bws-shadow-hv); */
  /* transform  : translateY(-4px); */
}

/* Card inner (plain div or <a> link) */
.bws-card-inner {
  display        : flex;
  flex-direction : column;
  height         : 100%;
  text-decoration: none;
  color          : inherit;
}

.bws-card-linked { cursor: pointer; }
.bws-card-linked:hover { color: inherit; }

/* ── Card image ─────────────────────────────────────────────────────────────── */
.bws-card-media {
  width        : 100%;
  aspect-ratio : 16 / 10;   /* ~60% image area — matches Figma card proportions */
  overflow     : hidden;
  flex-shrink  : 0;
  background   : #c8d2e4;   /* placeholder colour while image loads */
  border-radius: var(--bws-card-r);
}

.bws-card-media img {
  width      : 100%;
  height     : 100%;
  object-fit : cover;
  display    : block;
  transition : transform 0.4s ease;
}

.bws-card:hover .bws-card-media img {
  transform : scale(1.04);
}

/* ── Card body ──────────────────────────────────────────────────────────────── */
.bws-card-body {
  padding : 20px 22px 26px;
  flex    : 1;
  display : flex;
  flex-direction : column;
  gap     : 0;
  padding-left: 0;
}

/* Category tag  e.g. HRTECH · SAAS · MANUFACTURING */
.bws-card-tag {
  display        : block;
      font-size: 16px;
  font-weight    : 500;
  letter-spacing : 0.12em;
  text-transform : uppercase;
  color          : var(--bws-blue);
  margin-bottom  : 8px;
}

/* Card title — clamped to --brps-title-lines (set per-block via ACF, default 2) */
.bws-card-title {
    font-size: 22px;
    font-weight: 500;
    color: #3d3d3d;
    line-height: 1.3;
    margin: 0 0 10px;
    /* Line-clamp: clips text after N lines and appends "…" */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: var(--brps-title-lines, 2);
    line-clamp: var(--brps-title-lines, 2);
    letter-spacing: 2px;
}

/* Card description — clamped to --brps-desc-lines (set per-block via ACF, default 3) */
.bws-card-desc {
    font-size: 16px;
    color: #3d3d3d;
    line-height: 1.65;
    margin: 0;
    font-weight: normal;
    /* Line-clamp: clips text after N lines and appends "…" */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: var(--brps-desc-lines, 3);
    line-clamp: var(--brps-desc-lines, 3);
}

/* ── Editor empty state ──────────────────────────────────────────────────────── */
.bws-empty-state {
  display         : flex;
  flex-direction  : column;
  align-items     : center;
  justify-content : center;
  gap             : 14px;
  background      : #e4eaf5;
  border          : 2px dashed #aebdd6;
  border-radius   : 12px;
  padding         : 52px 24px;
  color           : var(--bws-muted);
  text-align      : center;
  min-height      : 180px;
}

.bws-empty-state svg {
  opacity : 0.45;
  color   : var(--bws-blue);
}

.bws-empty-state p {
  margin    : 0;
  font-size : 0.88rem;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .bws-work-slider {
    --bws-pad-x : 32px;
  }
}

@media (max-width: 1023px) {
  .bws-work-slider {
    --bws-pad-x : 28px;
    --bws-pad-y : 52px;
  }
}

@media (max-width: 767px) {
  .bws-work-slider {
    --bws-pad-x : 20px;
    --bws-pad-y : 40px;
  }

  .bws-header {
    align-items   : center;
    margin-bottom : 28px;
    gap           : 16px;
  }

  .bws-section-title {
    font-size : clamp(1.35rem, 6.5vw, 1.7rem);
  }
}

@media (max-width: 479px) {
  .bws-work-slider {
    --bws-nav-sz : 36px;
    --bws-pad-x  : 16px;
  }

  .bws-nav { gap: 8px; }

  .bws-card-body  { padding: 16px 18px 22px; }
  .bws-card-title { font-size: 1.05rem; }
}

/* ── Respect reduced-motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bws-card,
  .bws-card-media img {
    transition : none;
  }
}


/* ── FOUC Prevention ─────────────────────────────────────────────────
   Swiper JS load hone se PAHLE bhi slides correct grid mein dikhenge.
   Swiper class `.swiper-initialized` add karne ke baad yeh hata jaata hai.
   ─────────────────────────────────────────────────────────────────── */
.bws-swiper:not(.swiper-initialized) {
  overflow: hidden;
}
.bws-swiper:not(.swiper-initialized) .swiper-wrapper {
  display  : flex;
  flex-wrap: nowrap;
  gap      : 24px;
}
.bws-swiper:not(.swiper-initialized) .swiper-slide {
  flex    : 0 0 calc((100% - 48px) / 3);
  min-width: 0;
}
@media (max-width: 1023px) {
  .bws-swiper:not(.swiper-initialized) .swiper-slide {
    flex: 0 0 calc(50% - 12px);
  }
}
@media (max-width: 767px) {
  .bws-swiper:not(.swiper-initialized) .swiper-slide {
    flex: 0 0 100%;
  }
}