/* =========================================================
   TWEETLIX — CASE ARCHIVE
   ========================================================= */

.twl-cases-archive {
  --twl-case-text: #f7f8ff;
  --twl-case-secondary: #b0b6cf;
  --twl-case-muted: #747c9c;

  --twl-case-blue: #6473ff;
  --twl-case-violet: #7768ff;
  --twl-case-lavender: #bbc2ff;

  --twl-case-border:
    rgba(150, 160, 255, 0.15);

  --twl-case-border-strong:
    rgba(160, 170, 255, 0.28);

  min-width: 320px;

  overflow: hidden;

  color:
    var(--twl-case-text);

  background:
    #02030a;

  font-family:
    "Montserrat",
    Arial,
    sans-serif;
}


.twl-cases-archive *,
.twl-cases-archive *::before,
.twl-cases-archive *::after {
  box-sizing: border-box;
}


.twl-cases-archive__container {
  position: relative;
  z-index: 2;

  width:
    min(
      calc(100% - 80px),
      1400px
    );

  margin-inline: auto;
}


/* =========================================================
   HERO
   ========================================================= */

.twl-cases-archive__hero {
  position: relative;

  overflow: hidden;

  padding:
    clamp(130px, 12vw, 190px)
    0
    clamp(80px, 8vw, 120px);

  background:
    linear-gradient(
      135deg,
      #050711 0%,
      #070916 48%,
      #0a091b 100%
    );
}


.twl-cases-archive__grid-bg {
  position: absolute;
  inset: 0;

  opacity: 0.28;

  background-image:
    linear-gradient(
      rgba(134, 144, 255, 0.045)
      1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(134, 144, 255, 0.045)
      1px,
      transparent 1px
    );

  background-size:
    72px 72px;

  -webkit-mask-image:
    radial-gradient(
      circle at 72% 45%,
      #000,
      transparent 70%
    );

  mask-image:
    radial-gradient(
      circle at 72% 45%,
      #000,
      transparent 70%
    );

  pointer-events: none;
}


.twl-cases-archive__glow {
  position: absolute;

  width: 650px;
  height: 650px;

  right: -180px;
  top: -170px;

  border-radius: 50%;

  background:
    rgba(100, 115, 255, 0.12);

  filter:
    blur(160px);

  pointer-events: none;
}


/* =========================================================
   BREADCRUMBS
   ========================================================= */

.twl-cases-archive__breadcrumbs {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;

  margin-bottom:
    clamp(34px, 5vw, 58px);

  color:
    var(--twl-case-muted);

  font:
    500
    10px/1.5
    "IBM Plex Mono",
    monospace;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;
}


.twl-cases-archive__breadcrumbs a {
  color:
    var(--twl-case-secondary);

  text-decoration: none;

  transition:
    color 180ms ease;
}


.twl-cases-archive__breadcrumbs a:hover {
  color:
    var(--twl-case-lavender);
}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.twl-cases-archive__hero-content {
  max-width: 950px;
}


.twl-cases-archive__code {
  margin:
    0
    0
    20px;

  color:
    var(--twl-case-lavender);

  font:
    600
    11px/1.4
    "IBM Plex Mono",
    monospace;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;
}


.twl-cases-archive__hero h1 {
  margin: 0;

  color:
    var(--twl-case-text);

  font-size:
    clamp(54px, 7vw, 100px);

  font-weight: 600;

  line-height: 1;

  letter-spacing:
    -0.055em;
}


.twl-cases-archive__lead {
  max-width: 760px;

  margin:
    28px
    0
    0;

  color:
    var(--twl-case-secondary);

  font-size:
    clamp(16px, 1.4vw, 20px);

  line-height:
    1.72;
}


/* =========================================================
   CONTENT
   ========================================================= */

.twl-cases-archive__content {
  min-height: 500px;

  padding:
    clamp(64px, 7vw, 100px)
    0
    clamp(100px, 10vw, 150px);

  background:
    linear-gradient(
      180deg,
      #080a18 0%,
      #050711 55%,
      #02030a 100%
    );
}


/* =========================================================
   FILTER
   ========================================================= */

.twl-cases-filter {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;

  margin-bottom:
    clamp(42px, 5vw, 66px);
}


