/* =========================================================
   FINAL — SESSION CARD (robust for LIVE + CMS)
   Matches your real markup:
   <article class="itemcontent clickable card ...">
   ========================================================= */

/* --- Card container --- */
article.itemcontent.clickable.card {
  border: 1px solid #E0E0E0 !important;
  border-radius: 24px !important;
  background: #fff !important;
  overflow: hidden !important;
  position: relative !important;
  padding: 0 !important;
}

/* --- Use the wrapper as the GRID (more reliable than display:contents) --- */
article.itemcontent.clickable.card > .content-wrapper {
  display: grid !important;
  grid-template-columns: 33.333% 66.667% !important;
  grid-template-rows: auto auto !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
}

/* ---------- LEFT COLUMN: TITLE ---------- */
article.itemcontent.clickable.card a.title-container {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;

  border-right: 1px solid #E0E0E0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  text-align: right !important;

  padding: 24px 28px !important;
  box-sizing: border-box !important;

  text-decoration: none !important;
  color: inherit !important;
}

article.itemcontent.clickable.card a.title-container h4.title {
  margin: 0 !important;
}

/* ---------- RIGHT COLUMN TOP: INFO ---------- */
article.itemcontent.clickable.card .info {
  grid-column: 2 !important;
  grid-row: 1 !important;

  padding: 24px 28px 12px 28px !important;
  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
}

/* Put calendar (date/time) first, then room */
article.itemcontent.clickable.card .info .calendar { order: 1 !important; }
article.itemcontent.clickable.card .info .room     { order: 2 !important; }

/* Calendar row layout */
article.itemcontent.clickable.card .info .calendar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 0.9rem !important; /* spacing between date chunk and time chunk */
}

/* Make date + time chunks align nicely */
article.itemcontent.clickable.card .info .date,
article.itemcontent.clickable.card .info .time {
  display: inline-flex !important;
  align-items: baseline !important;
}

/* ✅ ROBUST TIME SEPARATOR FIX
   Instead of inserting before endDate, we insert AFTER startDate
   using non-breaking spaces so spacing never collapses:
   "10:00 AM to 10:20 AM"
*/
article.itemcontent.clickable.card .info .time .time-startDate::after {
  content: "\00A0to\00A0" !important;
  white-space: pre !important;
}

/* Ensure we don’t also inject something else from older rules */
article.itemcontent.clickable.card .info .time .time-endDate::before {
  content: "" !important;
}

/* ---------- RIGHT COLUMN BOTTOM: SPEAKERS ---------- */
article.itemcontent.clickable.card .sessionitemspeakers {
  grid-column: 2 !important;
  grid-row: 2 !important;

  padding: 0 28px 24px 28px !important;
  box-sizing: border-box !important;

  white-space: normal !important;
}

/* one speaker per line */
article.itemcontent.clickable.card .sessionitemspeakers .sessionspeakeritem {
  display: block !important;
}

/* bold first+last name (username wrapper) */
article.itemcontent.clickable.card .sessionitemspeakers .sessionspeakeritem .username {
  font-weight: 700 !important;
}

/* company normal + dash */
article.itemcontent.clickable.card .sessionitemspeakers .sessionspeakeritem .company {
  font-weight: 400 !important;
}

article.itemcontent.clickable.card .sessionitemspeakers .sessionspeakeritem .company::before {
  content: " - " !important;
  white-space: pre !important;
}

/* ---------- ICON CLEANUP (date/time/room icons) ---------- */
/* Your icons are <i class="icon inwink-..."> */
article.itemcontent.clickable.card .info i.icon {
  font-size: 0.85em !important;
  opacity: 0.85 !important;
  margin-right: 0.45em !important; /* space between icon and text */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  line-height: 1 !important;
}

/* ---------- THEME PILL (your markup places it inside .calendar) ----------
   We pin it bottom-right of the card regardless of where it lives.
*/
article.itemcontent.clickable.card .sessionitemeventthemes {
  position: absolute !important;
  right: 22px !important;
  bottom: 18px !important;
  margin: 0 !important;
}

article.itemcontent.clickable.card .sessionitemeventthemes .sessioneventthemeitem {
  background: #fff !important;
  border: 1px solid #C2A8B8 !important;
  border-radius: 999px !important;
  padding: 4px 8px !important;


  display: inline-flex !important;
  align-items: center !important;
}

article.itemcontent.clickable.card .sessionitemeventthemes .sessioneventthemeitem,
article.itemcontent.clickable.card .sessionitemeventthemes .sessioneventthemeitem * {
  color: #370C3B !important;
}

