/* ─────────────────────────────────────────────────────────────
   viru-custom.css
   Custom overrides & new components for the migrated static site.
   Add rules here instead of inline <style> blocks.
   ───────────────────────────────────────────────────────────── */


/* ── Clubs grid layout ────────────────────────────────────── */

.viru-clubs-outer { width: 100%; }

.viru-clubs-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  width: 100%;
}

.viru-club-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 8px;
}

.viru-club-logo {
  height: 110px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.viru-club-logo img {
  max-width: 100%;
  max-height: 110px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.viru-club-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 12px;
  flex-grow: 1;
  color: inherit;
}

.viru-club-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: auto;
}

/* ── Club buttons ─────────────────────────────────────────────
   Mirrors the Divi specificity pattern used by et_pb_button_2-17
   so we win the cascade without fighting !important everywhere.
   ─────────────────────────────────────────────────────────── */

body #page-container .et_pb_section .viru-clubs-grid .et_pb_button,
body #page-container .et_pb_section .viru-clubs-grid .et_pb_button:hover {
  padding: .3em 1em !important;
}

body #page-container .et_pb_section .viru-clubs-grid .et_pb_button {
  color: #dc231e !important;
  border: 2px solid #000000 !important;
  border-radius: 25px !important;
  letter-spacing: 0.16em !important;
  font-size: 14px !important;
  font-family: 'Inter', Helvetica, Arial, Lucida, sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  background-color: rgba(255, 255, 255, 0.79) !important;
  transition: background-color 200ms ease, color 200ms ease !important;
}

body #page-container .et_pb_section .viru-clubs-grid .et_pb_button:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}


/* ── Club grid responsive ─────────────────────────────────── */

@media (max-width: 980px) {
  .viru-clubs-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
  .viru-clubs-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ── viru-btn: standalone button (no Divi dependency) ─────────
   Use this instead of et_pb_button for all new/migrated buttons.
   ─────────────────────────────────────────────────────────── */

.viru-btn {
  display: inline-block;
  padding: .35em 1.1em;
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #dc231e;
  background-color: rgba(255, 255, 255, 0.85);
  border: 2px solid #000000;
  border-radius: 25px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
  white-space: nowrap;
}

.viru-btn:hover {
  background-color: #000000;
  color: #ffffff;
  border-color: #000000;
  text-decoration: none;
}