/* =========================================================
   Podstrony ze szczegółami produktu (Motolink, Salmo-Nullo)
   ========================================================= */

/* ---------------------------------------------------------
   Nagłówek produktu: logo, nazwa, sklepy, opis
   --------------------------------------------------------- */

.product-details {
  --details-width: 693px;
  --details-gap: 40px;

  --details-main-padding-right: 168px;
  --details-main-gap: 40px;

  --details-logo-size: 128px;

  --details-title-size: 64px;
  --details-title-line: 72px;

  --details-owner-size: 28px;
  --details-owner-line: 36px;

  --details-store-row-width: 400px;
  --details-store-width: 180px;
  --details-store-height: 60px;
  --details-store-gap: 40px;

  --details-description-size: 24px;
  --details-description-line: 34px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--details-gap);
  width: 100%;
  max-width: var(--details-width);
  margin: 32px auto 40px;
  color: var(--c-black);
  font-family: var(--font-main);
}

.product-details__main {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--details-main-gap);
  width: 100%;
  padding-right: var(--details-main-padding-right);
}

.product-details__logo {
  flex: 0 0 var(--details-logo-size);
  width: var(--details-logo-size);
  height: var(--details-logo-size);
  line-height: 0;
}

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

.product-details__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
}

.product-details__title {
  width: 100%;
  color: var(--c-black);
  font-family: var(--font-main);
  font-size: var(--details-title-size);
  font-weight: 700;
  line-height: var(--details-title-line);
  text-align: left;
}

.product-details__owner {
  width: 100%;
  color: var(--c-black);
  font-family: var(--font-main);
  font-size: var(--details-owner-size);
  font-weight: 500;
  line-height: var(--details-owner-line);
  text-align: left;
}

.product-details__stores {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--details-store-gap);
  width: var(--details-store-row-width);
  max-width: 100%;
}

.product-details__store {
  flex: 0 0 var(--details-store-width);
  width: var(--details-store-width);
  height: var(--details-store-height);
  line-height: 0;
}

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

.product-details__description,
.product-details__description p {
  width: 100%;
  margin: 0;
  color: var(--c-black);
  font-family: var(--font-main);
  font-size: var(--details-description-size);
  font-weight: 500;
  line-height: var(--details-description-line);
  text-align: justify;
}

@media (max-width: 1024px) {
  .product-details {
    --details-width: 560px;
    --details-gap: 30px;
    --details-main-padding-right: 80px;
    --details-main-gap: 28px;
    --details-logo-size: 104px;
    --details-title-size: 48px;
    --details-title-line: 56px;
    --details-owner-size: 22px;
    --details-owner-line: 30px;
    --details-store-row-width: 340px;
    --details-store-width: 150px;
    --details-store-height: 50px;
    --details-store-gap: 32px;
    --details-description-size: 20px;
    --details-description-line: 30px;
  }
}

/* Telefon: logo + nazwa w pierwszym wierszu,
   sklepy po lewej i opis po prawej w drugim. */
@media (max-width: 767px) {
  .product-details {
    --details-mobile-left-width: 82px;
    --details-logo-size: 82px;
    --details-title-size: 28px;
    --details-title-line: 34px;
    --details-owner-size: 16px;
    --details-owner-line: 21px;
    --details-store-width: 80px;
    --details-store-gap: 8px;
    --details-description-size: 12px;
    --details-description-line: 16px;

    display: grid;
    grid-template-columns: var(--details-mobile-left-width) minmax(0, 1fr);
    grid-template-areas:
      "main main"
      "stores description";
    align-items: start;
    column-gap: 14px;
    row-gap: 8px;
    max-width: none;
    margin: 24px 0 32px;
    padding: 0 20px;
  }

  .product-details__main {
    grid-area: main;
    gap: 14px;
    padding-right: 0;
  }

  .product-details__stores {
    grid-area: stores;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: var(--details-mobile-left-width);
    max-width: var(--details-mobile-left-width);
  }

  .product-details__store {
    flex: 0 0 auto;
    height: auto;
  }

  .product-details__store img {
    height: auto;
  }

  .product-details__description {
    grid-area: description;
    min-width: 0;
  }

  .product-details__description,
  .product-details__description p {
    text-align: left;
  }
}

