/*
  Custom Hero patch (official-aviator).

  Goals:
  - Big screenshot on desktop (right side), aligned with H1 (same top level), without shifting text/buttons.
  - On mobile/tablet: screenshot goes right under H1 (before text/buttons).
  - Avoid conflicts with theme rules by using a unique scope class (hero-with-shot).

  Upload via overrides:
  - wp-content/themes/game/assets/img/background_1.webp  (background)
  - wp-content/themes/game/assets/img/hero_screen.webp   (hero screenshot)
*/

/*
  The theme defaults are too tall and narrow for our custom hero:
  - .home-page-hero__content { width:65%; padding-top:220px; justify-content:center }

  For our custom hero we need:
  - full width
  - tighter spacing under fixed header
  - grid layout where the screenshot column starts at the same top level as H1
*/

/* Make the hero content full width and reduce the giant top padding */
.home-page-hero .home-page-hero__content.hero-with-shot{
  width:100% !important;
  padding-top:110px !important; /* was 220px */
  justify-content:flex-start !important;
}

/* Tighten typical hero spacing */
.home-page-hero .home-page-hero__content.hero-with-shot .title{ margin:0 !important; }
.home-page-hero .home-page-hero__content.hero-with-shot .welcome_section-buttons{ margin-top:22px !important; }
.home-page-hero .home-page-hero__content.hero-with-shot .welcome-logos-list{ margin-top:52px !important; }

/* ===== Desktop layout: H1 + screenshot share the same top line ===== */
.home-page-hero .home-page-hero__content.hero-with-shot .hero-grid{
  display:grid;
  grid-template-columns: minmax(520px, 640px) minmax(380px, 1fr);
  grid-template-areas:
    "h1 media"
    "text media";
  align-items:start;
  column-gap:56px;
  row-gap:18px;
}

.home-page-hero .home-page-hero__content.hero-with-shot .hero-grid > .title{ grid-area:h1; }
.home-page-hero .home-page-hero__content.hero-with-shot .hero-grid > .hero-text{ grid-area:text; min-width:0; max-width:560px; }
.home-page-hero .home-page-hero__content.hero-with-shot .hero-grid > .hero-media{
  grid-area:media;
  justify-self:end;
  align-self:start;
  width:100%;
  max-width:920px;
  position:relative;
  /* Keep a stable and compact first screen even if a user uploads an image with a different ratio */
  aspect-ratio: 16 / 10; /* matches the default 960x600 */
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 80px rgba(0,0,0,.45);
  background:rgba(255,255,255,.03);
}

/* .descr is the first child inside hero-text now, so keep it flush */
.home-page-hero .home-page-hero__content.hero-with-shot .hero-text .descr{
  margin-top:0 !important;
}

.home-page-hero .home-page-hero__content.hero-with-shot .hero-shot{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
}

@media (max-width: 1399px){
  .home-page-hero .home-page-hero__content.hero-with-shot{ padding-top:104px !important; }
  .home-page-hero .home-page-hero__content.hero-with-shot .hero-grid{
    grid-template-columns: minmax(500px, 610px) minmax(360px, 1fr);
    column-gap:44px;
  }
  .home-page-hero .home-page-hero__content.hero-with-shot .hero-grid > .hero-media,
  .home-page-hero .home-page-hero__content.hero-with-shot .hero-shot{ max-width:860px; }
}

@media (max-width: 1199px){
  .home-page-hero .home-page-hero__content.hero-with-shot{ padding-top:98px !important; }
  .home-page-hero .home-page-hero__content.hero-with-shot .hero-grid{
    grid-template-columns: minmax(460px, 560px) minmax(340px, 1fr);
    column-gap:32px;
  }
  .home-page-hero .home-page-hero__content.hero-with-shot .hero-grid > .hero-media,
  .home-page-hero .home-page-hero__content.hero-with-shot .hero-shot{ max-width:760px; }
}

/* ===== Mobile/tablet: screenshot goes under H1 (before text/buttons) ===== */
@media (max-width: 991px){
  .home-page-hero .home-page-hero__content.hero-with-shot{ padding-top:92px !important; }
  .home-page-hero .home-page-hero__content.hero-with-shot .hero-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "h1"
      "media"
      "text";
    row-gap:14px;
  }
  .home-page-hero .home-page-hero__content.hero-with-shot .hero-grid > .hero-media{
    justify-self:start;
    max-width:560px;
  }
  .home-page-hero .home-page-hero__content.hero-with-shot .hero-grid > .hero-text{
    max-width:none;
  }
}

@media (max-width: 575px){
  .home-page-hero__content.hero-with-shot .hero-grid > .hero-media{ border-radius:12px; }
}


/* ===== Footer extras (contacts / socials / disclaimer) ===== */
.footer .footer-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:flex-start;
  gap:18px;
}

/* Contacts block */
.footer .footer-item.contacts{
  max-width:360px;
  font-size:14px;
  line-height:1.45;
}
.footer .footer-item.contacts .contacts__item{ margin:0 0 6px; }
.footer .footer-item.contacts a{ color:inherit; opacity:.9; text-decoration:none; }

