/* ============================================================
   GLOBALS TECH FESTIVAL 2027 · Custom CSS v4 for Zoho Backstage
   Full replacement for Settings > Custom CSS (supersedes v2/v3).
   Matches mockup v2: "One Ecosystem. Many Experiences."
   Colours + components only. Fonts are set natively in Themes.
   (Backstage strips @import; font overrides broke the icons,
   so we do NOT touch fonts here.)

   SECTION CLASSES: every section gets community-section-<type>-<n>.
   Unique widgets (speakers, sponsors, counters, venue, footer) are
   matched with [class*="..."]. Reused widgets (mediaWithTextList,
   text, customSection, mediaWithButton) have numbered template
   blocks at the bottom: replace -NN with your section's number
   (check the section class in devtools / builder DOM).
   ============================================================ */

/* ---------- 1 · TOKENS ---------- */

/* GSTF gallery — remove the white frame */
[class*="gallery"],
[class*="photo"],
[class*="collage"]{
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  background:transparent !important;
}

/* card becomes the frame */
.sp-st-2.li-item{
  position:relative !important;
  border:0 !important;
  border-radius:16px !important;
  overflow:hidden !important;
  padding:0 !important;
  background:#000 !important;
  box-shadow:0 8px 24px rgba(0,0,0,.35) !important;
  transition:box-shadow .28s ease !important;
}

/* photo fills the card top-to-bottom */
.sp-st-2 .list-image{ margin:0 !important; padding:0 !important; }
.sp-st-2 .profile-img{
  position:relative !important;
  width:100% !important;
  aspect-ratio:3/4 !important;   /* swap to 1/1 if faces get cropped */
  height:auto !important;
  padding:0 !important;
  border-radius:0 !important;
  overflow:hidden !important;
}
.sp-st-2 .profile-img > img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

/* name + role floated over a dark gradient at the bottom */
.sp-st-2 .li-content{
  position:absolute !important;
  left:0 !important; right:0 !important; bottom:0 !important;
  margin:0 !important;
  padding:60px 16px 16px !important;
  text-align:left !important;
  z-index:2 !important;
  background:linear-gradient(to top,
     rgba(0,0,0,.95) 15%, rgba(0,0,0,.55) 55%, transparent) !important;
}
.sp-st-2 .li-title,
.sp-st-2 .li-title *{
  color:#fff !important;
  font-weight:700 !important;
  margin:0 0 3px !important;
}
.sp-st-2 .li-subtitle .speaker-designation{
  color:#ffffff !important;               /* GSTF orange */
  text-transform:uppercase !important;
  letter-spacing:.05em !important;
  font-weight:600 !important;
}
.sp-st-2 .li-subtitle .speaker-company{
  color:#ffcb3f !important;               /* soft yellow */
}

/* orange frame on hover */
.sp-st-2.li-item::after{
  content:"" !important;
  position:absolute !important; inset:0 !important;
  border:2px solid transparent !important;
  border-radius:16px !important;
  transition:border-color .28s ease !important;
  z-index:3 !important; pointer-events:none !important;
}
.sp-st-2.li-item:hover::after{ border-color:#ffffff !important; }
.sp-st-2.li-item:hover{ box-shadow:0 18px 42px rgba(0,0,0,.6) !important; }