@media (max-width: 480px) {
  .product-details {
    --details-mobile-left-width: 76px;
    --details-logo-size: 76px;
    --details-title-size: 24px;
    --details-title-line: 30px;
    --details-owner-size: 14px;
    --details-owner-line: 19px;
    --details-store-width: 74px;
    --details-store-gap: 7px;
    --details-description-size: 11px;
    --details-description-line: 15px;

    column-gap: 12px;
    padding: 0 18px;
  }
}

/* ---------------------------------------------------------
   Ciemne karty tekstowe ze ściętym rogiem
   --------------------------------------------------------- */

.case-text-list {
  --case-text-gap: 48px;
  --case-text-width: 85%;
  --case-text-min-height: 238px;
  --case-text-slant: 28px;

  --case-text-padding-top: 42px;
  --case-text-padding-right: 96px;
  --case-text-padding-bottom: 42px;
  --case-text-padding-left: 128px;

  --case-text-gap-inner: 24px;

  --case-text-title-size: 24px;
  --case-text-title-line: 32px;

  --case-text-description-size: 15px;
  --case-text-description-line: 22px;

  width: 100%;
  font-family: var(--font-main);
}

.case-text-list__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--case-text-gap);
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 10px 0;
}

.case-text-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--case-text-gap-inner);
  width: var(--case-text-width);
  min-height: var(--case-text-min-height);
  margin: 0 auto 0 0;
  padding: var(--case-text-padding-top) var(--case-text-padding-right)
    var(--case-text-padding-bottom) var(--case-text-padding-left);
  overflow: visible;
}

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

.case-text-card > * {
  position: relative;
  z-index: 1;
}

.case-text-card-reverse {
  margin-left: auto;
  margin-right: 0;
  padding-left: calc(var(--case-text-padding-left) - 32px);
  padding-right: calc(var(--case-text-padding-right) + 32px);
}

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

.case-text-title {
  width: 100%;
  color: var(--c-white);
  font-family: var(--font-main);
  font-size: var(--case-text-title-size);
  font-weight: 700;
  line-height: var(--case-text-title-line);
  text-align: left;
}

.case-text-description,
.case-text-description p,
.case-text-description li {
  width: 100%;
  margin: 0;
  color: var(--c-white);
  font-family: var(--font-main);
  font-size: var(--case-text-description-size);
  font-weight: 500;
  line-height: var(--case-text-description-line);
  text-align: left;
}

.case-text-description ul,
.case-text-description ol {
  margin: 0;
  padding-left: 22px;
}

/* Karty wychodzą poza kolumnę treści, aż do krawędzi ekranu */
@media (min-width: 768px) {
  .case-text-list__inner {
    --case-text-edge-bleed: calc((100vw - 100%) / 2);
  }

  .case-text-card:not(.case-text-card-reverse) {
    width: calc(var(--case-text-width) + var(--case-text-edge-bleed));
    margin-left: calc(var(--case-text-edge-bleed) * -1);
    margin-right: auto;
  }

  .case-text-card-reverse {
    width: calc(var(--case-text-width) + var(--case-text-edge-bleed));
    margin-left: auto;
    margin-right: calc(var(--case-text-edge-bleed) * -1);
  }
}

@media (max-width: 1200px) {
  .case-text-list {
    --case-text-width: 88%;
    --case-text-min-height: 220px;
    --case-text-padding-top: 36px;
    --case-text-padding-right: 72px;
    --case-text-padding-bottom: 36px;
    --case-text-padding-left: 96px;
    --case-text-title-size: 22px;
    --case-text-title-line: 30px;
    --case-text-description-size: 14px;
    --case-text-description-line: 20px;
  }
}