/* Social block */
.footer .footer-item.social .social-menu{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.footer .footer-item.social a{ color:inherit; opacity:.9; text-decoration:none; }

/* Disclaimer */
.footer .footer-text .own{
  margin-top:10px;
  font-size:12px;
  line-height:1.5;
  opacity:.75;
}
.footer .footer-text .own:empty{ display:none; }

@media (max-width: 780px){
  .footer .footer-nav{ justify-content:center; }
  .footer .footer-item.social{ width:100%; display:flex; justify-content:center; }
  .footer .footer-item.social .social-menu{ justify-content:center; }
  .footer .footer-item.contacts{ width:100%; text-align:center; }
}



/* ================= UI fixes (mobile menu + screenshots slider) ================= */
@media (max-width: 991px){
  header.header .mobile-menu-button{
    right:16px !important;
    top:18px !important;
    width:32px !important;
    height:32px !important;
    padding:6px !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
  }
}

/* Mobile screenshots: horizontal slider with nav buttons */
.screenshots-slider-wrap{position:relative;}
.screenshots-slider-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:36px;
  height:36px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(6px);
}
.screenshots-slider-btn[disabled]{opacity:.35;pointer-events:none;}
.screenshots-slider-prev{left:6px;}
.screenshots-slider-next{right:6px;}
.screenshots-slider-btn svg{width:18px;height:18px;}

@media (max-width: 767px){
  .screenshots-list.screenshots-slider{
    display:flex;
    gap:12px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    padding:0 52px 10px;
  }
  .screenshots-list.screenshots-slider::-webkit-scrollbar{display:none;}
  .screenshots-list.screenshots-slider .screenshots-list-item{
    flex:0 0 78vw;
    max-width:78vw;
    scroll-snap-align:start;
  }
  /* avoid non-adaptive overlays on mobile */
  .screenshots-list.screenshots-slider .screenshots-list-item-full,
  .screenshots-list.screenshots-slider .screenshots-list-item-full-blur,
  .screenshots-list.screenshots-slider .screenshots-list--icon{
    display:none !important;
  }
  .screenshots-list.screenshots-slider img{width:100%;height:auto;display:block;}
}

@media (min-width: 768px){
  .screenshots-slider-btn{display:none !important;}
}


/* === UI tweaks === */

/* Center logo on mobile header */
@media (max-width: 991px){
  header.header .header-wrap{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
  }
  header.header .header-wrap .logo{
    grid-column:2;
    justify-self:center;
  }
  header.header .header-wrap .logo .custom-logo-link{
    display:flex;
    justify-content:center;
    align-items:center;
  }
  header.header .header-wrap > a.download-app-white{
    grid-column:1;
    justify-self:start;
  }
  header.header .header-wrap .mobile-menu-button-block{
    grid-column:3;
    justify-self:end;
  }
}

/* Center footer logo on mobile */
@media (max-width: 991px){
  footer.footer .footer-row{ flex-wrap:wrap; }
  footer.footer .footer-logo{
    flex:0 0 100%;
    max-width:none;
    margin:20px auto 16px;
    display:flex;
    justify-content:center;
  }
  footer.footer .footer-logo .custom-logo-link{
    display:inline-flex;
    justify-content:center;
    align-items:center;
  }
}

/* ===== Buttons contrast + bold (export fix) ===== */
a.btn,
a.btn-accent,
a.btn-href,
a.play-game-btn,
a.download-app-white,
.bookmaker-rating--links a{
  font-weight:700 !important;
}

/* Prevent global a:hover color override from breaking button contrast */
a.btn:hover,
a.btn:focus,
a.btn:active,
a.btn-accent:hover,
a.btn-accent:focus,
a.btn-accent:active,
a.play-game-btn:hover,
a.play-game-btn:focus,
a.play-game-btn:active{
  color:#fdfdfd !important;
}

a.download-app-white:hover,
a.download-app-white:focus,
a.download-app-white:active{
  color:#e50539 !important;
}

a.btn:hover span,
a.btn-accent:hover span,
a.play-game-btn:hover span,
a.download-app-white:hover span{
  color:inherit !important;
}

/* ===== Lazy GIF (Block 03) ===== */
.lazy-gif{
  margin:16px auto 22px;
  max-width:620px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  position:relative;
}

.lazy-gif img{
  display:block;
  width:100%;
  height:auto;
}

.lazy-gif__poster{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
}

.lazy-gif__media{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
}

.lazy-gif__btn{
  width:100%;
  min-height:160px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:10px;
  padding:16px;
  cursor:pointer;
  border:0;
  background:transparent;
  color:#fdfdfd;
}

.lazy-gif.has-poster .lazy-gif__btn{
  position:absolute;
  inset:0;
  min-height:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.35));
}

.lazy-gif.has-poster .lazy-gif__label{
  text-shadow:0 6px 16px rgba(0,0,0,.45);
}

.lazy-gif__btn:focus{ outline:2px solid rgba(229,5,57,.55); outline-offset:-2px; }

.lazy-gif__play{
  width:54px;
  height:54px;
  border-radius:999px;
  background:rgba(229,5,57,.92);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  position:relative;
}

.lazy-gif__play:before{
  content:"";
  position:absolute;
  left:22px;
  top:17px;
  width:0;
  height:0;
  border-left:16px solid #fdfdfd;
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
}

.lazy-gif__label{
  font-weight:700;
  text-align:center;
}

@media (max-width: 767px){
  .lazy-gif__btn{ min-height:180px; }
}