/* Host Detail Page Supplemental Styles */
/* https://events.swing.com/css/hostdetail.css */
/* Note: This supplements moderndemo.css with page-specific overrides */

/* 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;
}

/* =============================================
   GLOBAL: Event cards NEVER wider than 200px
   ============================================= */
.event-card-wrapper,
.event-card-horizontal,
.partner-event-card {
  max-width: 200px !important;
}

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

/* Description container - collapsed by default on mobile */
@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;
  }

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

  /* View More link for description */
  .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;
  }
}

/* Hide description View More on desktop */
@media (min-width: 769px) {
  .description-view-more {
    display: none !important;
  }
}

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

/* Force show "View All X Events" link on mobile */
@media (max-width: 600px) {
  #our-events-section .section-header-bar .more-link.our-events-center-link {
    display: inline !important;
  }

  /* Shorter text on mobile */
  #our-events-section .view-all-full {
    display: none !important;
  }

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

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

/* Single container for logo and description */
.profile-content {
  display: block !important;
  width: 100% !important;
  padding: 20px !important;
}

/* Logo floats left with text wrapping around it */
#logo-wrapper {
  float: left !important;
  margin: 0 15px 10px 0 !important;
  max-width: 250px !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 {
  max-width: 250px !important;
  height: auto !important;
  border: none !important;
  box-shadow: none !important;
  display: block !important;
  border-radius: 8px !important;
}

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

/* Description wraps around logo */
#event-descriptions-container {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Only stack on very narrow screens */
@media (max-width: 400px) {
  #logo-wrapper {
    float: none !important;
    margin: 0 auto 10px auto !important;
    display: block !important;
    text-align: center !important;
  }

  #logo-wrapper img,
  #logo-wrapper .profile-logo-image,
  #logo-wrapper video {
    max-width: 200px !important;
    margin: 0 auto !important;
  }
}

/* Non-transparent images - no special treatment */
#logo-wrapper .profile-logo-image.not-transparent {
  padding: 0;
  background: none;
}

.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 - preserve WYSIWYG formatting */
#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;
}

/* Also support inline style text-align (fallback) */
#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 Events - 200px card width like podcast episodes */
#our-events-section .events-horizontal .event-card-wrapper {
  padding: 0 !important;
  width: 200px !important;
  max-width: 200px !important;
  min-width: 200px !important;
  flex: 0 0 200px !important;
}

#our-events-section .events-horizontal .event-card-wrapper .event-card-horizontal {
  width: 200px !important;
  max-width: 200px !important;
  min-width: 200px !important;
  flex: 0 0 200px !important;
  border-radius: 12px !important;
  overflow: visible !important;
  /* Fixed height: 200px image + 164px info = 364px */
  height: 364px !important;
  min-height: 364px !important;
}

/* Our Events - square images like podcast episodes */
#our-events-section .events-horizontal .event-card-wrapper .event-card-horizontal .event-image-wrapper {
  height: 200px !important;
  min-height: 200px !important;
  max-height: 200px !important;
  width: 200px !important;
  max-width: 200px !important;
  overflow: hidden !important;
}

#our-events-section .events-horizontal .event-card-wrapper .event-card-horizontal .event-image-wrapper > img:not(.one-day-sash),
#our-events-section .events-horizontal .event-card-wrapper .event-card-horizontal .event-image-wrapper .generated-logo,
#our-events-section .events-horizontal .event-card-wrapper .event-card-horizontal .event-image-wrapper .profile-logo-image {
  width: 200px !important;
  height: auto !important;
  max-width: 200px !important;
  max-height: 200px !important;
  object-fit: contain !important;
}

/* Video thumbnails */
#our-events-section .events-horizontal .event-card-wrapper .event-card-horizontal .event-image-wrapper video.event-thumb-video {
  width: 200px !important;
  height: auto !important;
  max-width: 200px !important;
  max-height: 200px !important;
  object-fit: contain !important;
}

/* Our Events container - show first row only by default */
#our-events-section .events-horizontal#events-container {
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  gap: 15px !important;
  padding: 20px !important;
}

/* Our Events - allow wrapping when expanded */
#our-events-section .events-horizontal#events-container.expanded {
  flex-wrap: wrap !important;
  overflow: visible !important;
}

