/*
 * Home page (P5-home). Sits on top of the theme stylesheet in assets/
 * (read-only): the hero, the "for whom" cards, the gallery strip and the
 * testimonial slider keep the theme's classes; what is new lives here.
 */

/* ---- hero ---------------------------------------------------------------- */

.slider-area .hero__caption .hero__lead {
  color: #f8f8f8;
  font-size: 20px;
  line-height: 1.5;
  max-width: 560px;
  margin: -14px 0 32px;
}

@media (max-width: 767px) {
  .slider-area .hero__caption .hero__lead {
    font-size: 16px;
    margin: -4px 0 24px;
  }
}

/* ---- hero buttons on small screens ----------------------------------------
 * The theme gives .btn `line-height: 0` and 44px of side padding, and
 * .hero-btn pushes that to 41px either side. A long label — "Zapisz się na
 * darmowy trening" — then has nowhere to wrap and runs off the right edge.
 * The theme also zeroes .hero-btn-mobile's top margin under 768px, which
 * left the two stacked buttons touching, reading as one red block.
 *
 * Below 992px both become full-width blocks with a real line-height so the
 * label wraps inside the button, and a gap between them.
 */
@media (max-width: 991px) {
  .slider-area .hero__caption .hero-btn {
    display: block;
    width: 100%;
    max-width: 340px;
    padding: 18px 24px;
    margin: 0 0 12px;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
  }

  .slider-area .hero__caption .hero-btn-mobile {
    margin-left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0;
  }
}

/* ---- trust strip --------------------------------------------------------- */

.hm-trust {
  background: #151515;
  padding: 18px 0;
}

.hm-trust__item {
  display: block;
  color: #f8f8f8;
  padding: 14px 10px 14px 52px;
  position: relative;
  line-height: 1.3;
  transition: color 0.3s;
}

.hm-trust__item:hover,
.hm-trust__item:focus {
  color: #fff;
}

.hm-trust__item i {
  position: absolute;
  left: 12px;
  top: 16px;
  font-size: 26px;
  color: #ed342c;
}

.hm-trust__item strong {
  display: block;
  font-family: "Teko", sans-serif;
  text-transform: uppercase;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.hm-trust__item span {
  display: block;
  font-size: 14px;
  color: #b8b8b8;
}

.hm-trust__item:hover span {
  color: #ddd;
}

@media (max-width: 575px) {
  .hm-trust__item {
    padding-left: 44px;
  }

  .hm-trust__item i {
    left: 8px;
    font-size: 22px;
  }

  .hm-trust__item strong {
    font-size: 18px;
  }

  .hm-trust__item span {
    font-size: 12px;
  }
}

/* ---- why train here ------------------------------------------------------ */

.hm-about {
  padding-top: 60px;
}

.hm-about .section-header h3 {
  font-size: 44px;
}

@media (max-width: 767px) {
  .hm-about .section-header h3 {
    font-size: 32px;
  }
}

.hm-about__text h4 {
  font-family: "Teko", sans-serif;
  text-transform: uppercase;
  font-size: 26px;
  font-weight: 500;
  color: #16161a;
  margin: 22px 0 6px;
  padding-left: 30px;
  position: relative;
}

.hm-about__text h4:first-child {
  margin-top: 0;
}

.hm-about__text h4::before {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #ed342c;
  position: absolute;
  left: 0;
  top: 3px;
  font-size: 18px;
}

.hm-about__text h3 {
  font-family: "Teko", sans-serif;
  text-transform: uppercase;
  font-size: 30px;
  margin: 22px 0 8px;
}

.hm-about__text p {
  font-size: 17px;
  line-height: 1.65;
  color: #212025;
  margin-bottom: 8px;
}

.hm-about__text ul {
  padding-left: 22px;
  margin-bottom: 8px;
}

.hm-about__text a {
  color: #be1e2d;
}

.hm-about__text .btn.header-btn {
  color: #fff;
}

.hm-about .photo-keeper {
  overflow: hidden;
}

/* ---- trainer -------------------------------------------------------------- */

.hm-trainer__lead {
  font-size: 18px;
  line-height: 1.6;
  color: #212025;
  margin-bottom: 20px;
}

/* The record from the trainer-bio block, mirroring /o-trenerze: h3 per
   career, ul of results; the trophies are ours, not the block's. */

.hm-record h3,
.hm-record h4 {
  font-family: "Teko", sans-serif;
  text-transform: uppercase;
  font-size: 24px;
  margin: 18px 0 8px;
  color: #16161a;
}

.hm-record h3:first-child,
.hm-record h4:first-child {
  margin-top: 0;
}

.hm-record ul {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}

.hm-record ul li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 8px;
  font-size: 16px;
  color: #212025;
  line-height: 1.6;
}

