/*!******************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/hero-banner/style.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Hero Banner — shared styles.
 *
 * Loaded on the front end and inside the editor canvas, which is what keeps the
 * two views identical. Everything the banner needs is declared explicitly
 * rather than inherited: the theme dequeues `global-styles` on the front end
 * (see functions.php), so any font, colour or metric taken from theme.json
 * would land in the editor but not on the published page.
 */
/* Self-hosted faces. theme.json registers these as well, but WP emits those
   @font-face rules through `global-styles` — dequeued on the front end — so the
   block carries its own copy. Safe to delete once the theme ships the faces in
   a stylesheet that loads in both views. */
/* Every face the theme ships, because the description's family and weight are
   editor-selectable and any of them can end up in use. A browser only downloads
   the faces a rule actually matches, so the unused ones cost nothing. */
@font-face {
  font-family: "Michroma";
  src: url("../../assets/fonts/michroma/michroma-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-300-normal.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@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-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../../assets/fonts/poppins/poppins-600-normal.woff2") format("woff2");
  font-weight: 600;
  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-800-normal.woff2") format("woff2");
  font-weight: 800;
  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;
}
/* Description defaults. Held in variables because the accent repeats them as the
   last link of its fallback chain. */
/* ============ HERO BANNER ============ */
.hero-banner {
  --banner-bg: #08070c;
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 380px;
  max-width: 1320px;
  width: calc(100% - 64px);
  margin: 0 auto;
  padding: 131px 0 104px 0;
  overflow: hidden;
  border-radius: 14px;
  background-color: var(--banner-bg);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  background-origin: border-box;
}
.hero-banner *,
.hero-banner *::before,
.hero-banner *::after {
  box-sizing: border-box;
}
.hero-banner {
  /* scrim so the copy stays legible where it meets the artwork */
}
.hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, var(--banner-bg) 0%, var(--banner-bg) 30%, rgba(8, 7, 12, 0.78) 46%, rgba(8, 7, 12, 0) 66%);
  /* Tracks a custom --banner-bg; identical output for the default #08070c. */
  background: linear-gradient(90deg, var(--banner-bg) 0%, var(--banner-bg) 30%, color-mix(in srgb, var(--banner-bg) 78%, transparent) 46%, transparent 66%);
}
.hero-banner .hero-banner__content {
  position: relative;
  z-index: 1;
  max-width: 730px;
}
.hero-banner {
  /* ---- headline ---- */
}
.hero-banner .hero-title {
  margin: 0 0 18px;
  padding: 0;
  font-family: "Michroma", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1.6rem, 4.4vw, 2.85rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #fff;
  font-weight: 400;
}
.hero-banner .hero-title__accent {
  display: inline-block;
  font-weight: 700;
  font-synthesis: weight;
  background-image: linear-gradient(100deg, #f97316 0%, #ef2f7b 46%, #d924c9 72%, #a855f7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero-banner {
  /* ---- description ----
     Typography and colour are editor-selectable, so each property reads a
     custom property that render.php / edit.js only set when the editor has
     actually chosen something. Unset means the fallback wins, which is the
     original design. */
}
.hero-banner .hero-description {
  margin: 0;
  padding: 0;
  font-family: var(--hero-desc-font-family, Poppins, Segoe UI, system-ui, sans-serif);
  font-size: var(--hero-desc-font-size, 18px);
  font-weight: var(--hero-desc-font-weight, 400);
  font-style: var(--hero-desc-font-style, normal);
  line-height: 1.65;
  color: var(--hero-desc-color, #9298a6);
  /* Any bare <span> the author wrote in the description textarea is the
     accent run — that markup is the whole authoring interface, so no class
     is required. The explicit class is still matched for descriptions
     written against it.

     Each property falls through to the description's own setting before
     reaching the hard default, so restyling the paragraph carries the
     accent with it until the accent is given its own value. */
}
.hero-banner .hero-description span,
.hero-banner .hero-description .hero-description__accent {
  font-family: var(--hero-desc-accent-font-family, var(--hero-desc-font-family, Poppins, Segoe UI, system-ui, sans-serif));
  font-size: var(--hero-desc-accent-font-size, var(--hero-desc-font-size, 18px));
  font-weight: var(--hero-desc-accent-font-weight, 700);
  font-style: var(--hero-desc-accent-font-style, var(--hero-desc-font-style, normal));
  color: var(--hero-desc-accent-color, #fff);
}

@supports not (background-clip: text) {
  .hero-banner .hero-title__accent {
    -webkit-text-fill-color: #ef2f7b;
    color: #ef2f7b;
  }
}
/* ---- tablet: side-by-side, but tighter ---- */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero-banner {
    min-height: 320px;
    padding: 40px clamp(22px, 3.6vw, 44px);
  }
  .hero-banner .hero-banner__content {
    max-width: 58%;
  }
  .hero-banner .hero-title {
    font-size: clamp(1.35rem, 3.4vw, 2.1rem);
  }
  .hero-banner .hero-description {
    max-width: 40ch;
  }
}
/* ---- stacked / centred layout ---- */
@media (max-width: 768px) {
  .hero-banner {
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    min-height: 0;
    padding: 38px 20px 0;
    border-radius: 0;
    background-position: center bottom;
    background-size: contain;
    /* artwork sits below the copy, so the fade runs top-to-bottom */
  }
  .hero-banner::before {
    background: linear-gradient(180deg, var(--banner-bg) 0%, var(--banner-bg) 26%, rgba(8, 7, 12, 0.55) 40%, rgba(8, 7, 12, 0) 56%);
    background: linear-gradient(180deg, var(--banner-bg) 0%, var(--banner-bg) 26%, color-mix(in srgb, var(--banner-bg) 55%, transparent) 40%, transparent 56%);
  }
  .hero-banner .hero-banner__content {
    max-width: 100%;
    margin: 0 auto;
    /* reserves room for the artwork: full width ÷ 1.89 aspect */
    padding-bottom: 56%;
  }
  .hero-banner .hero-title {
    margin-bottom: 14px;
    font-size: clamp(1.15rem, 5.6vw, 1.7rem);
    line-height: 1.4;
  }
  .hero-banner .hero-description {
    max-width: 34ch;
    margin: 0 auto;
    /* Same custom property, lighter fallback: an explicit colour choice
       still wins here instead of being clobbered at this breakpoint. */
    color: var(--hero-desc-color, #b9bdc9);
  }
}
/* No artwork chosen yet: drop the space the artwork would have occupied so the
   copy is not left floating above a gap. */
.hero-banner:not([style*=background-image])::before {
  display: none;
}
@media (max-width: 768px) {
  .hero-banner:not([style*=background-image]) {
    padding-bottom: 38px;
  }
  .hero-banner:not([style*=background-image]) .hero-banner__content {
    padding-bottom: 0;
  }
}

/* ============ ARTWORK BLEED ============
   The artwork runs past the panel's right edge instead of stopping at it.

   It cannot simply be nudged: a background never paints outside the box it
   belongs to, whatever the overflow or the position, so moving it right would
   only crop it. The section therefore stops painting the artwork and an
   ::after layer paints it instead, in a box offset past that edge.

   That box is the same *width* as the panel, shifted — not a wider box — so
   `contain` resolves against identical dimensions and the artwork moves
   without rescaling.

   Desktop only: below 769px the artwork sits centred under the copy, where a
   sideways bleed has nothing to bleed against. */
@media (min-width: 769px) {
  .hero-banner {
    /* How far the artwork clears the panel. Clamped to the space actually
       beside it — a flat 100px reaches past the viewport on any screen
       narrower than about 1520px and raises a horizontal scrollbar. The
       24px keeps it clear of the vertical scrollbar, which `vw` counts. */
    --hero-bleed-max: 190px;
    --hero-bleed: min(
    	var(--hero-bleed-max),
    	max(0px, (100vw - 1320px - 24px) / 2)
    );
    /* Was hidden — the bleed is a child box, and hidden would clip it. The
       panel's own background is still rounded off by border-radius, which
       clips regardless of this. */
    overflow: visible;
    /* Keeps the z-indexes below from escaping the panel. .casino-cards is
       pulled up over the hero's bottom edge by a negative margin, and
       without a stacking context here the lifted scrim would paint across
       the top of the first card. */
    isolation: isolate;
    /* The inline background-image stays on the section, because ::after
       inherits the URL from it; this stops the section drawing its own
       copy underneath the offset one. */
    background-size: 0 0;
  }
  .hero-banner::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: var(--hero-bleed);
    right: calc(var(--hero-bleed) * -1);
    pointer-events: none;
    background-image: inherit;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
  }
  .hero-banner {
    /* ::after is generated after the copy in tree order, so the scrim needs
       lifting or the artwork would paint over the text it exists to keep
       legible. The copy sits above both: same z-index as the scrim, later
       in tree order. */
  }
  .hero-banner::before {
    z-index: 1;
  }
}

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