/* ==========================================================
   HOMEPAGE – QUICK CARDS
========================================================== */

.skbt-cards {
  width: min(
    calc(100% - var(--content-gutter)),
    var(--content-width)
  ) !important;

  margin: 48px auto 56px !important;
  padding: 0 !important;
}

/* ==========================================================
   GRID
========================================================== */

.skbt-cards__grid {
  display: grid !important;

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

  align-items: stretch !important;

  width: 100% !important;

  gap: 28px !important;

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

.skbt-cards__grid > * {
  min-width: 0 !important;
  height: 100% !important;

  margin: 0 !important;
}

/* ==========================================================
   CARD
========================================================== */

.skbt-card {
  position: relative;

  display: grid !important;

  grid-template-columns: 54px minmax(0, 1fr) !important;

  grid-template-rows:
    auto
    auto
    auto !important;

  align-items: start !important;

  column-gap: 16px !important;
  row-gap: 5px !important;

  min-width: 0 !important;
  min-height: 150px !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 20px 22px !important;

  background: #ffffff !important;

  border: 1px solid #e4e6ea !important;
  border-radius: 8px !important;

  box-shadow: 0 3px 12px rgba(14, 20, 32, 0.07) !important;

  cursor: pointer;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

.skbt-card:hover,
.skbt-card:focus-within {
  background: #ffffff !important;

  border-color: var(--color-primary) !important;

  box-shadow: 0 5px 18px rgba(14, 20, 32, 0.09) !important;

  transform: none !important;
}

/* ==========================================================
   ICON
========================================================== */

.skbt-card__icon {
  --skbt-card-icon-image: none;
  --skbt-card-icon-size: 40px;
  --skbt-card-icon-x: 0px;
  --skbt-card-icon-y: 0px;

  grid-column: 1 !important;
  grid-row: 1 / span 3 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 54px !important;
  height: 54px !important;

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

  background: #fde8ea !important;

  border-radius: 50% !important;
}

.skbt-card__icon::before {
  content: "";

  display: block;

  width: var(--skbt-card-icon-size);
  height: var(--skbt-card-icon-size);

  flex: 0 0 var(--skbt-card-icon-size);

  background-image: var(--skbt-card-icon-image);

  background-repeat: no-repeat;

  background-position: center;

  background-size: contain;

  transform: translate(var(--skbt-card-icon-x), var(--skbt-card-icon-y));

  transform-origin: center;
}

/* Tréninky */

.skbt-card--trainings .skbt-card__icon {
  --skbt-card-icon-size: 48px;
  --skbt-card-icon-x: 2px;
  --skbt-card-icon-y: 1px;
}

/* Turnaje a akce */

.skbt-card--events .skbt-card__icon {
  --skbt-card-icon-size: 45px;
}

/* Fotogalerie */

.skbt-card--gallery .skbt-card__icon {
  --skbt-card-icon-size: 52px;
  --skbt-card-icon-y: -1px;
}

/* ==========================================================
   TITLE
========================================================== */

.skbt-card__title {
  grid-column: 2 !important;
  grid-row: 1 !important;

  margin: 0 0 2px !important;
  padding: 0 !important;

  color: #171a21 !important;

  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;

  transition: color 0.2s ease !important;
}

.skbt-card:hover .skbt-card__title,
.skbt-card:focus-within .skbt-card__title {
  color: var(--color-primary) !important;
}

/* ==========================================================
   TEXT
========================================================== */

.skbt-card__text {
  grid-column: 2 !important;
  grid-row: 2 !important;

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

  color: #666b74 !important;

  font-size: 12.5px !important;
  line-height: 1.45 !important;
}

/* ==========================================================
   STRETCHED CARD LINK
========================================================== */

.skbt-card__link {
  grid-column: 2 !important;
  grid-row: 3 !important;

  display: block !important;

  width: fit-content !important;

  margin: 7px 0 0 !important;
  padding: 0 !important;

  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;
}

.skbt-card__link .wp-block-button {
  margin: 0 !important;
  padding: 0 !important;
}

.skbt-card__link .wp-block-button__link,
.skbt-card__link > a {
  display: inline-flex !important;

  align-items: center !important;

  width: auto !important;
  min-width: 0 !important;
  height: auto !important;

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

  color: #d0202a !important;
  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  font-size: 10.5px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;

  letter-spacing: 0.08em !important;

  text-decoration: none !important;
  text-transform: uppercase !important;

  transition: color 0.2s ease !important;
}

/*
 * Existující skutečný odkaz rozšíříme přes celou kartu.
 * Nemáme druhý fake link ani JS click handler.
 */

.skbt-card__link .wp-block-button__link::after,
.skbt-card__link > a::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 2;

  border-radius: 8px;
}

.skbt-card__link .wp-block-button__link:hover,
.skbt-card__link .wp-block-button__link:focus,
.skbt-card__link > a:hover,
.skbt-card__link > a:focus {
  color: #a91820 !important;

  background: transparent !important;

  text-decoration: none !important;
}

.skbt-card__link .wp-block-button__link:focus-visible,
.skbt-card__link > a:focus-visible {
  outline: none !important;
}

.skbt-card:has(.skbt-card__link .wp-block-button__link:focus-visible),
.skbt-card:has(.skbt-card__link > a:focus-visible) {
  border-color: var(--color-primary) !important;

  box-shadow:
    0 0 0 2px rgba(208, 32, 42, 0.12),
    0 5px 18px rgba(14, 20, 32, 0.09) !important;
}

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

@media (max-width: 900px) {
  .skbt-cards {
    width: calc(100% - 32px) !important;

    margin-top: 40px !important;
    margin-bottom: 46px !important;
  }

  .skbt-cards__grid {
    grid-template-columns: 1fr !important;

    gap: 14px !important;
  }

  .skbt-card {
    min-height: 135px !important;
  }
}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 600px) {
  .skbt-cards {
    width: calc(100% - 24px) !important;

    margin-top: 34px !important;
    margin-bottom: 38px !important;
  }

  .skbt-card {
    grid-template-columns: 46px minmax(0, 1fr) !important;

    column-gap: 13px !important;

    min-height: 0 !important;

    padding: 17px !important;

    border-radius: 8px !important;
  }

  .skbt-card__icon {
    width: 46px !important;
    height: 46px !important;

    background: #fde8ea !important;

    border-radius: 50% !important;
  }

  .skbt-card--trainings .skbt-card__icon {
    --skbt-card-icon-size: 40px;
  }

  .skbt-card--events .skbt-card__icon {
    --skbt-card-icon-size: 35px;
  }

  .skbt-card--gallery .skbt-card__icon {
    --skbt-card-icon-size: 43px;
  }

  .skbt-card__title {
    font-size: 15px !important;
  }

  .skbt-card__text {
    font-size: 12px !important;
  }

  .skbt-card__link .wp-block-button__link,
  .skbt-card__link > a {
    font-size: 10px !important;
  }
}