Template:CardPages/styles.css

/* ================================
   BANNER WRAPPER
   ================================ */

.event-banner {
  position: relative;        /* Allows background layering */
  width: 100%;               /* Full page width */
  margin: 20px 0;
  border-radius: 20px;
  overflow: visible;         /* Prevents content from being cut off */
}

/* Background layer (visual only) */
.banner-bg-wrapper {
  position: absolute;
  margin: 0;                  /* top/right/bottom/left = 0 */
  border-radius: 20px;
  z-index: 1;
  /* background can go here */
}

/* Content layer */
.banner-overlay {
  position: relative;
  z-index: 2;                /* Above background */
  padding: 10px 16px;        /* Controlled padding */
}


/* ================================
   FLEX LAYOUT (CRITICAL PART)
   ================================ */

.element-container {
  display: flex;             /* Enables flexbox */
  flex-wrap: nowrap;/* FORCE one single row */
  width: 100%;
}

/* Each element box */
.element-item {
  flex: 0 0 calc(100% / 7);  /* EXACTLY 7 equal columns */
  align-items: center;
  min-width: 0;              /* ALLOWS shrinking (prevents scrollbar) */
  max-width: calc(100% / 7);
}


/* ================================
   CLICKABLE CONTENT
   ================================ */

.element-link {
  display: flex;             /* Stack image + text */
  flex-direction: column;
  align-items: center;       /* Center horizontally */
  color: inherit;            /* Keep custom colors */
  cursor: pointer;
}

/* MediaWiki image wrapper */
.element-link .image {
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: center;
}

/* Actual image */
.element-link img {           /* Fill available box width */
  max-width: 4px;           /* Cap image size */
  height: auto;              /* Preserve aspect ratio */
  display: block;
  margin: 0 auto 4px;      /* Center + small gap */
}

/* Text label */
.element-link span {
  font-weight: bold;
  font-size: 0.9rem;
  text-align: center;
}


/* ================================
   PER-ELEMENT COLORS
   ================================ */

.fire-text     { color: #e25822; }
.water-text    { color: #3b82f6; }
.earth-text    { color: #65a30d; }
.air-text      { color: #94a3b8; }
.voidal-text   { color: #6b21a8; }
.aetheric-text { color: #facc15; }
.neutral-text  { color: #64748b; }


/* ================================
   RESPONSIVE FALLBACK
   (ONLY when screen is too narrow)
   ================================ */

@media (max-width: 700px) {
  .element-container {
    flex-wrap: wrap;         /* Allow wrapping */
  }
  .element-item {
    flex: 0 0 33.333%;       /* 3 per row */
  }
}

@media (max-width: 450px) {
  .element-item {
    flex: 0 0 50%;           /* 2 per row */
  }
}