/* ==================================================
   HERO — POJEDYNCZA INWESTYCJA
================================================== */

.single-hero {
  --single-shape-top: 67%;
  --single-shape-bottom: 22%;

  position: relative;
  width: 100%;
 height: max(720px, 40vw);
  overflow: hidden;
  background: var(--navy);
}

/* MINIATURKA WPISU NA CAŁYM TLE */

.single-hero__background {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
	left: 10%;
}

/* WSPÓLNE USTAWIENIA KSZTAŁTÓW */

.single-hero__shape {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/*
 * BIAŁY KSZTAŁT
 * Jest największy i znajduje się pod pozostałymi.
 */

.single-hero__shape--white {
  z-index: 2;
  background: #fff;

  clip-path: polygon(
    0 0,
    var(--single-shape-top) 0,
    var(--single-shape-bottom) 100%,
    0 100%
  );
}

/*
 * CZERWONY KSZTAŁT
 * Węższy od białego o 10 px.
 */

.single-hero__shape--red {
  z-index: 3;
  background: var(--red);

  clip-path: polygon(
    0 0,
    calc(var(--single-shape-top) - 10px) 0,
    calc(var(--single-shape-bottom) - 10px) 100%,
    0 100%
  );
}

/*
 * GRANATOWY KSZTAŁT
 * Węższy od białego o 5 px.
 *
 * Dolne ukośne wycięcie odsłania czerwony trójkąt
 * w lewym dolnym rogu.
 */

.single-hero__shape--navy {
  z-index: 4;
  background: var(--navy);

  clip-path: polygon(
    0 0,
    calc(var(--single-shape-top) - 5px) 0,
    calc(var(--single-shape-bottom) - 5px) 100%,
    15% 100%,
    0 72%
  );
}

/* TREŚĆ */

.single-hero__content {
  position: relative;
  z-index: 5;
}

.single-hero__location {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  max-width: 470px;
  margin-top: 52px;
}

.single-hero__location img {
  width: 21px;
  height: 25px;
  flex: 0 0 21px;
  object-fit: contain;
}

.single-hero__location p {
  margin: 0;
  color: #fff;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 400;
}

.single-hero__parameters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px 42px;
  margin-top: 32px;
}

.single-hero__parameter {
  display: flex;
  align-items: center;
  gap: 12px;
}

.single-hero__parameter img {
  width: 24px;
  height: 22px;
  object-fit: contain;
}

.single-hero__parameter span {
  color: #fff;
  font-size: 19px;
  line-height: 1;
  font-weight: 400;
  white-space: nowrap;
}

/* BIAŁA WARSTWA POD MENU — TYLKO SINGLE.PHP */
.single-hero__top-white {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background: #fff;
  pointer-events: none;
display: none;
  clip-path: polygon(
    0 0,
    calc(var(--single-shape-top) - 5px) 0,
    calc(var(--single-shape-top) - 100px) 100%,
    0 100%
  );
}

/* Treść musi znajdować się nad białą warstwą */
.single-hero__content {
  position: relative;
  z-index: 6;
}

@media (max-width: 2560px)
	
{
.single-hero__top-white {
  clip-path: polygon( 0 0, calc(var(--single-shape-top) - 5px) 0, calc(var(--single-shape-top) - 130px) 100%, 0 100% );}	
	
}

@media (max-width: 2500px)
	
{
.single-hero__top-white {
  clip-path: polygon( 0 0, calc(var(--single-shape-top) - 5px) 0, calc(var(--single-shape-top) - 125px) 100%, 0 100% );}	
	
}

@media (max-width: 2350px)
	
{
.single-hero__top-white {
  clip-path: polygon( 0 0, calc(var(--single-shape-top) - 4px) 0, calc(var(--single-shape-top) - 120px) 100%, 0 100% );}	
	
}

@media (max-width: 2300px)
	
{
.single-hero__top-white {
  clip-path: polygon( 0 0, calc(var(--single-shape-top) - 3px) 0, calc(var(--single-shape-top) - 115px) 100%, 0 100% );}	
	
}

@media (max-width: 2200px)
	
{
.single-hero__top-white {
  clip-path: polygon( 0 0, calc(var(--single-shape-top) - 2px) 0, calc(var(--single-shape-top) - 110px) 100%, 0 100% );}	
	
}

@media (max-width: 2100px)
	
{
.single-hero__top-white {
  clip-path: polygon( 0 0, calc(var(--single-shape-top) - 1px) 0, calc(var(--single-shape-top) - 105px) 100%, 0 100% );}	
	
}

@media (max-width: 2000px)
	
{
.single-hero__top-white {
  clip-path: polygon( 0 0, calc(var(--single-shape-top) - 0px) 0, calc(var(--single-shape-top) - 100px) 100%, 0 100% );}	
	
}

@media (max-width: 1900px)
	
{
.single-hero__top-white {
  clip-path: polygon( 0 0, calc(var(--single-shape-top) - 0px) 0, calc(var(--single-shape-top) - 95px) 100%, 0 100% );}	
	
}

@media (max-width: 1800px)
	
{
.single-hero__top-white {
  clip-path: polygon( 0 0, calc(var(--single-shape-top) - 0px) 0, calc(var(--single-shape-top) - 89px) 100%, 0 100% );}	
	
}

@media (max-width: 1700px)
	
{
.single-hero__top-white {
  clip-path: polygon( 0 0, calc(var(--single-shape-top) - 0px) 0, calc(var(--single-shape-top) - 83px) 100%, 0 100% );}	
	
}

@media (max-width: 1600px)
	
{
.single-hero__top-white {
  clip-path: polygon( 0 0, calc(var(--single-shape-top) - 0px) 0, calc(var(--single-shape-top) - 78px) 100%, 0 100% );}	
	
}

@media (max-width: 1500px)
	
{
.single-hero__top-white {
  clip-path: polygon( 0 0, calc(var(--single-shape-top) - 0px) 0, calc(var(--single-shape-top) - 72px) 100%, 0 100% );}	
	
}

@media (max-width: 1400px)
	
{
.single-hero__top-white {
  clip-path: polygon( 0 0, calc(var(--single-shape-top) - 0px) 0, calc(var(--single-shape-top) - 67px) 100%, 0 100% );}	
	
}