/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Jan 28 2026 | 10:34:45 */
/* ===== HR / MEGA BLOCK – GLASS STYLE ===== */

/* контейнер блоку */
.hr-mega {
  position: relative;
  margin: 48px 0;
  padding: 28px 32px;
  border-radius: 18px;

  /* легкий скляний градієнт */
  background: linear-gradient(
    180deg,
    rgba(180, 220, 255, 0.25) 0%,
    rgba(180, 220, 255, 0.12) 40%,
    rgba(180, 220, 255, 0.04) 70%,
    rgba(180, 220, 255, 0.0) 100%
  );

  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);

  border: 1px solid rgba(90, 160, 255, 0.35);
  box-shadow:
    0 10px 30px rgba(40, 90, 160, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* синій HR тег / лінія */
.hr-mega::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;

  background: linear-gradient(
    90deg,
    rgba(60, 140, 255, 0.0),
    rgba(60, 140, 255, 0.9),
    rgba(60, 140, 255, 0.0)
  );
}

/* заголовок */
.hr-mega h2,
.hr-mega h3 {
  color: #0f3c7d;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* текст */
.hr-mega p {
  color: #1f3f66;
  line-height: 1.6;
}

/* ===== OPEN / CLOSED STATES ===== */

/* закритий стан */
.hr-mega.is-collapsed {
  max-height: 120px;
  overflow: hidden;
}

/* відкритий стан */
.hr-mega.is-expanded {
  max-height: none;
}

/* легкий fade внизу у закритому стані */
.hr-mega.is-collapsed::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;

  background: linear-gradient(
    180deg,
    rgba(180, 220, 255, 0.0),
    rgba(180, 220, 255, 0.35)
  );
  pointer-events: none;
}

/* кнопка / тригер */
.hr-mega-toggle {
  margin-top: 16px;
  display: inline-block;
  color: #2f6fd6;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}

.hr-mega-toggle:hover {
  text-decoration: underline;
}