/*
 * 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: 15px;
}

/* Black Friday: plne nepruhledna varianta tlacitka. */
.hp-home .hp-button-solid,
.hp-home .hp-button-solid:hover,
.hp-home .hp-button-solid:focus,
.hp-home .hp-button-solid:active {
  background-color: #ff3342 !important;
  border-color: #ff3342 !important;
  color: #f9fdfe !important;
  opacity: 1 !important;
}

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

/* Horni informacni lista pres celou sirku obrazovky. */
.hp-topbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  width: 100vw;
  min-height: 60px;
  box-sizing: border-box;
  margin: 0;
  padding: 16px 7.5vw;
  background-color: #09171a;
  background-image:
    linear-gradient(#ff3342, #ff3342),
    linear-gradient(#ff3342, #ff3342);
  background-repeat: no-repeat;
  background-position: 33.333% 50%, 66.666% 50%;
  background-size: 1px 50%, 1px 50%;
  color: #f9fdfe;
}

.hp-home .hp-topbar-item {
  margin: 0 !important;
  color: #f9fdfe !important;
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.hp-home .hp-topbar-item:first-child {
  text-align: left;
}

.hp-home .hp-topbar-item:last-child {
  text-align: right;
}

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

.hp-home h2.hp-section-title {
  width: min(94vw, 1600px);
  margin: 40px auto 0 !important;
  font-size: 40px !important;
  line-height: 1.1 !important;
  text-align: center;
}

.hp-home h1,
.hp-home h2,
.hp-home h3,
.hp-home h4,
.hp-home h5,
.hp-home h6 {
  text-transform: uppercase !important;
}

/* 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: 85vw;
  max-width: 85vw;
  margin-right: auto;
  margin-left: auto;
  padding-right: 0;
  padding-left: 0;
}

/* Navazujici rada banneru: dvojnasobna mezera pouze mezi radami. */
.hp-grid + .hp-grid {
  margin-top: calc(var(--hp-gap) * 2);
}

/* Dve navazujici rady 2 × 2 maji mezi sebou puvodni mezeru 15 px. */
.hp-cols-2 + .hp-cols-2 {
  margin-top: 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 > a,
.hp-hero > a > img,
.hp-hero > img {
  display: block;
  width: 100%;
  height: auto;
}

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

.hp-hero > picture > img,
.hp-hero > a > img,
.hp-hero > img {
  position: static;
  aspect-ratio: 1920 / 815;
  object-fit: contain;
  object-position: center center;
}

/*
 * Samostatny siroky banner se stejnou sirkou jako sloupcove sekce.
 * Obrazek si na vsech rozlisenich zachovava svuj puvodni pomer stran.
 */
.hp-wide-banner {
  position: relative;
  width: 85vw;
  max-width: 85vw;
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
}

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

.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,
.hp-hero-content h1,
.hp-hero-content h2,
.hp-hero-content h3,
.hp-hero-content h4,
.hp-hero-content h5,
.hp-hero-content h6 {
  text-shadow: 0 2px 7px rgba(9, 23, 26, 0.32);
}

.hp-hero-content .hp-button {
  text-shadow: none;
}

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

.hp-hero-content h3 {
  color: #f9fdfe !important;
  font-size: 32px !important;
  line-height: 38px !important;
  margin: 5px 0 16px !important;
}

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

/* Výprodejová varianta hero banneru. */
.hp-home .hp-hero-sale .hp-button {
  background-color: rgba(255, 51, 66, 0.75) !important;
}

.hp-sale-corner {
  position: absolute;
  z-index: 1;
  top: 5%;
  right: 2%;
  color: #f9fdfe;
  line-height: 1;
  text-align: right;
}

.hp-sale-corner strong {
  display: block;
  color: #ff3342 !important;
  opacity: 0.75;
  font-size: clamp(4.5rem, 6vw, 8.5rem);
  line-height: 0.9;
  text-shadow: none;
}

.hp-sale-corner span {
  display: block;
  margin-top: 8px;
  color: #f9fdfe !important;
  font-size: 1.75rem;
  line-height: 1;
  text-shadow: 0 2px 7px rgba(9, 23, 26, 0.32);
}

/* Čtyřsloupcové SALE karty používají stejné barvy jako SALE hero. */
.hp-sale-card .hp-card-media {
  position: relative;
}

.hp-sale-card .hp-sale-button,
.hp-sale-card .hp-sale-button:hover,
.hp-sale-card .hp-sale-button:focus {
  background-color: rgba(255, 51, 66, 0.75) !important;
  border-color: transparent !important;
  color: #f9fdfe !important;
}

.hp-sale-badge {
  position: absolute;
  z-index: 2;
  top: 3%;
  right: 5%;
  line-height: 1;
  text-align: right;
  text-transform: none;
}

.hp-sale-badge strong {
  display: block;
  color: #ff3342 !important;
  opacity: 0.75;
  font-size: clamp(2.4rem, 2.5vw, 3.8rem);
  line-height: 0.9;
  text-shadow: none;
}

.hp-sale-badge span {
  display: block;
  margin-top: 6px;
  color: #09171a !important;
  font-size: 1.35rem;
  line-height: 1;
  text-shadow: 0 2px 7px rgba(9, 23, 26, 0.32);
}

.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;
}

/*
 * Prohlížeč zná výšku bannerů ještě před stažením obrázků.
 * Tím se při obnovení stránky výrazně omezí posouvání obsahu.
 */
.hp-cols-3 .hp-card-media img {
  aspect-ratio: 800 / 1067;
}

.hp-cols-4 .hp-card-media img {
  aspect-ratio: 2 / 3;
}

/* Poměr fotografií novinek 1500 : 800 pouze při skutečném zobrazení ve dvou sloupcích. */
@media (min-width: 1200px) {
  .hp-cols-2 .hp-card-media {
    aspect-ratio: 15 / 8;
  }

  .hp-cols-2 .hp-card-media img,
  .hp-cols-2 .hp-card-media picture,
  .hp-cols-2 .hp-card-media picture > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/* Mobil: dvousloupcové bannerové sekce jsou pod sebou, fotografie mají poměr 3 : 2. */
@media (max-width: 767px) {
  .hp-topbar {
    min-height: 52px;
    padding: 11px 12px;
  }

  .hp-home .hp-topbar-item {
    padding: 0 5px;
    font-size: 10px !important;
    line-height: 1.25;
  }
  .hp-cols-2 .hp-card-media {
    aspect-ratio: 3 / 2;
  }

  .hp-cols-2 .hp-card-media img,
  .hp-cols-2 .hp-card-media picture,
  .hp-cols-2 .hp-card-media picture > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

.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;
}

/* Text poslednich banneru 2 × 2 je uvnitr fotografie jako u hero banneru. */
.hp-cols-2 .hp-card-overlay {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 8%;
  width: min(90%, 900px);
  transform: translateX(-50%);
  color: #f9fdfe;
  text-align: center;
}

.hp-cols-2 .hp-card-overlay,
.hp-cols-2 .hp-card-overlay * {
  color: #f9fdfe !important;
}

.hp-cols-2 .hp-card-overlay p,
.hp-cols-2 .hp-card-overlay h1,
.hp-cols-2 .hp-card-overlay h2,
.hp-cols-2 .hp-card-overlay h3,
.hp-cols-2 .hp-card-overlay h4,
.hp-cols-2 .hp-card-overlay h5,
.hp-cols-2 .hp-card-overlay h6 {
  text-shadow: 0 2px 7px rgba(9, 23, 26, 0.32);
}

.hp-cols-2 .hp-card-overlay .hp-button {
  text-shadow: none;
}

.hp-cols-2 .hp-card-overlay p {
  margin: 0 !important;
}

.hp-cols-2 .hp-card-overlay h4 {
  font-size: 32px !important;
  line-height: 38px !important;
  margin: 5px 0 16px !important;
}

.hp-cols-2 .hp-card-overlay .hp-button {
  display: inline-block;
  width: auto;
  max-width: none;
  box-sizing: border-box;
}

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

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

.hp-card-text h4 {
  font-size: 24px !important;
  line-height: 28px !important;
  margin-top: 0;
  margin-bottom: 0 !important;
}

.hp-home.hp-black-friday .hp-card-text h4 {
  margin-bottom: 5px !important;
}

/* Textový banner VIP klubu přes celou šířku viewportu. */
.hp-text-banner {
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  /* .hp-home přidává dalších 15px pomocí gap; výsledná mezera je 36px. */
  margin-top: calc(36px - var(--hp-gap));
  margin-right: auto;
  margin-left: auto;
  padding: 55px 24px;
  background-color: rgba(44, 185, 187, 0.75);
  color: #f9fdfe;
  text-align: center;
}

.hp-text-banner,
.hp-text-banner p,
.hp-text-banner h1,
.hp-text-banner h2,
.hp-text-banner h3,
.hp-text-banner h4,
.hp-text-banner h5,
.hp-text-banner h6 {
  color: #09171a !important;
}

.hp-text-banner p {
  margin: 0 !important;
}

.hp-text-banner h2,
.hp-text-banner h3 {
  margin: 5px 0 16px !important;
}

/* Delší představení SKIMAX pod hero bannerem prodejny. */
.hp-about-text {
  box-sizing: border-box;
  width: 85vw;
  max-width: 85vw;
  margin: 35px auto;
}

.hp-about-text .read-more-open {
  display: block;
  margin-top: 0 !important;
  margin-left: 0 !important;
}

/* Cist vice navazuje jako po prostem zalomeni radku, ne jako novy odstavec. */
.hp-about-text .read-more-text > p:first-child {
  margin-bottom: 0 !important;
}

.hp-home .hp-text-banner .hp-button {
  background-color: rgba(9, 23, 26, 0.85);
  color: #f9fdfe !important;
}

.hp-home .hp-text-banner .hp-button:hover,
.hp-home .hp-text-banner .hp-button:focus-visible,
.hp-home .hp-text-banner .hp-button:hover *,
.hp-home .hp-text-banner .hp-button:focus-visible * {
  color: #2cb9bb !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);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  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;
  transition: none !important;
}

.hp-home .hp-button *,
.hp-home .hp-button::before,
.hp-home .hp-button::after,
.hp-home .hp-button *::before,
.hp-home .hp-button *::after {
  transition: none !important;
}

/* Hover všech tlačítek nové homepage. */
.hp-home .hp-button:hover,
.hp-home .hp-button:focus-visible,
.hp-home .hp-button:hover *,
.hp-home .hp-button:focus-visible *,
.hp-home .hp-button:hover::before,
.hp-home .hp-button:hover::after,
.hp-home .hp-button:hover *::before,
.hp-home .hp-button:hover *::after {
  color: #09171a !important;
}

.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;
}

/* Upravy tlacitek pouze pro Black Friday homepage. */
.hp-home.hp-black-friday .hp-button {
  width: 300px !important;
  max-width: 80% !important;
  box-sizing: border-box;
}

.hp-home.hp-black-friday .hp-hero-content .hp-button {
  width: 350px !important;
}

.hp-home.hp-black-friday .hp-card-button {
  width: 175px !important;
  padding-right: 10px;
  padding-left: 10px;
}

/*
 * 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;
}

/* Skryje pouze vychozi nadpis Shoptetu na ceske i slovenske homepage. */
body.in-index .welcome-wrapper .welcome > .h1[data-testid="eshopHeader"] {
  display: none !important;
}

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

  .hp-wide-banner {
    width: 86vw;
    max-width: 86vw;
  }

  .hp-text-banner {
    width: 100vw;
    max-width: 100vw;
  }

  .hp-about-text {
    width: 86vw;
    max-width: 86vw;
  }
}

/* Bannery 2 × 2 se od sirky 1199 px skladaji do jednoho sloupce. */
@media (max-width: 1199px) {
  .hp-cols-2 {
    grid-template-columns: 1fr;
  }
}

/* Na tabletu se vicenasobne rozlozeni sklada maximalne do dvou sloupcu. */
@media (max-width: 991px) {
  .hp-home h2.hp-section-title {
    font-size: 40px !important;
    margin-top: 40px !important;
  }

  .hp-text-banner {
    margin-top: calc(36px - var(--hp-gap));
  }

  .hp-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: calc(var(--hp-gap) * 3);
  }
}

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

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

  .hp-wide-banner {
    width: 92vw;
    max-width: 92vw;
  }

  .hp-text-banner {
    width: 100vw;
    max-width: 100vw;
    /* Rodič .hp-home už přidává 15px gap; dohromady zůstane přesně 36px. */
    margin-top: calc(36px - var(--hp-gap));
    padding: 35px 18px;
  }

  .hp-about-text {
    width: 92vw;
    max-width: 92vw;
    margin-top: 25px;
    margin-bottom: 25px;
  }

  .hp-home h2.hp-section-title {
    font-size: 32px !important;
    margin-top: 36px !important;
  }

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

  .hp-hero-content h3,
  .hp-cols-2 .hp-card-overlay h4,
  .hp-text-banner h2,
  .hp-text-banner h3 {
    font-size: 28px !important;
    line-height: 34px !important;
  }

  .hp-card-text h4 {
    font-size: 21px !important;
    line-height: 25px !important;
  }

  .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.5rem !important;
  }

  /* Jedno-, dvou- a trojsloupcové sekce jsou na mobilu jednosloupcové. */
  .hp-cols-1,
  .hp-cols-2,
  .hp-cols-3 {
    grid-template-columns: 1fr;
  }

  /* Čtyřsloupcové sekce zůstávají na mobilu ve dvou sloupcích. */
  .hp-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Jednobanner (např. půjčovna) má na mobilu poměr 1:1. */
  .hp-wide-banner {
    aspect-ratio: 1 / 1;
    height: auto;
  }

  .hp-wide-banner > picture,
  .hp-wide-banner > a {
    position: absolute;
    inset: 0;
    height: 100%;
  }

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

  /* Hero bannery mají na mobilu poměr 5:4 a obrázek se ořízne po stranách. */
  .hp-hero {
    aspect-ratio: 5 / 4;
    height: auto;
  }

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

  .hp-hero > picture > img,
  .hp-hero > a > 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-sale-corner {
    top: 4%;
    right: 2%;
  }

  .hp-sale-corner strong {
    font-size: clamp(3.5rem, 13vw, 6rem);
  }

  .hp-sale-corner span {
    margin-top: 5px;
    font-size: 1.5rem;
  }

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

  .hp-home.hp-black-friday .hp-button {
    padding-right: 10px;
    padding-left: 10px;
  }
}