/* ==========================================================================
   Stats strip — "2 days / 50+ speakers / 30+ sessions / 1,000+ entrepreneurs"
      Scoped to this one section only, via Backstage's own stable ids:

           section  data-section-id  = 17908000008621683
                element  data-element-id  = 17908000008621688
                     cards    data-number-item-id = ...689 / ...694 / ...699 / ...704

                        (The id="ember58" style ids on the page are generated fresh on every
                           render, so they must NOT be used in CSS — the data-* ids are permanent.)

                              Paste into: Backstage > Website > Settings > Custom CSS
                                 ========================================================================== */

/* ---- row of cards ------------------------------------------------------ */
[data-section-id="17908000008621683"] [data-element-id="17908000008621688"] .bs-counter-wgt {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: -70px;
  /* cards overlap the banner above */
  position: relative;
  z-index: 3;
}

/* ---- the card ---------------------------------------------------------- */
[data-section-id="17908000008621683"] .bs-counter-wgt .li-item[data-number-item-id] {
  display: block !important;
  flex: 1 1 210px;
  max-width: 300px;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 24px !important;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid #e9edf4;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(16, 32, 64, .06);
  text-align: left !important;
}

/* ---- icon tile --------------------------------------------------------- */
[data-section-id="17908000008621683"] .bs-counter-wgt .li-item .list-image {
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 26px !important;
  text-align: left !important;
  float: none !important;
}

