/* Nagłówek podstrony produktowej */
.product-detail__back {
  display: inline-flex;
  align-items: center;
  grid-column-gap: 6px;
  color: var(--company-gray-500);
  font-size: 14px;
  text-decoration: none;
  margin-top: calc(60px + var(--l));
  margin-bottom: var(--m);
  transition: color .2s ease;
}

.product-detail__back:hover {
  color: var(--company-gray-100);
}

.product-detail__back img {
  width: 12px;
  height: 12px;
  transform: rotate(180deg);
}

.product-detail__p2 {
  margin-top: var(--m);
}

/* Tagline rezerwuje miejsce na ~3 linie, zeby przelacznik ponizej
   nie "skakal" gdy tekst wariantu zmienia liczbe linii. */
.product-detail__tagline {
  min-height: calc(1.3em * 3);
}

/* Naglowek smuklejszy niz standardowy .home-gates__header (bez
   wymuszonej wysokosci 40/60svh) - dotyczy wszystkich szerokosci. */
.product-detail__header {
  height: auto;
  padding-top: var(--m);
  padding-bottom: var(--m);
}

/* Hero: opis i okladka produktu obok siebie */
.product-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  grid-column-gap: var(--xl);
  padding-bottom: var(--xl);
}

.product-hero__cover-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.product-hero__cover {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--m);
  border: 1px solid var(--company-gray-900);
  transition: opacity .2s ease;
}

.product-hero__cover-btn:hover .product-hero__cover {
  opacity: .9;
}

@media screen and (max-width: 767px) {
  .product-hero {
    grid-template-columns: 1fr;
    grid-row-gap: var(--l);
    padding-bottom: var(--l);
  }

  /* Zdjecie od razu po przelaczniku - zmiana wariantu ma byc widoczna
     na pierwszy rzut oka, zanim klient dojdzie do opisu. */
  .product-hero__cover {
    order: -1;
  }

  /* Krotszy tagline na mobile, zeby zdjecie bylo blisko gory. */
  .product-detail__header {
    padding-bottom: var(--s);
  }

  .product-detail__tagline {
    min-height: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}

/* Siatka kart ze zdjęciem (funkcjonalność/bezpieczeństwo, wzory paneli) -
   karty to <button>, wiec trzeba zresetowac domyslny wyglad przycisku. */
.about-product-card.is--photo {
  padding: var(--s) var(--s) var(--m);
  align-items: stretch;
  text-align: left;
  overflow: hidden;
  width: 100%;
  font-family: inherit;
  background-color: var(--white);
  cursor: pointer;
}

.about-product-card.is--photo .about-product-card__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--s);
  overflow: hidden;
}

.about-product-card.is--photo .about-product-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.about-product-card.is--photo:hover .about-product-card__photo img {
  transform: scale(1.05);
}

.about-product-card.is--photo .about-product-card__label {
  padding: 0 var(--s);
}

/* Galeria zdjęć produktu - ta sama karuzela co "Realizacje" na stronie głównej */
.product-gallery {
  margin-top: var(--l);
}

/* Sekcja CTA na koncu strony */
.product-detail__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  grid-column-gap: var(--m);
  grid-row-gap: var(--m);
  padding-top: var(--l);
  padding-bottom: var(--xl);
}

@media screen and (max-width: 479px) {
  .product-detail__cta {
    flex-flow: column;
    align-items: stretch;
  }
}