/* =========================================================
   Karty Case Study
   Ciemne pole ze ściętym rogiem, obrazek z odznaką
   i przyciskiem wychodzącym poniżej krawędzi.
   ========================================================= */

.case-card {
  --case-card-width: 85%;
  --case-card-max-width: 1120px;

  --case-card-padding-top: 16px;
  --case-card-padding-right: 48px;
  --case-card-padding-left: 48px;

  --case-card-image-width: 150px;
  --case-card-image-height: 120px;

  --case-card-badge-size: 32px;
  --case-card-badge-offset: -8px;

  --case-card-button-width: 133px;
  --case-card-button-height: 27px;
  --case-card-button-gap: 32px;
  --case-card-button-shift: 0px;

  --case-card-gap: 28px;
  --case-card-slant: 22px;

  --case-card-content-width: 520px;
  --case-card-content-gap: 12px;

  --case-card-title-size: 20px;
  --case-card-title-line: 26px;

  --case-card-desc-size: 9px;
  --case-card-desc-line: 13px;

  --case-card-extra-height: 10px;

  --case-card-bg-height: calc(
    var(--case-card-padding-top) + var(--case-card-image-height) +
    var(--case-card-button-gap) + (var(--case-card-button-height) / 2)
  );

  position: relative;
  width: var(--case-card-width);
  max-width: var(--case-card-max-width);
  height: calc(
    var(--case-card-padding-top) + var(--case-card-image-height) +
    var(--case-card-button-gap) + var(--case-card-button-height) +
    var(--case-card-extra-height)
  );
  margin: 0 auto 0 0;
  overflow: visible;
  font-family: var(--font-main);
}

.case-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: var(--case-card-bg-height);
  background: var(--c-dark);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--case-card-slant)) 100%, 0 100%);
  pointer-events: none;
}

.case-card__row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--case-card-gap);
  width: 100%;
  height: var(--case-card-bg-height);
  padding: var(--case-card-padding-top) var(--case-card-padding-right) 0
    var(--case-card-padding-left);
  overflow: visible;
}

/* --- Obrazek, odznaka i przycisk --- */

.case-card__media {
  position: relative;
  z-index: 3;
  flex: 0 0 var(--case-card-image-width);
  width: var(--case-card-image-width);
  height: calc(
    var(--case-card-image-height) + var(--case-card-button-gap) +
    var(--case-card-button-height)
  );
  overflow: visible;
}

.case-card__image {
  position: relative;
  width: var(--case-card-image-width);
  height: var(--case-card-image-height);
  line-height: 0;
}

.case-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  border: 5px solid var(--c-black);
  object-fit: cover;
}

.case-card__badge {
  position: absolute;
  top: var(--case-card-badge-offset);
  right: var(--case-card-badge-offset);
  z-index: 5;
  width: var(--case-card-badge-size);
  height: var(--case-card-badge-size);
  line-height: 0;
}

.case-card__badge img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.case-card__button {
  position: absolute;
  gap: 10px;
  top: calc(var(--case-card-image-height) + var(--case-card-button-gap));
  left: calc(
    ((var(--case-card-image-width) - var(--case-card-button-width)) / 2) +
    var(--case-card-button-shift)
  );
  z-index: 6;
  width: var(--case-card-button-width);
  height: var(--case-card-button-height);
  padding: 4px 8px;
  border-width: 5px;
  border-radius: 4px;
  font-size: 21px;
  line-height: 27px;
  white-space: nowrap;
}

/* Ikona przed napisem (Open Source) */
.case-card__button svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

@media (hover: hover) and (pointer: fine) {
  .case-card__button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.22);
  }
}

/* --- Tekst --- */

.case-card__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 0 1 var(--case-card-content-width);
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--case-card-content-gap);
  width: var(--case-card-content-width);
  max-width: var(--case-card-content-width);
  min-width: 0;
  height: calc(var(--case-card-bg-height) - var(--case-card-padding-top));
}

.case-card__title {
  width: 100%;
  flex: 0 0 auto;
  color: var(--c-white);
  font-family: var(--font-main);
  font-size: var(--case-card-title-size);
  font-weight: 700;
  line-height: var(--case-card-title-line);
}

.case-card__description,
.case-card__description p {
  width: 100%;
  min-width: 0;
  margin: 0;
  color: var(--c-white);
  font-family: var(--font-main);
  font-size: var(--case-card-desc-size);
  font-weight: 500;
  line-height: var(--case-card-desc-line);
  text-align: justify;
}

/* --- Wariant odwrócony: tekst po lewej, obrazek po prawej --- */