.hm-record ul li::before {
  content: "\f091";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #ed342c;
  position: absolute;
  left: 0;
  top: 2px;
}

.hm-record p {
  font-size: 16px;
  color: #212025;
}

/* ---- partners ------------------------------------------------------------- */

.hm-partners__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  padding: 10px 20px;
}

.hm-partners__logo img {
  max-height: 100px;
  width: auto;
  max-width: 100%;
}

.hm-partners__more {
  text-align: center;
  margin: 24px 0 0;
}

.hm-partners__more a {
  color: #b8b8b8;
  text-transform: uppercase;
  font-family: "Teko", sans-serif;
  font-size: 20px;
  letter-spacing: 0.04em;
}

.hm-partners__more a:hover {
  color: #ed342c;
}

/* ---- accepted sports cards ------------------------------------------------
 * The hero bar sits on a light plate because every one of these marks is
 * drawn dark for light backgrounds; on the hero image they would vanish.
 * It is anchored to the bottom of .slider-area (position: relative in the
 * markup) so the cards land on the first screen — the hero is 1080px tall,
 * so the sections after it are below the fold on a desktop viewport.
 */

.hm-cardbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
}

.hm-cardbar__inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 28px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -2px 18px rgba(0, 0, 0, 0.18);
  padding: 14px 28px;
}

.hm-cardbar__label {
  margin: 0;
  flex: 0 0 auto;
  font-family: "Teko", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 20px;
  line-height: 1.1;
  color: #151515;
}

.hm-cardbar__label::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin-top: 4px;
  background: #ed342c;
}

.hm-cardbar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 34px;
  flex: 1 1 auto;
  justify-content: space-around;
}

.hm-cardbar__item {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Wordmarks are ~5:1, the two bare marks are square — matching their heights
 * would make the squares tower over the wordmarks, so the marks are capped
 * shorter and paired with the card name instead. */
.hm-cardbar__logo {
  height: 26px;
  width: auto;
  max-width: 190px;
}

.hm-cardbar__logo--mark {
  height: 30px;
  max-width: 34px;
}

.hm-cardbar__name {
  font-family: "Teko", sans-serif;
  text-transform: uppercase;
  font-size: 19px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #151515;
  white-space: nowrap;
}

@media (max-width: 991px) {
  .hm-cardbar__inner {
    gap: 16px;
    padding: 12px 18px;
  }
  .hm-cardbar__label {
    font-size: 17px;
  }
  .hm-cardbar__list {
    gap: 18px;
  }
  .hm-cardbar__logo {
    height: 20px;
    max-width: 140px;
  }
  .hm-cardbar__logo--mark {
    height: 24px;
    max-width: 26px;
  }
  .hm-cardbar__name {
    font-size: 16px;
  }
}

/* Phones: four in a row does not fit — measured, the narrowest arrangement
 * still needs ~392px against a 375px screen — so the row becomes a 2x2 grid.
 * That is the simplification, and it buys space: the logos get bigger here
 * than they would be crammed into one line. */
@media (max-width: 767px) {
  .hm-cardbar__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 12px 14px;
    border-radius: 6px 6px 0 0;
  }
  .hm-cardbar__label {
    font-size: 16px;
    text-align: center;
  }
  .hm-cardbar__label::after {
    margin: 3px auto 0;
  }
  .hm-cardbar__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 10px;
    justify-content: stretch;
  }
  .hm-cardbar__item {
    justify-content: center;
    gap: 6px;
    min-width: 0;
  }
  .hm-cardbar__logo {
    height: 20px;
    max-width: 100%;
  }
  .hm-cardbar__logo--mark {
    height: 24px;
    max-width: 26px;
    flex: 0 0 auto;
  }
  .hm-cardbar__name {
    font-size: 14px;
  }
}

/* Very narrow phones: drop a step so nothing clips. */
@media (max-width: 359px) {
  .hm-cardbar__logo {
    height: 17px;
  }
  .hm-cardbar__logo--mark {
    height: 21px;
    max-width: 23px;
  }
  .hm-cardbar__name {
    font-size: 12px;
  }
}