/* Mobile: 2 cards per row on tablets, 1 on phones */
@media (max-width: 768px) {
  #our-events-section .events-horizontal#events-container {
    justify-content: center !important;
    flex-wrap: wrap !important;
    overflow: hidden !important;
    padding: 15px 10px !important;
    gap: 10px !important;
    /* Show only first 2 rows (4 cards) by default */
    max-height: none !important;
    box-sizing: border-box !important;
  }

  /* Collapsed state - show first row of 2 cards */
  #our-events-section .events-horizontal#events-container:not(.expanded) {
    max-height: 420px !important;
    overflow: hidden !important;
  }

  #our-events-section .events-horizontal .event-card-wrapper {
    /* 50% minus half the gap (5px) to fit exactly 2 cards - NEVER wider than 200px */
    width: calc(50% - 5px) !important;
    max-width: 200px !important;
    min-width: 140px !important;
    flex: 0 0 calc(50% - 5px) !important;
    box-sizing: border-box !important;
  }

  #our-events-section .events-horizontal .event-card-wrapper .event-card-horizontal {
    width: 100% !important;
    max-width: 200px !important;
    min-width: 100% !important;
    flex: 1 1 100% !important;
    /* Auto height on mobile */
    height: auto !important;
    min-height: auto !important;
  }

  #our-events-section .events-horizontal .event-card-wrapper .event-card-horizontal .event-image-wrapper {
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: 200px !important;
    aspect-ratio: 1 / 1 !important;
  }

  #our-events-section .events-horizontal .event-card-wrapper .event-card-horizontal .event-image-wrapper > img:not(.one-day-sash),
  #our-events-section .events-horizontal .event-card-wrapper .event-card-horizontal .event-image-wrapper .generated-logo,
  #our-events-section .events-horizontal .event-card-wrapper .event-card-horizontal .event-image-wrapper .profile-logo-image {
    width: 100% !important;
    height: auto !important;
    max-width: 200px !important;
    max-height: 200px !important;
  }

  /* Mobile video thumbnails */
  #our-events-section .events-horizontal .event-card-wrapper .event-card-horizontal .event-image-wrapper video.event-thumb-video {
    width: 100% !important;
    height: auto !important;
    max-width: 200px !important;
    max-height: 200px !important;
    object-fit: contain !important;
  }

  /* Mobile card info section - auto height */
  #our-events-section .event-info {
    min-height: auto !important;
    padding: 6px 6px 2px 6px !important;
  }

  #our-events-section .event-name {
    font-size: 11px !important;
  }

  #our-events-section .event-date-time {
    font-size: 8px !important;
  }

  #our-events-section .event-venue,
  #our-events-section .event-location {
    font-size: 9px !important;
  }

  /* Mobile description - 2 lines only */
  #our-events-section .event-description-text {
    font-size: 9px !important;
    height: auto !important;
    min-height: auto !important;
    max-height: 28px !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  #our-events-section .event-description-text .description-content {
    -webkit-line-clamp: 2 !important;
  }

  #our-events-section .description-placeholder {
    height: auto !important;
    min-height: 28px !important;
    max-height: 28px !important;
  }

  /* Buttons wrap on mobile */
  #our-events-section .event-buttons-outside {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px !important;
  }

  #our-events-section .event-buttons-outside .event-link-small {
    font-size: 9px !important;
    padding: 4px 6px !important;
  }
}

/* Small phones: still 2 cards per row, smaller sizing - NEVER wider than 200px */
@media (max-width: 400px) {
  #our-events-section .events-horizontal .event-card-wrapper {
    width: calc(50% - 4px) !important;
    max-width: 200px !important;
    min-width: 120px !important;
    flex: 0 0 calc(50% - 4px) !important;
  }

  #our-events-section .events-horizontal#events-container {
    gap: 8px !important;
    padding: 10px 5px !important;
  }

  #our-events-section .event-name {
    font-size: 10px !important;
  }

  #our-events-section .event-date-time {
    font-size: 7px !important;
  }

  #our-events-section .event-venue,
  #our-events-section .event-location {
    font-size: 8px !important;
  }

  #our-events-section .event-description-text {
    font-size: 8px !important;
    max-height: 24px !important;
  }

  /* Buttons wrap on small phones */
  #our-events-section .event-buttons-outside {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  #our-events-section .event-buttons-outside .event-link-small {
    font-size: 9px !important;
    padding: 3px 4px !important;
    flex: 0 0 auto !important;
  }
}

#our-events-section .event-card-horizontal {
  box-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 0 8px rgba(0,0,0,0.25);
}

/* Our Events - text sized for 200px cards */
#our-events-section .event-info {
  background: #E6E6F8 !important;
  padding: 8px 8px 2px 8px !important;
  padding-bottom: 2px !important;
  /* Fixed height to ensure all cards are same height */
  min-height: 164px !important;
  display: flex !important;
  flex-direction: column !important;
}

