/* ==========================================================
   Voctos — Dev Cases block
   Original section: class="pb-2 lg:pb-11"
   ========================================================== */

.voctos-dev-cases {
  padding-bottom: 8px;   /* pb-2 */
  background: #EEF0F5;
}

/* ---------- Heading ---------- */
/* text-2xl lg:text-fs-5 text-third lg:mb-1.5 */
.voctos-dev-cases .dc-heading {
  font-family: 'Unbounded', sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
  color: #0D172D;
  margin-bottom: 0;
}

/* ---------- Filter Tabs ---------- */
/* Mobile: flex gap-3 -mx-[25px] px-[25px] py-5 overflow-x-auto scrollbar-none */
/* Desktop: lg:flex-wrap lg:justify-start lg:overflow-visible lg:border-b lg:border-solid lg:border-seventh/50 lg:-mx-0 lg:px-0 lg:mb-8 */
.voctos-dev-cases .dc-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;             /* gap-3 */
  list-style: none;
  margin: 0 -25px;       /* -mx-[25px] */
  padding: 20px 25px;    /* py-5 px-[25px] */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.voctos-dev-cases .dc-filters::-webkit-scrollbar { display: none; }

/* Filter tab pill */
/* py-1.5 px-4 rounded-rc-2 leading-3 shrink-0 flex items-center h-9 gap-x-2 */
.voctos-dev-cases .dc-filter {
  display: flex;
  align-items: center;
  gap: 8px;              /* gap-x-2 */
  flex-shrink: 0;
  height: 36px;          /* h-9 */
  padding: 0 16px;       /* px-4 */
  border-radius: 19px;   /* rounded-rc-2 */
  font-family: 'Lato', ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;       /* text-xs */
  line-height: 1;        /* leading-3 */
  cursor: pointer;
  user-select: none;
  transition: background 0.18s, color 0.18s;
  background: rgba(255, 255, 255, 0.5);   /* bg-white/50 */
  color: rgba(156, 163, 175, 0.9);        /* text-gray-400/90 */
  white-space: nowrap;
}
.voctos-dev-cases .dc-filter svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  pointer-events: none;
  color: inherit;
}

/* Active tab: bg-gray-900 text-white */
.voctos-dev-cases .dc-filter.is-active {
  background: #111827;
  color: #ffffff;
}
/* Active tab icon: text-secondary (#9BB725) */
.voctos-dev-cases .dc-filter.is-active svg {
  color: #9BB725;
}
.voctos-dev-cases .dc-filter:not(.is-active):hover {
  background: rgba(255, 255, 255, 0.85);
  color: #374151;
}

/* ---------- Cases Grid — MOBILE: flex horizontal scroll ---------- */
/* flex gap-5 -mx-[25px] px-[25px] overflow-x-auto scrollbar-none */
.voctos-dev-cases .dc-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;             /* gap-5 */
  list-style: none;
  margin: 0 -25px;       /* -mx-[25px] */
  padding: 0 25px;       /* px-[25px] */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.voctos-dev-cases .dc-grid::-webkit-scrollbar { display: none; }

/* ---------- Card: rounded-rc-1 bg-white overflow-hidden w-[307px] shrink-0 ---------- */
.voctos-dev-cases .dc-card {
  background: #ffffff;
  border-radius: 30px;   /* rounded-rc-1 */
  overflow: hidden;
  width: 307px;          /* w-[307px] */
  flex-shrink: 0;
}
.voctos-dev-cases .dc-card.is-hidden {
  display: none;
}

/* ---------- Article (inner): px-3 pt-4 flex flex-col relative ---------- */
/* after: w-[137px] h-[190px] bottom-2 -right-9 bg-[url('/images/bg-dots.png')] */
.voctos-dev-cases .dc-card__inner {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 16px 12px 0;  /* pt-4 px-3 */
}

/* Decorative dots — real image at assets/img/bg-dots.png */
.voctos-dev-cases .dc-card__inner::after {
  content: '';
  position: absolute;
  width: 137px;
  height: 190px;
  bottom: 8px;
  right: -36px;
  background-image: url('../../assets/img/bg-dots.png');
  background-size: auto;
  background-repeat: repeat;
  pointer-events: none;
  z-index: 0;
}

/* ---------- Screenshot link: h-72 w-full ---------- */
/* before: inset shadow fade; after: decorative top-right shadow */
.voctos-dev-cases .dc-card__shot {
  display: block;
  width: 100%;           /* w-full within px-3 padded article */
  height: 288px;         /* h-72 */
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  text-decoration: none;
}

/* before: absolute z-[3] h-16 shadow-[inset_0_-60px_60px_rgba(255,255,255,1)] -bottom-1 inset-x-0 */
.voctos-dev-cases .dc-card__shot::before {
  content: '';
  position: absolute;
  inset-x: 0;
  bottom: -1px;
  height: 64px;
  box-shadow: inset 0 -60px 60px rgba(255, 255, 255, 1);
  z-index: 3;
  pointer-events: none;
}

/* after: absolute w-48 h-64 shadow-[2px_-2px_25px_-5px_rgba(0,0,0,0.1)] rounded-md top-0 right-0 */
.voctos-dev-cases .dc-card__shot::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 192px;          /* w-48 */
  height: 256px;         /* h-64 */
  box-shadow: 2px -2px 25px -5px rgba(0, 0, 0, 0.10);
  border-radius: 6px;    /* rounded-md */
  z-index: 2;
  pointer-events: none;
}

.voctos-dev-cases .dc-card__shot-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  position: relative;
  z-index: 1;
}

/* ---------- Info: flex flex-col relative pt-1 pb-6 z-[2] ---------- */
.voctos-dev-cases .dc-card__info {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 4px 0 24px;   /* pt-1 pb-6 (horizontal from article's px-3) */
  flex: 1;
  z-index: 2;
}