@media (max-width: 1024px) {
  .case-text-list {
    --case-text-gap: 40px;
    --case-text-width: 92%;
    --case-text-min-height: 210px;
    --case-text-slant: 24px;
    --case-text-padding-top: 34px;
    --case-text-padding-right: 56px;
    --case-text-padding-bottom: 34px;
    --case-text-padding-left: 72px;
    --case-text-gap-inner: 20px;
    --case-text-title-size: 21px;
    --case-text-title-line: 28px;
    --case-text-description-size: 13px;
    --case-text-description-line: 19px;
  }

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

@media (max-width: 767px) {
  .case-text-list {
    --case-text-gap: 32px;
    --case-text-width: 100%;
    --case-text-min-height: auto;
    --case-text-slant: 18px;
    --case-text-padding-top: 30px;
    --case-text-padding-right: 24px;
    --case-text-padding-bottom: 34px;
    --case-text-padding-left: 32px;
    --case-text-gap-inner: 16px;
    --case-text-title-size: 18px;
    --case-text-title-line: 24px;
    --case-text-description-size: 11px;
    --case-text-description-line: 16px;
  }

  .case-text-card,
  .case-text-card-reverse {
    width: 100vw;
    margin-left: calc((100% - 100vw) / 2);
    margin-right: calc((100% - 100vw) / 2);
  }

  .case-text-card-reverse {
    padding-left: 32px;
    padding-right: 24px;
  }

  .case-text-title {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .case-text-list {
    --case-text-padding-top: 26px;
    --case-text-padding-right: 20px;
    --case-text-padding-bottom: 30px;
    --case-text-padding-left: 26px;
    --case-text-title-size: 16px;
    --case-text-title-line: 22px;
    --case-text-description-size: 10px;
    --case-text-description-line: 14px;
  }

  .case-text-card-reverse {
    padding-left: 26px;
    padding-right: 20px;
  }
}

/* ---------------------------------------------------------
   Galeria zrzutów ekranu
   --------------------------------------------------------- */

.product-gallery {
  --gallery-padding-top: 64px;
  --gallery-padding-bottom: 72px;
  --gallery-padding-x: 24px;

  --gallery-title-size: 36px;
  --gallery-title-line: 44px;

  --gallery-gap-x: 36px;
  --gallery-gap-y: 36px;

  --gallery-image-width: 170px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  padding: var(--gallery-padding-top) var(--gallery-padding-x) var(--gallery-padding-bottom);
  background: var(--c-white);
  color: var(--c-black);
  font-family: var(--font-main);
  overflow: hidden;
}

.product-gallery__title {
  width: 100%;
  color: var(--c-black);
  font-family: var(--font-main);
  font-size: var(--gallery-title-size);
  font-weight: 700;
  line-height: var(--gallery-title-line);
  text-align: center;
}

.product-gallery__grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--gallery-gap-y) var(--gallery-gap-x);
  width: 100%;
  max-width: calc((var(--gallery-image-width) * 3) + (var(--gallery-gap-x) * 2));
  margin: 0 auto;
}

.product-gallery__item {
  flex: 0 0 var(--gallery-image-width);
  width: var(--gallery-image-width);
  max-width: var(--gallery-image-width);
  line-height: 0;
}

.product-gallery__item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media (max-width: 1024px) {
  .product-gallery {
    --gallery-padding-top: 56px;
    --gallery-padding-bottom: 64px;
    --gallery-title-size: 32px;
    --gallery-title-line: 40px;
    --gallery-image-width: 150px;
    --gallery-gap-x: 28px;
    --gallery-gap-y: 32px;
  }
}

/* Telefon — najwyżej dwa zdjęcia w wierszu */
@media (max-width: 767px) {
  .product-gallery {
    --gallery-padding-top: 44px;
    --gallery-padding-bottom: 52px;
    --gallery-padding-x: 20px;
    --gallery-title-size: 28px;
    --gallery-title-line: 36px;
    --gallery-gap-x: 18px;
    --gallery-gap-y: 24px;
  }

  .product-gallery__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
    align-items: start;
    max-width: 100%;
  }

  .product-gallery__item {
    flex: none;
    width: 100%;
    max-width: 135px;
  }

  /* Piąte zdjęcie wyśrodkowane pod dwiema kolumnami */
  .product-gallery__item:nth-child(5) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .product-gallery {
    --gallery-padding-top: 40px;
    --gallery-padding-bottom: 48px;
    --gallery-padding-x: 18px;
    --gallery-title-size: 24px;
    --gallery-title-line: 32px;
    --gallery-gap-x: 14px;
    --gallery-gap-y: 22px;
  }

  .product-gallery__item {
    max-width: 122px;
  }
}