#our-events-section .event-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  min-height: auto !important;
  margin-bottom: 0 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#our-events-section .event-date-time {
  font-size: 9px !important;
  margin-bottom: 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#our-events-section .event-type-badge {
  font-size: 8px !important;
  padding: 2px 4px !important;
  margin-bottom: 4px !important;
  white-space: nowrap !important;
}

#our-events-section .event-contact-section {
  min-height: auto !important;
}

#our-events-section .event-venue,
#our-events-section .event-location {
  font-size: 10px !important;
  margin-bottom: 1px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#our-events-section .event-contact {
  display: none !important;
}

#our-events-section .event-description-text {
  font-size: 10px !important;
  color: #555 !important;
  line-height: 1.4 !important;
  /* Fixed height for 3 lines: 10px * 1.4 * 3 = 42px + 4px padding = 46px */
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  padding-top: 4px !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
}

#our-events-section .event-description-text .description-content {
  -webkit-line-clamp: 3 !important;
}

#our-events-section .description-placeholder {
  /* Same height as description-text for consistency */
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
}

/* Buttons below card - sized for 200px */
#our-events-section .event-buttons-outside {
  padding: 2px 0 !important;
  gap: 2px !important;
}

#our-events-section .event-buttons-outside .event-link-small {
  font-size: 10px !important;
  padding: 4px 6px !important;
}

/* Our Fans - responsive grid that fills container width */
#our-fans-section .friends-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 15px;
  overflow: hidden;
  padding: 20px;
}

#our-fans-section .friend-card {
  flex: 1 1 200px;
  min-width: 120px;
  max-width: 200px;
}

#our-fans-section .friend-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 0 8px rgba(0,0,0,0.25);
}

#our-fans-section .friend-card.hidden-overflow {
  display: none;
}

/* Mobile: Smaller fan images */
@media (max-width: 768px) {
  #our-fans-section .friends-grid {
    gap: 10px;
    padding: 15px;
  }

  #our-fans-section .friend-card {
    flex: 0 0 calc(50% - 10px);
    min-width: unset;
    max-width: calc(50% - 10px);
  }

  #our-fans-section .friend-card img {
    max-height: 150px;
    width: 100%;
  }
}

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

/* Reviews - floating appearance like logo container */
.review-card {
  background: #E6E6F8;
  border-radius: 12px;
  border: 2px solid #ccc;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  padding: 16px;
}

/* =============================================
   Other Events (Partner Events) Section
   ============================================= */

/* Other Events - match Our Events styling exactly */
#partner-events-section.card-section {
  overflow: visible !important;
}

#partner-events-section #partner-events-container.events-horizontal {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 15px !important;
  padding: 20px !important;
  margin-left: -16px !important;
  margin-right: -16px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start !important;
}

#partner-events-section #partner-events-container.events-horizontal::after {
  content: '';
  flex: 0 0 16px;
  min-width: 16px;
}

#partner-events-section .event-card-wrapper.partner-event-card {
  padding: 0 !important;
  width: 200px !important;
  max-width: 200px !important;
  min-width: 200px !important;
  flex: 0 0 200px !important;
}

#partner-events-section .event-card-wrapper.partner-event-card .event-card-horizontal {
  width: 200px !important;
  max-width: 200px !important;
  min-width: 200px !important;
  flex: 0 0 200px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 0 8px rgba(0,0,0,0.25);
  height: 364px !important;
  min-height: 364px !important;
}

#partner-events-section .event-card-wrapper.partner-event-card .event-image-wrapper {
  height: 200px !important;
  min-height: 200px !important;
  max-height: 200px !important;
  width: 200px !important;
  max-width: 200px !important;
  overflow: hidden !important;
}

#partner-events-section .event-card-wrapper.partner-event-card .event-image-wrapper img {
  width: 200px !important;
  height: 200px !important;
  max-width: 200px !important;
  max-height: 200px !important;
  object-fit: cover !important;
}

#partner-events-section .event-card-wrapper.partner-event-card .event-image-wrapper video.event-thumb-video {
  width: 200px !important;
  height: auto !important;
  max-width: 200px !important;
  max-height: 200px !important;
  object-fit: contain !important;
}

#partner-events-section .event-card-wrapper.partner-event-card .event-info {
  background: #E6E6F8 !important;
  padding: 8px 8px 2px 8px !important;
  min-height: 164px !important;
}

