/* Ad Container Styles */
.ad-container {
  margin: 1.5rem 0;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ad-before-game,
.ad-after-game {
  margin: 1.5rem 0;
}

/* ─── Reserved space (Cumulative Layout Shift) ───────────────────────────────
   Ad units arrive after the HTML, so without a reserved height the content
   below them jumps when they load — bad for Core Web Vitals and jarring to
   read. Reserve roughly the height each slot's unit will occupy. Values
   include the container's 1rem padding (box-sizing: border-box). */
.ad-before-game,
.ad-after-game,
.ad-cat-top,
.ad-cat-ingrid,
.ad-blog-top,
.ad-blog-after {
  min-height: 122px; /* 90px leaderboard + padding */
}

.ad-in-content,
.ad-blog-incontent,
.ad-sidebar,
.ad-blog-sidebar {
  min-height: 282px; /* 250px rectangle + padding */
}

@media (max-width: 768px) {
  /* Mobile units are usually 100px banners; keep the reservation tighter so
     an unfilled slot doesn't leave a large gap on small screens. */
  .ad-before-game,
  .ad-after-game,
  .ad-cat-top,
  .ad-cat-ingrid,
  .ad-blog-top,
  .ad-blog-after {
    min-height: 110px;
  }
}

/* Responsive AdSense units (display, In-article, Matched Content) must sit in
   a non-zero-width block. The flex-centered .ad-container gave the <ins> 0
   width, which AdSense rejects: "Invalid responsive width ... : 0". Forcing
   the unit to block + full width fixes it in every ad slot. */
.ad-container .adsbygoogle {
  display: block;
  width: 100%;
}

.ad-sidebar {
  margin-bottom: 1.5rem;
}

/* ─── Game header ad ────────────────────────────────────────────────────────
   Splits the top of .game-info-section into two columns: breadcrumb, title
   and rating on the left, a display unit on the right. Only kicks in when
   the slot is configured (.has-ad), so the header is untouched otherwise. */
.game-info-top.has-ad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1.25rem;
  align-items: start;
  margin-bottom: 1.25rem;
}

.game-info-top-main {
  min-width: 0;
}

.ad-container.ad-game-header {
  margin: 0;
  min-height: 282px; /* reserve 300×250 + padding so nothing shifts */
}

/* Not enough room for a 300px column — stack the ad under the title. */
@media (max-width: 900px) {
  .game-info-top.has-ad {
    grid-template-columns: minmax(0, 1fr);
  }

  .ad-container.ad-game-header {
    justify-self: center;
    width: 100%;
    max-width: 336px;
  }
}

/* Category in-grid banner spans the whole games grid row. */
.games-grid .ad-cat-ingrid {
  grid-column: 1 / -1;
  margin: 0.5rem 0;
}

/* Category top banner + blog banners keep a little breathing room. */
.ad-cat-top,
.ad-blog-top,
.ad-blog-after {
  margin: 1.25rem 0;
}

/* When the side rails flank a category page, let the browse container fill
   the centre column instead of its own boxed max-width. */
.gh-rails-center .browse-container {
  max-width: 100%;
  margin: 0;
}

/* Blog article: a left ad rail as a 3rd grid column beside the article
   ([left ad | article | sidebar]), sticky like the sidebar. */
.blog-single-inner.has-left-rail {
  grid-template-columns: 160px 1fr 320px;
}

/* Give the article more room when the left rail is present. */
.blog-single:has(.has-left-rail) {
  max-width: 1400px;
}

.blog-single-inner.has-left-rail .gh-side-rail {
  align-self: start;
  position: sticky;
  top: 6rem;
}

@media (max-width: 1024px) {
  .blog-single-inner.has-left-rail {
    grid-template-columns: 1fr;
  }
  .blog-single-inner.has-left-rail .gh-side-rail {
    display: none;
  }
}

/* In-content ad (inside the game description). Stacks a small
   "Advertisement" label above the unit for transparency. */