/* Logo: mb-3; max-h-[48px] object-cover */
.voctos-dev-cases .dc-card__logo-wrap {
  margin-bottom: 12px;   /* mb-3 */
}
.voctos-dev-cases .dc-card__logo {
  display: block;
  max-height: 48px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

/* Domain link: font-semibold text-xl text-third mb-4 */
.voctos-dev-cases .dc-card__domain {
  display: block;
  font-size: 20px;        /* text-xl */
  font-weight: 600;       /* font-semibold */
  line-height: 1.2;
  color: #0D172D;         /* text-third */
  text-decoration: none;
  margin-bottom: 16px;    /* mb-4 */
}
.voctos-dev-cases .dc-card__domain:hover { text-decoration: underline; }

/* Meta: mb-6 (from original's x-html="post.text" p elements) */
.voctos-dev-cases .dc-card__meta {
  margin-bottom: 24px;   /* mb-6 */
  flex: 1;
}
.voctos-dev-cases .dc-card__meta-line {
  font-family: 'Lato', ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: #979BA6;        /* text-[#979BA6] */
}

/* Button: inline-block self-start min-w-[200px] rounded-rc-6 p-4 text-sm text-center leading-5 text-third border border-solid border-third */
.voctos-dev-cases .dc-card__btn {
  display: inline-block;
  align-self: flex-start;
  min-width: 200px;
  padding: 16px;          /* p-4 */
  border: 1px solid #0D172D;  /* border border-third */
  border-radius: 10px;    /* rounded-rc-6 */
  font-family: 'Lato', ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;        /* text-sm */
  line-height: 1.25;      /* leading-5 */
  text-align: center;
  color: #0D172D;         /* text-third */
  text-decoration: none;
  transition: background 0.18s, color 0.18s;
}
.voctos-dev-cases .dc-card__btn:hover {
  background: #EEF0F5;    /* hover:bg-eleventh (the section background = slightly eleventh) */
  color: #0D172D;
}

/* ==========================================================
   DESKTOP — 1024px+
   ========================================================== */
@media (min-width: 1024px) {

  /* Section: pb-11 = 44px */
  .voctos-dev-cases {
    padding-bottom: 44px;  /* lg:pb-11 */
  }

  /* Heading: lg:mb-1.5 lg:text-fs-5 (38px in this theme) */
  .voctos-dev-cases .dc-heading {
    font-size: 38px;
    margin-bottom: 6px;    /* mb-1.5 = 6px */
  }

  /* Filter: lg:flex-wrap lg:overflow-visible lg:border-b lg:border-seventh/50 lg:-mx-0 lg:px-0 lg:mb-8 */
  .voctos-dev-cases .dc-filters {
    flex-wrap: wrap;
    overflow-x: visible;
    margin: 0;             /* lg:-mx-0 */
    padding: 20px 0;       /* keep py-5, remove side padding */
    border-bottom: 1px solid rgba(135, 139, 149, 0.5);  /* border-seventh/50 */
    margin-bottom: 32px;   /* lg:mb-8 */
  }

  /* Grid: lg:grid lg:grid-cols-2 lg:mx-0 lg:px-0 lg:overflow-visible */
  .voctos-dev-cases .dc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;             /* gap-5 stays */
    flex-wrap: unset;
    overflow-x: visible;
    margin: 0;             /* lg:mx-0 */
    padding: 0;            /* lg:px-0 */
  }

  /* Card: lg:w-auto */
  .voctos-dev-cases .dc-card {
    width: auto;
    flex-shrink: 1;
  }

  /* Article: lg:flex-row lg:pt-5; keep px-3 */
  .voctos-dev-cases .dc-card__inner {
    flex-direction: row;
    padding: 20px 12px 0;  /* lg:pt-5, px-3 unchanged */
  }

  /* Dots: lg:right-0 lg:bottom-0 */
  .voctos-dev-cases .dc-card__inner::after {
    right: 0;
    bottom: 0;
  }

  /* Screenshot: lg:shrink-0 lg:w-[275px] lg:h-[257px] */
  .voctos-dev-cases .dc-card__shot {
    width: 275px;
    height: 257px;
    flex-shrink: 0;
  }

  /* Info: lg:px-5 lg:pb-8 lg:pr-6 */
  .voctos-dev-cases .dc-card__info {
    padding: 4px 24px 32px 20px;  /* pt-1 pr-6 pb-8 pl-5 */
  }

  /* Logo: lg:mb-5 lg:h-12 lg:max-w-full lg:object-contain */
  .voctos-dev-cases .dc-card__logo-wrap {
    margin-bottom: 20px;   /* lg:mb-5 */
  }
  .voctos-dev-cases .dc-card__logo {
    height: 48px;
    max-width: 100%;
    max-height: none;
    object-fit: contain;
  }

  /* Domain: lg:mb-1 lg:text-xl lg:leading-none lg:h-10 lg:overflow-hidden lg:line-clamp-2 */
  .voctos-dev-cases .dc-card__domain {
    margin-bottom: 4px;    /* lg:mb-1 */
    line-height: 1;        /* lg:leading-none */
    height: 40px;          /* lg:h-10 */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* Meta: lg:mb-6 */
  .voctos-dev-cases .dc-card__meta {
    margin-bottom: 24px;
  }
  .voctos-dev-cases .dc-card__meta-line {
    font-size: 14px;
    line-height: 1.3;
  }

  /* Button: lg:mt-auto (pushes to bottom of flex column) */
  .voctos-dev-cases .dc-card__btn {
    margin-top: auto;
    align-self: flex-start;
  }
}