[data-section-id="17908000008621683"] .bs-counter-wgt .li-item .list-image .bs-image:not(.tile_photo) {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #eef3fc !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

[data-section-id="17908000008621683"] .bs-counter-wgt .li-item .list-image .tile_photo {
  width: 22px !important;
  height: 22px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

[data-section-id="17908000008621683"] .bs-counter-wgt .li-item .list-image .tile_photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

/* ---- number + label on one line ---------------------------------------- */
[data-section-id="17908000008621683"] .bs-counter-wgt .li-content {
  display: block !important;
  height: auto !important;
  text-align: left !important;
}

[data-section-id="17908000008621683"] .bs-counter-wgt .li-content .text-medium,
[data-section-id="17908000008621683"] .bs-counter-wgt .li-content .li-description {
  display: contents;
  /* lets the number and the label share a line */
}

[data-section-id="17908000008621683"] .bs-counter-wgt .li-title {
  display: inline !important;
  font-size: 0 !important;
  /* removes the gaps between the counter spans */
  line-height: 1.3 !important;
  font-weight: 700;
  color: #12274e;
}

[data-section-id="17908000008621683"] .bs-counter-wgt .li-title::after {
  content: " ";
  font-size: 24px;
}

[data-section-id="17908000008621683"] .bs-counter-wgt .li-title span {
  font-size: 24px !important;
  line-height: 1.3;
  font-weight: 700;
  color: #12274e;
}

[data-section-id="17908000008621683"] .bs-counter-wgt .li-description>p:first-child {
  display: inline;
  margin: 0;
}

[data-section-id="17908000008621683"] .bs-counter-wgt .li-description>p:first-child strong {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
  color: #12274e;
}

/* ---- supporting copy --------------------------------------------------- */
[data-section-id="17908000008621683"] .bs-counter-wgt .li-description>p+p {
  display: block;
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: #5b6b85;
}

/* ---- mobile ------------------------------------------------------------ */
@media (max-width: 767px) {
  [data-section-id="17908000008621683"] .bs-counter-wgt {
    margin-top: 0;
    gap: 16px;
  }

  [data-section-id="17908000008621683"] .bs-counter-wgt .li-item[data-number-item-id] {
    flex: 1 1 100%;
    max-width: none;
  }
}

/* ---- optional: style one card on its own ------------------------------- *
 [data-number-item-id="17908000008621689"] { }   2 days
 [data-number-item-id="17908000008621694"] { }   50+ speakers
 [data-number-item-id="17908000008621699"] { }   30+ sessions
  * ------------------------------------------------------------------------ */


/* ==========================================================================
   "Where ideas meet opportunity" section -> two-column layout
      Left : gold eyebrow + heading + body copy
         Right: light grey "Who should attend?" card with green ticks

            Scoped to Backstage's own permanent ids (the id="ember.." attributes are
               regenerated on every render, so they must not be used in CSS):

                    section          data-section-id = 17908000008621808
                         sub-title/eyebrow data-element-id = 17908000008621811
                              heading           data-element-id = 17908000008621809
                                   list wrapper      data-element-id = 17908000008621813
                                        left text block   data-id         = 17908000008621814
                                             right card        data-id         = 17908000008621821

                                                Paste into: Backstage > Website > Settings > Custom CSS
                                                   ========================================================================== */

/* ---- section shell: white background, 2-column grid --------------------- */
[data-section-id="17908000008621808"] {
  background: #ffffff !important;
}

[data-section-id="17908000008621808"] .background-layer {
  background: #ffffff !important;
  background-image: none !important;
  opacity: 1 !important;
}

[data-section-id="17908000008621808"] .foreground-layer {
  display: grid !important;
  grid-template-columns: 1.05fr 1fr;
  column-gap: 64px;
  row-gap: 16px;
  align-items: start;
}

/* flatten Backstage's wrappers so the two list items become real grid cells */
[data-section-id="17908000008621808"] [data-element-id="17908000008621813"],
[data-section-id="17908000008621808"] [data-element-id="17908000008621813"]>div,
[data-section-id="17908000008621808"] .media-text-layout,
[data-section-id="17908000008621808"] .image-layout,
[data-section-id="17908000008621808"] .bs-mtList-wgt {
  display: contents !important;
}

/* ---- gold eyebrow ------------------------------------------------------- */
[data-section-id="17908000008621808"] [data-element-id="17908000008621811"] {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

[data-section-id="17908000008621808"] .section-sub-title,
[data-section-id="17908000008621808"] .section-sub-title p {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: #c19434 !important;
}

[data-section-id="17908000008621808"] .section-sub-title p::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 2px;
  background: #c19434;
  vertical-align: middle;
  margin-right: 12px;
}

/* The section sub-title is empty in the editor, so the label is supplied here.
                                                                                                    If you instead type "About the summit" into the sub-title field in Backstage,
                                                                                                       delete the next rule - otherwise the text will appear twice. */
[data-section-id="17908000008621808"] .section-sub-title p::after {
  content: "About the summit";
}

/* ---- heading ------------------------------------------------------------ */
[data-section-id="17908000008621808"] [data-element-id="17908000008621809"] {
  grid-column: 1;
  grid-row: 2;
  margin: 0 0 10px;
}

[data-section-id="17908000008621808"] .section-title,
[data-section-id="17908000008621808"] .section-title p,
[data-section-id="17908000008621808"] .section-title strong {
  margin: 0;
  color: #12274e !important;
  text-align: left !important;
}

/* ---- left column: body copy --------------------------------------------- */
[data-section-id="17908000008621808"] .li-item[data-id="17908000008621814"] {
  grid-column: 1;
  grid-row: 3;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  text-align: left !important;
}

[data-section-id="17908000008621808"] .li-item[data-id="17908000008621814"] .li-description p {
  color: #5b6b85 !important;
  font-size: 17px;
  line-height: 1.7;
  text-align: left !important;
}

/* ---- right column: "Who should attend?" card ---------------------------- */
[data-section-id="17908000008621808"] .li-item[data-id="17908000008621821"] {
  grid-column: 2;
  grid-row: 1 / span 3;
  margin: 0 !important;
  padding: 40px !important;
  width: auto !important;
  box-sizing: border-box;
  background: #f5f7fa;
  border: 1px solid #ecf0f6;
  border-radius: 20px;
  text-align: left !important;
}

[data-section-id="17908000008621808"] .li-item[data-id="17908000008621821"] .li-description h3,
[data-section-id="17908000008621808"] .li-item[data-id="17908000008621821"] .li-description h3 strong {
  margin: 0;
  font-size: 22px !important;
  line-height: 1.3;
  color: #12274e !important;
  text-align: left !important;
}

[data-section-id="17908000008621808"] .li-item[data-id="17908000008621821"] .li-description ul {
  list-style: none !important;
  margin: 26px 0 0 !important;
  padding: 0 !important;
}

[data-section-id="17908000008621808"] .li-item[data-id="17908000008621821"] .li-description ul li {
  position: relative;
  list-style: none !important;
  margin: 0 0 18px !important;
  padding: 0 0 0 28px !important;
  font-size: 17px;
  line-height: 1.5;
  color: #2c3a52 !important;
  text-align: left !important;
}

[data-section-id="17908000008621808"] .li-item[data-id="17908000008621821"] .li-description ul li:last-child {
  margin-bottom: 0 !important;
}

[data-section-id="17908000008621808"] .li-item[data-id="17908000008621821"] .li-description ul li::before {
  content: "\2713";
  /* green tick */
  position: absolute;
  left: 0;
  top: 0;
  font-size: 16px;
  font-weight: 700;
  color: #1d7a4c;
}

[data-section-id="17908000008621808"] .li-item[data-id="17908000008621821"] .li-description ul li::marker {
  content: "";
}

/* empty item titles Backstage renders for each block */
[data-section-id="17908000008621808"] .li-title:empty {
  display: none;
}

/* ---- stack on small screens --------------------------------------------- */
@media (max-width: 900px) {
  [data-section-id="17908000008621808"] .foreground-layer {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }

  [data-section-id="17908000008621808"] [data-element-id="17908000008621811"],
  [data-section-id="17908000008621808"] [data-element-id="17908000008621809"],
  [data-section-id="17908000008621808"] .li-item[data-id="17908000008621814"] {
    grid-column: 1;
    grid-row: auto;
  }

  [data-section-id="17908000008621808"] .li-item[data-id="17908000008621821"] {
    grid-column: 1;
    grid-row: auto;
    margin-top: 24px !important;
    padding: 28px !important;
  }
}

/* ==========================================================================
   "Explore the ideas shaping entrepreneurship" section
      -> 4 x 2 grid of white cards, icon tile on the left of each card.

         Scoped to Backstage's permanent ids (the id="ember.." attributes are
            regenerated on every render, so they must not be used in CSS):

                 section    data-section-id  = 17908000008621912
                      heading    data-element-id  = 17908000008621913
                           sub-title  data-element-id  = 17908000008621915
                                card list  data-element-id  = 17908000008621917

                                   Paste into: Backstage > Website > Settings > Custom CSS
                                      ========================================================================== */

/* ---- section shell ------------------------------------------------------ */
[data-section-id="17908000008621912"] {
  background: #f8f9fc !important;
}

[data-section-id="17908000008621912"] .background-layer {
  background: #f8f9fc !important;
  background-image: none !important;
  opacity: 1 !important;
}

/* ---- heading + intro ---------------------------------------------------- */
[data-section-id="17908000008621912"] [data-element-id="17908000008621913"] {
  margin: 0 0 14px;
}

[data-section-id="17908000008621912"] .section-title,
[data-section-id="17908000008621912"] .section-title p,
[data-section-id="17908000008621912"] .section-title strong {
  margin: 0;
  color: #0f1c3b !important;
  text-align: left !important;
}

[data-section-id="17908000008621912"] [data-element-id="17908000008621915"] {
  margin: 0 0 44px;
  max-width: 660px;
}

[data-section-id="17908000008621912"] .section-sub-title,
[data-section-id="17908000008621912"] .section-sub-title p {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  color: #5d6882 !important;
  text-align: left !important;
}

/* ---- 4-across card grid ------------------------------------------------- */
[data-section-id="17908000008621912"] .bs-mtList-wgt {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 26px !important;
}

[data-section-id="17908000008621912"] .li-item {
  display: flex !important;
  /* icon left, text right */
  flex-direction: row !important;
  align-items: flex-start;
  gap: 16px;
  margin: 0 !important;
  padding: 22px !important;
  width: auto !important;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid #e4e9f1;
  border-radius: 12px;
  text-align: left !important;
}

/* ---- icon tile (round icon art sits inside a rounded square) ------------ */
[data-section-id="17908000008621912"] .li-item .list-image {
  flex: 0 0 44px;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
}

[data-section-id="17908000008621912"] .li-item .bs-media-wgt,
[data-section-id="17908000008621912"] .li-item .media-element {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 12px !important;
  background: #eef2f9 !important;
  /* matches the tint baked into the icons */
  overflow: hidden;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

[data-section-id="17908000008621912"] .li-item .media-image {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  overflow: hidden;
}

[data-section-id="17908000008621912"] .li-item img.fluid-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

/* ---- card text ---------------------------------------------------------- */
[data-section-id="17908000008621912"] .li-item .li-content {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left !important;
}

[data-section-id="17908000008621912"] .li-item .li-title:empty {
  display: none;
}

[data-section-id="17908000008621912"] .li-item .li-description h4,
[data-section-id="17908000008621912"] .li-item .li-description h4 strong {
  margin: 0 !important;
  font-size: 17px !important;
  line-height: 1.35;
  font-weight: 700;
  color: #0f1c3b !important;
  text-align: left !important;
}

[data-section-id="17908000008621912"] .li-item .li-description p {
  margin: 6px 0 0 !important;
  font-size: 15px !important;
  line-height: 1.5;
  color: #5d6882 !important;
  text-align: left !important;
}

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 1024px) {
  [data-section-id="17908000008621912"] .bs-mtList-wgt {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  [data-section-id="17908000008621912"] .bs-mtList-wgt {
    grid-template-columns: 1fr !important;
  }
}



/* ============================================================================
   Card hover effect — the one on the "Explore the ideas shaping
      entrepreneurship" track cards.

         Pure CSS. No JavaScript needed.
            Paste into: Zoho Backstage → Website → Settings → Custom code → CSS
               ========================================================================== */

/* --- the card ------------------------------------------------------------ */
.community-section-mediaWithTextList-2 .bs-mtList-wgt .li-item {
  position: relative;
  overflow: hidden;
  /* keeps the accent bar inside the radius */
  transition: transform .4s cubic-bezier(.22, .8, .3, 1),
    box-shadow .4s cubic-bezier(.22, .8, .3, 1),
    border-color .4s cubic-bezier(.22, .8, .3, 1);
  will-change: transform;
}

/* --- the gold → blue accent bar that wipes across the top ---------------- */
.community-section-mediaWithTextList-2 .bs-mtList-wgt .li-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #f0b429, #ffd66b, #2f5bd0);
  opacity: 0;
  transform: scaleX(.4);
  transform-origin: 0 50%;
  transition: opacity .35s cubic-bezier(.22, .8, .3, 1),
    transform .45s cubic-bezier(.22, .8, .3, 1);
  pointer-events: none;
}

/* --- hover state --------------------------------------------------------- */
.community-section-mediaWithTextList-2 .bs-mtList-wgt .li-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 44px -12px rgba(15, 31, 71, .28);
  border-color: rgba(47, 91, 208, .28);
}

.community-section-mediaWithTextList-2 .bs-mtList-wgt .li-item:hover::before {
  opacity: 1;
  transform: scaleX(1);
}

/* --- the icon gives a small pop ------------------------------------------ */
.community-section-mediaWithTextList-2 .bs-mtList-wgt .li-item .media-image {
  transition: transform .4s cubic-bezier(.22, .8, .3, 1);
}

.community-section-mediaWithTextList-2 .bs-mtList-wgt .li-item:hover .media-image {
  transform: scale(1.12) rotate(-4deg);
}

/* --- touch devices: soften the lift so it doesn't feel jumpy ------------- */
@media (max-width: 767px) {
  .community-section-mediaWithTextList-2 .bs-mtList-wgt .li-item:hover {
    transform: translateY(-4px);
  }
}

/* --- accessibility: no motion for users who ask for none ----------------- */
@media (prefers-reduced-motion: reduce) {

  .community-section-mediaWithTextList-2 .bs-mtList-wgt .li-item,
  .community-section-mediaWithTextList-2 .bs-mtList-wgt .li-item::before,
  .community-section-mediaWithTextList-2 .bs-mtList-wgt .li-item .media-image {
    transition-duration: .001ms;
  }

  .community-section-mediaWithTextList-2 .bs-mtList-wgt .li-item:hover {
    transform: none;
  }
}


/* ============================================================================
WANT IT ON EVERY LIST-CARD SECTION, NOT JUST THIS ONE?
Delete the ".community-section-mediaWithTextList-2 " prefix from every
selector above, leaving ".bs-mtList-wgt .li-item { ... }".
========================================================================== */