/* ==============================================
   Bally Quartz – Option B with TUNABLE KNOBS (v5, includes v4 changes)
   ============================================== */

/* ---- Desktop knobs ---- */
:root{
  --slogan-size: 26px;   /* headline text size */
  --logo-width: 60%;     /* Bally logo width inside its card (v4 change) */
  --cert-gap: 15px;

  --slab-width: 24%;     /* 4-per-row for slabs/details */
  --detail-width: 24%;

  --slogan-left: 70px;
  --slogan-top: 20px;
  --logo-right: 20px;
  --logo-top: 20px;
  --cert-right: 20px;     /* kept for consistency; not used for 'under the logo' */
  --cert-bottom: 20px;    /* kept for consistency */
}

/* ---- Mobile knobs (≤768px) ---- */
@media (max-width: 768px){
  :root{
    --slogan-size: 16px;
    --logo-width: 40%;
    --cert-gap: 6px;

    --slab-width: 48%;     /* 2-per-row on mobile */
    --detail-width: 48%;

    --slogan-left: 10px;
    --slogan-top: 10px;
    --logo-right: 10px;
    --logo-top: 8px;
    --cert-right: 10px;
    --cert-bottom: 10px;
  }
}

/* ===============================
   Essentials (Option B – <img> hero)
   =============================== */
html, body { min-height: 100%; overflow-x: hidden; }

