/* =========================================================
   RESTART METABOLISMU
   PRODUKTOVÁ STRÁNKA – AUDIOKNIHA
   FINÁLNÍ CSS
========================================================= */


/* =========================================================
   1. KRÁTKÝ POPIS VEDLE PRODUKTU
   ZÁMĚRNĚ VZDUŠNÝ
========================================================= */

.rm-audio-short {
  width: 100% !important;
  max-width: 610px !important;

  min-height: 330px !important;

  margin: 0 !important;
  padding: 8px 0 12px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;

  box-sizing: border-box !important;
}

.rm-audio-short *,
.rm-audio-short *::before,
.rm-audio-short *::after {
  box-sizing: border-box !important;
}


/* MALÝ NADPIS */

.rm-audio-short__eyebrow {
  margin: 0 0 11px !important;

  font-family: "Mulish", Arial, Helvetica, sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;

  letter-spacing: .15em !important;
  text-transform: uppercase !important;

  color: #5da942 !important;
}


/* HLAVNÍ VĚTA */

.rm-audio-short h2 {
  max-width: 530px !important;

  margin: 0 0 21px !important;

  font-family: "Poppins", Arial, Helvetica, sans-serif !important;
  font-size: clamp(27px, 2.1vw, 34px) !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;

  letter-spacing: -.025em !important;

  color: #183d33 !important;
}


/* HLAVNÍ ODSTAVEC */

.rm-audio-short__lead {
  max-width: 555px !important;

  margin: 0 0 16px !important;

  font-family: "Mulish", Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;

  color: #56524e !important;
}


/* DRUHÝ ODSTAVEC */

.rm-audio-short__text {
  max-width: 550px !important;

  margin: 0 0 22px !important;

  font-family: "Mulish", Arial, Helvetica, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 400 !important;
  line-height: 1.62 !important;

  color: #6a6560 !important;
}


/* MALÉ BENEFITY */

.rm-audio-short__meta {
  display: flex !important;
  flex-wrap: wrap !important;

  gap: 8px 21px !important;

  margin: 0 0 23px !important;
  padding: 0 !important;
}

.rm-audio-short__meta span {
  position: relative !important;

  display: inline-block !important;

  padding-left: 15px !important;

  font-family: "Mulish", Arial, Helvetica, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;

  color: #4f913d !important;
}

.rm-audio-short__meta span::before {
  content: "•" !important;

  position: absolute !important;
  top: 0 !important;
  left: 0 !important;

  font-size: 14px !important;

  color: #5da942 !important;
}


/* POSLEDNÍ VĚTA */

.rm-audio-short__closing {
  margin: 0 !important;

  font-family: "Poppins", Arial, Helvetica, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;

  color: #235b4d !important;
}


/* =========================================================
   2. DLOUHÝ POPIS – ZÁKLAD
========================================================= */

.rm-audio {
  width: 100% !important;

  margin: 0 auto !important;
  padding: 0 !important;

  box-sizing: border-box !important;

  color: #4f4b47 !important;
}

.rm-audio *,
.rm-audio *::before,
.rm-audio *::after {
  box-sizing: border-box !important;
}


/* =========================================================
   TYPOGRAFIE DLOUHÉHO POPISU
========================================================= */

