/* =========================================================
   Bricks Expanding Cards
   ========================================================= */

.ec-wrapper {
  --ec-transition: 500ms;
  --ec-height: 480px;
  --ec-gap: 12px;
  --ec-inactive-basis: 90px;
  --ec-radius: 14px;
  --ec-overlay: rgba(0, 0, 0, 0.45);
  --ec-overlay-active: rgba(0, 0, 0, 0.25);
  --ec-text: #fff;
  --ec-padding: 24px;

  width: 100%;
  box-sizing: border-box;
}

.ec-wrapper *,
.ec-wrapper *::before,
.ec-wrapper *::after {
  box-sizing: border-box;
}

.ec-options {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: var(--ec-gap);
  min-height: var(--ec-height);
}

/* ---------- card ---------- */
.ec-option {
  position: relative;
  flex: 1 1 var(--ec-inactive-basis);
  min-width: var(--ec-inactive-basis);
  height: var(--ec-height);
  border-radius: var(--ec-radius);
  overflow: hidden;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--ec-text);
  transition: flex-grow var(--ec-transition) cubic-bezier(0.05, 0.61, 0.41, 0.95);
  display: flex;
  align-items: stretch;
}

.ec-option.is-active {
  flex-grow: 10;
}

/* ---------- overlay ---------- */
.ec-overlay {
  position: absolute;
  inset: 0;
  background: var(--ec-overlay);
  transition: background var(--ec-transition) ease;
  z-index: 1;
  pointer-events: none;
}

.ec-option.is-active .ec-overlay {
  background: var(--ec-overlay-active);
}

/* ---------- full-card link ---------- */
.ec-card-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  text-indent: -9999px;
  overflow: hidden;
}

.ec-option:not(.is-active) .ec-card-link:not(.ec-card-link--cover) {
  pointer-events: none;
}

/* ---------- label / content ---------- */
.ec-label {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  padding: var(--ec-padding);
  pointer-events: none;
}

.ec-label > * {
  pointer-events: auto;
}

.ec-info {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

/* ---------- title ---------- */
.ec-title {
  margin: 0;
  color: inherit;
  transition: transform var(--ec-transition) ease, opacity var(--ec-transition) ease;
}

/* ---------- subtitle ---------- */
.ec-sub {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity calc(var(--ec-transition) * 0.8) ease,
              max-height var(--ec-transition) ease;
  color: inherit;
}

.ec-sub * {
  color: inherit;
}

.ec-option.is-active .ec-sub {
  opacity: 1;
  max-height: 1000px;
  transition-delay: calc(var(--ec-transition) * 0.3);
}

/* ---------- graphic element ---------- */
.ec-graphic {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 1.75em;
  line-height: 1;
}

.ec-graphic--image img,
.ec-graphic--icon img {
  max-width: 64px;
  height: auto;
  display: block;
}

.ec-graphic--icon i {
  font-size: 1.75em;
}

/* ---------- button ---------- */
.ec-button {
  display: none;
  align-self: flex-start;
  margin-top: 1em;
  padding: 0.6em 1.4em;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: opacity var(--ec-transition) ease;
}

.ec-option.is-active .ec-button {
  display: inline-block;
  opacity: 1;
}

/* ---------- vertical title on inactive ---------- */
.ec-wrapper[data-vertical-title="1"] .ec-option:not(.is-active) .ec-label {
  justify-content: center;
  align-items: center;
}

.ec-wrapper[data-vertical-title="1"] .ec-option:not(.is-active) .ec-info {
  align-items: center;
}

.ec-wrapper[data-vertical-title="1"] .ec-option:not(.is-active) .ec-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

.ec-wrapper[data-vertical-title="1"] .ec-option:not(.is-active) .ec-sub,
.ec-wrapper[data-vertical-title="1"] .ec-option:not(.is-active) .ec-graphic {
  display: none;
}

/* If vertical title is OFF: hide subtitle on inactive but keep title horizontal */
.ec-wrapper[data-vertical-title="0"] .ec-option:not(.is-active) .ec-sub {
  display: none;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 768px) {
  /* Default mobile: stack vertically. JS sets --ec-bp inline if a custom breakpoint is configured. */
  .ec-wrapper[data-mobile-collapsible="0"] .ec-options {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ec-wrapper[data-mobile-collapsible="0"] .ec-option {
    height: auto;
    min-height: 220px;
    flex: 1 1 auto;
  }

  .ec-wrapper[data-mobile-collapsible="0"] .ec-title {
    writing-mode: horizontal-tb !important;
    transform: none !important;
  }

  .ec-wrapper[data-mobile-collapsible="0"] .ec-sub,
  .ec-wrapper[data-mobile-collapsible="0"] .ec-graphic {
    display: block;
    opacity: 1;
    max-height: none;
  }

  .ec-wrapper[data-mobile-collapsible="0"] .ec-button {
    display: inline-block;
  }

  /* Collapsible mobile mode: keep accordion behavior, stacked */
  .ec-wrapper[data-mobile-collapsible="1"] .ec-options {
    flex-direction: column;
    min-height: 0;
  }

  .ec-wrapper[data-mobile-collapsible="1"] .ec-option {
    height: 80px;
    width: 100%;
    flex: 0 0 auto;
    transition: height var(--ec-transition) ease;
  }

  .ec-wrapper[data-mobile-collapsible="1"] .ec-option.is-active {
    height: 360px;
  }

  .ec-wrapper[data-mobile-collapsible="1"] .ec-title {
    writing-mode: horizontal-tb !important;
    transform: none !important;
  }
}