/* Social page - shop-style warm background, connect cards */
body.social-page {
  background: #c5b684 !important;
  background-color: #c5b684 !important;
  background-image: none !important;
  position: relative;
}
body.social-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/images/shop/backgroundoverlay.webp');
  background-repeat: repeat;
  background-size: 1600px;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}
body.social-page .main {
  padding: 1rem 0 0 0 !important;
  max-width: 100% !important;
  position: relative;
  z-index: 1;
}

.social-page {
  --card-radius: 18px;
  --section-max: 1200px;
}

.social-section {
  max-width: var(--section-max);
  margin: 0 auto;
  padding: 1.25rem 2rem 2.5rem 2rem;
}

.social-page .section-title {
  font-family: 'Moslin', 'IBM Plex Mono', monospace;
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: #1a1a2e;
  margin: 0 0 1.25rem 0;
  letter-spacing: 0.02em;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
}

/* ───── TOP 3 CARDS (app-card style: image left, text right) ───── */
.social-grid-large {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.social-card {
  --social-bg: #5865f2;
  --social-border: #2f3380;
  --social-tagline-color: #fff;
  --social-handle-color: #fff;
  --social-overlay-opacity: 0.08;
  --social-img-max-height: 400px;
  --social-image-order: 1;
  --social-text-order: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--card-radius);
  overflow: hidden;
  border: 5px solid var(--social-border);
  background: var(--social-bg);
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  height: 300px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}

.social-card:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.social-card::before {
  content: '';
  position: absolute;
  inset: -150%;
  width: 400%;
  height: 400%;
  background-image: url('/images/shop/cardoverlay.webp');
  background-repeat: repeat;
  background-size: 1400px;
  opacity: var(--social-overlay-opacity);
  pointer-events: none;
  z-index: 1;
  transform: var(--social-overlay-rotate);
}

.social-card-image {
  order: var(--social-image-order);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  position: relative;
  margin-left: var(--social-image-margin-left);
  margin-right: var(--social-image-margin-right);
}

.social-card-image img {
  width: 100%;
  max-height: var(--social-img-max-height);
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(1));
  transition: transform 0.3s ease;
  margin-bottom: 10px;
}

.social-card:hover .social-card-image img {
  transform: scale(1.05);
}

.social-card-text {
  order: var(--social-text-order);
  padding: 1rem 1rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  z-index: 2;
  position: relative;
  margin-right: var(--social-text-margin-right);
  margin-left: var(--social-text-margin-left);
}

.social-card-tagline {
  font-family: 'Moslin', 'IBM Plex Mono', monospace;
  font-size: var(--social-tagline-size);
  font-weight: 600;
  color: var(--social-tagline-color);
  line-height: 1.3;
  margin: 0;
  transition: transform 0.3s ease;
  text-align: var(--social-tagline-text-align);
  text-shadow: var(--social-tagline-shadow);
}

.social-card-link {
  font-family: 'Moslin', 'IBM Plex Mono', monospace;
  font-size: var(--social-link-size);
  font-weight: bold;
  color: var(--social-link-color);
  letter-spacing: 0.05em;
  transition: transform 0.3s ease;
  text-align: var(--social-link-text-align);
  text-shadow: var(--social-link-shadow);
  margin-top: -10px;
}

.social-card-handle {
  font-family: 'Moslin', 'IBM Plex Mono', monospace;
  font-size: var(--social-handle-size);
  font-weight: bold;
  color: var(--social-handle-color);
  letter-spacing: 0.05em;
  transition: transform 0.3s ease;
  text-align: var(--social-handle-text-align);
  text-shadow: var(--social-handle-shadow);
}

.social-slash {
  font-family: 'Comic Sans MS', 'Comic Sans', cursive;
  font-weight: bold;
  font-style: italic;
}

.social-card:hover .social-card-tagline,
.social-card:hover .social-card-link,
.social-card:hover .social-card-handle {
  transform: scale(1.03);
}