#partner-events-section .event-card-wrapper.partner-event-card .event-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #333 !important;
  line-height: 1.3 !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#partner-events-section .event-card-wrapper.partner-event-card .event-date-time {
  font-size: 9px !important;
  margin-bottom: 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: #333 !important;
}

#partner-events-section .event-card-wrapper.partner-event-card .event-type-badge {
  font-size: 8px !important;
  padding: 2px 4px !important;
  margin-bottom: 4px !important;
  white-space: nowrap !important;
  background: #5E5EA1 !important;
  color: white !important;
  border-radius: 4px !important;
  display: inline-block !important;
}

#partner-events-section .event-card-wrapper.partner-event-card .event-venue,
#partner-events-section .event-card-wrapper.partner-event-card .event-location {
  font-size: 10px !important;
  margin-bottom: 1px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: #333 !important;
}

#partner-events-section .event-card-wrapper.partner-event-card .event-url a {
  font-size: 9px !important;
  color: #5E5EA1 !important;
}

#partner-events-section .event-card-wrapper.partner-event-card .event-description-text {
  font-size: 10px !important;
  color: #555 !important;
  line-height: 1.4 !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  overflow: hidden !important;
}

#partner-events-section .event-card-wrapper.partner-event-card .event-description-text .description-content {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#partner-events-section .event-card-wrapper.partner-event-card .description-placeholder {
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
}

/* Mobile: Other Events 2 cards per row - NEVER wider than 200px */
@media (max-width: 768px) {
  #partner-events-section #partner-events-container.events-horizontal {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    gap: 10px !important;
    padding: 15px 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  #partner-events-section .event-card-wrapper.partner-event-card {
    /* 50% minus half the gap (5px) to fit exactly 2 cards - NEVER wider than 200px */
    width: calc(50% - 5px) !important;
    max-width: 200px !important;
    min-width: 140px !important;
    flex: 0 0 calc(50% - 5px) !important;
    box-sizing: border-box !important;
  }

  #partner-events-section .event-card-wrapper.partner-event-card .event-card-horizontal {
    width: 100% !important;
    max-width: 200px !important;
    min-width: 100% !important;
    flex: 1 1 100% !important;
    height: auto !important;
    min-height: auto !important;
  }

  #partner-events-section .event-card-wrapper.partner-event-card .event-image-wrapper {
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: 200px !important;
    aspect-ratio: 1 / 1 !important;
  }

  #partner-events-section .event-card-wrapper.partner-event-card .event-image-wrapper img {
    width: 100% !important;
    height: 100% !important;
    max-width: 200px !important;
    max-height: 200px !important;
  }

  #partner-events-section .event-card-wrapper.partner-event-card .event-info {
    min-height: auto !important;
    padding: 6px 6px 2px 6px !important;
  }

  #partner-events-section .event-card-wrapper.partner-event-card .event-name {
    font-size: 11px !important;
  }

  #partner-events-section .event-card-wrapper.partner-event-card .event-date-time {
    font-size: 8px !important;
  }

  #partner-events-section .event-card-wrapper.partner-event-card .event-venue,
  #partner-events-section .event-card-wrapper.partner-event-card .event-location {
    font-size: 9px !important;
  }

  #partner-events-section .event-card-wrapper.partner-event-card .event-description-text {
    font-size: 9px !important;
    height: auto !important;
    min-height: auto !important;
    max-height: 28px !important;
  }
}

/* Small phones: Other Events still 2 per row, smaller - NEVER wider than 200px */
@media (max-width: 400px) {
  #partner-events-section #partner-events-container.events-horizontal {
    gap: 8px !important;
    padding: 10px 5px !important;
  }

  #partner-events-section .event-card-wrapper.partner-event-card {
    width: calc(50% - 4px) !important;
    max-width: 200px !important;
    min-width: 120px !important;
    flex: 0 0 calc(50% - 4px) !important;
  }

  #partner-events-section .event-card-wrapper.partner-event-card .event-name {
    font-size: 10px !important;
  }

  #partner-events-section .event-card-wrapper.partner-event-card .event-date-time {
    font-size: 7px !important;
  }

  #partner-events-section .event-card-wrapper.partner-event-card .event-venue,
  #partner-events-section .event-card-wrapper.partner-event-card .event-location {
    font-size: 8px !important;
  }

  #partner-events-section .event-card-wrapper.partner-event-card .event-description-text {
    font-size: 8px !important;
    max-height: 24px !important;
  }
}