/* TATUARTE · R55 B417 FIX16 · Premium Promo Hub
   Hybrid of the three approved concepts:
   - home: one big permanent Tatuarte acquisition card + 2 compact sector cards
     + a full-width permanent SINLIO banner;
   - internal pages: a calm 3-card strip (Sinlio + profile + one rotating slot);
   - no horizontal "shop carousel";
   - paid placements remain visibly identified at card level.
*/

.tat-promo-hub{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 16% 0%,rgba(73,224,213,.045),transparent 26%),
    radial-gradient(circle at 82% 100%,rgba(143,103,255,.05),transparent 30%),
    #07090c;
  border-top:1px solid rgba(255,255,255,.065);
  border-bottom:1px solid rgba(255,255,255,.065);
}
.tat-promo-hub__inner{
  width:min(1180px,calc(100% - clamp(32px,8vw,112px)));
  margin:0 auto;
  padding:18px 0 13px;
}

/* HOME */
.tat-promo-hub__home-grid{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(280px,.95fr);
  grid-template-rows:auto auto;
  gap:14px;
}
.tat-promo-hub__stack{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:14px;
  min-width:0;
}
.tat-promo-card--profile{
  grid-column:1;
  grid-row:1;
  aspect-ratio:12 / 5;
}
.tat-promo-card--sinlio{
  grid-column:1 / -1;
  grid-row:2;
  aspect-ratio:12 / 3.55;
}
.tat-promo-hub__stack{
  grid-column:2;
  grid-row:1;
}

/* INTERNAL */
.tat-promo-hub__compact-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.tat-promo-card--compact{
  aspect-ratio:12 / 5;
}

/* CARD */
.tat-promo-card{
  position:relative;
  display:block;
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  border-radius:15px;
  background:#0d1015;
  text-decoration:none;
  box-shadow:
    0 16px 40px rgba(0,0,0,.17),
    inset 0 1px 0 rgba(255,255,255,.035);
  transform:translateZ(0);
  transition:
    transform .26s cubic-bezier(.2,.75,.2,1),
    border-color .26s ease,
    box-shadow .26s ease;
}
.tat-promo-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.018);
}
.tat-promo-card:hover,
.tat-promo-card:focus-visible{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.18);
  box-shadow:
    0 24px 56px rgba(0,0,0,.26),
    0 0 44px rgba(103,92,255,.04);
  outline:none;
}
.tat-promo-card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .5s cubic-bezier(.2,.72,.2,1),filter .35s ease;
}
.tat-promo-card:hover img,
.tat-promo-card:focus-visible img{
  transform:scale(1.012);
  filter:saturate(1.035) contrast(1.015);
}
.tat-promo-card--profile{
  border-color:rgba(255,255,255,.105);
}
.tat-promo-card--sinlio{
  border-color:rgba(163,91,255,.16);
  box-shadow:
    0 16px 44px rgba(0,0,0,.18),
    0 0 46px rgba(151,72,255,.025);
}
.tat-promo-card--sector{
  min-height:0;
}
.tat-promo-card__badge{
  position:absolute;
  top:9px;
  left:9px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  min-height:23px;
  padding:0 8px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(5,7,10,.72);
  color:#fff;
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
}
.tat-promo-card__fallback{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:5px;
  padding:18px;
  background:
    radial-gradient(circle at 85% 15%,rgba(146,94,255,.16),transparent 29%),
    linear-gradient(135deg,#0c1016,#151925);
  color:#fff;
}
.tat-promo-card__fallback strong{
  font-size:clamp(1.05rem,1.55vw,1.55rem);
  line-height:1.02;
  letter-spacing:-.035em;
}
.tat-promo-card__fallback span{
  max-width:34ch;
  color:#b4bbc6;
  font-size:.76rem;
  line-height:1.32;
}
.tat-promo-hub__advertise{
  display:block;
  width:max-content;
  margin:9px 1px 0 auto;
  color:#69727e;
  font-size:9.5px;
  font-weight:760;
  letter-spacing:.02em;
  text-decoration:none;
  transition:color .2s ease;
}
.tat-promo-hub__advertise:hover,
.tat-promo-hub__advertise:focus-visible{
  color:#f5f6f8;
  outline:none;
}

/* Old promo shells must not coexist if stale markup is cached. */
.tat-promo-deck,
.tat-global-sponsors--premium{
  display:none!important;
}

@media(max-width:1000px){
  .tat-promo-hub__home-grid{
    grid-template-columns:minmax(0,1.4fr) minmax(250px,1fr);
  }
  .tat-promo-hub__compact-grid{
    grid-template-columns:1fr 1fr;
  }
  .tat-promo-hub__compact-grid>.tat-promo-card:last-child{
    grid-column:1 / -1;
    aspect-ratio:12 / 4.2;
  }
}
@media(max-width:760px){
  .tat-promo-hub__inner{
    width:calc(100% - 28px);
    padding:14px 0 11px;
  }
  .tat-promo-hub__home-grid{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    gap:10px;
  }
  .tat-promo-card--profile,
  .tat-promo-hub__stack,
  .tat-promo-card--sinlio{
    grid-column:1;
    grid-row:auto;
  }
  .tat-promo-hub__stack{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
    gap:10px;
  }
  .tat-promo-card--profile{
    aspect-ratio:2 / 1;
  }
  .tat-promo-card--sinlio{
    aspect-ratio:2 / 1;
  }
  .tat-promo-card--sector{
    aspect-ratio:1.65 / 1;
  }
  .tat-promo-hub__compact-grid{
    grid-template-columns:1fr;
    gap:10px;
  }
  .tat-promo-hub__compact-grid>.tat-promo-card:last-child{
    grid-column:auto;
  }
  .tat-promo-card--compact{
    aspect-ratio:2 / 1!important;
  }
}
@media(max-width:520px){
  .tat-promo-hub__stack{
    grid-template-columns:1fr;
  }
  .tat-promo-card--sector{
    aspect-ratio:2 / 1;
  }
}
@media(prefers-reduced-motion:reduce){
  .tat-promo-card,
  .tat-promo-card img{
    transition:none!important;
    transform:none!important;
  }
}