/*!*******************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./blocks/casino-cards/style.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Casino Cards — shared styles.
 *
 * Loaded on the front end and inside the editor canvas, which is what keeps the
 * two views identical. Properties the design depends on are declared outright
 * rather than inherited: the theme dequeues `global-styles` on the front end
 * (see functions.php), so anything taken from theme.json would land in the
 * editor but not on the published page.
 */
/* The faces this block uses. theme.json registers them too, but WP emits those
   @font-face rules through `global-styles` — dequeued on the front end — so the
   block carries its own. Webpack content-hashes the files, so the copies shared
   with hero-banner resolve to one emitted file and one download. */
@font-face {
  font-family: "Poppins";
  src: url("../../assets/fonts/poppins/poppins-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../../assets/fonts/poppins/poppins-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mulish";
  src: url("../../assets/fonts/mulish/mulish-900-normal.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/* The CTA's lifted state. Shared because hovering anywhere on a clickable card
   has to light up the button too — a card that reacts to the cursor while its
   own call to action sits inert reads as two separate targets. */
/* ================= CASINO CARDS ================= */
.casino-cards {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: calc(100% - 64px);
  max-width: 1320px;
  margin: -50px auto 0 auto;
  position: relative;
}
.casino-cards *,
.casino-cards *::before,
.casino-cards *::after {
  box-sizing: border-box;
}
.casino-cards .casino-cards__card {
  --brand: #f5871f;
  --brand-fg: #000;
  --accent: var(--brand);
  --glow: #ff941699;
  --chip-bg: #24160633;
  --chip-border: #401b0866;
  display: grid;
  grid-template-columns: 358px minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 32px;
  height: 180px;
  opacity: 1;
  padding-left: 0px;
  padding-right: 32px;
  border-left: 3px solid var(--brand);
  border-radius: 16px;
  background: #0a0713;
  overflow: hidden;
  /* The card is an <a> whenever its CTA has a URL (see render.php), so it
     would otherwise arrive underlined and link-coloured — the theme
     dequeues `global-styles` on the front end, leaving the browser's own
     link defaults in play. Harmless on the <div> the editor renders. */
  color: inherit;
  text-decoration: none;
}
.casino-cards {
  /* ---- whole-card click target ----
     render.php swaps the card's <div> for an <a> and its CTA anchor for a
     <span> when this class is present: an <a> inside an <a> is invalid, and
     the parser silently splits the pair rather than nesting them. */
}
.casino-cards .casino-cards__card--clickable {
  cursor: pointer;
  /* The CTA is no longer hoverable in its own right, so the card drives
     its lifted state. Without this the button sits inert while the card
     reacts, which reads as two separate targets. */
}
.casino-cards .casino-cards__card--clickable:hover .casino-cards__button {
  transform: translateY(-1px);
  filter: brightness(1.07);
  box-shadow: 0 0 52px 4px var(--glow);
}
.casino-cards .casino-cards__card--clickable {
  /* The whole card is the focus target now — the ring belongs around it
     rather than around the CTA it replaced. */
}
.casino-cards .casino-cards__card--clickable:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.casino-cards {
  /* ---- logo panel ---- */
}
.casino-cards .casino-cards__logo {
  display: block;
  width: 358px;
  height: 180px;
  object-fit: cover;
  border-radius: 13px 0 0 13px;
}
.casino-cards {
  /* ---- body ---- */
}
.casino-cards .casino-cards__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  min-width: 0;
}
.casino-cards .casino-cards__title {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5rem;
  letter-spacing: 0;
  color: #fff;
  /* Any bare <span> the author wrote in the title field is the accent run,
     exactly as in the description below. */
}
.casino-cards .casino-cards__title span {
  color: var(--accent);
}
.casino-cards .casino-cards__description {
  margin: 0;
  padding: 0;
  max-width: 62ch;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 0;
  color: #92929c;
  /* Any bare <span> the author wrote in the description textarea is the
     accent run — that markup is the whole authoring interface. */
}
.casino-cards .casino-cards__description span {
  color: var(--accent);
}
.casino-cards {
  /* ---- features ---- */
}
.casino-cards .casino-cards__features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.casino-cards .casino-cards__features--item {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  gap: 6px;
  padding: 4px 11px;
  border: 1px solid var(--chip-border);
  border-radius: 7px;
  background: var(--chip-bg);
}
.casino-cards {
  /* Pasted icons are rewritten to paint with currentColor, so the theme's
     accent drives them (see render.php / markup.js). */
}
.casino-cards .casino-cards__features--icon {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  color: var(--accent);
}
.casino-cards .casino-cards__features--text {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 18px;
  letter-spacing: 0;
  vertical-align: middle;
  color: var(--accent);
  white-space: nowrap;
}
.casino-cards {
  /* ---- cta ---- */
}
.casino-cards .casino-cards__action {
  display: flex;
  align-items: center;
}
.casino-cards .casino-cards__button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 9px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.casino-cards .casino-cards__button:hover {
  transform: translateY(-1px);
  filter: brightness(1.07);
  box-shadow: 0 0 52px 4px var(--glow);
}
.casino-cards .casino-cards__button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.casino-cards .casino-cards__button svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}
.casino-cards .casino-cards__button-theme {
  background: var(--brand);
  color: #000;
  box-shadow: 0 0 40px 0 var(--glow);
}
.casino-cards .casino-cards__button-text {
  font-family: "Mulish", "Poppins", sans-serif;
  font-weight: 900;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0;
  vertical-align: middle;
  text-transform: uppercase;
}
.casino-cards {
  /* ================= BRAND THEMES ================= */
}
.casino-cards .casino-cards__card--vegastars {
  --brand: #ff9416;
  --brand-fg: #fff;
  --glow: #ff941699;
  --accent: #ffa943;
  --chip-bg: #24160633;
  --chip-border: #401b0866;
}
.casino-cards .casino-cards__card--spinbet {
  --brand: #ffde09;
  --brand-fg: #1a1400;
  --glow: #ffde0999;
  --accent: #ffde09;
  --chip-bg: #06092433;
  --chip-border: #37400866;
}
.casino-cards .casino-cards__card--casiny {
  --brand: #b80fff;
  --brand-fg: #fff;
  --glow: #a507e799;
  --accent: #d36aff;
  --chip-bg: #10062433;
  --chip-border: #26084066;
}
.casino-cards .casino-cards__card--spinbit {
  --brand: #2e74ff;
  --brand-fg: #fff;
  --glow: #2e74ff99;
  --accent: #2e74ff;
  --chip-bg: #1c240633;
  --chip-border: #081a4066;
}
.casino-cards .casino-cards__card--voltrush {
  --brand: #00fea9;
  --brand-fg: #04231a;
  --glow: #00fea999;
  --accent: #4bffc3;
  --chip-bg: #06242033;
  --chip-border: #08403b66;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1100px) {
  .casino-cards .casino-cards__card {
    grid-template-columns: 280px minmax(0, 1fr) auto;
    gap: 24px;
    height: auto;
    min-height: 180px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 24px;
  }
  .casino-cards .casino-cards__logo {
    width: 100%;
    height: 100%;
    align-self: stretch;
  }
  .casino-cards .casino-cards__title {
    font-size: 20px;
  }
}
@media (max-width: 900px) {
  .casino-cards .casino-cards__card {
    grid-template-columns: 240px minmax(0, 1fr);
    row-gap: 18px;
  }
  .casino-cards .casino-cards__action {
    grid-column: 2;
  }
}
@media (max-width: 768px) {
  .casino-cards .casino-cards__card {
    grid-template-columns: 1fr;
    gap: 18px;
    height: auto;
    padding: 0 0 22px;
    border-left-width: 0;
    border-top: 3px solid var(--brand);
  }
  .casino-cards .casino-cards__logo {
    width: 100%;
    height: auto;
    aspect-ratio: 358/180;
    border-radius: 13px 13px 0 0;
  }
  .casino-cards .casino-cards__body,
  .casino-cards .casino-cards__action {
    grid-column: 1;
    padding: 0 20px;
  }
  .casino-cards .casino-cards__title {
    font-size: 20px;
  }
  .casino-cards .casino-cards__description {
    line-height: 150%;
  }
  .casino-cards .casino-cards__button {
    width: 100%;
    justify-content: center;
  }
  .casino-cards .casino-cards__features--text {
    white-space: normal;
  }
}

/*# sourceMappingURL=style-index.css.map*/