/* =========================================================
   GHS v3.0 — Event Description: Collapse + Expand (fade + More)
   File: ele-child/assets/css/ghs-event-desc-toggle.css

   Scope:
   - Post Content widget with CSS class "ghs-event-desc"
   - Behaviour controlled by JS (event-description-toggle.js)

   JS does:
   - Wrap content in .ghs-desc-collapsible
   - Toggle .ghs-desc-is-collapsed
   - Inject button .ghs-desc-toggle
========================================================= */

.ghs-event-desc{
  position:relative;
}

/* Collapsible area inserted by JS */
.ghs-event-desc .ghs-desc-collapsible{
  position:relative;
  overflow:hidden;
}

/* Collapsed state */
.ghs-event-desc .ghs-desc-collapsible.ghs-desc-is-collapsed{
  max-height:var(--ghs-desc-collapsed-height, 220px);
}

/* Fade overlay */
.ghs-event-desc .ghs-desc-collapsible.ghs-desc-is-collapsed::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:var(--ghs-desc-fade-height, 64px);
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}

/* Toggle button inserted by JS */
.ghs-event-desc .ghs-desc-toggle{
  margin-top:var(--ghs-desc-toggle-gap, 10px);
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid #cbd2d9;
  background:#F0F4F8;
  color:#102A43;
  padding:8px 12px;
  border-radius:6px;
  font:inherit;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  user-select:none;
}

.ghs-event-desc .ghs-desc-toggle:hover{
  background:#39ACE7;
  color:#ffffff;
}