.case-card-reverse {
  --case-card-padding-left: 96px;
  --case-card-padding-right: 78px;
  --case-card-extra-height: 50px;

  margin-left: auto;
  margin-right: 0;
}

.case-card-reverse::before {
  clip-path: polygon(var(--case-card-slant) 0, 100% 0, 100% 100%, 0 100%);
}

.case-card-reverse .case-card__row {
  flex-direction: row-reverse;
}

.case-card-reverse .case-card__badge {
  right: auto;
  left: var(--case-card-badge-offset);
}

/* =========================================================
   Desktop
   ========================================================= */

@media (min-width: 1025px) {
  .case-card {
    --case-card-width: 88%;
    --case-card-max-width: 1360px;

    --case-card-padding-top: 44px;
    --case-card-padding-left: 78px;
    --case-card-padding-right: 96px;

    --case-card-image-width: 280px;
    --case-card-image-height: 224px;

    --case-card-badge-size: 48px;
    --case-card-badge-offset: -13px;

    --case-card-button-width: 210px;
    --case-card-button-height: 48px;
    --case-card-button-gap: 54px;
    --case-card-button-shift: 88px;

    --case-card-gap: 72px;
    --case-card-slant: 42px;

    --case-card-content-width: 760px;
    --case-card-content-gap: 24px;

    --case-card-title-size: 36px;
    --case-card-title-line: 46px;

    --case-card-desc-size: clamp(16px, 1vw, 22px);
    --case-card-desc-line: clamp(17px, 1.35vw, 25px);
  }

  .case-card-reverse {
    --case-card-padding-left: 96px;
    --case-card-padding-right: 78px;
    --case-card-button-shift: -88px;
  }
}

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1024px) {
  .case-card {
    --case-card-width: 100%;
    --case-card-max-width: none;

    --case-card-padding-top: 16px;
    --case-card-padding-right: 32px;
    --case-card-padding-left: 32px;

    --case-card-gap: 22px;
    --case-card-slant: 22px;

    --case-card-content-width: 420px;

    --case-card-title-size: 18px;
    --case-card-title-line: 24px;

    --case-card-desc-size: clamp(9px, 1.15vw, 11px);
    --case-card-desc-line: clamp(10px, 1.4vw, 14px);
  }

  .case-card-reverse {
    --case-card-padding-left: 48px;
    --case-card-padding-right: 32px;
    --case-card-button-shift: -32px;
  }

  .case-card__image img {
    border-width: 2px;
  }

  .case-card__button {
    border-width: 2px;
    border-radius: 2px;
    font-size: 14px;
    line-height: 19px;
  }
}

/* =========================================================
   Telefon
   ========================================================= */

@media (max-width: 767px) {
  .case-card {
    --case-card-padding-right: 24px;
    --case-card-padding-left: 24px;

    --case-card-image-width: 150px;
    --case-card-image-height: 120px;

    --case-card-button-width: 133px;
    --case-card-button-height: 27px;
    --case-card-button-gap: 32px;

    --case-card-gap: 16px;
    --case-card-content-width: none;

    --case-card-title-size: 16px;
    --case-card-title-line: 22px;

    --case-card-desc-size: clamp(7px, 1.8vw, 8px);
    --case-card-desc-line: clamp(9.5px, 2.4vw, 11px);
  }

  .case-card__content {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
  }

  .case-card-reverse {
    --case-card-padding-left: 24px;
    --case-card-padding-right: 24px;
    --case-card-button-shift: 0px;
  }

  .case-card-reverse .case-card__title {
    text-align: center;
  }
}

/* =========================================================
   Mały telefon
   ========================================================= */

@media (max-width: 480px) {
  .case-card {
    --case-card-padding-top: 14px;
    --case-card-padding-right: 16px;
    --case-card-padding-left: 16px;

    --case-card-image-width: 132px;
    --case-card-image-height: 106px;

    --case-card-badge-size: 28px;
    --case-card-badge-offset: -7px;

    --case-card-button-width: 118px;
    --case-card-button-height: 25px;
    --case-card-button-gap: 28px;

    --case-card-gap: 12px;
    --case-card-slant: 18px;

    --case-card-title-size: 15px;
    --case-card-title-line: 20px;

    --case-card-desc-size: clamp(6.6px, 1.9vw, 7.3px);
    --case-card-desc-line: clamp(9px, 2.55vw, 10.2px);
  }

  .case-card-reverse {
    --case-card-padding-left: 16px;
    --case-card-padding-right: 16px;
  }

  .case-card__button {
    font-size: 12px;
    line-height: 16px;
  }
}