/* Host Detail Page Styles */
/* https://www.swing.com/events/css/hostdetail.css */

/* Ensure header is clickable */
.header-wrapper {
  position: fixed !important;
  z-index: 9999 !important;
}

.menu-btn {
  position: relative;
  z-index: 10000 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* =============================================
   MOBILE: Description 3-line clamp with expand
   ============================================= */

@media (max-width: 768px) {
  #event-descriptions-container {
    padding: 0 15px 15px 15px !important;
  }

  .event-description-card {
    padding: 12px !important;
    margin-bottom: 8px !important;
  }

  .event-description-card .event-description-preview {
    font-size: 13px !important;
    line-height: 1.5 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  .event-description-card.expanded .event-description-preview {
    -webkit-line-clamp: unset !important;
    display: block !important;
  }

  .description-view-more {
    display: block !important;
    color: #5E5EA1 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    margin-top: 8px !important;
    text-align: left !important;
  }

  .description-view-more:hover {
    text-decoration: underline !important;
  }
}

@media (min-width: 769px) {
  .description-view-more {
    display: none !important;
  }
}

/* =============================================
   MOBILE: Our Events section fixes
   ============================================= */

@media (max-width: 600px) {
  #our-events-section .section-header-bar .more-link.our-events-center-link {
    display: inline !important;
  }

  #our-events-section .view-all-full {
    display: none !important;
  }

  #our-events-section .view-all-short {
    display: inline !important;
  }
}

/* =============================================
   LOGO AND DESCRIPTION LAYOUT
   ============================================= */

.profile-content {
  display: block !important;
  width: 100% !important;
  padding: 5px 20px 20px 20px !important;
  overflow: hidden !important;
}

.profile-content::after {
  content: "" !important;
  display: table !important;
  clear: both !important;
}

#logo-wrapper {
  float: left !important;
  margin: 0 20px 15px 0 !important;
  max-width: 200px !important;
  min-width: 200px !important;
  width: 200px !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#logo-wrapper img,
#logo-wrapper .profile-logo-image,
#logo-wrapper video {
  width: 200px !important;
  max-width: 200px !important;
  min-width: 200px !important;
  height: auto !important;
  max-height: 200px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  display: block !important;
}

#event-descriptions-container {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#stacked-events-inline {
  float: right;
  margin: 0 0 15px 20px;
  position: relative;
}

@media (max-width: 500px) {
  .profile-content {
    padding: 5px 10px 15px 10px !important;
  }
  #stacked-events-inline {
    float: none;
    margin: 10px auto;
  }
  #logo-wrapper {
    float: none !important;
    display: block !important;
    text-align: center !important;
    margin: 0 auto 10px auto !important;
    max-width: 300px !important;
    width: 100% !important;
    min-width: unset !important;
  }
  #logo-wrapper img,
  #logo-wrapper .profile-logo-image,
  #logo-wrapper video {
    max-width: 300px !important;
    height: 300px !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 400px) {
  #logo-wrapper {
    max-width: 200px !important;
  }
  #logo-wrapper img,
  #logo-wrapper .profile-logo-image,
  #logo-wrapper video {
    max-width: 200px !important;
    height: 250px !important;
  }
}

.host-description-text {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #333 !important;
}

/* Quill editor alignment classes */
#event-descriptions-container .ql-align-center,
.host-description-text .ql-align-center,
.event-description-preview .ql-align-center {
  text-align: center !important;
}

#event-descriptions-container .ql-align-right,
.host-description-text .ql-align-right,
.event-description-preview .ql-align-right {
  text-align: right !important;
}

#event-descriptions-container .ql-align-justify,
.host-description-text .ql-align-justify,
.event-description-preview .ql-align-justify {
  text-align: justify !important;
}

#event-descriptions-container [style*="text-align: center"],
#event-descriptions-container [style*="text-align:center"] {
  text-align: center !important;
}

#event-descriptions-container [style*="text-align: right"],
#event-descriptions-container [style*="text-align:right"] {
  text-align: right !important;
}

#event-descriptions-container [style*="text-align: justify"],
#event-descriptions-container [style*="text-align:justify"] {
  text-align: justify !important;
}

/* =============================================
   OUR FANS
   ============================================= */

#our-fans-section .fan-card-wrapper .cc-card {
  box-shadow: 0 0 12px rgba(94,94,161,0.5), 0 0 4px rgba(94,94,161,0.3);
  border-radius: 0.5rem;
  overflow: hidden;
}

#our-fans-section .fan-card-wrapper .cc-aspect {
  border-radius: 0.5rem;
}

.add-me-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #f5d98a 0%, #d4a855 40%, #b8912e 100%);
  color: #0a0a0a;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 40px;
  border-radius: 8px;
  text-decoration: none;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.4);
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}

.add-me-btn:hover {
  background: linear-gradient(180deg, #ffe5a0 0%, #e4b865 40%, #c8a13e 100%);
  box-shadow: 0 3px 6px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.5);
}

/* All card sections */
.card-section {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  overflow: hidden;
}