/*
 * Site-wide overrides loaded on every public page after assets/css/style.css
 * (which is read-only). Keep this file small: page-specific styles belong
 * in their own css/<page>.css loaded through the layout's `head` section.
 */

/*
 * The main menu grew from five to seven tabs (Grafik and Cennik,
 * P5-grafik-cennik). The theme sets 20px Montserrat down to 1226px and only
 * then drops to 15px, which lets seven items plus the header button wrap
 * onto a second line on 1226-1500px laptops; tighten the type and the gaps
 * on that band instead.
 */
@media only screen and (min-width: 992px) and (max-width: 1500px) {
  .header-area .main-header .main-menu ul li a {
    font-size: 15px;
  }

  .header-area .main-header .main-menu ul > li.nav-item {
    margin-left: 0.6rem !important;
    margin-right: 0.6rem !important;
  }

  .header-area .main-header .header-right-btn {
    margin-left: 16px;
  }
}

/*
 * Images carry width/height attributes so the browser can reserve the box
 * before the file arrives (P6-performance). The header logo is the one
 * site-wide case where the theme sizes the *other* axis in CSS
 * (.logo img { height: 100px }): free the width again or the attribute
 * pins it and stretches the logo. Photos whose width the theme sets
 * (about/ali/bio) are handled in the markup instead, with class="img-fluid"
 * (max-width: 100%; height: auto) -- no per-photo selector list to extend.
 */
.logo img {
  width: auto;
}

/* ---- .primary-btn: let the label decide the size --------------------------
 * The theme pins this button to a fixed 160x46 box with line-height 45px
 * (assets/css/style.css). Any label that does not fit on one line is drawn
 * outside the button rather than growing it — which is what happened to
 * "Umów pierwszy trening" on a phone. Release the box: 160px becomes a
 * minimum, the height follows the content, and the padding keeps a
 * single-line button at the same ~46px it has always been.
 *
 * Site-wide rather than per page: two pages had already patched this
 * separately, each half-fixing it, and the next long label would have been
 * the third.
 */
.primary-btn {
  width: auto;
  min-width: 160px;
  max-width: 100%;
  height: auto;
  min-height: 46px;
  line-height: 1.3;
  white-space: normal;
  padding-top: 14px;
  padding-bottom: 14px;
}

/* ---- accepted cards, in-body section -------------------------------------
 * Four operators side by side on desktop, two-up on tablets, stacked on
 * phones. The hero bar carries the logos; the detail — every package the
 * club accepts — lives here.
 *
 * Shared, not per page: the same section renders on the home page (white
 * background), /cennik (light) and /treningi (near-black). It therefore
 * carries its own light surface — every one of these marks is drawn dark
 * for light backgrounds, so on the trainings page it would otherwise be
 * four invisible logos, and recolouring a trademark is not ours to do.
 */

.hm-cards {
  background: #fff;
  border-radius: 6px;
  padding: 34px 26px 8px;
  margin: 10px 0 40px;
}

.hm-cards__title {
  text-align: center;
  margin-bottom: 6px;
}

.hm-cards__intro {
  text-align: center;
  color: #6b6b6b;
  margin-bottom: 30px;
}

.hm-cards__item {
  margin-bottom: 30px;
}

/* Fixed-height head so the package lists start on the same line across all
 * four columns, whatever each mark's aspect ratio. */
.hm-cards__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 2px solid #ececec;
}

.hm-cards__logo {
  height: 30px;
  width: auto;
  max-width: 100%;
}

.hm-cards__logo--mark {
  height: 38px;
  max-width: 42px;
  flex: 0 0 auto;
}

.hm-cards__name {
  font-family: "Teko", sans-serif;
  text-transform: uppercase;
  font-size: 24px;
  line-height: 1;
  color: #151515;
  white-space: nowrap;
}

.hm-cards__plans {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hm-cards__plans li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.5;
  color: #4a4a4a;
  margin-bottom: 4px;
}

.hm-cards__plans li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  background: #ed342c;
  border-radius: 50%;
}

@media (max-width: 575px) {
  .hm-cards__head {
    justify-content: flex-start;
  }
  .hm-cards__plans li {
    font-size: 14px;
  }
}