/* ============================================================================
   Home page extras.

   Loaded only by pages/home.blade.php through @section('styles'), which the
   layout keeps inside its $rammiFrozen guard.

   Every class is prefixed `hv-` and no bare element selector appears here.
   The site tokens are used directly rather than aliased into a local set:
   this block has no fixed overlay, so there is no second DOM root that would
   need the tokens declared on it too.
   ============================================================================ */

/* Its own section now, sitting between Top games and the Casino Demo row
   rather than tacked onto the end of the activity block. The padding matches
   the pb-60 the sections around it use, so the rhythm down the page does not
   break at this one. */
.hv-section {
   padding-bottom: 60px;
}

.hv-verticals {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
}

.hv-tile {
   position: relative;
   display: block;
   overflow: hidden;
   border-radius: var(--cs-r-lg, 16px);
   border: 1px solid var(--cs-border, #222c3c);
   background: var(--cs-surface-1, #161e2b);
   text-decoration: none;
   /* The artwork is roughly square and carries its own title, so the tile is
      given the shape rather than the image being letterboxed into whatever
      the row happens to be. */
   aspect-ratio: 800 / 833;
   transition: transform .25s, border-color .25s, box-shadow .25s;
}

.hv-tile img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.hv-tile:hover {
   transform: translateY(-4px);
   border-color: var(--cs-green-line, rgba(25, 195, 125, .32));
   box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}

.hv-tile:focus-visible {
   outline: 2px solid var(--cs-green, #19c37d);
   outline-offset: 3px;
}

/* The artwork already says CASINO / LIVE CASINO / SPORTS, so this label is
   not repeated on top of it. It exists for screen readers and for the case
   where the image fails to load, where it becomes the only thing there. */
.hv-tile-label {
   position: absolute;
   left: 12px;
   right: 12px;
   bottom: 12px;
   text-align: center;
   font-size: 15px;
   font-weight: 800;
   letter-spacing: .04em;
   color: var(--cs-text, #f2f6fa);
   opacity: 0;
   pointer-events: none;
}

.hv-tile img:not([src]) + .hv-tile-label,
.hv-tile-label:focus {
   opacity: 1;
}

@media (max-width: 767px) {
   .hv-verticals {
      /* Still three across on a phone, matching the slots grid: the tiles
         are the site's three products and splitting them over two rows makes
         the third look like an afterthought. */
      gap: 8px;
   }
}

@media (prefers-reduced-motion: reduce) {
   .hv-tile {
      transition: none;
   }

   .hv-tile:hover {
      transform: none;
   }
}