{% require_css %}
<style>
{% scope_css %}

/* ----------------------------
   CARD BACKGROUND COLOR
---------------------------- */
.dropdown-cards .outlet_card-col-body {
  background-color: #2f324a;
  padding: 20px;
  transition: all 0.4s ease;
  transform: translateY(0);
}

/* ----------------------------
   HUBSPOT COLOUR FIELDS
---------------------------- */
{% if module.style.card.tagline_color.color %}
.dropdown-cards .tagline {
  color: ;
}
{% endif %}

{% if module.style.card.heading.color.color %}
.dropdown-cards .heading-color {
  color: ;
}
{% endif %}

/* ----------------------------
   ICON DEFAULT + HOVER
---------------------------- */
.dropdown-cards .icon svg {
  fill: #f8f8f8;
  color: #f8f8f8;
  transition: transform 0.25s ease, fill 0.25s ease, color 0.25s ease;
  transform: scale(1.25);
}

.dropdown-cards .outlet_card-col-body:hover .icon svg {
  animation: icon-bounce 0.5s ease;
  transform: scale(1.75);
  fill: #cd79ee;
  color: #cd79ee;
}

@keyframes icon-bounce {
  0%   { transform: scale(1.25); }
  40%  { transform: scale(1.6); }
  70%  { transform: scale(1.4); }
  100% { transform: scale(1.5); }
}

/* ----------------------------
   HEADING ROW
---------------------------- */
.dropdown-cards .heading-row {
  color: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.dropdown-cards .heading-text {
  flex: 1;
}

/* Hide toggle arrow (click not needed) */
.dropdown-cards .card-toggle,
.dropdown-cards .toggle-arrow {
  display: none;
}

/* ----------------------------
   DESCRIPTION EXPANSION
---------------------------- */
.dropdown-cards .desc {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.25s ease;
}

.dropdown-cards .outlet_card-col-body:hover .desc,
.dropdown-cards .outlet_card-col-body.is-visible .desc {
  max-height: 800px;
  opacity: 1;
}

/* ----------------------------
   CARD HOVER / SCROLL EFFECT
---------------------------- */
.dropdown-cards .outlet_card-col-body:hover,
.dropdown-cards .outlet_card-col-body.is-visible {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

{% end_scope_css %}
</style>
{% end_require_css %}