.hero{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.hero-img{ display:block; width:100%; height:auto; margin:0; }
.hero-img--desktop{ display:block; }
.hero-img--mobile{ display:none; }

@media (max-width:768px){
  .hero-img--desktop{ display:none; }
  .hero-img--mobile{ display:block; }
}

/* ===============================
   Overlays (position + basic styling)
   =============================== */
:root{
  --glass-bg: rgba(255,255,255,0.68);
  --glass-border: rgba(255,255,255,0.9);
  --glass-radius: 16px;
  --glass-shadow: 0 10px 25px rgba(0,0,0,0.18);
  --text-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.glass{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  backdrop-filter: saturate(120%) blur(6px);
}

/* ===============================
   Slogan + Logo
   =============================== */
.slogan{
  position: absolute;
  left: var(--slogan-left);
  top: var(--slogan-top);
  font-size: var(--slogan-size);
  color: #c81d1d;
  font-weight: bold;
  text-shadow: var(--text-shadow);
  max-width: calc(100% - 340px);
  padding: 10px 14px;
  z-index: 2;
}

.Bally.glass{
  position: absolute;
  right: var(--logo-right);
  top: var(--logo-top);
  max-width: 200px;    /* ---- change from 280 px ---- */
  padding: 8px 12px;
  z-index: 3;
}
.Bally .BaLogo{ width: var(--logo-width); height:auto; display:block; margin:0 auto; }

/* ===============================
   CERTS — Per-cert glass cards, positioned UNDER the logo
   HTML:
     <div class="Bally glass"> <img class="BaLogo" ...> </div>
     <div class="CrtCnt">
       <div class="glass certCard"><img class="cert" src="..." alt=""></div>
       <div class="glass certCard"><img class="cert" src="..." alt=""></div>
       <div class="glass certCard"><img class="cert" src="..." alt=""></div>
       <div class="glass certCard"><img class="cert" src="..." alt=""></div>
     </div>
   =============================== */

/* Container aligns with the logo's right edge and sits directly under it */
.CrtCnt{
  position: absolute;
  right: var(--logo-right);                  /* align with logo card */
  /* Estimate the logo card height (200px) + its top offset (var) + a small gap (~12px).
     Tweak the 212px number if your logo card is taller/shorter. */
  top: calc(var(--logo-top) + 212px);
  display: inline-flex;
  flex-direction: row;
  gap: var(--cert-gap);
  align-items: center;
  justify-content: center;
  width: auto;                               /* hug the cert cards */
  left: auto;
  padding: 0;
  z-index: 3;
}

/* Each cert has its own small glass card */
.certCard.glass{
  display: inline-block;
  padding: 6px 8px;
}

/* Desktop sizing — change this % to grow/shrink badges */
.certCard{ width: 6%; }
.cert{
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}

/* Mobile: stack as 2x2 grid under the logo */
@media (max-width:768px){
  .CrtCnt{
    right: var(--logo-right);
    /* On mobile the logo card is narrower; adjust this offset if needed */
    top: calc(var(--logo-top) + 160px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    justify-content: center;
    justify-items: center;
    gap: var(--cert-gap);
  }
  .certCard{ width: 22%; }  /* tweak this % for mobile */
}

/* ===============================
   Content Below Hero
   =============================== */
#bally-qz { scroll-margin-top: 110px; }

div.Quartz{
  position: relative;
  left: 0;
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  margin-top: 40px;
}

img.sep { width: 95%; height: auto; border: 0; }

div.QzCntL{ width:50%; height:auto; display:flex; flex-wrap:wrap; }
div.QzCntR{ width:50%; height:auto; display:flex; flex-wrap:wrap; }

img.slab{ display:inline-block; width: var(--slab-width); height:auto; border:0; vertical-align:top; margin:0.5%; }
img.detail{ display:inline-block; width: var(--detail-width); height:auto; border:0; vertical-align:top; margin:0.5%; }

div.Color{
  width:100%; height:auto; padding-top:45px; padding-bottom:15px; padding-left:25px; padding-right:25px;
  font-size:22px; color:#303030; font-weight:bold; font-style:italic; font-family: Arial, Helvetica, sans-serif;
}
a.B:link { text-decoration:none; font-size:20px; color:#303030; font-family:arial; font-weight:bold; }
a.B:active { color:#806060; }
a.B:visited { text-decoration:none; color:#303030; font-weight:bold; }
a.B:hover { text-decoration:underline; color:#303030; font-weight:bold; }

a.inqa { text-decoration:underline; font-size:20px; color:#0000c0; font-weight:bold; font-family: Arial, Helvetica, sans-serif; }
a.inqa:active { color:#0000c0; }
a.inqa:visited { color:#0000c0; }
a.inqa:hover{ color:#0000f0; }

div.Lft { width:42.5%; padding-left:0.5%; height:auto; }
div.Rgt { width:57.5%; padding-right:1%; height:auto; }

div.Prom{
  width:100%; height:auto;
  padding-top:50px; padding-bottom:10px;
  padding-left:7.5%; padding-right:7.5%;
  font-size:22px; color:#606060; font-weight:normal; font-style:normal; font-family: Arial, Helvetica, sans-serif;
}
font.ProB{ font-size:20px; color:#606060; font-weight:bold; font-style:normal; font-family: Arial, Helvetica, sans-serif; }









/* === NO-VARS OVERRIDES: v9 (generated 2025-09-04T11:05:29) ===
   Fix overlapping and narrow-glass issues.
   - Forces cards to auto-width (no % widths), images fixed px widths.
   - Cancels any older absolute/transform rules on the cert elements.
   - Desktop: row; Mobile: 2×2 grid.
   TUNE:
     .CrtCnt { right: 96px; bottom: 20px; gap: 10px; }
     .CrtCnt .cert { width: 56px; }  (desktop)
     @media (max-width:768px) { .CrtCnt .cert { width: 44px; } }  (mobile)
==================================================== */

.hero, .banner, .hero-section, .Hero, #hero {
  position: relative;
}

/* Container in the bottom-right */
.CrtCnt {
  position: absolute !important;
  right: 96px !important;   /* move left to avoid floating button */
  bottom: 20px !important;  /* move up if touching edge */
  left: auto !important;
  top: auto !important;

  display: flex !important; /* desktop row */
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;                /* spacing between certs */
  z-index: 6;
}

/* RESET legacy sizing/positioning that caused overlap */
.CrtCnt .certCard,
.CrtCnt .cert {
  position: static !important;
  float: none !important;
  margin: 0 !important;
  transform: none !important;
  max-width: none !important;
}

/* Card wraps its image naturally; no percentage widths */
.CrtCnt .certCard {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  padding: 8px 10px;
  border-radius: 12px;
  box-sizing: content-box;
  overflow: visible;
  flex: 0 0 auto;  /* do not stretch/shrink */
}

/* Fixed image widths prevent overlap and make the glass fit the image */
.CrtCnt .cert {
  display: block !important;
  width: 56px;      /* DESKTOP badge size — adjust to taste */
  height: auto !important;
  border: 0;
}

/* Mobile: 2×2 grid with smaller images */
@media (max-width: 768px) {
  .CrtCnt {
    right: 16px !important;
    bottom: 16px !important;
    display: grid !important;
    grid-template-columns: repeat(2, max-content);
    justify-content: end;
    justify-items: center;
    align-items: end;
    gap: 8px;
  }
  .CrtCnt .cert { width: 44px; }  /* MOBILE size */
}

/* Extra small phones */
@media (max-width: 380px) {
  .CrtCnt .cert { width: 38px; }
}

/* Traditional glass fallback (works everywhere) */
.glass {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.18);
}
@supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
  .glass {
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.28);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    backdrop-filter: saturate(120%) blur(6px);
    -webkit-backdrop-filter: saturate(120%) blur(6px);
  }
}

/* === END NO-VARS OVERRIDES === */




/* === MOBILE TUNE: v10 (generated 2025-09-04T11:23:00) ===
   Goals:
   1) Slogan stays on ONE line; glass grows to cover it.
   2) Logo glass narrower (≈ -30% feel).
   3) Certs sit tighter at the bottom-right in a 2×2 grid.
   TUNE THESE NUMBERS if needed.
==================================================== */
@media (max-width: 768px) {
  /* 1) SLOGAN: single line + proper glass */
  .slogan {
    white-space: nowrap !important;  /* keep one line */
    display: inline-block !important;
    width: auto !important;          /* let the glass expand to content */
    max-width: 92vw;                 /* safety ceiling */
    font-size: 13px;                 /* adjust to fit your text length */
    line-height: 1.2;
    padding: 8px 12px;               /* make the glass cover the text */
    overflow: visible;
  }

  /* 2) LOGO GLASS: reduce width feel by ~30% */
  .Bally {
    padding: 6px 8px;                /* narrower glass */
  }
  .BaLogo {
    width: 120px;                    /* shrink the logo itself */
    max-width: 45vw;                 /* prevent overflow on very small screens */
    height: auto;
    display: block;
  }

  /* 3) CERTS: 2×2 at the bottom-right, closer to corner */
  .CrtCnt {
    right: 6px !important;           /* closer to the edge */
    bottom: 6px !important;
    display: grid !important;
    grid-template-columns: repeat(2, max-content);
    justify-content: end;
    justify-items: center;
    align-items: end;
    gap: 6px;                        /* tighter spacing */
  }
  .CrtCnt .cert {
    width: 40px;                     /* smaller mobile badges */
    height: auto;
  }
  .CrtCnt .certCard {
    padding: 6px 6px;                /* ensure glass surrounds image */
    border-radius: 12px;
  }
}
/* === END MOBILE TUNE === */