.ad-in-content {
  flex-direction: column;
  margin: 1.75rem 0;
}

.ad-in-content::before {
  content: 'Advertisement';
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-60, rgba(255, 255, 255, 0.5));
}

@media (max-width: 768px) {
  .ad-container {
    margin: 1rem 0;
    padding: 0.75rem;
  }

  .ad-sidebar {
    position: relative;
    top: 0;
  }
}

/* ─── Mobile sticky anchor ad ───────────────────────────────────────────────
   Phones lose the side rails and the game sidebar, so this bottom-anchored
   slot carries the mobile inventory. Dismissible and height-capped; the body
   gets matching padding so it never sits on top of content. */
.gh-anchor-ad {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  max-height: 120px;
  padding: 0.35rem 0.4rem;
  background: var(--card-background, #1b1820);
  border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.35);
  text-align: center;
}

.gh-anchor-ad-inner {
  max-height: 110px;
  overflow: hidden;
}

.gh-anchor-ad-close {
  position: absolute;
  top: -22px;
  right: 8px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  color: var(--text-color, #fff);
  background: var(--card-background, #1b1820);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
  border-radius: 50% 50% 0 0;
  cursor: pointer;
}

@media (max-width: 1024px) {
  .gh-anchor-ad {
    display: block;
  }

  /* Keep the last of the page reachable above the anchor. */
  body.has-anchor-ad {
    padding-bottom: 120px;
  }
}

/* ─── Vertical side-rail ads (160×600 skyscrapers) ───────────────────────────
   Rendered INSIDE the page layout as in-flow flex columns (never fixed
   overlays), so they can't cover content — like ozogames.com:
     • Game page → .gh-rails-row = [left rail][.gh-rails-center][right rail]
                   (single.php). The game is a wide hero; the community card
                   and related games stack below it in the centre column.
     • Homepage  → flex children of .cg-layout (homepage-crazygames.php),
                   sticky so they stay in view while scrolling.
   They flank the content and are hidden when the viewport is too narrow. */
.gh-rails-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1.25rem;
  width: 100%;
}

/* The centre column (game + widgets below) fills all width between the rails,
   so the game player runs full width. */
.gh-rails-center {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Game-page rails are sticky too (fixed while scrolling), like the homepage.
   The column stretches full height so the sticky child can travel; it stays
   inside its column so it never covers the game. */
.gh-rails-row > .gh-side-rail {
  align-self: stretch;
}

.gh-rails-row > .gh-side-rail .gh-side-rail-sticky {
  position: sticky;
  top: 80px;
}

/* With rails on, the game layout is a single column (no right sidebar). */
.gh-rails-row .single-game-layout.gh-rails-single {
  grid-template-columns: 1fr;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* The community card + related games sit full-width below the game. */
.gh-rails-center .gh-discord-card,
.gh-rails-center .related-games-section {
  margin: 0;
}

.gh-rails-center .related-games-section .container {
  max-width: 100%;
  padding: 0;
}

.gh-side-rail {
  flex: 0 0 160px;
  width: 160px;
  align-self: flex-start;
  text-align: center;
}

/* Homepage rails sit beside .cg-main; give them room and make them sticky so
   they stay in view while scrolling (contained in their column — never over
   content). The column stretches full height so the sticky child can travel. */
.cg-layout > .gh-side-rail {
  align-self: stretch;
  margin: 1.25rem 0.75rem;
}

.cg-layout > .gh-side-rail .gh-side-rail-sticky {
  position: sticky;
  top: 80px;
}

.gh-side-rail-label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-60, rgba(255, 255, 255, 0.45));
}

.gh-side-rail-inner {
  width: 160px;
  min-height: 600px;
  margin: 0 auto;
}

/* Hide the rails when there isn't enough width to show them without squeezing
   the content too far; the layout then reflows to its normal full width.
   1400px keeps them visible at 100% zoom on common 1440/1536 laptops. */
@media (max-width: 1399px) {
  .gh-side-rail {
    display: none;
  }
}