.twl-cases-filter__item {
  min-height: 40px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding:
    9px 14px;

  border:
    1px solid
    var(--twl-case-border);

  border-radius:
    10px;

  background:
    rgba(255, 255, 255, 0.02);

  color:
    var(--twl-case-muted);

  font:
    500
    11px/1.4
    "IBM Plex Mono",
    monospace;

  text-decoration: none;

  transition:
    color 180ms ease,
    border-color 280ms ease,
    background 280ms ease,
    transform 180ms ease;
}


.twl-cases-filter__item:hover {
  transform:
    translateY(-2px);

  color:
    var(--twl-case-text);

  border-color:
    var(--twl-case-border-strong);

  background:
    rgba(100, 115, 255, 0.06);
}


.twl-cases-filter__item.is-active {
  color:
    #fff;

  border-color:
    rgba(130, 140, 255, 0.42);

  background:
    rgba(100, 115, 255, 0.13);
}


/* =========================================================
   GRID
   ========================================================= */

.twl-cases-archive__grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    20px;

  align-items:
    stretch;
}


/* =========================================================
   CASE CARD
   ========================================================= */

.twl-cases-archive .case-card {
  min-width: 0;
  height: 100%;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border:
    1px solid
    var(--twl-case-border);

  border-radius:
    24px;

  background:
    linear-gradient(
      145deg,
      rgba(15, 19, 39, 0.94),
      rgba(8, 10, 22, 0.94)
    );

  transition:
    transform 280ms ease,
    border-color 280ms ease,
    box-shadow 280ms ease;
}


.twl-cases-archive .case-card:hover {
  transform:
    translateY(-4px);

  border-color:
    rgba(166, 176, 255, 0.32);

  box-shadow:
    0 18px 50px
    rgba(0, 0, 0, 0.18);
}


.twl-cases-archive .case-card__media {
  display: block;

  overflow: hidden;

  aspect-ratio:
    16 / 10;

  background:
    #0b0e1c;
}


.twl-cases-archive .case-card__media img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 500ms ease;
}


.twl-cases-archive
.case-card:hover
.case-card__media img {
  transform:
    scale(1.02);
}


.twl-cases-archive .case-card__body {
  flex: 1;

  display: flex;
  flex-direction: column;

  padding: 26px;
}


.twl-cases-archive .case-card__category {
  display: block;

  margin-bottom: 16px;

  color:
    #858fc3;

  font:
    500
    10px/1.4
    "IBM Plex Mono",
    monospace;

  text-transform:
    uppercase;

  letter-spacing:
    0.08em;
}


.twl-cases-archive .case-card h3 {
  margin:
    0
    0
    15px;

  color:
    var(--twl-case-text);

  font-size:
    clamp(22px, 1.8vw, 29px);

  font-weight: 600;

  line-height: 1.1;

  letter-spacing:
    -0.04em;
}


.twl-cases-archive .case-card h3 a {
  color: inherit;

  text-decoration: none;
}


.twl-cases-archive .case-card p {
  margin: 0;

  color:
    var(--twl-case-secondary);

  font-size: 14px;

  line-height: 1.65;
}


.twl-cases-archive .case-card dl {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 16px;

  margin:
    24px
    0;

  padding:
    18px
    0;

  border-block:
    1px solid
    var(--twl-case-border);
}


.twl-cases-archive .case-card dt {
  color:
    var(--twl-case-muted);

  font:
    500
    9px/1.2
    "IBM Plex Mono",
    monospace;

  text-transform:
    uppercase;
}


.twl-cases-archive .case-card dd {
  margin:
    6px
    0
    0;

  color:
    #c7cada;

  font-size:
    12px;

  line-height: 1.5;
}


.twl-cases-archive .text-link {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-top: auto;

  color:
    var(--twl-case-lavender);

  font-size: 14px;

  font-weight: 600;

  text-decoration: none;
}


.twl-cases-archive .text-link span {
  transition:
    transform 180ms ease;
}


.twl-cases-archive .text-link:hover span {
  transform:
    translate(2px, -2px);
}


/* =========================================================
   PAGINATION
   ========================================================= */

.twl-cases-pagination {
  display: flex;

  align-items: center;
  justify-content: center;

  flex-wrap: wrap;

  gap: 8px;

  margin-top:
    clamp(50px, 6vw, 80px);
}


.twl-cases-pagination .page-numbers {
  min-width: 44px;
  height: 44px;

  display: grid;

  place-items: center;

  padding:
    0 12px;

  border:
    1px solid
    var(--twl-case-border);

  border-radius:
    11px;

  background:
    rgba(255, 255, 255, 0.02);

  color:
    var(--twl-case-secondary);

  font:
    500
    11px/1
    "IBM Plex Mono",
    monospace;

  text-decoration: none;

  transition:
    color 180ms ease,
    background 280ms ease,
    border-color 280ms ease,
    transform 180ms ease;
}


