/* ============================================================
   GoToMorocco — Zellij (Moroccan mosaic) decoration
   ============================================================ */

/* Subtle tiled star pattern — overlay on dark surfaces */
.zellij-bg {
  position: relative;
}
.zellij-bg::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: url(zellij-star.svg);
  background-size: 80px 80px;
  opacity: 0.12;
  pointer-events: none;
}
.zellij-bg > * { position: relative; z-index: 1; }

/* stronger feature panel pattern */
.zellij-bg.strong::before { opacity: 0.2; }

/* Horizontal decorative band (mosaic strip) */
.zellij-band {
  height: 26px;
  background: url(zellij-band.svg) repeat-x center;
  background-size: auto 26px;
  opacity: 0.95;
}
.zellij-band.tall { height: 30px; background-size: auto 30px; }

/* Centered divider: band with a star medallion in the middle */
.zellij-divider {
  display: flex; align-items: center; gap: 20px;
  color: var(--accent);
}
.zellij-divider::before, .zellij-divider::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.zellij-divider .star {
  width: 28px; height: 28px; flex: none;
  background: url(zellij-star.svg) center/contain no-repeat;
  opacity: 0.9;
}

/* Corner ornaments inside a bordered box */
.zellij-frame { position: relative; }
.zellij-frame .zc {
  position: absolute; width: 26px; height: 26px;
  background: url(zellij-star.svg) center/cover no-repeat;
  opacity: 0.5; pointer-events: none;
}
.zellij-frame .zc.tl { top: 10px; inset-inline-start: 10px; }
.zellij-frame .zc.tr { top: 10px; inset-inline-end: 10px; }
.zellij-frame .zc.bl { bottom: 10px; inset-inline-start: 10px; }
.zellij-frame .zc.br { bottom: 10px; inset-inline-end: 10px; }

/* tile chip used as a small inline ornament */
.tile-chip {
  width: 18px; height: 18px; display: inline-block; vertical-align: middle;
  background: url(zellij-star.svg) center/contain no-repeat;
}

/* Hero zellij side ribbon */
.zellij-ribbon {
  position: absolute; top: 0; bottom: 0; width: 64px; z-index: 2;
  background: url(zellij-star.svg) center/64px 64px;
  opacity: 0.16; pointer-events: none;
}
.zellij-ribbon.left { inset-inline-start: 0; }
.zellij-ribbon.right { inset-inline-end: 0; }
@media (max-width: 760px) { .zellij-ribbon { display: none; } }