/*
 * The band with a call to action («Смуга із закликом», layout cta_band) of the
 * department block page. Loaded only on a page that has the block (enqueue.php);
 * page-department.css comes first.
 */

/* A band with a photo: the picture lies under the text behind a navy haze, lighter towards the buttons. */
.dept-cta-band--photo .dept-cta-band__panel {
  background:
    linear-gradient(90deg,
      rgba(var(--color-blue-200--rgb), 0.97) 0%,
      rgba(var(--color-blue-200--rgb), 0.88) 40%,
      rgba(var(--color-blue-200--rgb), 0.5) 100%),
    var(--band-photo) center / cover no-repeat,
    var(--color-blue-200);
}

.dept-cta-band--photo .dept-cta-band__stripes {
  display: none;
}

@media (max-width: 899px) {
  .dept-cta-band--photo .dept-cta-band__panel {
    background:
      linear-gradient(180deg,
        rgba(var(--color-blue-200--rgb), 0.94) 0%,
        rgba(var(--color-blue-200--rgb), 0.8) 100%),
      var(--band-photo) center / cover no-repeat,
      var(--color-blue-200);
  }
}

/* ==========================================================================
   Call to action between sections: a navy or arms-red panel, a large outlined
   word behind the text and, in the corner, the crossed stripes of a flag —
   white and red on navy, white and navy on red — fading into the panel.
   ========================================================================== */

/* The theme spaces every section from the one before it; the band sets its own room. */
.dept-cta-band {
  margin-top: 0;
  padding: clamp(24px, 3vw, 40px) 0;
  background-color: var(--color-bg-primary);
}

.dept-cta-band__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 26%);
  align-items: stretch;
  overflow: hidden;
  background: var(--color-blue-200);
  color: var(--color-white);
  --band-stripe: var(--color-white);
  --band-cross: var(--color-red);
}

.dept-cta-band--red .dept-cta-band__panel {
  --band-red: var(--color-red);
  background: var(--band-red);
  --band-cross: var(--color-blue-200);
}