/* ───── CARD VARIATIONS ─────
   Each card can override:
   --social-bg, --social-border, --social-tagline-color, --social-handle-color
   --social-overlay-opacity, --social-img-max-height, --social-overlay-rotate (small cards)
   --social-image-order, --social-text-order  (default 1,2 = image left; use 2,1 to flip)
*/
.social-card-discord {
  --social-bg: linear-gradient(135deg, #5865f2 0%, #4752c4 50%, #414aa7 100%);
  --social-border: #19094f;
  --social-border-thickness: 6px;
  --social-tagline-color: #e0e3ff;
  --social-handle-color: #14153f;
  --social-link-color: #e0e3ff;
  --social-overlay-opacity: 0.08;
  --social-img-max-height: 240px;
  --social-tagline-shadow: 3px 3px 0 #19094f;
  --social-handle-shadow: 1.5px 1.5px 0 #e0e3ff;
  --social-link-shadow: 4px 4px 0 #19094f;
  --social-overlay-rotate: rotate(-45deg);
  --social-handle-size: 2rem;
  --social-link-size: 3rem;
  --social-tagline-size: 1.4rem;
  --social-image-margin-left: 30px;
  --social-text-margin-right: 30px;
  --social-link-text-align: right;
  --social-handle-text-align: right;
  --social-tagline-text-align: right;
}

.social-card-twitch {
  --social-bg: linear-gradient(135deg, #9146ff 0%, #772ce8 50%, #622ac2 100%);
  --social-border: #39176a;
  --social-tagline-color: #fff;
  --social-handle-color: #39176a;
  --social-overlay-opacity: 0.08;
  --social-img-max-height: 240px;
  --social-tagline-shadow: 3px 3px 0 #39176a;
  --social-handle-shadow: 1.5px 1.5px 0 #e0e3ff;
  --social-link-shadow: 4px 4px 0 #39176a;
  --social-overlay-rotate: rotate(45deg);
  --social-handle-size: 2.3rem;
  --social-link-size: 1.8rem;
  --social-tagline-size: 1.4rem;
  --social-image-order: 2;
  --social-text-order: 1;
  --social-image-margin-right: 30px;
  --social-text-margin-left: 30px;  
  --social-link-text-align: left;
  --social-handle-text-align: left;
  --social-tagline-text-align: left;
}

.social-card-youtube {
  --social-bg: linear-gradient(135deg, #db5151 0%, #b44242 50%, #892929 100%);
  --social-border: #2b0707;
  --social-tagline-color: #fff;
  --social-handle-color: #2b0707;
  --social-overlay-opacity: 0.08;
  --social-img-max-height: 240px;
  --social-tagline-shadow: 3px 3px 0 #2b0707;
  --social-handle-shadow: 1.5px 1.5px 0 #e0e3ff;
  --social-link-shadow: 4px 4px 0 #2b0707;
  --social-overlay-rotate: rotate(-45deg);
  --social-handle-size: 1.8rem;
  --social-link-size: 1.8rem;
  --social-tagline-size: 1.25rem;
  --social-image-margin-left: 50px;
  --social-text-margin-right: 50px;
  --social-link-text-align: right;
  --social-handle-text-align: right;
  --social-tagline-text-align: right;
}

/* ───── BOTTOM 2 CARDS (simplified bundle style) ───── */
.social-grid-small {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.social-card-small {
  --social-bg: #1a1a2e;
  --social-border: #050508;
  --social-overlay-opacity: 0.05;
  --social-img-max-height: 340px;
  --social-overlay-rotate: -45deg;
  position: relative;
  height: 300px;
  border-radius: var(--card-radius);
  overflow: hidden;
  cursor: pointer;
  border: 5px solid var(--social-border);
  background: var(--social-bg);
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.social-card-small:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.social-card-small::before {
  content: '';
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  background-image: url('/images/shop/cardoverlay.webp');
  background-repeat: repeat;
  background-size: 900px;
  opacity: var(--social-overlay-opacity);
  pointer-events: none;
  transform: rotate(var(--social-overlay-rotate, -45deg));
  z-index: 1;
}

.social-card-small img {
  position: relative;
  z-index: 2;
  width: 95%;
  max-height: var(--social-img-max-height);
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
  transition: transform 0.3s ease;
}

.social-card-small:hover img {
  transform: scale(1.08);
}

/* Instagram - deep dark */
.social-card-instagram {
  --social-bg: linear-gradient(135deg, #21214e 0%, #111134 50%, #06063f 100%);
  --social-border: #000000;
  --social-overlay-opacity: 0.05;
  --social-img-max-height: 205px;
  --social-overlay-rotate: 45deg;
}

/* TikTok - dark grey/black gradient */
.social-card-tiktok {
  --social-bg: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 50%, #0d0d0d 100%);
  --social-border: #000;
  --social-overlay-opacity: 0.05;
  --social-img-max-height: 200px;
  --social-overlay-rotate: -45deg;
}

/* Responsive - mobile: show only images (like Instagram/TikTok cards) */
@media (max-width: 768px) {
  .social-grid-large,
  .social-grid-small {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .social-grid-large {
    margin-bottom: 1.5rem;
  }

  /* Large cards: hide text, show only centered image like small cards */
  .social-card {
    grid-template-columns: 1fr;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 260px;
  }

  .social-card-text {
    display: none !important;
  }

  .social-card-image {
    width: 100%;
    padding: 1rem;
    margin: 0;
    order: unset;
  }

  .social-card-image img {
    width: 85%;
    max-height: 220px;
    margin: 0 auto;
    display: block;
  }

  .social-card-small {
    height: 260px;
  }

  .social-card-small img {
    max-height: 220px;
  }

  .social-section {
    padding: 0.75rem 0.75rem 1.5rem;
  }
}