/* ============================================================
   TIX CLUBS GRID — "Popular Ibiza Clubs" (4x2 framed cards)
   Deploy: wp-content/mu-plugins/tix-home-assets/tix-clubs.css
   Enqueued by tix-home.php only when [tix_clubs_grid] is present.
   Matches InterfaceCraft handoff: black section, pink eyebrow,
   white-framed cards, per-club gradient, name + "X events" bottom-left.
   Scoped under .tix-clubs so the theme can't touch it.
   ============================================================ */

/* grid-only wrapper (headings handled in the page). No section bg/padding
   here so the theme/page row controls the surrounding layout. */
.tix-clubs{ width:100%; }

/* --- 4x2 grid --- */
.tix-clubs .tix-clubs-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:26px;
  max-width:1130px;
  margin:0 auto;
}

/* --- card = white frame wrapping a gradient panel --- */
.tix-clubs .tix-club-card{
  display:block;
  text-decoration:none;
  border-radius:18px;
  transition:transform .22s ease, box-shadow .22s ease;
}
.tix-clubs .tix-club-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px -12px rgba(237,40,147,.45);
}
.tix-clubs .tix-club-frame{
  display:block;
  background:#fff;
  padding:7px;
  border-radius:18px;
  box-shadow:0 6px 20px -8px rgba(0,0,0,.6);
}
.tix-clubs .tix-club-panel{
  position:relative;
  display:block;
  border-radius:12px;
  overflow:hidden;
  aspect-ratio:1.1 / 1;                /* nearly square, slightly wide */
  background:linear-gradient(180deg, var(--c1,#ED2893) 0%, var(--c2,#8E1355) 100%);
}

/* --- per-club gradient tokens (top -> bottom) ---
   MATCHED to the hero ticket-fan accents (tix-fan.css --tix-accent/-2) so the
   clubs grid and the hero cards read as the same palette. Fan only defines 5
   clubs; amnesia/destino/o-beach picked in the same style. */
.tix-clubs .tix-club-card[data-slug="hi-ibiza"] .tix-club-panel{ --c1:#FF2D9B; --c2:#FF7DB5; }  /* fan: hot pink -> soft pink */
.tix-clubs .tix-club-card[data-slug="ushuaia"]  .tix-club-panel{ --c1:#12B39A; --c2:#22D3C4; }  /* fan: teal -> cyan */
.tix-clubs .tix-club-card[data-slug="unvrs"]    .tix-club-panel{ --c1:#6D28D9; --c2:#A855F7; }  /* fan: deep violet -> purple */
.tix-clubs .tix-club-card[data-slug="pacha"]    .tix-club-panel{ --c1:#F5333B; --c2:#FF7A3D; }  /* fan: red -> orange */
.tix-clubs .tix-club-card[data-slug="dc10"]     .tix-club-panel{ --c1:#FF7A00; --c2:#FFB020; }  /* fan: orange -> amber */
.tix-clubs .tix-club-card[data-slug="amnesia"]  .tix-club-panel{ --c1:#28B8D0; --c2:#1E7A4A; }  /* cyan -> emerald (fan-style) */
.tix-clubs .tix-club-card[data-slug="destino"]  .tix-club-panel{ --c1:#FF9E2C; --c2:#FF5A3D; }  /* sunset amber -> coral (fan-style) */
.tix-clubs .tix-club-card[data-slug="o-beach"]  .tix-club-panel{ --c1:#2DB4E8; --c2:#1E6FD0; }  /* sky -> deep blue (fan-style) */

/* --- logo overlay (centred, subtle) --- */
.tix-clubs .tix-club-logo{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-58%);
  max-width:56%;
  max-height:42%;
  width:auto; height:auto;
  object-fit:contain;
  filter:brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.25));  /* force white */
  opacity:.95;
  pointer-events:none;
}

/* --- name + count, bottom-left on the gradient --- */
.tix-clubs .tix-club-meta{
  position:absolute;
  left:14px; bottom:13px;
  display:flex;
  flex-direction:column;
  text-align:left;
}
.tix-clubs .tix-club-name{
  font-size:17px;
  font-weight:700;
  line-height:1.15;
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.28);
}
.tix-clubs .tix-club-count{
  margin-top:2px;
  font-size:12px;
  font-weight:500;
  line-height:1;
  color:rgba(255,255,255,.82);
  text-shadow:0 1px 2px rgba(0,0,0,.28);
}

/* --- responsive --- */
@media (max-width:980px){
  .tix-clubs .tix-clubs-grid{ grid-template-columns:repeat(3, 1fr); gap:20px; }
}
@media (max-width:680px){
  .tix-clubs{ padding:44px 16px 52px; }
  .tix-clubs .tix-clubs-grid{ grid-template-columns:repeat(2, 1fr); gap:14px; }
  .tix-clubs .tix-clubs-heading{ margin-bottom:34px; }
  .tix-clubs .tix-club-frame{ padding:6px; border-radius:15px; }
  .tix-clubs .tix-club-name{ font-size:15px; }
}