/* ---------- ADD TO MY AGENDA (bookmark icon button) ---------- */
article.itemcontent.clickable.card > .sessionitemactions {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
}

article.itemcontent.clickable.card .sessionitemactions .favaction {
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0.9 !important;
  transform: scale(0.92) !important;
}

/* Optional: subtle hover */
article.itemcontent.clickable.card .sessionitemactions .favaction:hover {
  opacity: 1 !important;
  transform: scale(0.98) !important;
}

/* OPTIONAL: if you want to HIDE the icon completely, uncomment:
article.itemcontent.clickable.card > .sessionitemactions { display: none !important; }
*/

/* ---------- MOBILE: stack ---------- */
@media (max-width: 599px) {
  article.itemcontent.clickable.card > .content-wrapper {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
  }

  article.itemcontent.clickable.card a.title-container {
    grid-column: 1 !important;
    grid-row: 1 !important;

    border-right: 0 !important;
    border-bottom: 1px solid #E0E0E0 !important;

    justify-content: flex-start !important;
    text-align: left !important;
  }

  article.itemcontent.clickable.card .info {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  article.itemcontent.clickable.card .sessionitemspeakers {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  article.itemcontent.clickable.card .sessionitemeventthemes {
    position: static !important;
    margin: 10px 28px 0 28px !important;
  }

  article.itemcontent.clickable.card > .sessionitemactions {
    position: static !important;
    margin: 10px 28px 0 28px !important;
  }
}

/* =========================================================
   MOBILE CLEANUP (paste at VERY END)
   - Keeps the bookmark icon top-right on mobile
   - Makes the info area stack neatly
   - Keeps theme pill aligned left (not floating)
   ========================================================= */

@media (max-width: 599px) {

  /* Tighten spacing a bit */
  article.itemcontent.clickable.card .title-container {
    padding: 18px 18px !important;
  }

  article.itemcontent.clickable.card .info {
    padding: 16px 18px 10px 18px !important;
    gap: 10px !important;
  }

  /* Make date+time easier to read on narrow screens:
     stack date and time as two clean rows */
  article.itemcontent.clickable.card .info .calendar {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  article.itemcontent.clickable.card .info .date,
  article.itemcontent.clickable.card .info .time,
  article.itemcontent.clickable.card .info .room {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important; /* ensures icon/text spacing */
  }

  /* Theme pill: keep it left and closer, not "floating" */
  article.itemcontent.clickable.card .sessionitemeventthemes {
    position: static !important;
    margin: 8px 0 0 0 !important;
    order: 3 !important;
  }

  article.itemcontent.clickable.card
  .sessionitemeventthemes .sessioneventthemeitem {
    padding: 6px 12px !important;
    border-radius: 999px !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }

  /* Speakers spacing */
  article.itemcontent.clickable.card .sessionitemspeakers,
  article.itemcontent.clickable.card details.details,
  article.itemcontent.clickable.card .sessionexhibitors {
    padding: 0 18px 18px 18px !important;
  }

  /* Keep the bookmark (add to agenda) icon top-right on mobile */
  article.itemcontent.clickable.card > .sessionitemactions {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    margin: 0 !important;
  }

  article.itemcontent.clickable.card .sessionitemactions .favaction {
    width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;
  }
}

/* Optional: if you prefer to HIDE the bookmark icon on mobile, use this instead:
@media (max-width: 599px) {
  article.itemcontent.clickable.card > .sessionitemactions { display:none !important; }
}
*/

/* =========================================================
   MOBILE: Move THEME to bottom of card (below speakers)
   ========================================================= */

@media (max-width: 599px) {

  /* Ensure the card behaves as a vertical stack */
  article.itemcontent.clickable.card {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Explicit ordering of sections */
  article.itemcontent.clickable.card .title-container {
    order: 1 !important;
  }

  article.itemcontent.clickable.card .info {
    order: 2 !important;
  }

  article.itemcontent.clickable.card .sessionitemspeakers,
  article.itemcontent.clickable.card details.details,
  article.itemcontent.clickable.card .sessionexhibitors {
    order: 3 !important;
  }

  /* THEME goes LAST */
  article.itemcontent.clickable.card .sessionitemeventthemes {
    position: static !important;
    order: 4 !important;

    margin: 12px 18px 18px 18px !important;
    align-self: flex-start !important;
  }

  article.itemcontent.clickable.card
  .sessionitemeventthemes .sessioneventthemeitem {
    padding: 6px 12px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  /* Keep bookmark icon top-right */
  article.itemcontent.clickable.card > .sessionitemactions {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    margin: 0 !important;
  }
}