.twl-cases-pagination a.page-numbers:hover {
  transform:
    translateY(-2px);

  color:
    #fff;

  border-color:
    var(--twl-case-border-strong);

  background:
    rgba(100, 115, 255, 0.08);
}


.twl-cases-pagination .page-numbers.current {
  color:
    #fff;

  border-color:
    rgba(130, 140, 255, 0.42);

  background:
    rgba(100, 115, 255, 0.16);
}


/* =========================================================
   EMPTY
   ========================================================= */

.twl-cases-empty {
  padding:
    clamp(32px, 5vw, 56px);

  border:
    1px solid
    var(--twl-case-border);

  border-radius:
    24px;

  background:
    linear-gradient(
      145deg,
      rgba(15, 19, 39, 0.9),
      rgba(8, 10, 22, 0.9)
    );
}


.twl-cases-empty__code {
  margin:
    0
    0
    14px;

  color:
    var(--twl-case-lavender);

  font-size:
    10px;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


.twl-cases-empty h2 {
  margin: 0;

  color:
    var(--twl-case-text);

  font-size:
    clamp(26px, 3vw, 40px);

  line-height: 1.1;
}


.twl-cases-empty > p:not(.twl-cases-empty__code) {
  margin:
    18px
    0
    0;

  color:
    var(--twl-case-secondary);
}


.twl-cases-empty__link {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-top: 24px;

  color:
    var(--twl-case-lavender);

  font-weight: 600;

  text-decoration: none;
}


/* =========================================================
   FOCUS
   ========================================================= */

.twl-cases-archive a:focus-visible {
  outline:
    2px solid
    var(--twl-case-lavender);

  outline-offset:
    4px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media
(max-width: 1024px) {

  .twl-cases-archive__container {
    width:
      min(
        calc(100% - 48px),
        1400px
      );
  }


  .twl-cases-archive__grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media
(max-width: 767px) {

  .twl-cases-archive__container {
    width:
      calc(100% - 32px);
  }


  .twl-cases-archive__hero {
    padding:
      105px
      0
      68px;
  }


  .twl-cases-archive__breadcrumbs {
    margin-bottom:
      30px;

    font-size:
      8px;
  }


  .twl-cases-archive__hero h1 {
    font-size:
      clamp(46px, 16vw, 68px);
  }


  .twl-cases-archive__lead {
    margin-top:
      20px;

    font-size:
      16px;
  }


  .twl-cases-archive__content {
    padding:
      48px
      0
      80px;
  }


  .twl-cases-filter {
    margin-bottom:
      36px;
  }


  .twl-cases-filter__item {
    min-height:
      38px;

    padding:
      8px 12px;

    font-size:
      10px;
  }


  .twl-cases-archive__grid {
    grid-template-columns:
      1fr;
  }


  .twl-cases-archive .case-card__body {
    padding:
      22px;
  }


  .twl-cases-archive .case-card h3 {
    font-size:
      24px;
  }


  .twl-cases-pagination {
    margin-top:
      48px;
  }

}
/* =========================================================
   FILTER GROUPS
   ========================================================= */

.twl-cases-filters {
  display: flex;
  flex-direction: column;

  gap:
    26px;

  margin-bottom:
    clamp(42px, 5vw, 66px);

  padding-bottom:
    clamp(32px, 4vw, 48px);

  border-bottom:
    1px solid
    var(--twl-case-border);
}


.twl-cases-filter-group {
  min-width: 0;
}


.twl-cases-filter-group__label {
  margin:
    0
    0
    12px;

  color:
    var(--twl-case-muted);

  font:
    500
    9px/1.4
    "IBM Plex Mono",
    monospace;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;
}


/*
 * Старый margin теперь находится
 * у общего контейнера фильтров.
 */
.twl-cases-filters
.twl-cases-filter {
  margin-bottom: 0;
}


/* =========================================================
   RESET
   ========================================================= */

.twl-cases-filters__reset {
  width: fit-content;

  color:
    var(--twl-case-muted);

  font-size:
    10px;

  letter-spacing:
    0.06em;

  text-decoration: none;

  transition:
    color 180ms ease;
}


.twl-cases-filters__reset:hover {
  color:
    var(--twl-case-lavender);
}