.rm-audio h2 {
  margin: 0 !important;

  font-family: "Poppins", Arial, Helvetica, sans-serif !important;
  font-size: clamp(27px, 2.8vw, 38px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;

  letter-spacing: -.03em !important;

  color: #183d33 !important;
}

.rm-audio h2 span {
  color: #4f913d !important;
}

.rm-audio h3 {
  margin: 0 !important;

  font-family: "Poppins", Arial, Helvetica, sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;

  color: #183d33 !important;
}

.rm-audio p,
.rm-audio li,
.rm-audio span {
  font-family: "Mulish", Arial, Helvetica, sans-serif !important;
}


/* =========================================================
   MALÝ ZELENÝ NADPIS
========================================================= */

.rm-audio__eyebrow {
  margin: 0 0 8px !important;

  font-family: "Mulish", Arial, Helvetica, sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;

  letter-spacing: .16em !important;
  text-transform: uppercase !important;

  color: #5da942 !important;
}


/* =========================================================
   ÚVOD DLOUHÉHO POPISU
========================================================= */

.rm-audio__intro {
  max-width: 720px !important;

  margin: 0 auto !important;

  padding: 38px 24px 36px !important;

  text-align: center !important;
}

.rm-audio__intro h2 span {
  display: block !important;

  margin-top: 2px !important;
}

.rm-audio__intro > p:last-child {
  max-width: 590px !important;

  margin: 13px auto 0 !important;

  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.62 !important;

  color: #66615c !important;
}


/* =========================================================
   OBECNÁ SEKCE
========================================================= */

.rm-audio__section {
  width: 100% !important;

  padding: 43px 24px !important;

  border-top: 1px solid rgba(24, 61, 51, .07) !important;
}


/* =========================================================
   HLAVIČKY SEKCÍ
========================================================= */

.rm-audio__header {
  max-width: 700px !important;

  margin: 0 auto 27px !important;

  text-align: center !important;
}

.rm-audio__header h2 span {
  display: block !important;

  margin-top: 2px !important;
}


/* =========================================================
   3. CO TI AUDIOKNIHA PŘINESE
========================================================= */

.rm-audio__benefits {
  display: grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  gap: 14px !important;

  max-width: 980px !important;

  margin: 0 auto !important;
}

.rm-audio__benefit {
  min-width: 0 !important;

  padding: 23px 21px !important;

  border: 1px solid rgba(35, 91, 77, .10) !important;

  border-radius: 16px !important;

  background: #ffffff !important;

  text-align: center !important;
}

.rm-audio__benefit-icon {
  display: block !important;

  margin: 0 auto 10px !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1 !important;

  color: #5da942 !important;
}

.rm-audio__benefit p {
  margin: 8px 0 0 !important;

  font-family: "Mulish", Arial, Helvetica, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.58 !important;

  color: #69645f !important;
}


/* =========================================================
   4. KDE POSLOUCHAT
========================================================= */

.rm-audio__soft {
  background: #f6f9f3 !important;
}

.rm-audio__moments {
  display: grid !important;

  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

  gap: 10px !important;

  max-width: 940px !important;

  margin: 0 auto !important;
}

.rm-audio__moment {
  min-width: 0 !important;

  padding: 18px 14px !important;

  border: 1px solid rgba(35, 91, 77, .06) !important;
  border-radius: 14px !important;

  background: rgba(255, 255, 255, .82) !important;

  text-align: center !important;
}

.rm-audio__moment strong {
  display: block !important;

  margin: 0 0 4px !important;

  font-family: "Poppins", Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;

  color: #183d33 !important;
}

.rm-audio__moment span {
  display: block !important;

  font-family: "Mulish", Arial, Helvetica, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;

  color: #746e68 !important;
}


/* =========================================================
   5. JAK TO FUNGUJE PO NÁKUPU
========================================================= */

.rm-audio__steps {
  display: grid !important;

  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

  gap: 18px !important;

  max-width: 980px !important;

  margin: 0 auto !important;
}

.rm-audio__step {
  position: relative !important;

  text-align: center !important;
}

.rm-audio__step > span {
  display: block !important;

  margin: 0 0 7px !important;

  font-family: "Mulish", Arial, Helvetica, sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;

  letter-spacing: .12em !important;

  color: #ed6252 !important;
}

.rm-audio__step strong {
  display: block !important;

  margin: 0 !important;

  font-family: "Poppins", Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;

  color: #183d33 !important;
}

.rm-audio__step p {
  margin: 5px 0 0 !important;

  font-family: "Mulish", Arial, Helvetica, sans-serif !important;
  font-size: 12.8px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;

  color: #6d6762 !important;
}


/* =========================================================
   6. CO USLYŠÍŠ + PRO KOHO JE
========================================================= */

.rm-audio__details {
  padding-top: 45px !important;
  padding-bottom: 47px !important;
}

.rm-audio__details-grid {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  max-width: 980px !important;

  margin: 0 auto !important;
}

.rm-audio__detail {
  min-width: 0 !important;

  padding: 0 42px !important;
}

.rm-audio__detail:first-child {
  border-right: 1px solid rgba(24, 61, 51, .10) !important;
}

.rm-audio__detail h2 {
  margin: 0 0 19px !important;

  font-size: clamp(24px, 2.3vw, 30px) !important;
}


/* =========================================================
   SEZNAMY
========================================================= */

.rm-audio__list {
  display: grid !important;

  gap: 9px !important;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}

.rm-audio__list li {
  position: relative !important;

  margin: 0 !important;

  padding: 0 0 0 25px !important;

  font-family: "Mulish", Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;

  color: #57524e !important;
}

.rm-audio__list li::before {
  content: "✓" !important;

  position: absolute !important;

  top: 0 !important;
  left: 0 !important;

  font-size: 12px !important;
  font-weight: 800 !important;

  color: #5da942 !important;
}


/* =========================================================
   7. LIFESTYLE FOTO – AŽ ÚPLNĚ DOLE
========================================================= */

.rm-audio__photo {
  position: relative !important;

  width: min(1120px, calc(100% - 48px)) !important;
  min-height: 360px !important;

  margin: 12px auto 0 !important;

  overflow: hidden !important;

  border-radius: 20px !important;

  background: #e9ede5 !important;
}

.rm-audio__photo img {
  position: absolute !important;

  inset: 0 !important;

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;

  object-position: center center !important;
}


/* ZTMAVENÍ PRAVÉ ČÁSTI PRO TEXT */

.rm-audio__photo::after {
  content: "" !important;

  position: absolute !important;
  inset: 0 !important;

  z-index: 1 !important;

  background:
    linear-gradient(
      90deg,
      rgba(13, 40, 31, 0) 0%,
      rgba(13, 40, 31, .03) 32%,
      rgba(13, 40, 31, .30) 58%,
      rgba(13, 40, 31, .76) 100%
    ) !important;

  pointer-events: none !important;
}


/* TEXT NA FOTCE */

.rm-audio__photo-overlay {
  position: relative !important;
  z-index: 2 !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;

  width: 47% !important;
  min-height: 360px !important;

  margin: 0 0 0 auto !important;

  padding: 48px 52px 48px 34px !important;

  text-align: left !important;
}

.rm-audio__photo-overlay h2 {
  max-width: 460px !important;

  margin: 0 !important;

  font-family: "Poppins", Arial, Helvetica, sans-serif !important;
  font-size: clamp(31px, 3.2vw, 44px) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;

  letter-spacing: -.03em !important;

  color: #ffffff !important;
}

.rm-audio__photo-overlay p {
  max-width: 420px !important;

  margin: 15px 0 0 !important;

  font-family: "Mulish", Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.62 !important;

  color: rgba(255, 255, 255, .96) !important;
}


/* =========================================================
   8. ZÁVĚR
========================================================= */

.rm-audio__closing {
  max-width: 760px !important;

  margin: 0 auto !important;

  padding: 46px 24px 52px !important;

  text-align: center !important;
}

.rm-audio__heart {
  display: block !important;

  margin: 0 0 8px !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 25px !important;
  font-weight: 400 !important;
  line-height: 1 !important;

  color: #5da942 !important;
}

.rm-audio__closing h2 {
  max-width: 690px !important;

  margin: 0 auto !important;
}

.rm-audio__closing h2 span {
  display: block !important;

  margin-top: 3px !important;

  color: #4f913d !important;
}

.rm-audio__closing > p {
  max-width: 530px !important;

  margin: 14px auto 18px !important;

  font-family: "Mulish", Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;

  color: #69635e !important;
}

.rm-audio__closing strong {
  display: block !important;

  font-family: "Poppins", Arial, Helvetica, sans-serif !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;

  color: #183d33 !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

  .rm-audio-short {
    min-height: 300px !important;
  }

  .rm-audio__benefits {
    grid-template-columns: 1fr !important;

    max-width: 570px !important;
  }

  .rm-audio__moments,
  .rm-audio__steps {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .rm-audio__detail {
    padding-right: 26px !important;
    padding-left: 26px !important;
  }

  .rm-audio__photo-overlay {
    width: 54% !important;

    padding-right: 36px !important;
  }

}


/* =========================================================
   MOBIL
========================================================= */

@media (max-width: 640px) {

  /* KRÁTKÝ POPIS */

  .rm-audio-short {
    min-height: auto !important;

    padding: 12px 0 6px !important;
  }

  .rm-audio-short__eyebrow {
    margin-bottom: 8px !important;
  }

  .rm-audio-short h2 {
    margin-bottom: 16px !important;

    font-size: 27px !important;
  }

  .rm-audio-short__lead {
    margin-bottom: 13px !important;

    font-size: 14.5px !important;
  }

  .rm-audio-short__text {
    margin-bottom: 17px !important;

    font-size: 14px !important;
  }

  .rm-audio-short__meta {
    gap: 5px 13px !important;

    margin-bottom: 18px !important;
  }


  /* DLOUHÝ POPIS */

  .rm-audio__intro,
  .rm-audio__section,
  .rm-audio__closing {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  .rm-audio__intro {
    padding-top: 32px !important;
    padding-bottom: 31px !important;
  }

  .rm-audio__section {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  .rm-audio h2 {
    font-size: 27px !important;
  }

  .rm-audio__header {
    margin-bottom: 23px !important;
  }


  /* KDE POSLOUCHAT + KROKY */

  .rm-audio__moments,
  .rm-audio__steps {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 9px !important;
  }

  .rm-audio__moment {
    padding: 16px 10px !important;
  }


  /* DETAILY */

  .rm-audio__details-grid {
    grid-template-columns: 1fr !important;
  }

  .rm-audio__detail {
    padding: 0 !important;
  }

  .rm-audio__detail:first-child {
    margin-bottom: 32px !important;

    padding-bottom: 32px !important;

    border-right: 0 !important;
    border-bottom: 1px solid rgba(24, 61, 51, .10) !important;
  }


  /* FOTO */

  .rm-audio__photo {
    width: calc(100% - 32px) !important;
    min-height: 410px !important;

    margin-top: 6px !important;

    border-radius: 16px !important;
  }

  .rm-audio__photo img {
    object-position: center center !important;
  }

  .rm-audio__photo::after {
    background:
      linear-gradient(
        0deg,
        rgba(13, 40, 31, .80) 0%,
        rgba(13, 40, 31, .35) 38%,
        rgba(13, 40, 31, .03) 70%,
        rgba(13, 40, 31, 0) 100%
      ) !important;
  }

  .rm-audio__photo-overlay {
    position: absolute !important;

    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100% !important;
    min-height: auto !important;

    margin: 0 !important;

    padding: 28px 23px !important;
  }

  .rm-audio__photo-overlay h2 {
    max-width: 330px !important;

    font-size: 30px !important;
  }

  .rm-audio__photo-overlay p {
    max-width: 330px !important;

    margin-top: 11px !important;

    font-size: 14px !important;
    line-height: 1.55 !important;
  }


  /* ZÁVĚR */

  .rm-audio__closing {
    padding-top: 40px !important;
    padding-bottom: 45px !important;
  }

}