
/* A24 Hover Tiles Pro */
.a24htp-grid{
  display:grid;
  grid-template-columns: repeat(var(--a24htp-cols, 2), minmax(0,1fr));
  gap: var(--a24htp-gap, 24px);
}

.a24htp-tile{
  position: relative;
  display:block;
  width: min(100%, var(--a24htp-w, 99999px));
  margin-left:auto;
  margin-right:auto;
  height: var(--a24htp-h, 420px);
  border-radius: var(--a24htp-r, 0px);
  overflow:hidden;
  text-decoration:none;
  transform: translateZ(0);
}

.a24htp-bg{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform 420ms ease;
  will-change: transform;
}

.a24htp-overlay{
  position:absolute; inset:0;
  background: var(--a24htp-ov, #1e2a5a);
  opacity: var(--a24htp-op, 0.35);
  transition: opacity 420ms ease;
  pointer-events:none;
}

.a24htp-content{
  position:absolute; inset:0;
  display:flex;
  flex-direction: column;
  justify-content:center;
  padding: 28px;
  gap: 10px;
  color:#fff;
  z-index:2;
  text-align:center;
}

.a24htp-align-left{ align-items:flex-start; text-align:left; }
.a24htp-align-center{ align-items:center; text-align:center; }
.a24htp-align-right{ align-items:flex-end; text-align:right; }

.a24htp-title{
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.05;
  font-size: var(--a24htp-ts, 34px);
}

.a24htp-subtitle{
  font-weight: 500;
  opacity: .92;
  max-width: 52ch;
  font-size: var(--a24htp-ss, 16px);
  line-height: 1.35;
}

.a24htp-button{
  margin-top: 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 22px;
  background: var(--a24htp-bbg, #1e2a5a);
  color: var(--a24htp-btc, #ffffff);
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: transform 200ms ease, filter 200ms ease;
}

.a24htp-tile:hover .a24htp-bg{ transform: scale(var(--a24htp-zoom, 1.06)); }
.a24htp-tile:hover .a24htp-overlay{ opacity: var(--a24htp-hop, 0.55); }
.a24htp-tile:hover .a24htp-button{ transform: translateY(-1px); filter: brightness(1.05); }

@media (max-width: 989px){
  .a24htp-grid{ grid-template-columns: 1fr; }
}
