/*
 * Homepage Ski-Max
 * Prefix vsech vlastnich trid: hp-
 *
 * Pouziti mrizky:
 *   hp-cols-1 = 1 sloupec
 *   hp-cols-2 = 2 sloupce
 *   hp-cols-3 = 3 sloupce
 *   hp-cols-4 = 4 sloupce
 *
 * Mobil:
 *   lichy pocet (1, 3) = 1 sloupec
 *   sudy pocet (2, 4) = 2 sloupce
 */

:root {
  --hp-gap: 16px;
}

/* Mezery mezi vsemi sekcemi homepage. */
.hp-home {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.hp-section,
.hp-hero,
.hp-grid,
.hp-card,
.hp-card-media {
  box-sizing: border-box;
}

/* Univerzalni mrizka pro 1 az 4 sloupce. */
.hp-grid {
  display: grid;
  align-items: start;
  align-content: start;
  justify-items: stretch;
  column-gap: var(--hp-gap);
  row-gap: var(--hp-gap);
  width: 83vw;
  max-width: 83vw;
  margin-right: auto;
  margin-left: auto;
  padding-right: 0;
  padding-left: 0;
}

.hp-cols-1 {
  grid-template-columns: 1fr;
}

.hp-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hp-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hp-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Velky hero banner: vyska zustava stejna, obrazek se orezuje po stranach. */
.hp-hero {
  position: relative;
  width: 100vw;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
  overflow: hidden;
}

.hp-hero > picture,
.hp-hero > picture > img,
.hp-hero > img {
  display: block;
  width: 100%;
  height: auto;
}

.hp-hero > picture {
  position: static;
}

.hp-hero > picture > img,
.hp-hero > img {
  position: static;
  object-fit: contain;
  object-position: center center;
}

.hp-hero-content {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 10%;
  width: min(90%, 900px);
  transform: translateX(-50%);
  color: #f9fdfe;
  text-align: center;
}

.hp-hero-content,
.hp-hero-content * {
  color: #f9fdfe !important;
}

.hp-hero-content p {
  margin: 0 !important;
}

.hp-hero-content h1 {
  color: #f9fdfe !important;
  margin: 5px 0 16px !important;
}

.hp-hero-content .hp-button {
  display: inline-block;
  width: auto;
  max-width: none;
  box-sizing: border-box;
}

.hp-home p,
.hp-hero-content p,
.hp-card-text p {
  font-size: 1.75rem !important;
}

.hp-home h1,
.hp-home h2,
.hp-home h3,
.hp-home h4 {
  margin-top: 5px !important;
}

/* Bezny banner ve sloupci: obrazek si zachova vlastni pomer stran. */
.hp-card {
  align-self: start;
  width: 100%;
  min-width: 0;
  margin: 0;
  text-align: center;
  vertical-align: top;
}

.hp-card-media {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hp-card-media img,
.hp-card-media picture,
.hp-card-media picture > img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.hp-card-button {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 4%;
  width: max-content;
  max-width: 75%;
  box-sizing: border-box;
  transform: translateX(-50%);
  white-space: nowrap !important;
}

.hp-card-text p {
  margin-bottom: 0;
}

.hp-card-text {
  padding-top: 18px;
}

.hp-card-text h3 {
  margin-top: 0;
  margin-bottom: 0 !important;
}

/* Spolecny vzhled tlacitek v hero bannerech i kartach. */
.hp-home .hp-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background-color: rgba(44, 185, 187, 0.75);
  border: 0 !important;
  border-radius: 0 !important;
  color: #f9fdfe;
  font-size: 1.75rem;
  font-weight: bold;
  padding-right: 50px;
  padding-left: 50px;
  text-align: center;
}

.hp-home .hp-button,
.hp-home .btn,
.hp-home .button,
.hp-home button,
.hp-home input[type="button"],
.hp-home input[type="submit"] {
  font-size: 1.75rem !important;
}

.hp-home .hp-card-button {
  padding-right: 25px;
  padding-left: 25px;
}

/*
 * Uppercase pouze na homepage.
 * Trida in-index je bezne oznaceni tela uvodni stranky v Shoptetu.
 */
body.in-index h1,
body.in-index h2,
body.in-index h3,
body.in-index h4,
body.in-index h5,
body.in-index .btn,
body.in-index .button,
body.in-index button,
body.in-index input[type="button"],
body.in-index input[type="submit"],
body.in-index .hp-button {
  text-transform: uppercase;
}

/* Sirka radku s bannery na noteboocich. */
@media (min-width: 992px) and (max-width: 1366px) {
  .hp-grid {
    width: 86vw;
    max-width: 86vw;
  }
}

/* Na tabletu se vicenasobne rozlozeni sklada maximalne do dvou sloupcu. */
@media (max-width: 991px) {
  .hp-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  :root {
    --hp-gap: 16px;
  }

  .hp-grid {
    width: 92vw;
    max-width: 92vw;
  }

  /* Liche pocty jsou na mobilu vzdy jednosloupcove. */
  .hp-cols-1,
  .hp-cols-3 {
    grid-template-columns: 1fr;
  }

  /* Sude pocty jsou na mobilu vzdy dvousloupcove. */
  .hp-cols-2,
  .hp-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Hero na mobilu zachova vysku a obrazek se oreze pouze po stranach. */
  .hp-hero {
    aspect-ratio: 4 / 5;
    height: auto;
  }

  .hp-hero > picture {
    position: absolute;
    inset: 0;
    height: 100%;
  }

  .hp-hero > picture > img,
  .hp-hero > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .hp-hero-content {
    bottom: 8%;
  }

  .hp-home .hp-button {
    padding-right: 25px;
    padding-left: 25px;
  }
}