.dept-cta-band__stripes {
  position: absolute;
  top: 50%;
  right: calc(26% - 200px);
  width: 560px;
  height: 560px;
  transform: translateY(-50%);
  background:
    linear-gradient(90deg, transparent calc(50% - 14px), var(--band-cross) calc(50% - 14px) calc(50% + 14px), transparent calc(50% + 14px)),
    linear-gradient(0deg, transparent calc(50% - 14px), var(--band-cross) calc(50% - 14px) calc(50% + 14px), transparent calc(50% + 14px)),
    linear-gradient(90deg, transparent calc(50% - 30px), var(--band-stripe) calc(50% - 30px) calc(50% + 30px), transparent calc(50% + 30px)),
    linear-gradient(0deg, transparent calc(50% - 30px), var(--band-stripe) calc(50% - 30px) calc(50% + 30px), transparent calc(50% + 30px)),
    linear-gradient(45deg, transparent calc(50% - 8px), var(--band-cross) calc(50% - 8px) calc(50% + 8px), transparent calc(50% + 8px)),
    linear-gradient(-45deg, transparent calc(50% - 8px), var(--band-cross) calc(50% - 8px) calc(50% + 8px), transparent calc(50% + 8px)),
    linear-gradient(45deg, transparent calc(50% - 22px), var(--band-stripe) calc(50% - 22px) calc(50% + 22px), transparent calc(50% + 22px)),
    linear-gradient(-45deg, transparent calc(50% - 22px), var(--band-stripe) calc(50% - 22px) calc(50% + 22px), transparent calc(50% + 22px));
  opacity: 0.38;
  -webkit-mask-image: radial-gradient(circle at 62% 50%, #000 42%, transparent 78%);
  mask-image: radial-gradient(circle at 62% 50%, #000 42%, transparent 78%);
  pointer-events: none;
}

.dept-cta-band__decor {
  position: absolute;
  left: clamp(24px, 4vw, 64px);
  bottom: clamp(14px, 1.6vw, 22px);
  font-size: clamp(2.75rem, 1.6rem + 3.6vw, 5.25rem);
  white-space: nowrap;
  color: var(--color-white);
  opacity: 0.2;
}

/* The word gets its own room under the text, whole, instead of sinking under the paragraph. */
.dept-cta-band__panel:has(.dept-cta-band__decor) .dept-cta-band__body {
  padding-bottom: calc(clamp(36px, 4.5vw, 64px) + clamp(2.75rem, 1.6rem + 3.6vw, 5.25rem));
}

.dept-cta-band__body,
.dept-cta-band__btns {
  position: relative;
  z-index: 1;
}

.dept-cta-band__body {
  align-self: center;
  padding: clamp(36px, 4.5vw, 64px) clamp(24px, 4vw, 64px);
}

/* The line over the title stands alone: the owner took the red dash before it off
   (first on Kvantum, then everywhere, 2026-10-28). */
.dept-cta-band__eyebrow {
  margin: 0 0 12px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.86);
}

.dept-cta-band__title {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(1.625rem, 1.1rem + 1.8vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-white);
}

.dept-cta-band__text {
  margin: 14px 0 0;
  max-width: 60ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
}

/*
 * The buttons stand in a column at the panel's right, a little apart: the main one white
 * with an arms-red edge, the others quiet on the navy. Whole rows to press, not large.
 */
/* A ground of its own, so the flag's stripes never run behind the buttons. */
.dept-cta-band__btns {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: clamp(20px, 2.4vw, 32px);
  background: var(--color-blue-200);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

/* The university arms behind the buttons, showing round them. */
.dept-cta-band__btns::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../../../media/departments/gerb-watermark.webp") center / auto 88% no-repeat;
  opacity: 0.2;
  pointer-events: none;
}

.dept-cta-band__btn {
  position: relative;
}

.dept-cta-band--red .dept-cta-band__btns {
  background: var(--band-red, var(--color-red));
}

@media (max-width: 899px) {
  .dept-cta-band__panel {
    grid-template-columns: 1fr;
  }

  .dept-cta-band__btns {
    padding: 20px clamp(20px, 4vw, 32px) 24px;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  /* Under the stacked buttons, in the bottom corner, clear of the caption and title. */
  .dept-cta-band__stripes {
    top: auto;
    bottom: -250px;
    right: -200px;
    transform: none;
  }
}

/* Phones: the block at a phone's scale, as the rest of the page (page-department.css). */
@media (max-width: 899px) {
  /* Bands */
  .dept-cta-band {
    padding: 16px 0;
  }

  .dept-cta-band__body {
    padding: 24px 18px;
  }

  .dept-cta-band__panel:has(.dept-cta-band__decor) .dept-cta-band__body {
    padding-bottom: calc(24px + 2.25rem);
  }

  .dept-cta-band__decor {
    left: 18px;
    bottom: 12px;
  }

  .dept-cta-band__title {
    font-size: 1.375rem;
  }

  .dept-cta-band__text {
    margin-top: 10px;
    font-size: 0.9375rem;
  }

  .dept-cta-band__btns {
    gap: 6px;
    padding: 16px 18px 18px;
  }
}

/* «Символіка університету на фонах»: the arms' shield, upright and faint white,
   across the band's right side behind the buttons. */
.dept-page--emblem .dept-cta-band__panel::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6%;
  z-index: 0;
  width: clamp(220px, 24vw, 380px);
  aspect-ratio: 54 / 53;
  background: var(--color-white);
  -webkit-mask: url("../../../media/general/nuzp-shield.svg") center / contain no-repeat;
  mask: url("../../../media/general/nuzp-shield.svg") center / contain no-repeat;
  opacity: 0.08;
  transform: translateY(-50%);
  pointer-events: none;
}

.dept-page--emblem .dept-cta-band__body,
.dept-page--emblem .dept-cta-band__btns {
  position: relative;
  z-index: 1;
}

/* «Акценти продажу»: the line over a navy band's title in the brand yellow, the only
   place yellow goes (on navy, never on paper). */
.dept-page--sell .dept-cta-band:not(.dept-cta-band--red) .dept-cta-band__eyebrow {
  color: var(--color-highlight, #ffcc00);
}